@limetech/lime-elements 34.1.0-next.8 → 34.1.1-next.2

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.8",
+  "version": "34.1.1-next.2",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/cjs/limel-popover.cjs.entry.js

@@ -1,116 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e63a89d7.js');
-const randomString = require('./random-string-4c3b7f1c.js');
-const keycodes = require('./keycodes-3949f425.js');
-const zipObject = require('./zipObject-2f430e94.js');
-require('./_assignValue-493aac17.js');
-require('./_defineProperty-c081d04c.js');
-require('./eq-3b43a5ca.js');
-
-/**
- * Check if an element is a descendant of another
- *
- * If the child element is a descendant of a limel-portal, this function will
- * go back through the portal and check the original tree recursively
- *
- * @param {HTMLElement} element the parent element
- * @param {HTMLElement} child the child element to check
- * @returns {boolean} `true` if child is a descendant of element, taking
- * portals into account
- */
-function portalContains(element, child) {
-  var _a;
-  if (element.contains(child) || ((_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(child))) {
-    return true;
-  }
-  const parent = findParent(child);
-  if (!parent) {
-    return false;
-  }
-  return portalContains(element, parent);
-}
-function findParent(element) {
-  const portal = element.closest('.limel-portal--container');
-  if (portal) {
-    return portal.portalSource;
-  }
-  const rootNode = element.getRootNode();
-  return rootNode.host;
-}
-
-const popoverCss = ".trigger-anchor{display:inline-block;position:relative}";
-
-let Popover = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.close = index.createEvent(this, "close", 7);
-    /**
-     * True if the content within the popover should be visible
-     */
-    this.open = false;
-    this.handleGlobalKeyPress = (event) => {
-      if (event.key !== keycodes.ESCAPE) {
-        return;
-      }
-      event.stopPropagation();
-      event.preventDefault();
-      this.close.emit();
-    };
-    this.portalId = randomString.createRandomString();
-    this.globalClickListener = this.globalClickListener.bind(this);
-  }
-  watchOpen() {
-    this.setupGlobalHandlers();
-  }
-  componentWillLoad() {
-    this.setupGlobalHandlers();
-  }
-  setupGlobalHandlers() {
-    if (this.open) {
-      document.addEventListener('click', this.globalClickListener, {
-        capture: true,
-      });
-      document.addEventListener('keyup', this.handleGlobalKeyPress);
-    }
-    else {
-      document.removeEventListener('click', this.globalClickListener);
-      document.removeEventListener('keyup', this.handleGlobalKeyPress);
-    }
-  }
-  render() {
-    const cssProperties = this.getCssProperties();
-    const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-    return (index.h("div", { class: "trigger-anchor" }, index.h("slot", { name: "trigger" }), index.h("limel-portal", { visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex } }, index.h("limel-popover-surface", { contentCollection: this.host.children, style: cssProperties }))));
-  }
-  globalClickListener(event) {
-    const element = event.target;
-    const clickedInside = portalContains(this.host, element);
-    if (this.open && !clickedInside) {
-      event.stopPropagation();
-      event.preventDefault();
-      this.close.emit();
-    }
-  }
-  getCssProperties() {
-    const propertyNames = [
-      '--popover-surface-width',
-      '--popover-body-background-color',
-      '--popover-border-radius',
-    ];
-    const style = getComputedStyle(this.host);
-    const values = propertyNames.map((property) => {
-      return style.getPropertyValue(property);
-    });
-    return zipObject.zipObject(propertyNames, values);
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "open": ["watchOpen"]
-  }; }
-};
-Popover.style = popoverCss;
-
-exports.limel_popover = Popover;