@limetech/lime-elements 37.12.2 → 37.13.1

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.2",
+  "version": "37.13.1",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -49,16 +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.74",
+    "@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",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.10",
@@ -68,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.1",
     "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}