@limetech/lime-elements 34.1.0-next.6 → 34.1.0

package/dist/types/components/color-picker/color-picker-palette.d.ts

@@ -0,0 +1,32 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { FormComponent } from '../form/form.types';
+/**
+ * @private
+ */
+export declare class Palette implements FormComponent {
+  /**
+   * Color value that is manually typed by the user
+   */
+  value: string;
+  /**
+   * Label of the input field
+   */
+  label: string;
+  /**
+   * Helper text of the input field
+   */
+  helperText: string;
+  /**
+   * Set to `true` if a value is required
+   */
+  required: boolean;
+  /**
+   * Emits chosen value to the parent component
+   */
+  change: EventEmitter<string>;
+  render(): any[];
+  private renderSwatches;
+  private renderSwatch;
+  private handleChange;
+  private handleClick;
+}

package/dist/types/components/color-picker/color-picker.d.ts

@@ -0,0 +1,54 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { FormComponent } from '../form/form.types';
+/**
+ * This component enables you to select a swatch from out color palette, simply
+ * by clicking on it. You can then copy the css variable name of the chosen color
+ * and use it where desired.
+ *
+ * The color picker can also show you a preview of any valid color name or color value.
+ *
+ * :::note
+ * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
+ * :::
+ *
+ * @exampleComponent limel-example-color-picker
+ * @exampleComponent limel-example-color-picker-readonly
+ */
+export declare class ColorPicker implements FormComponent {
+  /**
+   * Name or code of the chosen color
+   */
+  value: string;
+  /**
+   * The label of the input field
+   */
+  label: string;
+  /**
+   * Helper text of the input field
+   */
+  helperText: string;
+  /**
+   * Displayed as tooltips when picker is hovered.
+   */
+  tooltipLabel: string;
+  /**
+   * Set to `true` if a value is required
+   */
+  required: boolean;
+  /**
+   * Set to `true` if a value is readonly. This makes the component un-interactive.
+   */
+  readonly: boolean;
+  /**
+   * Emits chosen value to the parent component
+   */
+  change: EventEmitter<string>;
+  private isOpen;
+  render(): any[];
+  private renderTooltip;
+  private renderPickerPalette;
+  private renderPickerTrigger;
+  private openPopover;
+  private onPopoverClose;
+  private handleChange;
+}

package/dist/types/components/color-picker/swatches.d.ts

@@ -0,0 +1,4 @@
+export declare const colors: string[];
+export declare const brightnesses: string[];
+export declare function getColorName(color: string, brightness: string): string;
+export declare function getCssColor(color: string, brightness: string): string;

package/dist/types/components/form/form.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { ValidationStatus } from './form.types';
+import { FormError, ValidationStatus } from './form.types';
 /**
  * @exampleComponent limel-example-form
  * @exampleComponent limel-example-nested-form
@@ -9,6 +9,7 @@ import { ValidationStatus } from './form.types';
  * @exampleComponent limel-example-props-factory-form
  * @exampleComponent limel-example-form-layout
  * @exampleComponent limel-example-form-span-fields
+ * @exampleComponent limel-example-custom-error-message
  */
 export declare class Form {
   /**
@@ -36,6 +37,10 @@ export declare class Form {
    * that should be set, along with its value.
    */
   propsFactory?: (schema: Record<string, any>) => Record<string, any>;
+  /**
+   * Custom function to customize the default error messages
+   */
+  transformErrors?: (errors: FormError[]) => FormError[];
   /**
    * Emitted when a change is made within the form
    */
@@ -64,4 +69,5 @@ export declare class Form {
   private setSchemaId;
   private createValidator;
   private getValidationErrors;
+  private getCustomErrorMessages;
 }

package/dist/types/components/list/list-item.types.d.ts

@@ -32,7 +32,21 @@ export interface ListItem<T = any> {
    * List of actions to display as a menu at the end of the item
    */
   actions?: Array<MenuItem | ListSeparator>;
+  /**
+   * Component used to render in the list
+   */
+  primaryComponent?: ListComponent;
 }
 export interface ListSeparator {
   separator: true;
 }
+export interface ListComponent {
+  /**
+   * Name of the custom component
+   */
+  name: string;
+  /**
+   * Properties to send to the custom component
+   */
+  props?: Record<string, any>;
+}

package/dist/types/components/list/list-renderer.d.ts

@@ -27,6 +27,8 @@ export declare class ListRenderer {
    * @returns {HTMLElement} the list item
    */
   private renderListItem;
+  private getPrimaryComponent;
+  private hasPrimaryComponent;
   /**
    * Render the text of the list item
    *

package/dist/types/components/list/list.d.ts

@@ -14,6 +14,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @exampleComponent limel-example-list-striped
  * @exampleComponent limel-example-list-badge-icons-with-multiple-lines
  * @exampleComponent limel-example-list-grid
+ * @exampleComponent limel-example-list-primary-component
  */
 export declare class List {
   /**

package/dist/types/components/picker/picker.d.ts

@@ -26,6 +26,10 @@ export declare class Picker {
    * Search label to display in the input field when searching
    */
   searchLabel: string;
+  /**
+   * Optional helper text to display below the input field when it has focus
+   */
+  helperText: string;
   /**
    * Leading icon to show to the far left in the text field
    */

package/dist/types/components/slider/slider.d.ts

@@ -78,4 +78,12 @@ export declare class Slider {
   private getValue;
   private inputHandler;
   private setPercentageClass;
+  private isMultipleOfStep;
+  private roundToStep;
+  private getRootElement;
+  private getInputElement;
+  private isStepConfigured;
+  private reCreateSliderWithStep;
+  private createMDCSlider;
+  private destroyMDCSlider;
 }

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";
@@ -88,6 +88,10 @@ export namespace Components {
           * Disables the checkbox when `true`. Works exactly the same as `readonly`. If either property is `true`, the checkbox will be disabled.
          */
         "disabled": boolean;
+        /**
+          * Optional helper text to display below the checkbox
+         */
+        "helperText": string;
         /**
           * The checkbox label.
          */
@@ -128,6 +132,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 +237,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
@@ -385,6 +437,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
          */
@@ -643,6 +699,10 @@ export namespace Components {
           * A message to display when the search returned an empty result
          */
         "emptyResultMessage": string;
+        /**
+          * Optional helper text to display below the input field when it has focus
+         */
+        "helperText": string;
         /**
           * Text to display for the input field of the picker
          */
@@ -1022,6 +1082,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: {
@@ -1230,6 +1302,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;
@@ -1331,6 +1405,10 @@ declare namespace LocalJSX {
           * Disables the checkbox when `true`. Works exactly the same as `readonly`. If either property is `true`, the checkbox will be disabled.
          */
         "disabled"?: boolean;
+        /**
+          * Optional helper text to display below the checkbox
+         */
+        "helperText"?: string;
         /**
           * The checkbox label.
          */
@@ -1365,6 +1443,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
          */
@@ -1496,6 +1578,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
@@ -1684,6 +1818,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
          */
@@ -1974,6 +2112,10 @@ declare namespace LocalJSX {
           * A message to display when the search returned an empty result
          */
         "emptyResultMessage"?: string;
+        /**
+          * Optional helper text to display below the input field when it has focus
+         */
+        "helperText"?: string;
         /**
           * Text to display for the input field of the picker
          */
@@ -2375,6 +2517,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;
@@ -2423,6 +2567,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.6",
+  "version": "34.1.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",