@limetech/lime-elements 34.1.0-next.3 → 34.1.0-next.30

package/dist/types/components.d.ts

@@ -10,7 +10,7 @@ import { Action as Action1, Chip, DateType, DialogHeading, FileInfo, FlexContain
 import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
 import { Action } from "./components/collapsible-section/action";
-import { ValidationStatus } from "./components/form/form.types";
+import { FormError, ValidationStatus } from "./components/form/form.types";
 import { IconSize } from "./components/icon/icon.types";
 import { InputType } from "./components/input-field/input-field.types";
 import { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
@@ -128,6 +128,10 @@ export namespace Components {
           * @returns `true` if the chip-set is in edit mode, `false` otherwise.
          */
         "getEditMode": () => Promise<boolean>;
+        /**
+          * Optional helper text to display below the chipset. When type is `input`, the helper text is displayed below the input field when it has focus. When type is not `input`, the helper text is always displayed if the device is touch screen; otherwise it is shown when chip-set is hovered or focused using keyboard navigation.
+         */
+        "helperText": string;
         /**
           * Label for the chip-set
          */
@@ -229,6 +233,50 @@ export namespace Components {
          */
         "isOpen": boolean;
     }
+    interface LimelColorPicker {
+        /**
+          * Helper text of the input field
+         */
+        "helperText": string;
+        /**
+          * The label of the input field
+         */
+        "label": string;
+        /**
+          * Set to `true` if a value is readonly. This makes the component un-interactive.
+         */
+        "readonly": boolean;
+        /**
+          * Set to `true` if a value is required
+         */
+        "required": boolean;
+        /**
+          * Displayed as tooltips when picker is hovered.
+         */
+        "tooltipLabel": string;
+        /**
+          * Name or code of the chosen color
+         */
+        "value": string;
+    }
+    interface LimelColorPickerPalette {
+        /**
+          * Helper text of the input field
+         */
+        "helperText": string;
+        /**
+          * Label of the input field
+         */
+        "label": string;
+        /**
+          * Set to `true` if a value is required
+         */
+        "required": boolean;
+        /**
+          * Color value that is manually typed by the user
+         */
+        "value": string;
+    }
     interface LimelConfig {
         /**
           * Global configuration for Lime Elements
@@ -370,6 +418,10 @@ export namespace Components {
         "reverse": boolean;
     }
     interface LimelForm {
+        /**
+          * Set to `true` to disable the whole form.
+         */
+        "disabled": boolean;
         /**
           * Factory for creating properties for custom form components  When using custom components in the form some properties might have to be set dynamically. If this factory is set, it will be called with the current schema for the field for each custom component in the form. The factory must return an object where each key is the name of the property that should be set, along with its value.
          */
@@ -381,6 +433,10 @@ export namespace Components {
         id?: string;
         [key: string]: any;
     };
+        /**
+          * Custom function to customize the default error messages
+         */
+        "transformErrors"?: (errors: FormError[]) => FormError[];
         /**
           * Value of the form
          */
@@ -1018,6 +1074,18 @@ declare global {
         prototype: HTMLLimelCollapsibleSectionElement;
         new (): HTMLLimelCollapsibleSectionElement;
     };
+    interface HTMLLimelColorPickerElement extends Components.LimelColorPicker, HTMLStencilElement {
+    }
+    var HTMLLimelColorPickerElement: {
+        prototype: HTMLLimelColorPickerElement;
+        new (): HTMLLimelColorPickerElement;
+    };
+    interface HTMLLimelColorPickerPaletteElement extends Components.LimelColorPickerPalette, HTMLStencilElement {
+    }
+    var HTMLLimelColorPickerPaletteElement: {
+        prototype: HTMLLimelColorPickerPaletteElement;
+        new (): HTMLLimelColorPickerPaletteElement;
+    };
     interface HTMLLimelConfigElement extends Components.LimelConfig, HTMLStencilElement {
     }
     var HTMLLimelConfigElement: {
@@ -1226,6 +1294,8 @@ declare global {
         "limel-circular-progress": HTMLLimelCircularProgressElement;
         "limel-code-editor": HTMLLimelCodeEditorElement;
         "limel-collapsible-section": HTMLLimelCollapsibleSectionElement;
+        "limel-color-picker": HTMLLimelColorPickerElement;
+        "limel-color-picker-palette": HTMLLimelColorPickerPaletteElement;
         "limel-config": HTMLLimelConfigElement;
         "limel-date-picker": HTMLLimelDatePickerElement;
         "limel-dialog": HTMLLimelDialogElement;
@@ -1361,6 +1431,10 @@ declare namespace LocalJSX {
           * Whether the input field should be emptied when the chip-set loses focus.
          */
         "emptyInputOnBlur"?: boolean;
+        /**
+          * Optional helper text to display below the chipset. When type is `input`, the helper text is displayed below the input field when it has focus. When type is not `input`, the helper text is always displayed if the device is touch screen; otherwise it is shown when chip-set is hovered or focused using keyboard navigation.
+         */
+        "helperText"?: string;
         /**
           * Label for the chip-set
          */
@@ -1492,6 +1566,58 @@ declare namespace LocalJSX {
          */
         "onOpen"?: (event: CustomEvent<void>) => void;
     }
+    interface LimelColorPicker {
+        /**
+          * Helper text of the input field
+         */
+        "helperText"?: string;
+        /**
+          * The label of the input field
+         */
+        "label"?: string;
+        /**
+          * Emits chosen value to the parent component
+         */
+        "onChange"?: (event: CustomEvent<string>) => void;
+        /**
+          * Set to `true` if a value is readonly. This makes the component un-interactive.
+         */
+        "readonly"?: boolean;
+        /**
+          * Set to `true` if a value is required
+         */
+        "required"?: boolean;
+        /**
+          * Displayed as tooltips when picker is hovered.
+         */
+        "tooltipLabel"?: string;
+        /**
+          * Name or code of the chosen color
+         */
+        "value"?: string;
+    }
+    interface LimelColorPickerPalette {
+        /**
+          * Helper text of the input field
+         */
+        "helperText"?: string;
+        /**
+          * Label of the input field
+         */
+        "label"?: string;
+        /**
+          * Emits chosen value to the parent component
+         */
+        "onChange"?: (event: CustomEvent<string>) => void;
+        /**
+          * Set to `true` if a value is required
+         */
+        "required"?: boolean;
+        /**
+          * Color value that is manually typed by the user
+         */
+        "value"?: string;
+    }
     interface LimelConfig {
         /**
           * Global configuration for Lime Elements
@@ -1657,6 +1783,10 @@ declare namespace LocalJSX {
         "reverse"?: boolean;
     }
     interface LimelForm {
+        /**
+          * Set to `true` to disable the whole form.
+         */
+        "disabled"?: boolean;
         /**
           * Emitted when a change is made within the form
          */
@@ -1676,6 +1806,10 @@ declare namespace LocalJSX {
         id?: string;
         [key: string]: any;
     };
+        /**
+          * Custom function to customize the default error messages
+         */
+        "transformErrors"?: (errors: FormError[]) => FormError[];
         /**
           * Value of the form
          */
@@ -2367,6 +2501,8 @@ declare namespace LocalJSX {
         "limel-circular-progress": LimelCircularProgress;
         "limel-code-editor": LimelCodeEditor;
         "limel-collapsible-section": LimelCollapsibleSection;
+        "limel-color-picker": LimelColorPicker;
+        "limel-color-picker-palette": LimelColorPickerPalette;
         "limel-config": LimelConfig;
         "limel-date-picker": LimelDatePicker;
         "limel-dialog": LimelDialog;
@@ -2415,6 +2551,8 @@ declare module "@stencil/core" {
             "limel-circular-progress": LocalJSX.LimelCircularProgress & JSXBase.HTMLAttributes<HTMLLimelCircularProgressElement>;
             "limel-code-editor": LocalJSX.LimelCodeEditor & JSXBase.HTMLAttributes<HTMLLimelCodeEditorElement>;
             "limel-collapsible-section": LocalJSX.LimelCollapsibleSection & JSXBase.HTMLAttributes<HTMLLimelCollapsibleSectionElement>;
+            "limel-color-picker": LocalJSX.LimelColorPicker & JSXBase.HTMLAttributes<HTMLLimelColorPickerElement>;
+            "limel-color-picker-palette": LocalJSX.LimelColorPickerPalette & JSXBase.HTMLAttributes<HTMLLimelColorPickerPaletteElement>;
             "limel-config": LocalJSX.LimelConfig & JSXBase.HTMLAttributes<HTMLLimelConfigElement>;
             "limel-date-picker": LocalJSX.LimelDatePicker & JSXBase.HTMLAttributes<HTMLLimelDatePickerElement>;
             "limel-dialog": LocalJSX.LimelDialog & JSXBase.HTMLAttributes<HTMLLimelDialogElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "34.1.0-next.3",
+  "version": "34.1.0-next.30",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",