@limetech/lime-elements 37.1.0-next.2 → 37.1.0-next.21

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

@@ -1,3 +1,5 @@
+import { JSX } from 'react';
+import { OpenDirection } from '../menu/menu.types';
 /**
  * A tooltip can be used to display a descriptive text for any element.
  * The displayed content must be a brief and supplemental string of text,
@@ -14,8 +16,9 @@
  *
  * :::note
  * In order to display the tooltip, the tooltip element and its trigger element
- * must be within the same document or document fragment.
- * A good practice is to just place them next to each other like below:
+ * must be within the same document or document fragment (the same shadowRoot).
+ * Often, it's easiest to just place them next to each other like in the example
+ * below, but if you need to, you can place them differently.
  *
  * ```html
  * <limel-button icon="search" id="tooltip-example" />
@@ -36,10 +39,9 @@
  * use that, not a tooltip.
  * - Make sure to use the tooltip on an element that users naturally and
  * effortlessly recognize can be hovered.
- * @exampleComponent limel-example-tooltip
+ * @exampleComponent limel-example-tooltip-basic
  * @exampleComponent limel-example-tooltip-max-character
  * @exampleComponent limel-example-tooltip-composite
- * @private
  */
 export declare class Tooltip {
   /**
@@ -63,15 +65,20 @@ export declare class Tooltip {
    * 'helperLabel' in two rows.
    */
   maxlength?: number;
-  private open;
+  /**
+   * Decides the tooltip's location in relation to its trigger.
+   */
+  openDirection: OpenDirection;
   private host;
+  private open;
   private portalId;
   private tooltipId;
   private showTooltipTimeoutHandle;
+  private ownerElement;
   constructor();
   connectedCallback(): void;
   disconnectedCallback(): void;
-  render(): any;
+  render(): JSX.Element;
   private setOwnerAriaLabel;
   private addListeners;
   private removeListeners;

package/dist/types/components.d.ts

@@ -66,7 +66,6 @@ export namespace Components {
      * @exampleComponent limel-example-action-bar-floating
      * @exampleComponent limel-example-action-bar-styling
      * @exampleComponent limel-example-action-bar-as-primary-component
-     * @private 
      */
     interface LimelActionBar {
         /**
@@ -272,6 +271,18 @@ export namespace Components {
         "type"?: CalloutType;
     }
     /**
+     * The Checkbox component is a classic and essential element in UI design that allows
+     * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
+     * select one or more items from a list of choices.
+     * ## States of a Checkbox
+     * When a user clicks or taps on the box, it toggles between two states:
+     * Checked and Unchecked.
+     * However, a Checkbox can visualize a third state called the "Indeterminate" state.
+     * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
+     * The Indeterminate state is typically used when dealing with checkbox groups
+     * that have hierarchical relationships or when the group contains sub-items.
+     * This state is used to indicate that that some, but not all, of the items in a group are selected.
+     * <limel-example-switch-vs-checkbox />
      * @exampleComponent limel-example-checkbox
      * @exampleComponent limel-example-checkbox-helper-text
      */
@@ -1511,9 +1522,13 @@ export namespace Components {
      * to do any tear-down, the appropriate setup will have to be done again on
      * `connectedCallback`.
      * @private 
-     * @exampleComponent limel-example-portal
+     * @exampleComponent limel-example-portal-basic
      */
     interface LimelPortal {
+        /**
+          * The element that the content should be positioned relative to. Defaults to the limel-portal element.
+         */
+        "anchor"?: HTMLElement;
         /**
           * A unique ID.
          */
@@ -1666,7 +1681,7 @@ export namespace Components {
         "link"?: Link;
     }
     /**
-     * @exampleComponent limel-example-slider
+     * @exampleComponent limel-example-slider-basic
      * @exampleComponent limel-example-slider-multiplier
      * @exampleComponent limel-example-slider-multiplier-percentage-colors
      * @exampleComponent limel-example-slider-composite
@@ -1818,13 +1833,25 @@ export namespace Components {
         "primary": boolean;
     }
     /**
+     * The Switch component is a fundamental element in UI design that serves as a toggle switch
+     * to control the state of a specific setting or option in an application or website.
+     * The two distinct positions of the Switch are visually indicative of the two states:
+     * ON and OFF; making it easy for users to understand the current state of the controlled feature.
+     * The Switch component is widely used in user interfaces to enable users to
+     * quickly and intuitively change binary settings.
+     * <limel-example-switch-vs-checkbox />
      * @exampleComponent limel-example-switch
+     * @exampleComponent limel-example-switch-helper-text
      */
     interface LimelSwitch {
         /**
           * Disables the switch when `true`, and visually shows that the switch is editable but disabled. This tells the users that if certain requirements are met, the switch may become interactable.
          */
         "disabled": boolean;
+        /**
+          * Optional helper text to display below the switch
+         */
+        "helperText": string;
         /**
           * Label to display next to the switch
          */
@@ -1976,8 +2003,9 @@ export namespace Components {
      * to it.
      * :::note
      * In order to display the tooltip, the tooltip element and its trigger element
-     * must be within the same document or document fragment.
-     * A good practice is to just place them next to each other like below:
+     * must be within the same document or document fragment (the same shadowRoot).
+     * Often, it's easiest to just place them next to each other like in the example
+     * below, but if you need to, you can place them differently.
      * ```html
      * <limel-button icon="search" id="tooltip-example" />
      * <limel-tooltip label="Search" elementId="tooltip-example" />
@@ -1996,10 +2024,9 @@ export namespace Components {
      * use that, not a tooltip.
      * - Make sure to use the tooltip on an element that users naturally and
      * effortlessly recognize can be hovered.
-     * @exampleComponent limel-example-tooltip
+     * @exampleComponent limel-example-tooltip-basic
      * @exampleComponent limel-example-tooltip-max-character
      * @exampleComponent limel-example-tooltip-composite
-     * @private 
      */
     interface LimelTooltip {
         /**
@@ -2018,6 +2045,10 @@ export namespace Components {
           * The maximum amount of characters before rendering 'label' and 'helperLabel' in two rows.
          */
         "maxlength"?: number;
+        /**
+          * Decides the tooltip's location in relation to its trigger.
+         */
+        "openDirection": OpenDirection;
     }
     /**
      * This component is used internally by `limel-tooltip`.
@@ -2195,7 +2226,6 @@ declare global {
      * @exampleComponent limel-example-action-bar-floating
      * @exampleComponent limel-example-action-bar-styling
      * @exampleComponent limel-example-action-bar-as-primary-component
-     * @private 
      */
     interface HTMLLimelActionBarElement extends Components.LimelActionBar, HTMLStencilElement {
     }
@@ -2329,6 +2359,18 @@ declare global {
         new (): HTMLLimelCalloutElement;
     };
     /**
+     * The Checkbox component is a classic and essential element in UI design that allows
+     * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
+     * select one or more items from a list of choices.
+     * ## States of a Checkbox
+     * When a user clicks or taps on the box, it toggles between two states:
+     * Checked and Unchecked.
+     * However, a Checkbox can visualize a third state called the "Indeterminate" state.
+     * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
+     * The Indeterminate state is typically used when dealing with checkbox groups
+     * that have hierarchical relationships or when the group contains sub-items.
+     * This state is used to indicate that that some, but not all, of the items in a group are selected.
+     * <limel-example-switch-vs-checkbox />
      * @exampleComponent limel-example-checkbox
      * @exampleComponent limel-example-checkbox-helper-text
      */
@@ -2936,7 +2978,7 @@ declare global {
      * to do any tear-down, the appropriate setup will have to be done again on
      * `connectedCallback`.
      * @private 
-     * @exampleComponent limel-example-portal
+     * @exampleComponent limel-example-portal-basic
      */
     interface HTMLLimelPortalElement extends Components.LimelPortal, HTMLStencilElement {
     }
@@ -3003,7 +3045,7 @@ declare global {
         new (): HTMLLimelShortcutElement;
     };
     /**
-     * @exampleComponent limel-example-slider
+     * @exampleComponent limel-example-slider-basic
      * @exampleComponent limel-example-slider-multiplier
      * @exampleComponent limel-example-slider-multiplier-percentage-colors
      * @exampleComponent limel-example-slider-composite
@@ -3075,7 +3117,15 @@ declare global {
         new (): HTMLLimelSplitButtonElement;
     };
     /**
+     * The Switch component is a fundamental element in UI design that serves as a toggle switch
+     * to control the state of a specific setting or option in an application or website.
+     * The two distinct positions of the Switch are visually indicative of the two states:
+     * ON and OFF; making it easy for users to understand the current state of the controlled feature.
+     * The Switch component is widely used in user interfaces to enable users to
+     * quickly and intuitively change binary settings.
+     * <limel-example-switch-vs-checkbox />
      * @exampleComponent limel-example-switch
+     * @exampleComponent limel-example-switch-helper-text
      */
     interface HTMLLimelSwitchElement extends Components.LimelSwitch, HTMLStencilElement {
     }
@@ -3165,8 +3215,9 @@ declare global {
      * to it.
      * :::note
      * In order to display the tooltip, the tooltip element and its trigger element
-     * must be within the same document or document fragment.
-     * A good practice is to just place them next to each other like below:
+     * must be within the same document or document fragment (the same shadowRoot).
+     * Often, it's easiest to just place them next to each other like in the example
+     * below, but if you need to, you can place them differently.
      * ```html
      * <limel-button icon="search" id="tooltip-example" />
      * <limel-tooltip label="Search" elementId="tooltip-example" />
@@ -3185,10 +3236,9 @@ declare global {
      * use that, not a tooltip.
      * - Make sure to use the tooltip on an element that users naturally and
      * effortlessly recognize can be hovered.
-     * @exampleComponent limel-example-tooltip
+     * @exampleComponent limel-example-tooltip-basic
      * @exampleComponent limel-example-tooltip-max-character
      * @exampleComponent limel-example-tooltip-composite
-     * @private 
      */
     interface HTMLLimelTooltipElement extends Components.LimelTooltip, HTMLStencilElement {
     }
@@ -3284,7 +3334,6 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-action-bar-floating
      * @exampleComponent limel-example-action-bar-styling
      * @exampleComponent limel-example-action-bar-as-primary-component
-     * @private 
      */
     interface LimelActionBar {
         /**
@@ -3495,6 +3544,18 @@ declare namespace LocalJSX {
         "type"?: CalloutType;
     }
     /**
+     * The Checkbox component is a classic and essential element in UI design that allows
+     * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
+     * select one or more items from a list of choices.
+     * ## States of a Checkbox
+     * When a user clicks or taps on the box, it toggles between two states:
+     * Checked and Unchecked.
+     * However, a Checkbox can visualize a third state called the "Indeterminate" state.
+     * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
+     * The Indeterminate state is typically used when dealing with checkbox groups
+     * that have hierarchical relationships or when the group contains sub-items.
+     * This state is used to indicate that that some, but not all, of the items in a group are selected.
+     * <limel-example-switch-vs-checkbox />
      * @exampleComponent limel-example-checkbox
      * @exampleComponent limel-example-checkbox-helper-text
      */
@@ -4603,7 +4664,7 @@ declare namespace LocalJSX {
          */
         "maxLinesSecondaryText"?: number;
         /**
-          * Fired when a new value has been selected from the list. Only fired if selectable is set to true
+          * Fired when a new value has been selected from the list. Only fired if `type` is set to `selectable`, `radio` or `checkbox`.
          */
         "onChange"?: (event: LimelListCustomEvent<ListItem | ListItem[]>) => void;
         /**
@@ -4874,9 +4935,13 @@ declare namespace LocalJSX {
      * to do any tear-down, the appropriate setup will have to be done again on
      * `connectedCallback`.
      * @private 
-     * @exampleComponent limel-example-portal
+     * @exampleComponent limel-example-portal-basic
      */
     interface LimelPortal {
+        /**
+          * The element that the content should be positioned relative to. Defaults to the limel-portal element.
+         */
+        "anchor"?: HTMLElement;
         /**
           * A unique ID.
          */
@@ -5041,7 +5106,7 @@ declare namespace LocalJSX {
         "link"?: Link;
     }
     /**
-     * @exampleComponent limel-example-slider
+     * @exampleComponent limel-example-slider-basic
      * @exampleComponent limel-example-slider-multiplier
      * @exampleComponent limel-example-slider-multiplier-percentage-colors
      * @exampleComponent limel-example-slider-composite
@@ -5205,13 +5270,25 @@ declare namespace LocalJSX {
         "primary"?: boolean;
     }
     /**
+     * The Switch component is a fundamental element in UI design that serves as a toggle switch
+     * to control the state of a specific setting or option in an application or website.
+     * The two distinct positions of the Switch are visually indicative of the two states:
+     * ON and OFF; making it easy for users to understand the current state of the controlled feature.
+     * The Switch component is widely used in user interfaces to enable users to
+     * quickly and intuitively change binary settings.
+     * <limel-example-switch-vs-checkbox />
      * @exampleComponent limel-example-switch
+     * @exampleComponent limel-example-switch-helper-text
      */
     interface LimelSwitch {
         /**
           * Disables the switch when `true`, and visually shows that the switch is editable but disabled. This tells the users that if certain requirements are met, the switch may become interactable.
          */
         "disabled"?: boolean;
+        /**
+          * Optional helper text to display below the switch
+         */
+        "helperText"?: string;
         /**
           * Label to display next to the switch
          */
@@ -5403,8 +5480,9 @@ declare namespace LocalJSX {
      * to it.
      * :::note
      * In order to display the tooltip, the tooltip element and its trigger element
-     * must be within the same document or document fragment.
-     * A good practice is to just place them next to each other like below:
+     * must be within the same document or document fragment (the same shadowRoot).
+     * Often, it's easiest to just place them next to each other like in the example
+     * below, but if you need to, you can place them differently.
      * ```html
      * <limel-button icon="search" id="tooltip-example" />
      * <limel-tooltip label="Search" elementId="tooltip-example" />
@@ -5423,10 +5501,9 @@ declare namespace LocalJSX {
      * use that, not a tooltip.
      * - Make sure to use the tooltip on an element that users naturally and
      * effortlessly recognize can be hovered.
-     * @exampleComponent limel-example-tooltip
+     * @exampleComponent limel-example-tooltip-basic
      * @exampleComponent limel-example-tooltip-max-character
      * @exampleComponent limel-example-tooltip-composite
-     * @private 
      */
     interface LimelTooltip {
         /**
@@ -5445,6 +5522,10 @@ declare namespace LocalJSX {
           * The maximum amount of characters before rendering 'label' and 'helperLabel' in two rows.
          */
         "maxlength"?: number;
+        /**
+          * Decides the tooltip's location in relation to its trigger.
+         */
+        "openDirection"?: OpenDirection;
     }
     /**
      * This component is used internally by `limel-tooltip`.
@@ -5545,7 +5626,6 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-action-bar-floating
              * @exampleComponent limel-example-action-bar-styling
              * @exampleComponent limel-example-action-bar-as-primary-component
-             * @private 
              */
             "limel-action-bar": LocalJSX.LimelActionBar & JSXBase.HTMLAttributes<HTMLLimelActionBarElement>;
             /**
@@ -5639,6 +5719,18 @@ declare module "@stencil/core" {
              */
             "limel-callout": LocalJSX.LimelCallout & JSXBase.HTMLAttributes<HTMLLimelCalloutElement>;
             /**
+             * The Checkbox component is a classic and essential element in UI design that allows
+             * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
+             * select one or more items from a list of choices.
+             * ## States of a Checkbox
+             * When a user clicks or taps on the box, it toggles between two states:
+             * Checked and Unchecked.
+             * However, a Checkbox can visualize a third state called the "Indeterminate" state.
+             * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
+             * The Indeterminate state is typically used when dealing with checkbox groups
+             * that have hierarchical relationships or when the group contains sub-items.
+             * This state is used to indicate that that some, but not all, of the items in a group are selected.
+             * <limel-example-switch-vs-checkbox />
              * @exampleComponent limel-example-checkbox
              * @exampleComponent limel-example-checkbox-helper-text
              */
@@ -6091,7 +6183,7 @@ declare module "@stencil/core" {
              * to do any tear-down, the appropriate setup will have to be done again on
              * `connectedCallback`.
              * @private 
-             * @exampleComponent limel-example-portal
+             * @exampleComponent limel-example-portal-basic
              */
             "limel-portal": LocalJSX.LimelPortal & JSXBase.HTMLAttributes<HTMLLimelPortalElement>;
             /**
@@ -6133,7 +6225,7 @@ declare module "@stencil/core" {
              */
             "limel-shortcut": LocalJSX.LimelShortcut & JSXBase.HTMLAttributes<HTMLLimelShortcutElement>;
             /**
-             * @exampleComponent limel-example-slider
+             * @exampleComponent limel-example-slider-basic
              * @exampleComponent limel-example-slider-multiplier
              * @exampleComponent limel-example-slider-multiplier-percentage-colors
              * @exampleComponent limel-example-slider-composite
@@ -6185,7 +6277,15 @@ declare module "@stencil/core" {
              */
             "limel-split-button": LocalJSX.LimelSplitButton & JSXBase.HTMLAttributes<HTMLLimelSplitButtonElement>;
             /**
+             * The Switch component is a fundamental element in UI design that serves as a toggle switch
+             * to control the state of a specific setting or option in an application or website.
+             * The two distinct positions of the Switch are visually indicative of the two states:
+             * ON and OFF; making it easy for users to understand the current state of the controlled feature.
+             * The Switch component is widely used in user interfaces to enable users to
+             * quickly and intuitively change binary settings.
+             * <limel-example-switch-vs-checkbox />
              * @exampleComponent limel-example-switch
+             * @exampleComponent limel-example-switch-helper-text
              */
             "limel-switch": LocalJSX.LimelSwitch & JSXBase.HTMLAttributes<HTMLLimelSwitchElement>;
             /**
@@ -6255,8 +6355,9 @@ declare module "@stencil/core" {
              * to it.
              * :::note
              * In order to display the tooltip, the tooltip element and its trigger element
-             * must be within the same document or document fragment.
-             * A good practice is to just place them next to each other like below:
+             * must be within the same document or document fragment (the same shadowRoot).
+             * Often, it's easiest to just place them next to each other like in the example
+             * below, but if you need to, you can place them differently.
              * ```html
              * <limel-button icon="search" id="tooltip-example" />
              * <limel-tooltip label="Search" elementId="tooltip-example" />
@@ -6275,10 +6376,9 @@ declare module "@stencil/core" {
              * use that, not a tooltip.
              * - Make sure to use the tooltip on an element that users naturally and
              * effortlessly recognize can be hovered.
-             * @exampleComponent limel-example-tooltip
+             * @exampleComponent limel-example-tooltip-basic
              * @exampleComponent limel-example-tooltip-max-character
              * @exampleComponent limel-example-tooltip-composite
-             * @private 
              */
             "limel-tooltip": LocalJSX.LimelTooltip & JSXBase.HTMLAttributes<HTMLLimelTooltipElement>;
             /**

package/dist/types/global/{icon-cache.d.ts → icon-cache/cache-storage-icon-cache.d.ts}

@@ -1,7 +1,7 @@
-export declare class IconCache {
+export declare class CacheStorageIconCache {
   private cache;
   private promises;
-  constructor();
+  constructor(cache: Promise<Cache>);
   /**
    * Get icon data from the cache
    * @param {string} name name of the icon
@@ -14,5 +14,3 @@ export declare class IconCache {
   private validSvg;
   private getUrl;
 }
-declare const _default: IconCache;
-export default _default;

package/dist/types/global/icon-cache/factory.d.ts

@@ -0,0 +1,4 @@
+import { CacheStorageIconCache } from './cache-storage-icon-cache';
+import { InMemoryIconCache } from './in-memory-icon-cache';
+declare const _default: CacheStorageIconCache | InMemoryIconCache;
+export default _default;

package/dist/types/global/icon-cache/in-memory-icon-cache.d.ts

@@ -0,0 +1,15 @@
+export declare class InMemoryIconCache {
+  private cache;
+  private resolveFunctions;
+  /**
+   * Get icon data from the cache
+   * @param {string} name name of the icon
+   * @param {string} path path on the server where the assets are located
+   * @returns {string} svg markup
+   */
+  get(name: any, path?: string): Promise<any>;
+  private getIcon;
+  private fetchData;
+  private validSvg;
+  private resolvePromises;
+}

package/dist/types/util/make-enter-clickable.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Overrides the default browser behavior for clickable elements
+ * When focused and pressing down enter, avoids calling onClick repeatedly
+ * @param {HTMLElement} element the clickable element
+ */
+export declare function makeEnterClickable(element: HTMLElement): void;
+export declare function removeEnterClickable(element: HTMLElement): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.1.0-next.2",
+  "version": "37.1.0-next.21",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -40,16 +40,16 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.6.6",
+    "@commitlint/config-conventional": "^17.7.0",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^2.4.2",
     "@stencil/core": "^3.4.1",
-    "@stencil/sass": "^3.0.4",
+    "@stencil/sass": "^3.0.5",
     "@types/codemirror": "^5.60.2",
     "@types/html-escaper": "^3.0.0",
     "@types/jest": "^27.4.0",
-    "@types/lodash-es": "^4.17.7",
-    "@types/react": "^18.2.14",
+    "@types/lodash-es": "^4.17.9",
+    "@types/react": "^18.2.21",
     "@types/tabulator-tables": "^4.9.4",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.62.0",
@@ -58,14 +58,14 @@
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.9",
-    "eslint": "^8.44.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-ban": "^1.6.0",
-    "eslint-plugin-jsdoc": "^46.4.3",
+    "eslint-plugin-jsdoc": "^46.5.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-sonarjs": "^0.19.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-sonarjs": "^0.21.0",
     "flatpickr": "^4.6.13",
     "html-escaper": "^3.0.3",
     "jest": "^27.5.1",

package/dist/cjs/checkbox.template-5603ad4a.js.map

@@ -1 +0,0 @@
-{"file":"checkbox.template-5603ad4a.js","mappings":";;;;MAea,gBAAgB,GAA+C,CACxE,KAAK;EAEL,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;GAC7C;EAED,OAAO;IACHA,iBAAK,KAAK,EAAC,iBAAiB;MACxBA,iBACI,KAAK,EAAE;UACH,cAAc,EAAE,IAAI;UACpB,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C;QAEDA,iCACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACpB,UAAU,EAChB;QACFA,iBAAK,KAAK,EAAC,0BAA0B;UACjCA,iBAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,WAAW;YACpDA,kBACI,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,kCAAkC,GACtC,CACA;UACNA,iBAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;MACNA,mBACI,KAAK,EAAE;UACH,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,KAAK,CAAC,KAAK,CACR,CACN;IACNA,QAAC,UAAU,IAAC,IAAI,EAAE,KAAK,CAAC,UAAU,GAAI;GACzC,CAAC;AACN,EAAE;AAEF,MAAM,UAAU,GAA0C,CAAC,KAAK;EAC5D,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,OAAOA,+BAAmB,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,GAAI,CAAC;AAChE,CAAC;;;;","names":["h"],"sources":["./src/components/checkbox/checkbox.template.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface CheckboxTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    readonly?: boolean;\n    indeterminate?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n    helperText?: string;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n    props\n) => {\n    const inputProps = {};\n    if (props.indeterminate) {\n        inputProps['data-indeterminate'] = 'true';\n    }\n\n    return [\n        <div class=\"mdc-form-field \">\n            <div\n                class={{\n                    'mdc-checkbox': true,\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n            >\n                <input\n                    type=\"checkbox\"\n                    class=\"mdc-checkbox__native-control\"\n                    id={props.id}\n                    checked={props.checked}\n                    disabled={props.disabled || props.readonly}\n                    required={props.required}\n                    onChange={props.onChange}\n                    {...inputProps}\n                />\n                <div class=\"mdc-checkbox__background\">\n                    <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                        <path\n                            class=\"mdc-checkbox__checkmark-path\"\n                            fill=\"none\"\n                            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n                        />\n                    </svg>\n                    <div class=\"mdc-checkbox__mixedmark\" />\n                </div>\n            </div>\n            <label\n                class={{\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n                htmlFor={props.id}\n            >\n                {props.label}\n            </label>\n        </div>,\n        <HelperText text={props.helperText} />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{ text: string }> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return <limel-helper-line helperText={props.text.trim()} />;\n};\n"],"version":3}

package/dist/collection/global/icon-cache.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-cache.js","sourceRoot":"","sources":["../../src/global/icon-cache.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,GAAG,+BAA+B,CAAC;AAEnD,MAAM,OAAO,SAAS;EAQlB;IAFQ,aAAQ,GAAkC,EAAE,CAAC;IAGjD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;EACzC,CAAC;EAED;;;;;KAKG;EACI,KAAK,CAAC,GAAG,CAAC,IAAY,EAAE,OAAe,EAAE;IAC5C,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC;IAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAEpC,IAAI,QAAQ,GAAG,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACtC,IAAI,CAAC,QAAQ,EAAE;MACX,QAAQ,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;KAC/C;IAED,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;EAClC,CAAC;EAEO,KAAK,CAAC,SAAS,CAAC,GAAW,EAAE,KAAY;IAC7C,IAAI,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IACxC,IAAI,cAAc,KAAK,SAAS,EAAE;MAC9B,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;MAChC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC;KACvC;IAED,MAAM,cAAc,CAAC;IAErB,OAAO,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;EAC5B,CAAC;EAED;;KAEG;EACK,KAAK,CAAC,OAAO,CAAC,QAAkB;IACpC,IAAI,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;IAEpC,4FAA4F;IAC5F,8EAA8E;IAC9E,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;IAEtD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;MACzB,MAAM,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC;KAClC;IAED,OAAO,OAAO,CAAC;EACnB,CAAC;EAED;;KAEG;EACK,QAAQ,CAAC,IAAI;IACjB,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IAE7D,OAAO,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;EAClE,CAAC;EAEO,MAAM,CAAC,IAAY,EAAE,IAAY;IACrC,IAAI,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAC;IAC1B,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;MAC7B,QAAQ,GAAG,GAAG,IAAI,GAAG,CAAC;KACzB;IAED,OAAO,GAAG,QAAQ,gBAAgB,IAAI,MAAM,CAAC;EACjD,CAAC;CACJ;AAED,MAAM,SAAS,GAAG,IAAI,SAAS,EAAE,CAAC;AAClC,eAAe,CAAC,GAAG,EAAE;EACjB,OAAO,SAAS,CAAC;AACrB,CAAC,CAAC,EAAE,CAAC","sourcesContent":["const CACHE_NAME = '@limetech/lime-elements/icons';\n\nexport class IconCache {\n    /*\n     * Cache of all loaded SVGs\n     */\n    private cache: Promise<Cache>;\n\n    private promises: Record<string, Promise<void>> = {};\n\n    constructor() {\n        this.cache = caches.open(CACHE_NAME);\n    }\n\n    /**\n     * Get icon data from the cache\n     * @param {string} name name of the icon\n     * @param {string} path path on the server where the assets are located\n     * @returns {Promise<string>} svg markup\n     */\n    public async get(name: string, path: string = ''): Promise<string> {\n        const cache = await this.cache;\n        const url = this.getUrl(name, path);\n\n        let response = await cache.match(url);\n        if (!response) {\n            response = await this.fetchData(url, cache);\n        }\n\n        return this.getIcon(response);\n    }\n\n    private async fetchData(url: string, cache: Cache): Promise<Response> {\n        let requestPromise = this.promises[url];\n        if (requestPromise === undefined) {\n            requestPromise = cache.add(url);\n            this.promises[url] = requestPromise;\n        }\n\n        await requestPromise;\n\n        return cache.match(url);\n    }\n\n    /*\n     * Get icon data from a response\n     */\n    private async getIcon(response: Response): Promise<string> {\n        let svgData = await response.text();\n\n        // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n        // In order to apply coloring with CSS, these have to be set to 'currentColor'\n        svgData = svgData.replace(/#000000/g, 'currentColor');\n\n        if (!this.validSvg(svgData)) {\n            throw new Error('Invalid SVG');\n        }\n\n        return svgData;\n    }\n\n    /*\n     * Check if the given data is a valid SVG document\n     */\n    private validSvg(data) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n        return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n    }\n\n    private getUrl(name: string, path: string): string {\n        let iconPath = path || '';\n        if (path && !path.endsWith('/')) {\n            iconPath = `${path}/`;\n        }\n\n        return `${iconPath}assets/icons/${name}.svg`;\n    }\n}\n\nconst iconCache = new IconCache();\nexport default (() => {\n    return iconCache;\n})();\n"]}

package/dist/collection/util/makeEnterClickable.js

@@ -1,51 +0,0 @@
-import { forceUpdate } from '@stencil/core';
-const eventHandlers = new WeakMap();
-export function makeEnterClickable(element) {
-  if (eventHandlers.has(element)) {
-    return;
-  }
-  let isActive = false;
-  let hasJustReleasedEnter = true;
-  const keydownHandler = (event) => {
-    if (event.key === 'Enter' && !isActive) {
-      isActive = true;
-      forceUpdate(element);
-    }
-  };
-  const keyupHandler = (event) => {
-    if (event.key === 'Enter' && isActive) {
-      isActive = false;
-      hasJustReleasedEnter = true;
-      forceUpdate(element);
-    }
-  };
-  const clickHandler = (event) => {
-    if (!isActive) {
-      return;
-    }
-    if (hasJustReleasedEnter) {
-      hasJustReleasedEnter = false;
-      return;
-    }
-    event.stopImmediatePropagation();
-  };
-  eventHandlers.set(element, {
-    keydownHandler: keydownHandler,
-    keyupHandler: keyupHandler,
-    clickHandler: clickHandler,
-  });
-  element.addEventListener('keydown', keydownHandler);
-  element.addEventListener('keyup', keyupHandler);
-  element.addEventListener('click', clickHandler, true);
-}
-export function removeEnterClickable(element) {
-  const callBacks = eventHandlers.get(element);
-  if (!callBacks || !eventHandlers.has(element)) {
-    return;
-  }
-  element.removeEventListener('keydown', callBacks.keydownHandler);
-  element.removeEventListener('keyup', callBacks.keyupHandler);
-  element.removeEventListener('click', callBacks.clickHandler, true);
-  eventHandlers.delete(element);
-}
-//# sourceMappingURL=makeEnterClickable.js.map

package/dist/collection/util/makeEnterClickable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"makeEnterClickable.js","sourceRoot":"","sources":["../../src/util/makeEnterClickable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,aAAa,GAAoC,IAAI,OAAO,EAAE,CAAC;AAErE,MAAM,UAAU,kBAAkB,CAAC,OAAoB;EACnD,IAAI,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;IAC5B,OAAO;GACV;EAED,IAAI,QAAQ,GAAG,KAAK,CAAC;EACrB,IAAI,oBAAoB,GAAG,IAAI,CAAC;EAEhC,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC5C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,QAAQ,EAAE;MACpC,QAAQ,GAAG,IAAI,CAAC;MAEhB,WAAW,CAAC,OAAO,CAAC,CAAC;KACxB;EACL,CAAC,CAAC;EAEF,MAAM,YAAY,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC1C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,QAAQ,EAAE;MACnC,QAAQ,GAAG,KAAK,CAAC;MACjB,oBAAoB,GAAG,IAAI,CAAC;MAE5B,WAAW,CAAC,OAAO,CAAC,CAAC;KACxB;EACL,CAAC,CAAC;EAEF,MAAM,YAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;IACvC,IAAI,CAAC,QAAQ,EAAE;MACX,OAAO;KACV;IAED,IAAI,oBAAoB,EAAE;MACtB,oBAAoB,GAAG,KAAK,CAAC;MAE7B,OAAO;KACV;IAED,KAAK,CAAC,wBAAwB,EAAE,CAAC;EACrC,CAAC,CAAC;EAEF,aAAa,CAAC,GAAG,CAAC,OAAO,EAAE;IACvB,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,YAAY;IAC1B,YAAY,EAAE,YAAY;GAC7B,CAAC,CAAC;EAEH,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;EACpD,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;EAChD,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;AAC1D,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,OAAoB;EACrD,MAAM,SAAS,GAAc,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;EAExD,IAAI,CAAC,SAAS,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;IAC3C,OAAO;GACV;EAED,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;EACjE,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;EAC7D,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,SAAS,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;EAEnE,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAClC,CAAC","sourcesContent":["import { forceUpdate } from '@stencil/core';\n\nconst eventHandlers: WeakMap<HTMLElement, CallBacks> = new WeakMap();\n\nexport function makeEnterClickable(element: HTMLElement) {\n    if (eventHandlers.has(element)) {\n        return;\n    }\n\n    let isActive = false;\n    let hasJustReleasedEnter = true;\n\n    const keydownHandler = (event: KeyboardEvent) => {\n        if (event.key === 'Enter' && !isActive) {\n            isActive = true;\n\n            forceUpdate(element);\n        }\n    };\n\n    const keyupHandler = (event: KeyboardEvent) => {\n        if (event.key === 'Enter' && isActive) {\n            isActive = false;\n            hasJustReleasedEnter = true;\n\n            forceUpdate(element);\n        }\n    };\n\n    const clickHandler = (event: MouseEvent) => {\n        if (!isActive) {\n            return;\n        }\n\n        if (hasJustReleasedEnter) {\n            hasJustReleasedEnter = false;\n\n            return;\n        }\n\n        event.stopImmediatePropagation();\n    };\n\n    eventHandlers.set(element, {\n        keydownHandler: keydownHandler,\n        keyupHandler: keyupHandler,\n        clickHandler: clickHandler,\n    });\n\n    element.addEventListener('keydown', keydownHandler);\n    element.addEventListener('keyup', keyupHandler);\n    element.addEventListener('click', clickHandler, true);\n}\n\nexport function removeEnterClickable(element: HTMLElement) {\n    const callBacks: CallBacks = eventHandlers.get(element);\n\n    if (!callBacks || !eventHandlers.has(element)) {\n        return;\n    }\n\n    element.removeEventListener('keydown', callBacks.keydownHandler);\n    element.removeEventListener('keyup', callBacks.keyupHandler);\n    element.removeEventListener('click', callBacks.clickHandler, true);\n\n    eventHandlers.delete(element);\n}\n\ninterface CallBacks {\n    keydownHandler: (arg: KeyboardEvent) => void;\n    keyupHandler: (arg: KeyboardEvent) => void;\n    clickHandler: (arg: MouseEvent) => void;\n}\n"]}

package/dist/esm/checkbox.template-a5d8a2bc.js.map

@@ -1 +0,0 @@
-{"file":"checkbox.template-a5d8a2bc.js","mappings":";;MAea,gBAAgB,GAA+C,CACxE,KAAK;EAEL,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;GAC7C;EAED,OAAO;IACH,WAAK,KAAK,EAAC,iBAAiB;MACxB,WACI,KAAK,EAAE;UACH,cAAc,EAAE,IAAI;UACpB,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C;QAED,2BACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACpB,UAAU,EAChB;QACF,WAAK,KAAK,EAAC,0BAA0B;UACjC,WAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,WAAW;YACpD,YACI,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,kCAAkC,GACtC,CACA;UACN,WAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;MACN,aACI,KAAK,EAAE;UACH,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,KAAK,CAAC,KAAK,CACR,CACN;IACN,EAAC,UAAU,IAAC,IAAI,EAAE,KAAK,CAAC,UAAU,GAAI;GACzC,CAAC;AACN,EAAE;AAEF,MAAM,UAAU,GAA0C,CAAC,KAAK;EAC5D,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,OAAO,yBAAmB,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,GAAI,CAAC;AAChE,CAAC;;;;","names":[],"sources":["./src/components/checkbox/checkbox.template.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface CheckboxTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    readonly?: boolean;\n    indeterminate?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n    helperText?: string;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n    props\n) => {\n    const inputProps = {};\n    if (props.indeterminate) {\n        inputProps['data-indeterminate'] = 'true';\n    }\n\n    return [\n        <div class=\"mdc-form-field \">\n            <div\n                class={{\n                    'mdc-checkbox': true,\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n            >\n                <input\n                    type=\"checkbox\"\n                    class=\"mdc-checkbox__native-control\"\n                    id={props.id}\n                    checked={props.checked}\n                    disabled={props.disabled || props.readonly}\n                    required={props.required}\n                    onChange={props.onChange}\n                    {...inputProps}\n                />\n                <div class=\"mdc-checkbox__background\">\n                    <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                        <path\n                            class=\"mdc-checkbox__checkmark-path\"\n                            fill=\"none\"\n                            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n                        />\n                    </svg>\n                    <div class=\"mdc-checkbox__mixedmark\" />\n                </div>\n            </div>\n            <label\n                class={{\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n                htmlFor={props.id}\n            >\n                {props.label}\n            </label>\n        </div>,\n        <HelperText text={props.helperText} />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{ text: string }> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return <limel-helper-line helperText={props.text.trim()} />;\n};\n"],"version":3}