@limetech/lime-elements 37.12.1 → 37.13.0

package/dist/types/components/dynamic-label/dynamic-label.d.ts

@@ -0,0 +1,43 @@
+import { Label, LabelValue } from './label.types';
+/**
+ * This components displays a different label depending on the current given
+ * value. A label can consist of a text and an optional icon. If no matching
+ * label is found among the given `labels`, the `defaultLabel` will be displayed.
+ *
+ * One use case of the component is to enhance the visualization of a `boolean`
+ * field like a checkbox or switch in a `readonly` state.
+ *
+ * The reason we offer this component is that the default styling
+ * of the Checkbox or Toggle switch in the `readonly` state may not always
+ * provide the best way of _visualizing information_, potentially leading to
+ * confusion and negatively affecting the end-users' experience.
+ *
+ * @exampleComponent limel-example-dynamic-label
+ * @exampleComponent limel-example-dynamic-label-readonly-boolean
+ * @beta
+ */
+export declare class DynamicLabel {
+  /**
+   * The current value of the component which is used to match with the given
+   * `labels` to determine what label to display.
+   *
+   * If not matching label is found, the `defaultLabel` is displayed.
+   */
+  value: LabelValue;
+  /**
+   * The label to display when no matching value is found in the `labels`
+   * array. This is a fallback label that ensures there's always a label
+   * displayed for the component.
+   */
+  defaultLabel: Omit<Label, 'value'>;
+  /**
+   * A list of available labels. Each label has a corresponding value that
+   * will be matched with the current `value` of the component to determine
+   * what label to display.
+   */
+  labels: Label[];
+  render(): any[];
+  private renderIcon;
+  private renderLabel;
+}
+//# sourceMappingURL=dynamic-label.d.ts.map

package/dist/types/components/dynamic-label/label.types.d.ts

@@ -0,0 +1,20 @@
+import { Icon } from '../../interface';
+export type LabelValue = string | number | boolean | null | undefined;
+/**
+ * @beta
+ */
+export interface Label<T = LabelValue> {
+  /**
+   * The value of the label
+   */
+  value: T;
+  /**
+   * Text to display when the label is active
+   */
+  text?: string;
+  /**
+   * Icon to display when the label is active
+   */
+  icon?: string | Icon;
+}
+//# sourceMappingURL=label.types.d.ts.map

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

@@ -121,7 +121,6 @@ export declare class Picker {
   componentWillUpdate(): Promise<void>;
   render(): any[];
   protected onChangeValue(): void;
-  protected createDebouncedSearcher(newValue: Searcher): void;
   private renderDelimiter;
   private getValueId;
   private createChips;
@@ -159,6 +158,7 @@ export declare class Picker {
    * @param event - event
    */
   private handleTextInput;
+  private search;
   /**
    * Change handler for the list
    *

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

@@ -1,3 +1,4 @@
+import { Label } from '../dynamic-label/label.types';
 /**
  * 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.
@@ -14,6 +15,7 @@
  *
  * @exampleComponent limel-example-switch
  * @exampleComponent limel-example-switch-helper-text
+ * @exampleComponent limel-example-switch-readonly
  */
 export declare class Switch {
   /**
@@ -45,6 +47,12 @@ export declare class Switch {
    * Optional helper text to display below the switch
    */
   helperText: string;
+  /**
+   * The labels to use to clarify what kind of data is being visualized,
+   * when the component is `readonly`.
+   * @beta
+   */
+  readonlyLabels?: Array<Label<boolean>>;
   /**
    * Emitted when the value has changed
    */
@@ -58,7 +66,7 @@ export declare class Switch {
   componentDidLoad(): void;
   private initialize;
   disconnectedCallback(): void;
-  render(): any;
+  render(): any[];
   protected valueWatcher(newValue: boolean): void;
   private renderHelperLine;
   private hasHelperText;

package/dist/types/components.d.ts

@@ -12,6 +12,7 @@ import { BreadcrumbsItem } from "./components/breadcrumbs/breadcrumbs.types";
 import { Button } from "./components/button/button.types";
 import { CalloutType } from "./components/callout/callout.types";
 import { DateType, Languages } from "./components/date-picker/date.types";
+import { Label, LabelValue } from "./components/dynamic-label/label.types";
 import { Icon } from "./global/shared-types/icon.types";
 import { Link } from "./global/shared-types/link.types";
 import { Chip, ChipType } from "./components/chip-set/chip.types";
@@ -46,6 +47,7 @@ export { BreadcrumbsItem } from "./components/breadcrumbs/breadcrumbs.types";
 export { Button } from "./components/button/button.types";
 export { CalloutType } from "./components/callout/callout.types";
 export { DateType, Languages } from "./components/date-picker/date.types";
+export { Label, LabelValue } from "./components/dynamic-label/label.types";
 export { Icon } from "./global/shared-types/icon.types";
 export { Link } from "./global/shared-types/link.types";
 export { Chip, ChipType } from "./components/chip-set/chip.types";
@@ -348,6 +350,7 @@ export namespace Components {
      * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
      * @exampleComponent limel-example-checkbox
      * @exampleComponent limel-example-checkbox-helper-text
+     * @exampleComponent limel-example-checkbox-readonly
      */
     interface LimelCheckbox {
         /**
@@ -378,6 +381,11 @@ export namespace Components {
           * Disables the checkbox when `true`. This visualizes the checkbox slightly differently. But shows no visual sign indicating that the checkbox is disabled or can ever become interactable.
          */
         "readonly": boolean;
+        /**
+          * The labels to use to clarify what kind of data is being visualized, when the component is `readonly`.
+          * @beta
+         */
+        "readonlyLabels"?: Array<Label<boolean>>;
         /**
           * Set to `true` to indicate that the checkbox must be checked.
          */
@@ -932,6 +940,34 @@ export namespace Components {
          */
         "useMobileLayout"?: boolean;
     }
+    /**
+     * This components displays a different label depending on the current given
+     * value. A label can consist of a text and an optional icon. If no matching
+     * label is found among the given `labels`, the `defaultLabel` will be displayed.
+     * One use case of the component is to enhance the visualization of a `boolean`
+     * field like a checkbox or switch in a `readonly` state.
+     * The reason we offer this component is that the default styling
+     * of the Checkbox or Toggle switch in the `readonly` state may not always
+     * provide the best way of _visualizing information_, potentially leading to
+     * confusion and negatively affecting the end-users' experience.
+     * @exampleComponent limel-example-dynamic-label
+     * @exampleComponent limel-example-dynamic-label-readonly-boolean
+     * @beta 
+     */
+    interface LimelDynamicLabel {
+        /**
+          * The label to display when no matching value is found in the `labels` array. This is a fallback label that ensures there's always a label displayed for the component.
+         */
+        "defaultLabel": Omit<Label, 'value'>;
+        /**
+          * A list of available labels. Each label has a corresponding value that will be matched with the current `value` of the component to determine what label to display.
+         */
+        "labels": Label[];
+        /**
+          * The current value of the component which is used to match with the given `labels` to determine what label to display.  If not matching label is found, the `defaultLabel` is displayed.
+         */
+        "value": LabelValue;
+    }
     /**
      * This component lets end-users select a *single* file from their device
      * storage. Regardless of the user's device or operating system, this component
@@ -2263,6 +2299,7 @@ export namespace Components {
      * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
      * @exampleComponent limel-example-switch
      * @exampleComponent limel-example-switch-helper-text
+     * @exampleComponent limel-example-switch-readonly
      */
     interface LimelSwitch {
         /**
@@ -2285,6 +2322,11 @@ export namespace Components {
           * Disables the switch when `true`. This visualizes the switch slightly differently. But shows no visual sign indicating that the switch is disabled or can ever become interactable.
          */
         "readonly": boolean;
+        /**
+          * The labels to use to clarify what kind of data is being visualized, when the component is `readonly`.
+          * @beta
+         */
+        "readonlyLabels"?: Array<Label<boolean>>;
         /**
           * The value of the switch
          */
@@ -2849,6 +2891,7 @@ declare global {
      * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
      * @exampleComponent limel-example-checkbox
      * @exampleComponent limel-example-checkbox-helper-text
+     * @exampleComponent limel-example-checkbox-readonly
      */
     interface HTMLLimelCheckboxElement extends Components.LimelCheckbox, HTMLStencilElement {
     }
@@ -3108,6 +3151,26 @@ declare global {
         prototype: HTMLLimelDockButtonElement;
         new (): HTMLLimelDockButtonElement;
     };
+    /**
+     * This components displays a different label depending on the current given
+     * value. A label can consist of a text and an optional icon. If no matching
+     * label is found among the given `labels`, the `defaultLabel` will be displayed.
+     * One use case of the component is to enhance the visualization of a `boolean`
+     * field like a checkbox or switch in a `readonly` state.
+     * The reason we offer this component is that the default styling
+     * of the Checkbox or Toggle switch in the `readonly` state may not always
+     * provide the best way of _visualizing information_, potentially leading to
+     * confusion and negatively affecting the end-users' experience.
+     * @exampleComponent limel-example-dynamic-label
+     * @exampleComponent limel-example-dynamic-label-readonly-boolean
+     * @beta 
+     */
+    interface HTMLLimelDynamicLabelElement extends Components.LimelDynamicLabel, HTMLStencilElement {
+    }
+    var HTMLLimelDynamicLabelElement: {
+        prototype: HTMLLimelDynamicLabelElement;
+        new (): HTMLLimelDynamicLabelElement;
+    };
     /**
      * This component lets end-users select a *single* file from their device
      * storage. Regardless of the user's device or operating system, this component
@@ -3794,6 +3857,7 @@ declare global {
      * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
      * @exampleComponent limel-example-switch
      * @exampleComponent limel-example-switch-helper-text
+     * @exampleComponent limel-example-switch-readonly
      */
     interface HTMLLimelSwitchElement extends Components.LimelSwitch, HTMLStencilElement {
     }
@@ -3947,6 +4011,7 @@ declare global {
         "limel-dialog": HTMLLimelDialogElement;
         "limel-dock": HTMLLimelDockElement;
         "limel-dock-button": HTMLLimelDockButtonElement;
+        "limel-dynamic-label": HTMLLimelDynamicLabelElement;
         "limel-file": HTMLLimelFileElement;
         "limel-file-dropzone": HTMLLimelFileDropzoneElement;
         "limel-file-input": HTMLLimelFileInputElement;
@@ -4279,6 +4344,7 @@ declare namespace LocalJSX {
      * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
      * @exampleComponent limel-example-checkbox
      * @exampleComponent limel-example-checkbox-helper-text
+     * @exampleComponent limel-example-checkbox-readonly
      */
     interface LimelCheckbox {
         /**
@@ -4313,6 +4379,11 @@ declare namespace LocalJSX {
           * Disables the checkbox when `true`. This visualizes the checkbox slightly differently. But shows no visual sign indicating that the checkbox is disabled or can ever become interactable.
          */
         "readonly"?: boolean;
+        /**
+          * The labels to use to clarify what kind of data is being visualized, when the component is `readonly`.
+          * @beta
+         */
+        "readonlyLabels"?: Array<Label<boolean>>;
         /**
           * Set to `true` to indicate that the checkbox must be checked.
          */
@@ -4939,6 +5010,34 @@ declare namespace LocalJSX {
          */
         "useMobileLayout"?: boolean;
     }
+    /**
+     * This components displays a different label depending on the current given
+     * value. A label can consist of a text and an optional icon. If no matching
+     * label is found among the given `labels`, the `defaultLabel` will be displayed.
+     * One use case of the component is to enhance the visualization of a `boolean`
+     * field like a checkbox or switch in a `readonly` state.
+     * The reason we offer this component is that the default styling
+     * of the Checkbox or Toggle switch in the `readonly` state may not always
+     * provide the best way of _visualizing information_, potentially leading to
+     * confusion and negatively affecting the end-users' experience.
+     * @exampleComponent limel-example-dynamic-label
+     * @exampleComponent limel-example-dynamic-label-readonly-boolean
+     * @beta 
+     */
+    interface LimelDynamicLabel {
+        /**
+          * The label to display when no matching value is found in the `labels` array. This is a fallback label that ensures there's always a label displayed for the component.
+         */
+        "defaultLabel"?: Omit<Label, 'value'>;
+        /**
+          * A list of available labels. Each label has a corresponding value that will be matched with the current `value` of the component to determine what label to display.
+         */
+        "labels"?: Label[];
+        /**
+          * The current value of the component which is used to match with the given `labels` to determine what label to display.  If not matching label is found, the `defaultLabel` is displayed.
+         */
+        "value"?: LabelValue;
+    }
     /**
      * This component lets end-users select a *single* file from their device
      * storage. Regardless of the user's device or operating system, this component
@@ -6375,6 +6474,7 @@ declare namespace LocalJSX {
      * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
      * @exampleComponent limel-example-switch
      * @exampleComponent limel-example-switch-helper-text
+     * @exampleComponent limel-example-switch-readonly
      */
     interface LimelSwitch {
         /**
@@ -6401,6 +6501,11 @@ declare namespace LocalJSX {
           * Disables the switch when `true`. This visualizes the switch slightly differently. But shows no visual sign indicating that the switch is disabled or can ever become interactable.
          */
         "readonly"?: boolean;
+        /**
+          * The labels to use to clarify what kind of data is being visualized, when the component is `readonly`.
+          * @beta
+         */
+        "readonlyLabels"?: Array<Label<boolean>>;
         /**
           * The value of the switch
          */
@@ -6668,6 +6773,7 @@ declare namespace LocalJSX {
         "limel-dialog": LimelDialog;
         "limel-dock": LimelDock;
         "limel-dock-button": LimelDockButton;
+        "limel-dynamic-label": LimelDynamicLabel;
         "limel-file": LimelFile;
         "limel-file-dropzone": LimelFileDropzone;
         "limel-file-input": LimelFileInput;
@@ -6867,6 +6973,7 @@ declare module "@stencil/core" {
              * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
              * @exampleComponent limel-example-checkbox
              * @exampleComponent limel-example-checkbox-helper-text
+             * @exampleComponent limel-example-checkbox-readonly
              */
             "limel-checkbox": LocalJSX.LimelCheckbox & JSXBase.HTMLAttributes<HTMLLimelCheckboxElement>;
             /**
@@ -7061,6 +7168,21 @@ declare module "@stencil/core" {
              * @private 
              */
             "limel-dock-button": LocalJSX.LimelDockButton & JSXBase.HTMLAttributes<HTMLLimelDockButtonElement>;
+            /**
+             * This components displays a different label depending on the current given
+             * value. A label can consist of a text and an optional icon. If no matching
+             * label is found among the given `labels`, the `defaultLabel` will be displayed.
+             * One use case of the component is to enhance the visualization of a `boolean`
+             * field like a checkbox or switch in a `readonly` state.
+             * The reason we offer this component is that the default styling
+             * of the Checkbox or Toggle switch in the `readonly` state may not always
+             * provide the best way of _visualizing information_, potentially leading to
+             * confusion and negatively affecting the end-users' experience.
+             * @exampleComponent limel-example-dynamic-label
+             * @exampleComponent limel-example-dynamic-label-readonly-boolean
+             * @beta 
+             */
+            "limel-dynamic-label": LocalJSX.LimelDynamicLabel & JSXBase.HTMLAttributes<HTMLLimelDynamicLabelElement>;
             /**
              * This component lets end-users select a *single* file from their device
              * storage. Regardless of the user's device or operating system, this component
@@ -7577,6 +7699,7 @@ declare module "@stencil/core" {
              * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
              * @exampleComponent limel-example-switch
              * @exampleComponent limel-example-switch-helper-text
+             * @exampleComponent limel-example-switch-readonly
              */
             "limel-switch": LocalJSX.LimelSwitch & JSXBase.HTMLAttributes<HTMLLimelSwitchElement>;
             /**

package/dist/types/interface.d.ts

@@ -16,7 +16,8 @@ export * from './components/help/help.types';
 export * from './components/icon/icon.types';
 export * from './components/info-tile/info-tile.types';
 export * from './components/input-field/input-field.types';
-export { ListComponent } from './components/list/list-item.types';
+export { ListComponent, ListSeparator, } from './components/list/list-item.types';
+export * from './components/dynamic-label/label.types';
 export * from './components/list/list.types';
 export * from './components/menu/menu.types';
 export * from './components/menu-list/menu-list.types';
@@ -28,4 +29,5 @@ export * from './components/spinner/spinner.types';
 export * from './components/tab-panel/tab-panel.types';
 export * from './components/table/table.types';
 export * from './global/shared-types/separator.types';
+export * from './global/shared-types/icon.types';
 //# sourceMappingURL=interface.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.12.1",
+  "version": "37.13.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -49,17 +49,16 @@
     "@rjsf/core": "^2.4.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@stencil/core": "^3.4.1",
-    "@stencil/sass": "^3.0.10",
+    "@stencil/sass": "^3.0.11",
     "@types/codemirror": "^5.60.2",
     "@types/html-escaper": "^3.0.2",
     "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
     "@types/tabulator-tables": "^4.9.4",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
-    "awesome-debounce-promise": "^2.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.10",
@@ -69,15 +68,15 @@
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-sonarjs": "^0.24.0",
+    "eslint-plugin-sonarjs": "^0.25.0",
     "eslint-plugin-tsdoc": "^0.2.17",
     "flatpickr": "^4.6.13",
     "html-escaper": "^3.0.3",
     "jest": "^27.5.1",
     "jest-cli": "^27.5.1",
     "jsonlint-mod": "^1.7.6",
-    "jsx-dom": "^8.1.3",
-    "kompendium": "^0.14.1",
+    "jsx-dom": "^8.1.4",
+    "kompendium": "^0.14.2",
     "lodash-es": "^4.17.21",
     "material-components-web": "^13.0.0",
     "moment": "^2.30.1",

package/dist/cjs/checkbox.template-e7aa89b5.js.map

@@ -1 +0,0 @@
-{"file":"checkbox.template-e7aa89b5.js","mappings":";;;;MAgBa,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,mBACT,KAAK,CAAC,YAAY,sBACf,KAAK,CAAC,YAAY,IAChC,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,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,GAClC;GACL,CAAC;AACN,EAAE;AAEF,MAAM,UAAU,GAIX,CAAC,KAAK;EACP,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,QACIA,+BACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB,EACJ;AACN,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    helperTextId?: 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                    aria-controls={props.helperTextId}\n                    aria-describedby={props.helperTextId}\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\n            text={props.helperText}\n            helperTextId={props.helperTextId}\n        />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{\n    helperTextId: string;\n    text: string;\n    invalid?: boolean;\n}> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return (\n        <limel-helper-line\n            helperText={props.text.trim()}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />\n    );\n};\n"],"version":3}

package/dist/cjs/dom-81eaa633.js

@@ -1,34 +0,0 @@
-'use strict';
-
-/**
- * Check if an element is a descendant of another, even if it is located within a shadow root
- *
- * @param element - The element to check
- * @param parent - The parent element
- * @returns True if the element is a descendant of the parent element, false otherwise
- */
-function isDescendant(element, parent) {
-  if (!parent) {
-    return false;
-  }
-  if (parent.contains(element)) {
-    return true;
-  }
-  let currentNode = element;
-  let i = 0; // Just in case something weird happens, let's not crash the browser…
-  const DEPTH = 1000; // Max depth to search.
-  while (i < DEPTH &&
-    currentNode &&
-    currentNode.getRootNode().nodeName === '#document-fragment') {
-    currentNode = currentNode.getRootNode().host;
-    if (parent.contains(currentNode)) {
-      return true;
-    }
-    i += 1;
-  }
-  return parent.contains(currentNode);
-}
-
-exports.isDescendant = isDescendant;
-
-//# sourceMappingURL=dom-81eaa633.js.map

package/dist/cjs/dom-81eaa633.js.map

@@ -1 +0,0 @@
-{"file":"dom-81eaa633.js","mappings":";;AAAA;;;;;;;SAOgB,YAAY,CAAC,OAAa,EAAE,MAAY;EACpD,IAAI,CAAC,MAAM,EAAE;IACT,OAAO,KAAK,CAAC;GAChB;EAED,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;IAC1B,OAAO,IAAI,CAAC;GACf;EAED,IAAI,WAAW,GAAS,OAAO,CAAC;EAChC,IAAI,CAAC,GAAG,CAAC,CAAC;EACV,MAAM,KAAK,GAAG,IAAI,CAAC;EAEnB,OACI,CAAC,GAAG,KAAK;IACT,WAAW;IACX,WAAW,CAAC,WAAW,EAAE,CAAC,QAAQ,KAAK,oBAAoB,EAC7D;IACE,WAAW,GAAI,WAAW,CAAC,WAAW,EAAU,CAAC,IAAI,CAAC;IACtD,IAAI,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;MAC9B,OAAO,IAAI,CAAC;KACf;IAED,CAAC,IAAI,CAAC,CAAC;GACV;EAED,OAAO,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;AACxC;;;;","names":[],"sources":["./src/util/dom.ts"],"sourcesContent":["/**\n * Check if an element is a descendant of another, even if it is located within a shadow root\n *\n * @param element - The element to check\n * @param parent - The parent element\n * @returns True if the element is a descendant of the parent element, false otherwise\n */\nexport function isDescendant(element: Node, parent: Node): boolean {\n    if (!parent) {\n        return false;\n    }\n\n    if (parent.contains(element)) {\n        return true;\n    }\n\n    let currentNode: Node = element;\n    let i = 0; // Just in case something weird happens, let's not crash the browser…\n    const DEPTH = 1000; // Max depth to search.\n\n    while (\n        i < DEPTH &&\n        currentNode &&\n        currentNode.getRootNode().nodeName === '#document-fragment'\n    ) {\n        currentNode = (currentNode.getRootNode() as any).host;\n        if (parent.contains(currentNode)) {\n            return true;\n        }\n\n        i += 1;\n    }\n\n    return parent.contains(currentNode);\n}\n"],"version":3}

package/dist/cjs/limel-helper-line.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"limel-helper-line.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,+yBAA+yB;;MC2BxzB,UAAU;;;IAqDX,eAAU,GAAG;MACjB,OAAO,CAAC,EACJ,IAAI,CAAC,SAAS,GAAG,CAAC;SACjB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAClD,CAAC;KACL,CAAC;IAEM,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACIA,kBAAM,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,CAAC,YAAY,IAC1C,IAAI,CAAC,UAAU,CACb,EACT;KACL,CAAC;IAEM,2BAAsB,GAAG;MAC7B,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;MAErD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACjB,OAAO;OACV;MAED,OAAOA,kBAAM,KAAK,EAAC,SAAS,IAAE,OAAO,CAAQ,CAAC;KACjD,CAAC;;;;mBArDyB,KAAK;;;EAQzB,MAAM;IACT,QACIA,QAACC,UAAI,IACD,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE;QACH,OAAO,EAAE,IAAI,CAAC,OAAO;OACxB,EACD,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,iBACvC,CAAC,IAAI,CAAC,UAAU,EAAE,IAE/BD,qBACK,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,sBAAsB,EAAE,CAC5B,CACH,EACT;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/helper-line/helper-line.scss?tag=limel-helper-line&encapsulation=shadow","./src/components/helper-line/helper-line.tsx"],"sourcesContent":[":host(limel-helper-line) {\n    transition: opacity 0.2s ease;\n\n    box-sizing: border-box;\n    display: grid;\n\n    min-width: 0; // prevents overflowing, if component is placed in flex containers\n\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    font-size: 0.6875rem;\n    line-height: normal;\n\n    color: rgb(var(--contrast-1200));\n}\n\ndiv {\n    display: flex;\n    justify-content: space-between;\n    gap: 0.75rem;\n    overflow: hidden;\n    padding: 0 1rem;\n}\n\n:host(limel-helper-line.invalid) {\n    .helper-text {\n        color: var(--mdc-theme-error);\n    }\n}\n\n.counter {\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.helper-text,\n.counter {\n    padding-top: 0.125rem;\n}\n\n// This animates height of the helper line, from `0` to `auto`.\n// To get this animation effect, the consumer component should\n// add `hide` classed accordingly.\n:host(limel-helper-line) {\n    transition: grid-template-rows\n        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    grid-template-rows: var(--limel-h-l-grid-template-rows, 1fr);\n}\n\n:host(limel-helper-line.hide) {\n    --limel-h-l-grid-template-rows-transition-speed: 0.3s;\n    --limel-h-l-grid-template-rows: 0fr;\n}\n// End: animating height\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * This is an internal and private component that many input fields\n * use to display a helper text, along with a character counter below the\n * input field.\n *\n * We created this to keep the visual styles the same everywhere\n * and to avoid importing styles separately.\n *\n * Also this enables us to open the helper line in limel-portal,\n * more easily without having to send the styles to the portal.\n *\n * @exampleComponent limel-example-helper-line\n * @exampleComponent limel-example-helper-line-invalid\n * @exampleComponent limel-example-helper-line-long-text\n * @exampleComponent limel-example-helper-line-long-text-no-counter\n * @exampleComponent limel-example-helper-line-character-counter\n * @exampleComponent limel-example-helper-line-empty\n * @exampleComponent limel-example-helper-line-animation\n * @private\n */\n@Component({\n    tag: 'limel-helper-line',\n    shadow: true,\n    styleUrl: 'helper-line.scss',\n})\nexport class HelperLine {\n    /**\n     * The helper text that is displayed on the left side.\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * Length of the current input value, coming from the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public length?: number;\n\n    /**\n     * Maximum length of the characters, defined on the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public maxLength?: number;\n\n    /**\n     * Turns `true`, when the parent component is invalid.\n     * For example, when the parent component is `required` but is left empty.\n     * Or when the input format is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Used by `aria-controls` and `aria-describedby` in the parent component.\n     */\n    @Prop({ reflect: true })\n    public helperTextId?: string;\n\n    public render() {\n        return (\n            <Host\n                tabIndex={-1}\n                class={{\n                    invalid: this.invalid,\n                }}\n                style={!this.hasContent() ? { display: 'none' } : {}}\n                aria-hidden={!this.hasContent()}\n            >\n                <div>\n                    {this.renderHelperText()}\n                    {this.renderCharacterCounter()}\n                </div>\n            </Host>\n        );\n    }\n\n    private hasContent = () => {\n        return !!(\n            this.maxLength > 0 ||\n            (this.helperText && this.helperText.length > 0)\n        );\n    };\n\n    private renderHelperText = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <span class=\"helper-text\" id={this.helperTextId}>\n                {this.helperText}\n            </span>\n        );\n    };\n\n    private renderCharacterCounter = () => {\n        const counter = `${this.length} / ${this.maxLength}`;\n\n        if (!this.maxLength) {\n            return;\n        }\n\n        return <span class=\"counter\">{counter}</span>;\n    };\n}\n"],"version":3}

package/dist/esm/checkbox.template-50268c7d.js.map

@@ -1 +0,0 @@
-{"file":"checkbox.template-50268c7d.js","mappings":";;MAgBa,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,mBACT,KAAK,CAAC,YAAY,sBACf,KAAK,CAAC,YAAY,IAChC,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,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,GAClC;GACL,CAAC;AACN,EAAE;AAEF,MAAM,UAAU,GAIX,CAAC,KAAK;EACP,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,QACI,yBACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB,EACJ;AACN,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    helperTextId?: 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                    aria-controls={props.helperTextId}\n                    aria-describedby={props.helperTextId}\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\n            text={props.helperText}\n            helperTextId={props.helperTextId}\n        />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{\n    helperTextId: string;\n    text: string;\n    invalid?: boolean;\n}> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return (\n        <limel-helper-line\n            helperText={props.text.trim()}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />\n    );\n};\n"],"version":3}

package/dist/esm/dom-0b0170a0.js

@@ -1,32 +0,0 @@
-/**
- * Check if an element is a descendant of another, even if it is located within a shadow root
- *
- * @param element - The element to check
- * @param parent - The parent element
- * @returns True if the element is a descendant of the parent element, false otherwise
- */
-function isDescendant(element, parent) {
-  if (!parent) {
-    return false;
-  }
-  if (parent.contains(element)) {
-    return true;
-  }
-  let currentNode = element;
-  let i = 0; // Just in case something weird happens, let's not crash the browser…
-  const DEPTH = 1000; // Max depth to search.
-  while (i < DEPTH &&
-    currentNode &&
-    currentNode.getRootNode().nodeName === '#document-fragment') {
-    currentNode = currentNode.getRootNode().host;
-    if (parent.contains(currentNode)) {
-      return true;
-    }
-    i += 1;
-  }
-  return parent.contains(currentNode);
-}
-
-export { isDescendant as i };
-
-//# sourceMappingURL=dom-0b0170a0.js.map

package/dist/esm/dom-0b0170a0.js.map

@@ -1 +0,0 @@
-{"file":"dom-0b0170a0.js","mappings":"AAAA;;;;;;;SAOgB,YAAY,CAAC,OAAa,EAAE,MAAY;EACpD,IAAI,CAAC,MAAM,EAAE;IACT,OAAO,KAAK,CAAC;GAChB;EAED,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;IAC1B,OAAO,IAAI,CAAC;GACf;EAED,IAAI,WAAW,GAAS,OAAO,CAAC;EAChC,IAAI,CAAC,GAAG,CAAC,CAAC;EACV,MAAM,KAAK,GAAG,IAAI,CAAC;EAEnB,OACI,CAAC,GAAG,KAAK;IACT,WAAW;IACX,WAAW,CAAC,WAAW,EAAE,CAAC,QAAQ,KAAK,oBAAoB,EAC7D;IACE,WAAW,GAAI,WAAW,CAAC,WAAW,EAAU,CAAC,IAAI,CAAC;IACtD,IAAI,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;MAC9B,OAAO,IAAI,CAAC;KACf;IAED,CAAC,IAAI,CAAC,CAAC;GACV;EAED,OAAO,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;AACxC;;;;","names":[],"sources":["./src/util/dom.ts"],"sourcesContent":["/**\n * Check if an element is a descendant of another, even if it is located within a shadow root\n *\n * @param element - The element to check\n * @param parent - The parent element\n * @returns True if the element is a descendant of the parent element, false otherwise\n */\nexport function isDescendant(element: Node, parent: Node): boolean {\n    if (!parent) {\n        return false;\n    }\n\n    if (parent.contains(element)) {\n        return true;\n    }\n\n    let currentNode: Node = element;\n    let i = 0; // Just in case something weird happens, let's not crash the browser…\n    const DEPTH = 1000; // Max depth to search.\n\n    while (\n        i < DEPTH &&\n        currentNode &&\n        currentNode.getRootNode().nodeName === '#document-fragment'\n    ) {\n        currentNode = (currentNode.getRootNode() as any).host;\n        if (parent.contains(currentNode)) {\n            return true;\n        }\n\n        i += 1;\n    }\n\n    return parent.contains(currentNode);\n}\n"],"version":3}

package/dist/esm/limel-helper-line.entry.js.map

@@ -1 +0,0 @@
-{"file":"limel-helper-line.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,+yBAA+yB;;MC2BxzB,UAAU;;;IAqDX,eAAU,GAAG;MACjB,OAAO,CAAC,EACJ,IAAI,CAAC,SAAS,GAAG,CAAC;SACjB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAClD,CAAC;KACL,CAAC;IAEM,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACI,YAAM,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,CAAC,YAAY,IAC1C,IAAI,CAAC,UAAU,CACb,EACT;KACL,CAAC;IAEM,2BAAsB,GAAG;MAC7B,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;MAErD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACjB,OAAO;OACV;MAED,OAAO,YAAM,KAAK,EAAC,SAAS,IAAE,OAAO,CAAQ,CAAC;KACjD,CAAC;;;;mBArDyB,KAAK;;;EAQzB,MAAM;IACT,QACI,EAAC,IAAI,IACD,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE;QACH,OAAO,EAAE,IAAI,CAAC,OAAO;OACxB,EACD,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,iBACvC,CAAC,IAAI,CAAC,UAAU,EAAE,IAE/B,eACK,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,sBAAsB,EAAE,CAC5B,CACH,EACT;GACL;;;;;;","names":[],"sources":["./src/components/helper-line/helper-line.scss?tag=limel-helper-line&encapsulation=shadow","./src/components/helper-line/helper-line.tsx"],"sourcesContent":[":host(limel-helper-line) {\n    transition: opacity 0.2s ease;\n\n    box-sizing: border-box;\n    display: grid;\n\n    min-width: 0; // prevents overflowing, if component is placed in flex containers\n\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    font-size: 0.6875rem;\n    line-height: normal;\n\n    color: rgb(var(--contrast-1200));\n}\n\ndiv {\n    display: flex;\n    justify-content: space-between;\n    gap: 0.75rem;\n    overflow: hidden;\n    padding: 0 1rem;\n}\n\n:host(limel-helper-line.invalid) {\n    .helper-text {\n        color: var(--mdc-theme-error);\n    }\n}\n\n.counter {\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.helper-text,\n.counter {\n    padding-top: 0.125rem;\n}\n\n// This animates height of the helper line, from `0` to `auto`.\n// To get this animation effect, the consumer component should\n// add `hide` classed accordingly.\n:host(limel-helper-line) {\n    transition: grid-template-rows\n        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    grid-template-rows: var(--limel-h-l-grid-template-rows, 1fr);\n}\n\n:host(limel-helper-line.hide) {\n    --limel-h-l-grid-template-rows-transition-speed: 0.3s;\n    --limel-h-l-grid-template-rows: 0fr;\n}\n// End: animating height\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * This is an internal and private component that many input fields\n * use to display a helper text, along with a character counter below the\n * input field.\n *\n * We created this to keep the visual styles the same everywhere\n * and to avoid importing styles separately.\n *\n * Also this enables us to open the helper line in limel-portal,\n * more easily without having to send the styles to the portal.\n *\n * @exampleComponent limel-example-helper-line\n * @exampleComponent limel-example-helper-line-invalid\n * @exampleComponent limel-example-helper-line-long-text\n * @exampleComponent limel-example-helper-line-long-text-no-counter\n * @exampleComponent limel-example-helper-line-character-counter\n * @exampleComponent limel-example-helper-line-empty\n * @exampleComponent limel-example-helper-line-animation\n * @private\n */\n@Component({\n    tag: 'limel-helper-line',\n    shadow: true,\n    styleUrl: 'helper-line.scss',\n})\nexport class HelperLine {\n    /**\n     * The helper text that is displayed on the left side.\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * Length of the current input value, coming from the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public length?: number;\n\n    /**\n     * Maximum length of the characters, defined on the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public maxLength?: number;\n\n    /**\n     * Turns `true`, when the parent component is invalid.\n     * For example, when the parent component is `required` but is left empty.\n     * Or when the input format is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Used by `aria-controls` and `aria-describedby` in the parent component.\n     */\n    @Prop({ reflect: true })\n    public helperTextId?: string;\n\n    public render() {\n        return (\n            <Host\n                tabIndex={-1}\n                class={{\n                    invalid: this.invalid,\n                }}\n                style={!this.hasContent() ? { display: 'none' } : {}}\n                aria-hidden={!this.hasContent()}\n            >\n                <div>\n                    {this.renderHelperText()}\n                    {this.renderCharacterCounter()}\n                </div>\n            </Host>\n        );\n    }\n\n    private hasContent = () => {\n        return !!(\n            this.maxLength > 0 ||\n            (this.helperText && this.helperText.length > 0)\n        );\n    };\n\n    private renderHelperText = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <span class=\"helper-text\" id={this.helperTextId}>\n                {this.helperText}\n            </span>\n        );\n    };\n\n    private renderCharacterCounter = () => {\n        const counter = `${this.length} / ${this.maxLength}`;\n\n        if (!this.maxLength) {\n            return;\n        }\n\n        return <span class=\"counter\">{counter}</span>;\n    };\n}\n"],"version":3}

package/dist/lime-elements/p-042e5620.entry.js

@@ -1,16 +0,0 @@
-import{r as t,c as i,h as s,g as e}from"./p-3075aa67.js";import{i as n}from"./p-5e7b7b03.js";import{T as r,E as h,a as o,b as a,c as u,d as l,A as c,e as f,f as d,g as m}from"./p-e03dfe70.js";import{c as p}from"./p-3ccdc4a3.js";import{g as v,c as y}from"./p-2f777fdb.js";var b=function t(i){var s=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var e=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};var n=void 0;var r=void 0;var h=void 0;var o=[];return function t(){var u=g(s);var l=(new Date).getTime();var c=!n||l-n>u;n=l;for(var f=arguments.length,d=Array(f),m=0;m<f;m++){d[m]=arguments[m]}if(c&&e.leading){return e.accumulate?Promise.resolve(i.call(this,[d])).then((function(t){return t[0]})):Promise.resolve(i.call.apply(i,[this].concat(d)))}if(r){clearTimeout(h)}else{r=w()}o.push(d);h=setTimeout(a.bind(this),u);if(e.accumulate){var p=o.length-1;return r.promise.then((function(t){return t[p]}))}return r.promise};function a(){var t=r;clearTimeout(h);Promise.resolve(e.accumulate?i.call(this,o):i.apply(this,o[o.length-1])).then(t.resolve,t.reject);o=[];r=null}};function g(t){return typeof t==="function"?t():t}function w(){var t={};t.promise=new Promise((function(i,s){t.resolve=i;t.reject=s}));return t}function D(t){var i=null;var s=null;var e=new Promise((function(t,e){i=t;s=e}));t&&t.then((function(t){i&&i(t)}),(function(t){s&&s(t)}));return{promise:e,resolve:function(t){i&&i(t)},reject:function(t){s&&s(t)},cancel:function(){i=null;s=null}}}function C(t){var i=null;var s=function(){var s=[];for(var e=0;e<arguments.length;e++){s[e]=arguments[e]}i&&i();var n=t.apply(void 0,s);var r=D(n),h=r.promise,o=r.cancel;i=o;return h};return s}
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
-
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
-
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
-***************************************************************************** */var j=function(){j=Object.assign||function t(i){for(var s,e=1,n=arguments.length;e<n;e++){s=arguments[e];for(var r in s)if(Object.prototype.hasOwnProperty.call(s,r))i[r]=s[r]}return i};return j.apply(this,arguments)};var I={key:function(){var t=[];for(var i=0;i<arguments.length;i++){t[i]=arguments[i]}return null},onlyResolvesLast:true};var x=function(){function t(t){this.config=t;this.debounceSingleton=null;this.debounceCache={}}t.prototype._createDebouncedFunction=function(){var t=b(this.config.func,this.config.wait,this.config.options);if(this.config.options.onlyResolvesLast){t=C(t)}return{func:t}};t.prototype.getDebouncedFunction=function(t){var i;var s=(i=this.config.options).key.apply(i,t);if(s===null||typeof s==="undefined"){if(!this.debounceSingleton){this.debounceSingleton=this._createDebouncedFunction()}return this.debounceSingleton}else{if(!this.debounceCache[s]){this.debounceCache[s]=this._createDebouncedFunction()}return this.debounceCache[s]}};return t}();function S(t,i,s){var e=j({},I,s);var n=new x({func:t,wait:i,options:e});var r=function(){var t=[];for(var i=0;i<arguments.length;i++){t[i]=arguments[i]}var s=n.getDebouncedFunction(t).func;return s.apply(void 0,t)};return r}const L=":host{position:relative;display:block}:host([hidden]){display:none}";const P=500;const k="limel-chip-set";const A=class{constructor(s){t(this,s);this.change=i(this,"change",7);this.interact=i(this,"interact",7);this.action=i(this,"action",7);this.chipSetEditMode=false;this.getValueId=t=>{const i=t.value;if(!!i&&typeof i==="object"){return i.id}return i};this.createChips=t=>{if(!t){return[]}if(this.multiple){const i=t;return i.map(this.createChip)}const i=t;return[this.createChip(i)]};this.createChip=t=>{const i=v(t.icon);const s=y(t.icon,t.iconColor);const e=this.getValueId(t);return{id:`${e}`,text:t.text,removable:true,icon:i?{name:i,color:s}:undefined,value:t}};this.disabled=false;this.readonly=false;this.label=undefined;this.searchLabel=undefined;this.helperText=undefined;this.leadingIcon=undefined;this.emptyResultMessage=undefined;this.required=false;this.invalid=false;this.value=undefined;this.searcher=undefined;this.multiple=false;this.delimiter=null;this.actions=[];this.actionPosition="bottom";this.actionScrollBehavior="sticky";this.badgeIcons=false;this.items=undefined;this.textValue="";this.loading=false;this.chips=[];this.handleTextInput=this.handleTextInput.bind(this);this.handleInputKeyDown=this.handleInputKeyDown.bind(this);this.handleDropdownKeyDown=this.handleDropdownKeyDown.bind(this);this.handleInputFieldFocus=this.handleInputFieldFocus.bind(this);this.handleChange=this.handleChange.bind(this);this.handleInteract=this.handleInteract.bind(this);this.handleListChange=this.handleListChange.bind(this);this.handleActionListChange=this.handleActionListChange.bind(this);this.handleStopEditAndBlur=this.handleStopEditAndBlur.bind(this);this.createDebouncedSearcher=this.createDebouncedSearcher.bind(this);this.handleCloseMenu=this.handleCloseMenu.bind(this);this.onListKeyDown=this.onListKeyDown.bind(this);this.portalId=p()}componentWillLoad(){this.chips=this.createChips(this.value)}componentDidLoad(){this.createDebouncedSearcher(this.searcher);this.chipSet=this.host.shadowRoot.querySelector(k)}async componentWillUpdate(){this.chipSetEditMode=false;if(this.chipSet){this.chipSetEditMode=await this.chipSet.getEditMode()}}render(){const t={};if(!this.multiple){t.maxItems=1}return[s("limel-chip-set",Object.assign({type:"input",inputType:"search",label:this.label,helperText:this.helperText,leadingIcon:this.leadingIcon,value:this.chips,disabled:this.disabled,invalid:this.invalid,delimiter:this.renderDelimiter(),readonly:this.readonly,required:this.required,searchLabel:this.searchLabel,onInput:this.handleTextInput,onKeyDown:this.handleInputKeyDown,onChange:this.handleChange,onInteract:this.handleInteract,onStartEdit:this.handleInputFieldFocus,onStopEdit:this.handleStopEditAndBlur,emptyInputOnBlur:false,clearAllButton:this.multiple&&!this.chipSetEditMode},t)),this.renderDropdown()]}onChangeValue(){this.chips=this.createChips(this.value)}createDebouncedSearcher(t){if(typeof t!=="function"){return}this.debouncedSearch=S(t,P)}renderDelimiter(){if(this.multiple){return this.delimiter}return null}renderDropdown(){const t=this.getDropdownContent();const i=[];if(this.shouldShowDropDownContent()){const s=this.getActionContent();if(this.actionPosition==="top"){i.push(s)}if(t){i.push(t)}if(this.actionPosition==="bottom"){i.push(s)}}return this.renderPortal(i)}getActionContent(){var t,i;const e=(i=(t=this.actions)===null||t===void 0?void 0:t.length)!==null&&i!==void 0?i:0;if(e===0){return null}return[s("limel-list",{class:{"static-actions-list":true,"is-on-top":this.actionPosition==="top","is-at-bottom":this.actionPosition==="bottom","has-position-sticky":this.actionScrollBehavior==="sticky"},badgeIcons:true,type:"selectable",onChange:this.handleActionListChange,items:this.actions.map(this.removeUnusedPropertiesOnAction)})]}removeUnusedPropertiesOnAction(t){return Object.assign(Object.assign({},t),{actions:[]})}shouldShowDropDownContent(){if(this.isFull()){return false}return!!this.chipSetEditMode}getDropdownContent(){if(!this.shouldShowDropDownContent()){return}if(this.loading){return this.renderSpinner()}if(!this.items||!this.items.length){return this.renderEmptyMessage()}return this.renderListResult()}isFull(){return!this.multiple&&!!this.value}renderSpinner(){return s("div",{style:{width:"100%",display:"flex","align-items":"center","justify-content":"center",padding:"1rem 0"}},s("limel-spinner",{limeBranded:false}))}renderEmptyMessage(){if(!this.emptyResultMessage){return}const t={color:"rgb(var(--contrast-1100))","text-align":"center",margin:"0.5rem 1rem"};return s("p",{style:t},this.emptyResultMessage)}renderListResult(){return s("limel-list",{badgeIcons:this.badgeIcons,onChange:this.handleListChange,onKeyDown:this.onListKeyDown,type:"selectable",items:this.items})}onListKeyDown(t){const i=[r,h,o].includes(t.key);const s=[a,u,l].includes(t.keyCode);if(i||s){this.chipSet.setFocus()}}renderPortal(t=[]){const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");return s("limel-portal",{visible:t.length>0,containerId:this.portalId,inheritParentWidth:true,containerStyle:{"z-index":i}},s("limel-menu-surface",{open:t.length>0,allowClicksElement:this.host,style:{"--mdc-menu-min-width":"100%","max-height":"inherit",display:"flex"},onDismiss:this.handleCloseMenu},t))}handleStopEditAndBlur(){const t=this.host.shadowRoot.activeElement||document.activeElement;const i=document.querySelector(`#${this.portalId}`);if(n(t,this.host)||n(t,i)){return}this.clearInputField()}async handleTextInput(t){t.stopPropagation();const i=t.detail;this.textValue=i;this.loading=true;const s=i===""?this.searcher:this.debouncedSearch;const e=await s(i);this.handleSearchResult(i,e)}handleListChange(t){var i;t.stopPropagation();if(!this.value||this.value!==t.detail){let i=t.detail;if(this.multiple){i=[...this.value,t.detail]}this.change.emit(i);this.items=[]}if(this.multiple){(i=this.chipSet)===null||i===void 0?void 0:i.setFocus(true)}}handleActionListChange(t){t.stopPropagation();if(!t.detail){return}this.action.emit(t.detail.value);this.items=[]}async handleInputFieldFocus(){this.loading=true;const t=this.textValue;const i=await this.searcher(t);this.handleSearchResult(t,i)}handleChange(t){t.stopPropagation();let i=null;if(this.multiple){const s=t.detail;i=s.map((t=>this.value.find((i=>{const s=this.getValueId(i);return`${s}`===t.id}))))}this.change.emit(i)}handleInteract(t){t.stopPropagation();this.interact.emit(t.detail?t.detail.value:t.detail)}handleInputKeyDown(t){const i=(t.key===r||t.keyCode===a)&&!t.altKey&&!t.metaKey&&!t.shiftKey;const s=t.key===c||t.keyCode===f;const e=t.key===d||t.keyCode===m;if(!i&&!s&&!e){return}const n=document.querySelector(` #${this.portalId} limel-list`);if(!n){return}t.preventDefault();if(i||e){const t=n.shadowRoot.querySelector(".mdc-deprecated-list-item:first-child");t.focus();return}if(s){const t=n.shadowRoot.querySelector(".mdc-deprecated-list-item:last-child");t.focus()}}handleDropdownKeyDown(t){const i=t.key===h||t.keyCode===u;if(i){t.preventDefault();this.textValue="";this.chipSet.setFocus(true)}}handleSearchResult(t,i){if(t===this.textValue){this.items=i;if(this.multiple){const t=this.value;this.items=i.filter((i=>!t.includes(i)))}this.loading=false}}handleCloseMenu(){if(this.items.length>0){return}this.clearInputField()}clearInputField(){this.chipSet.emptyInput();this.textValue="";this.handleSearchResult("",[])}get host(){return e(this)}static get watchers(){return{value:["onChangeValue"],searcher:["createDebouncedSearcher"]}}};A.style=L;export{A as limel_picker};
-//# sourceMappingURL=p-042e5620.entry.js.map