@haiilo/catalyst 4.0.0 → 4.1.1

package/dist/types/components.d.ts

@@ -8,6 +8,7 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Breakpoint } from "./utils/breakpoints";
 import { Placement } from "@floating-ui/dom";
 import { InputType } from "./components/cat-input/input-type";
+import { ErrorMap } from "./components/cat-form-hint/cat-form-hint-utils";
 import { CatSelectConnector, CatSelectMultipleTaggingValue, CatSelectTaggingValue, Item } from "./components/cat-select/cat-select";
 import { Observable } from "rxjs";
 export namespace Components {
@@ -232,6 +233,10 @@ export namespace Components {
           * 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
          */
@@ -296,10 +301,6 @@ export namespace Components {
           * Whether the input should show a clear button.
          */
         "clearable": boolean;
-        /**
-          * Disable validation for the input. No error messages or error colors will be shown.
-         */
-        "disableValidation": boolean;
         /**
           * Whether the input is disabled.
          */
@@ -318,9 +319,13 @@ export namespace Components {
          */
         "doFocus": (options?: FocusOptions | undefined) => Promise<void>;
         /**
-          * Validation errors. Will render a hint under the input with the translated error message `error.${key}`.
+          * 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"?: { [key: string]: unknown };
+        "errors"?: boolean | string[] | ErrorMap;
         /**
           * Optional hint text(s) to be displayed with the input.
          */
@@ -337,10 +342,6 @@ export namespace Components {
           * A unique identifier for the input.
          */
         "identifier"?: string;
-        /**
-          * Flag that indicates if the input is invalid.
-         */
-        "invalid": boolean;
         /**
           * The label for the input.
          */
@@ -512,6 +513,10 @@ export namespace Components {
           * The name of the radio component.
          */
         "name"?: string;
+        /**
+          * Attributes that will be added to the native HTML input element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
         /**
           * Whether the radio is required.
          */
@@ -591,6 +596,14 @@ export namespace Components {
           * Whether the select 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 select.
          */
@@ -615,6 +628,10 @@ export namespace Components {
           * 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.
          */
@@ -736,6 +753,14 @@ export namespace Components {
           * @param options An optional object providing options to control aspects of the focusing process.
          */
         "doFocus": (options?: FocusOptions | undefined) => 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 textarea.
          */
@@ -764,6 +789,10 @@ export namespace Components {
           * 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 textarea element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
         /**
           * The placeholder text to display within the input.
          */
@@ -835,6 +864,10 @@ export namespace Components {
           * 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 toggle.
          */
@@ -1303,6 +1336,10 @@ declare namespace LocalJSX {
           * The name of the input
          */
         "name"?: string;
+        /**
+          * Attributes that will be added to the native HTML input element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
         /**
           * Emitted when the checkbox loses focus.
          */
@@ -1379,18 +1416,18 @@ declare namespace LocalJSX {
           * Whether the input should show a clear button.
          */
         "clearable"?: boolean;
-        /**
-          * Disable validation for the input. No error messages or error colors will be shown.
-         */
-        "disableValidation"?: boolean;
         /**
           * Whether the input is disabled.
          */
         "disabled"?: boolean;
         /**
-          * Validation errors. Will render a hint under the input with the translated error message `error.${key}`.
+          * 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"?: { [key: string]: unknown };
+        "errors"?: boolean | string[] | ErrorMap;
         /**
           * Optional hint text(s) to be displayed with the input.
          */
@@ -1407,10 +1444,6 @@ declare namespace LocalJSX {
           * A unique identifier for the input.
          */
         "identifier"?: string;
-        /**
-          * Flag that indicates if the input is invalid.
-         */
-        "invalid"?: boolean;
         /**
           * The label for the input.
          */
@@ -1581,6 +1614,10 @@ declare namespace LocalJSX {
           * The name of the radio component.
          */
         "name"?: string;
+        /**
+          * Attributes that will be added to the native HTML input element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
         /**
           * Emitted when the radio loses focus.
          */
@@ -1691,6 +1728,14 @@ declare namespace LocalJSX {
           * Whether the select 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 select.
          */
@@ -1715,6 +1760,10 @@ declare namespace LocalJSX {
           * 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.
          */
@@ -1843,6 +1892,14 @@ declare namespace LocalJSX {
           * Whether the textarea 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 textarea.
          */
@@ -1871,6 +1928,10 @@ declare namespace LocalJSX {
           * 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 textarea element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
         /**
           * Emitted when the textarea loses focus.
          */
@@ -1941,6 +2002,10 @@ declare namespace LocalJSX {
           * The name of the input
          */
         "name"?: string;
+        /**
+          * Attributes that will be added to the native HTML input element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
         /**
           * Emitted when the toggle loses focus.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst",
-  "version": "4.0.0",
+  "version": "4.1.1",
   "description": "Catalyst Design System",
   "license": "MIT",
   "repository": {
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "1.0.3",
-    "@haiilo/catalyst-tokens": "4.0.0",
+    "@haiilo/catalyst-tokens": "4.1.1",
     "@stencil/core": "2.17.4",
     "autosize": "5.0.1",
     "autosize-input": "1.0.2",