@limetech/lime-elements 37.0.0-next.1 → 37.1.0-dev.1

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
      */
@@ -1666,7 +1677,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 +1829,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
          */
@@ -2195,7 +2218,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 +2351,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
      */
@@ -3003,7 +3037,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 +3109,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 {
     }
@@ -3284,7 +3326,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 +3536,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
      */
@@ -5041,7 +5094,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 +5258,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
          */
@@ -5545,7 +5610,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 +5703,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
              */
@@ -6133,7 +6209,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 +6261,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>;
             /**

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/makeEnterClickable.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.0.0-next.1",
+  "version": "37.1.0-dev.1",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -40,32 +40,32 @@
     "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.8",
+    "@types/react": "^18.2.19",
     "@types/tabulator-tables": "^4.9.4",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.61.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "ajv": "^6.12.6",
     "awesome-debounce-promise": "^2.1.0",
     "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.46.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-ban": "^1.6.0",
-    "eslint-plugin-jsdoc": "^46.4.3",
+    "eslint-plugin-jsdoc": "^46.4.6",
     "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.1",
+    "eslint-plugin-sonarjs": "^0.20.0",
     "flatpickr": "^4.6.13",
     "html-escaper": "^3.0.3",
     "jest": "^27.5.1",

package/dist/cjs/checkbox.template-234f4813.js.map

@@ -1 +0,0 @@
-{"file":"checkbox.template-234f4813.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}