@limetech/lime-elements 36.1.0-dev.2 → 36.1.0-dev.4

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

@@ -6,7 +6,6 @@ import { DockItem } from './dock.types';
  * @exampleComponent limel-example-dock-mobile
  * @exampleComponent limel-example-dock-expanded
  * @exampleComponent limel-example-dock-colors-css
- * @private
  */
 export declare class Dock {
   /**

package/dist/types/components/info-tile/info-tile.d.ts

@@ -0,0 +1,87 @@
+import { InfoTileProgress } from './info-tile.types';
+import { Link } from '@limetech/lime-elements';
+/**
+ * This component can be used on places such as a start page or a dashboard.
+ * It offers features for visualizing aggregated data along with supplementary
+ * information.
+ *
+ * If clicking on the component should navigate the user to
+ * a new screen or web page, you need to provide a URL,
+ * using the `link` property.
+ *
+ * @exampleComponent limel-example-info-tile
+ * @exampleComponent limel-example-info-tile-badge
+ * @exampleComponent limel-example-info-tile-progress
+ * @exampleComponent limel-example-info-tile-loading
+ * @exampleComponent limel-example-info-tile-styling
+ */
+export declare class InfoTile {
+  /**
+   * A piece of text or number that is the main piece of information
+   * which the component is intended to visualize.
+   */
+  value: number | string;
+  /**
+   * Name of icon for the info tile.
+   */
+  icon?: string;
+  /**
+   * The text to show below the info tile. Long labels will be truncated.
+   */
+  label?: string;
+  /**
+   * A string of text that is visually placed before the value.
+   */
+  prefix?: string;
+  /**
+   * A string of text that is visually placed after the value.
+   */
+  suffix?: string;
+  /**
+   * Set to `true` if info tile is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * If supplied, the info tile will display a notification badge.
+   */
+  badge?: number | string;
+  /**
+   * Set to `true` to put the component in the `loading` state.
+   * This does _not_ disable the link. To do so, the
+   * `disabled` property should be set to `true` as well.
+   */
+  loading?: boolean;
+  /**
+   * If supplied, the info tile will be a clickable link.
+   *
+   * Supplying a value also adds an elevated effect using a shadow,
+   * as well as `cursor: pointer`, which appears on hover.
+   * While we strongly recommend supplying a link whenever the
+   * component should act as a link, if this is not possible, and
+   * you need to provide interaction through a click handler,
+   * you can still get the correct styling by supplying a `Link`
+   * object with the `href` property set to `'#'`.
+   */
+  link?: Link;
+  /**
+   * Properties of the optional circular progress bar.
+   *
+   * Defaults:
+   * - `maxValue`: 100
+   * - `suffix`: %
+   * - `percentageColors`: false
+   *
+   * Colors change with intervals of 10 %.
+   */
+  progress?: InfoTileProgress;
+  render(): any[];
+  private checkProps;
+  private renderPrefix;
+  private renderValue;
+  private renderSuffix;
+  private renderIcon;
+  private renderProgress;
+  private renderLabel;
+  private renderNotification;
+  private renderSpinner;
+}

package/dist/types/components/info-tile/info-tile.types.d.ts

@@ -0,0 +1,23 @@
+export interface InfoTileProgress {
+  /**
+   * The value of the progress bar.
+   */
+  value: number;
+  /**
+   * The maximum value within the scale that the progress bar should visualize.
+   */
+  maxValue?: number;
+  /**
+   * The prefix which is displayed before the `progressValue`.
+   * Keep to a few characters at most.
+   */
+  prefix?: string;
+  /**
+   * The suffix which is displayed after the `value`, must be one or two characters long.
+   */
+  suffix?: string;
+  /**
+   * When set to `true`, the progress bar changes color depending on its current value.
+   */
+  displayPercentageColors?: boolean;
+}

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

@@ -1,10 +1,12 @@
+import { Link } from '@limetech/lime-elements';
 /**
  * This component can be used on places such as a start page or a dashboard.
  * Clicking on the component should navigate the user to a new screen,
- * to which you need to provide a URL, using the `href` property.
+ * to which you need to provide a URL, by specifying an `href` for the `link` property.
  *
  * By default, this navigation will happen within the same browser tab.
- * However, it is possible to override that behavior, using the `target` property.
+ * However, it is possible to override that behavior, by specifying a `target`
+ * for the `link` property
  *
  * @exampleComponent limel-example-shortcut
  * @exampleComponent limel-example-shortcut-notification
@@ -20,36 +22,19 @@ export declare class Shortcut {
    * The text to show below the shortcut. Long label will be truncated.
    */
   label?: string;
-  /**
-   * The `title` tag of the hyperlink, which can be used to
-   * provide additional information about the link.
-   * It improves accessibility both for sighted users
-   * and users with assistive technologies.
-   */
-  linkTitle?: string;
   /**
    * Set to `true` if shortcut is disabled.
    */
   disabled?: boolean;
-  /**
-   * The url that the shortcut leads to.
-   */
-  href?: string;
-  /**
-   * Where to load the linked URL, as the name for a browsing context:
-   * - `_self`: in the current browsing context. (Default)
-   * - `_blank`: in a new tab.
-   * - `_parent`: in the parent browsing context of the current one.
-   * If no parent, behaves as `_self`.
-   * - `_top`: the topmost browsing context (the "highest" context
-   * that's an ancestor of the current one). If no ancestors, behaves as `_self`.
-   */
-  target: '_self' | '_blank' | '_parent' | '_top';
   /**
    * If specified, will display a notification badge
    * on the shortcut.
    */
   badge?: number | string;
+  /**
+   * If supplied, the shortcut will be a clickable link.
+   */
+  link?: Link;
   render(): any[];
   private renderLabel;
   private getAriaLabel;

package/dist/types/components/split-button/split-button.d.ts

@@ -42,4 +42,5 @@ export declare class SplitButton {
    */
   select: EventEmitter<MenuItem>;
   render(): any;
+  private renderMenu;
 }

package/dist/types/components.d.ts

@@ -6,13 +6,14 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Button } from "./components/button/button.types";
-import { Action as Action1, Chip, ClosingActions, DateType, DialogHeading, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, IconSize as IconSize1, Languages, ListItem, ListSeparator, ListType, MenuItem, MenuListType, OpenDirection, Option, Searcher, SpinnerSize } from "@limetech/lime-elements";
+import { Action as Action1, Chip, ClosingActions, DateType, DialogHeading, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, IconSize as IconSize1, Languages, Link, ListItem, ListSeparator, ListType, MenuItem, MenuListType, OpenDirection, Option, Searcher, SpinnerSize } from "@limetech/lime-elements";
 import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
 import { Action } from "./components/collapsible-section/action";
 import { DockItem } from "./components/dock/dock.types";
 import { FormError, ValidationError, ValidationStatus } from "./components/form/form.types";
 import { IconSize } from "./components/icon/icon.types";
+import { InfoTileProgress } from "./components/info-tile/info-tile.types";
 import { InputType } from "./components/input-field/input-field.types";
 import { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
 import { OpenDirection as OpenDirection1 } from "./components/menu/menu.types";
@@ -572,6 +573,48 @@ export namespace Components {
          */
         "label": string;
     }
+    interface LimelInfoTile {
+        /**
+          * If supplied, the info tile will display a notification badge.
+         */
+        "badge"?: number | string;
+        /**
+          * Set to `true` if info tile is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Name of icon for the info tile.
+         */
+        "icon"?: string;
+        /**
+          * The text to show below the info tile. Long labels will be truncated.
+         */
+        "label"?: string;
+        /**
+          * If supplied, the info tile will be a clickable link.  Supplying a value also adds an elevated effect using a shadow, as well as `cursor: pointer`, which appears on hover. While we strongly recommend supplying a link whenever the component should act as a link, if this is not possible, and you need to provide interaction through a click handler, you can still get the correct styling by supplying a `Link` object with the `href` property set to `'#'`.
+         */
+        "link"?: Link;
+        /**
+          * Set to `true` to put the component in the `loading` state. This does _not_ disable the link. To do so, the `disabled` property should be set to `true` as well.
+         */
+        "loading"?: boolean;
+        /**
+          * A string of text that is visually placed before the value.
+         */
+        "prefix"?: string;
+        /**
+          * Properties of the optional circular progress bar.  Defaults: - `maxValue`: 100 - `suffix`: % - `percentageColors`: false  Colors change with intervals of 10 %.
+         */
+        "progress"?: InfoTileProgress;
+        /**
+          * A string of text that is visually placed after the value.
+         */
+        "suffix"?: string;
+        /**
+          * A piece of text or number that is the main piece of information which the component is intended to visualize.
+         */
+        "value": number | string;
+    }
     interface LimelInputField {
         /**
           * list of suggestions `value` can autocomplete to.
@@ -939,10 +982,6 @@ export namespace Components {
           * Set to `true` if shortcut is disabled.
          */
         "disabled"?: boolean;
-        /**
-          * The url that the shortcut leads to.
-         */
-        "href"?: string;
         /**
           * Name of icon for the shortcut.
          */
@@ -952,13 +991,9 @@ export namespace Components {
          */
         "label"?: string;
         /**
-          * The `title` tag of the hyperlink, which can be used to provide additional information about the link. It improves accessibility both for sighted users and users with assistive technologies.
-         */
-        "linkTitle"?: string;
-        /**
-          * Where to load the linked URL, as the name for a browsing context: - `_self`: in the current browsing context. (Default) - `_blank`: in a new tab. - `_parent`: in the parent browsing context of the current one. If no parent, behaves as `_self`. - `_top`: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as `_self`.
+          * If supplied, the shortcut will be a clickable link.
          */
-        "target": '_self' | '_blank' | '_parent' | '_top';
+        "link"?: Link;
     }
     interface LimelSlider {
         /**
@@ -1458,6 +1493,12 @@ declare global {
         prototype: HTMLLimelIconButtonElement;
         new (): HTMLLimelIconButtonElement;
     };
+    interface HTMLLimelInfoTileElement extends Components.LimelInfoTile, HTMLStencilElement {
+    }
+    var HTMLLimelInfoTileElement: {
+        prototype: HTMLLimelInfoTileElement;
+        new (): HTMLLimelInfoTileElement;
+    };
     interface HTMLLimelInputFieldElement extends Components.LimelInputField, HTMLStencilElement {
     }
     var HTMLLimelInputFieldElement: {
@@ -1627,6 +1668,7 @@ declare global {
         "limel-header": HTMLLimelHeaderElement;
         "limel-icon": HTMLLimelIconElement;
         "limel-icon-button": HTMLLimelIconButtonElement;
+        "limel-info-tile": HTMLLimelInfoTileElement;
         "limel-input-field": HTMLLimelInputFieldElement;
         "limel-linear-progress": HTMLLimelLinearProgressElement;
         "limel-list": HTMLLimelListElement;
@@ -2293,6 +2335,48 @@ declare namespace LocalJSX {
          */
         "label"?: string;
     }
+    interface LimelInfoTile {
+        /**
+          * If supplied, the info tile will display a notification badge.
+         */
+        "badge"?: number | string;
+        /**
+          * Set to `true` if info tile is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Name of icon for the info tile.
+         */
+        "icon"?: string;
+        /**
+          * The text to show below the info tile. Long labels will be truncated.
+         */
+        "label"?: string;
+        /**
+          * If supplied, the info tile will be a clickable link.  Supplying a value also adds an elevated effect using a shadow, as well as `cursor: pointer`, which appears on hover. While we strongly recommend supplying a link whenever the component should act as a link, if this is not possible, and you need to provide interaction through a click handler, you can still get the correct styling by supplying a `Link` object with the `href` property set to `'#'`.
+         */
+        "link"?: Link;
+        /**
+          * Set to `true` to put the component in the `loading` state. This does _not_ disable the link. To do so, the `disabled` property should be set to `true` as well.
+         */
+        "loading"?: boolean;
+        /**
+          * A string of text that is visually placed before the value.
+         */
+        "prefix"?: string;
+        /**
+          * Properties of the optional circular progress bar.  Defaults: - `maxValue`: 100 - `suffix`: % - `percentageColors`: false  Colors change with intervals of 10 %.
+         */
+        "progress"?: InfoTileProgress;
+        /**
+          * A string of text that is visually placed after the value.
+         */
+        "suffix"?: string;
+        /**
+          * A piece of text or number that is the main piece of information which the component is intended to visualize.
+         */
+        "value"?: number | string;
+    }
     interface LimelInputField {
         /**
           * list of suggestions `value` can autocomplete to.
@@ -2720,10 +2804,6 @@ declare namespace LocalJSX {
           * Set to `true` if shortcut is disabled.
          */
         "disabled"?: boolean;
-        /**
-          * The url that the shortcut leads to.
-         */
-        "href"?: string;
         /**
           * Name of icon for the shortcut.
          */
@@ -2733,13 +2813,9 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * The `title` tag of the hyperlink, which can be used to provide additional information about the link. It improves accessibility both for sighted users and users with assistive technologies.
-         */
-        "linkTitle"?: string;
-        /**
-          * Where to load the linked URL, as the name for a browsing context: - `_self`: in the current browsing context. (Default) - `_blank`: in a new tab. - `_parent`: in the parent browsing context of the current one. If no parent, behaves as `_self`. - `_top`: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as `_self`.
+          * If supplied, the shortcut will be a clickable link.
          */
-        "target"?: '_self' | '_blank' | '_parent' | '_top';
+        "link"?: Link;
     }
     interface LimelSlider {
         /**
@@ -3046,6 +3122,7 @@ declare namespace LocalJSX {
         "limel-header": LimelHeader;
         "limel-icon": LimelIcon;
         "limel-icon-button": LimelIconButton;
+        "limel-info-tile": LimelInfoTile;
         "limel-input-field": LimelInputField;
         "limel-linear-progress": LimelLinearProgress;
         "limel-list": LimelList;
@@ -3100,6 +3177,7 @@ declare module "@stencil/core" {
             "limel-header": LocalJSX.LimelHeader & JSXBase.HTMLAttributes<HTMLLimelHeaderElement>;
             "limel-icon": LocalJSX.LimelIcon & JSXBase.HTMLAttributes<HTMLLimelIconElement>;
             "limel-icon-button": LocalJSX.LimelIconButton & JSXBase.HTMLAttributes<HTMLLimelIconButtonElement>;
+            "limel-info-tile": LocalJSX.LimelInfoTile & JSXBase.HTMLAttributes<HTMLLimelInfoTileElement>;
             "limel-input-field": LocalJSX.LimelInputField & JSXBase.HTMLAttributes<HTMLLimelInputFieldElement>;
             "limel-linear-progress": LocalJSX.LimelLinearProgress & JSXBase.HTMLAttributes<HTMLLimelLinearProgressElement>;
             "limel-list": LocalJSX.LimelList & JSXBase.HTMLAttributes<HTMLLimelListElement>;

package/dist/types/global/shared-types/link.types.d.ts

@@ -0,0 +1,25 @@
+export interface Link {
+  /**
+   * The url the link should point to.
+   */
+  href: string;
+  /**
+   * The text value to use for the link.
+   * Note that this might not be used by all components that use the
+   * Link interface.
+   */
+  text?: string;
+  /**
+   * Title for the link. Read by assistive tech and shown when the
+   * link is hovered. Can be used to provide additional information
+   * about the link. It improves accessibility both for sighted users
+   * and users of assistive technologies.
+   */
+  title?: string;
+  /**
+   * Target for the link. See
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target
+   * for more info.
+   */
+  target?: string;
+}

package/dist/types/interface.d.ts

@@ -1,4 +1,5 @@
 // Components interfaces
+export * from './global/shared-types/link.types';
 export * from './components/button/button.types';
 export * from './components/chip-set/chip.types';
 export * from './components/collapsible-section/action';
@@ -21,3 +22,4 @@ export * from './components/tab-bar/tab.types';
 export * from './components/tab-panel/tab-panel.types';
 export * from './components/table/table.types';
 export * from './components/dock/dock.types';
+export * from './components/info-tile/info-tile.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "36.1.0-dev.2",
+  "version": "36.1.0-dev.4",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -40,7 +40,7 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.2.0",
+    "@commitlint/config-conventional": "^17.3.0",
     "@popperjs/core": "^2.11.6",
     "@rjsf/core": "^2.4.2",
     "@stencil/core": "^2.19.2",
@@ -49,24 +49,24 @@
     "@types/html-escaper": "^3.0.0",
     "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.4",
-    "@types/puppeteer": "^5.4.4",
+    "@types/puppeteer": "^7.0.4",
     "@types/react": "^18.0.25",
     "@types/tabulator-tables": "^4.9.4",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.43.0",
     "ajv": "^6.12.6",
     "awesome-debounce-promise": "^2.1.0",
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
     "dayjs": "^1.11.6",
-    "eslint": "^8.27.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-ban": "^1.6.0",
     "eslint-plugin-jsdoc": "^39.6.2",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-sonarjs": "^0.16.0",
     "flatpickr": "^4.6.13",
     "html-escaper": "^3.0.3",
@@ -80,7 +80,7 @@
     "moment": "^2.29.4",
     "number-abbreviate": "^2.0.0",
     "prettier": "^2.7.1",
-    "puppeteer": "^19.2.0",
+    "puppeteer": "^19.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-shadow-dom-retarget-events": "^1.1.0",
@@ -89,7 +89,7 @@
     "showdown": "2.1.0",
     "shx": "^0.3.3",
     "tabulator-tables": "^4.9.3",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.3"
   },
   "keywords": [
     "lime elements",

package/dist/cjs/limel-circular-progress.cjs.entry.js

@@ -1,39 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-287e25e0.js');
-const format = require('./format-c0047dfb.js');
-require('./_commonjsHelpers-0c557e26.js');
-
-const circularProgressCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      var(--lime-text-primary-on-background-color)\n  )}:host{display:block;box-sizing:border-box;isolation:isolate}:host([size=x-small]){--circular-progress-size:1.5rem;font-weight:bold}:host([size=small]){--circular-progress-size:2rem;font-weight:bold}:host([size=medium]){--circular-progress-size:3rem}:host([size=large]){--circular-progress-size:4rem}:host([size=x-large]){--circular-progress-size:5rem}.lime-circular-progress{--size:var(--circular-progress-size, 3rem);--fill-color:var(--circular-progress-fill-color, var(--mdc-theme-primary));--track-color:var(\n      --circular-progress-track-color,\n      rgb(var(--contrast-400))\n  );position:relative;display:flex;align-items:center;justify-content:center;width:var(--size);height:var(--size);border-radius:50%;line-height:normal;box-shadow:0 0 0 0.125rem rgb(var(--contrast-100), 0.7);background:conic-gradient(var(--fill-color) 0% var(--percentage), var(--track-color) var(--percentage) 100%)}.lime-circular-progress:before{content:\"\";position:absolute;width:calc(var(--size) * 0.75 + 0.25rem);height:calc(var(--size) * 0.75 + 0.25rem);border-radius:50%;background-color:var(--circular-progress-background-color, rgb(var(--contrast-100)));box-shadow:var(--button-shadow-pressed)}.prefix{font-size:clamp(0.5rem, var(--size) * 0.16, 2.25rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;color:var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));width:45%;top:20%;position:absolute}.value{display:flex;font-size:clamp(0.5rem, var(--size) * 0.25, 4rem);color:var(--circular-progress-text-color, rgb(var(--contrast-1200)));z-index:1;cursor:default}.suffix{font-size:clamp(0.5rem, var(--size) * 0.18, 2.5rem);color:var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));padding-top:4%}.displays-percentage-colors[style^=\"--percentage:1\"]{--circular-progress-fill-color:var(--color-percent--10to20)}.displays-percentage-colors[style^=\"--percentage:2\"]{--circular-progress-fill-color:var(--color-percent--20to30)}.displays-percentage-colors[style^=\"--percentage:3\"]{--circular-progress-fill-color:var(--color-percent--30to40)}.displays-percentage-colors[style^=\"--percentage:4\"]{--circular-progress-fill-color:var(--color-percent--40to50)}.displays-percentage-colors[style^=\"--percentage:5\"]{--circular-progress-fill-color:var(--color-percent--50to60)}.displays-percentage-colors[style^=\"--percentage:6\"]{--circular-progress-fill-color:var(--color-percent--60to70)}.displays-percentage-colors[style^=\"--percentage:7\"]{--circular-progress-fill-color:var(--color-percent--70to80)}.displays-percentage-colors[style^=\"--percentage:8\"]{--circular-progress-fill-color:var(--color-percent--80to90)}.displays-percentage-colors[style^=\"--percentage:9\"],.displays-percentage-colors[style=\"--percentage:100%;\"]{--circular-progress-fill-color:var(--color-percent--90to100)}.displays-percentage-colors[style=\"--percentage:1%;\"],.displays-percentage-colors[style=\"--percentage:2%;\"],.displays-percentage-colors[style=\"--percentage:3%;\"],.displays-percentage-colors[style=\"--percentage:4%;\"],.displays-percentage-colors[style=\"--percentage:5%;\"],.displays-percentage-colors[style=\"--percentage:6%;\"],.displays-percentage-colors[style=\"--percentage:7%;\"],.displays-percentage-colors[style=\"--percentage:8%;\"],.displays-percentage-colors[style=\"--percentage:9%;\"]{--circular-progress-fill-color:var(--color-percent--0to10)}";
-
-const PERCENT = 100;
-const CircularProgress = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.renderPrefix = () => {
-      if (this.prefix) {
-        return index.h("span", { class: "prefix" }, this.prefix);
-      }
-    };
-    this.value = 0;
-    this.maxValue = PERCENT;
-    this.prefix = null;
-    this.suffix = '%';
-    this.displayPercentageColors = false;
-    this.size = undefined;
-  }
-  render() {
-    const classList = {
-      'lime-circular-progress': true,
-      'displays-percentage-colors': this.displayPercentageColors,
-    };
-    const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
-    const value = Math.round(this.value * 10) / 10; // eslint-disable-line no-magic-numbers
-    return (index.h("div", { role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, this.renderPrefix(), index.h("span", { class: "value" }, format.abbreviate(value), index.h("span", { class: "suffix" }, this.suffix))));
-  }
-};
-CircularProgress.style = circularProgressCss;
-
-exports.limel_circular_progress = CircularProgress;

package/dist/esm/limel-circular-progress.entry.js

@@ -1,35 +0,0 @@
-import { r as registerInstance, h } from './index-cdfd351d.js';
-import { a as abbreviate } from './format-a0e2d949.js';
-import './_commonjsHelpers-5ec8f9b7.js';
-
-const circularProgressCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      var(--lime-text-primary-on-background-color)\n  )}:host{display:block;box-sizing:border-box;isolation:isolate}:host([size=x-small]){--circular-progress-size:1.5rem;font-weight:bold}:host([size=small]){--circular-progress-size:2rem;font-weight:bold}:host([size=medium]){--circular-progress-size:3rem}:host([size=large]){--circular-progress-size:4rem}:host([size=x-large]){--circular-progress-size:5rem}.lime-circular-progress{--size:var(--circular-progress-size, 3rem);--fill-color:var(--circular-progress-fill-color, var(--mdc-theme-primary));--track-color:var(\n      --circular-progress-track-color,\n      rgb(var(--contrast-400))\n  );position:relative;display:flex;align-items:center;justify-content:center;width:var(--size);height:var(--size);border-radius:50%;line-height:normal;box-shadow:0 0 0 0.125rem rgb(var(--contrast-100), 0.7);background:conic-gradient(var(--fill-color) 0% var(--percentage), var(--track-color) var(--percentage) 100%)}.lime-circular-progress:before{content:\"\";position:absolute;width:calc(var(--size) * 0.75 + 0.25rem);height:calc(var(--size) * 0.75 + 0.25rem);border-radius:50%;background-color:var(--circular-progress-background-color, rgb(var(--contrast-100)));box-shadow:var(--button-shadow-pressed)}.prefix{font-size:clamp(0.5rem, var(--size) * 0.16, 2.25rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;color:var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));width:45%;top:20%;position:absolute}.value{display:flex;font-size:clamp(0.5rem, var(--size) * 0.25, 4rem);color:var(--circular-progress-text-color, rgb(var(--contrast-1200)));z-index:1;cursor:default}.suffix{font-size:clamp(0.5rem, var(--size) * 0.18, 2.5rem);color:var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));padding-top:4%}.displays-percentage-colors[style^=\"--percentage:1\"]{--circular-progress-fill-color:var(--color-percent--10to20)}.displays-percentage-colors[style^=\"--percentage:2\"]{--circular-progress-fill-color:var(--color-percent--20to30)}.displays-percentage-colors[style^=\"--percentage:3\"]{--circular-progress-fill-color:var(--color-percent--30to40)}.displays-percentage-colors[style^=\"--percentage:4\"]{--circular-progress-fill-color:var(--color-percent--40to50)}.displays-percentage-colors[style^=\"--percentage:5\"]{--circular-progress-fill-color:var(--color-percent--50to60)}.displays-percentage-colors[style^=\"--percentage:6\"]{--circular-progress-fill-color:var(--color-percent--60to70)}.displays-percentage-colors[style^=\"--percentage:7\"]{--circular-progress-fill-color:var(--color-percent--70to80)}.displays-percentage-colors[style^=\"--percentage:8\"]{--circular-progress-fill-color:var(--color-percent--80to90)}.displays-percentage-colors[style^=\"--percentage:9\"],.displays-percentage-colors[style=\"--percentage:100%;\"]{--circular-progress-fill-color:var(--color-percent--90to100)}.displays-percentage-colors[style=\"--percentage:1%;\"],.displays-percentage-colors[style=\"--percentage:2%;\"],.displays-percentage-colors[style=\"--percentage:3%;\"],.displays-percentage-colors[style=\"--percentage:4%;\"],.displays-percentage-colors[style=\"--percentage:5%;\"],.displays-percentage-colors[style=\"--percentage:6%;\"],.displays-percentage-colors[style=\"--percentage:7%;\"],.displays-percentage-colors[style=\"--percentage:8%;\"],.displays-percentage-colors[style=\"--percentage:9%;\"]{--circular-progress-fill-color:var(--color-percent--0to10)}";
-
-const PERCENT = 100;
-const CircularProgress = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.renderPrefix = () => {
-      if (this.prefix) {
-        return h("span", { class: "prefix" }, this.prefix);
-      }
-    };
-    this.value = 0;
-    this.maxValue = PERCENT;
-    this.prefix = null;
-    this.suffix = '%';
-    this.displayPercentageColors = false;
-    this.size = undefined;
-  }
-  render() {
-    const classList = {
-      'lime-circular-progress': true,
-      'displays-percentage-colors': this.displayPercentageColors,
-    };
-    const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
-    const value = Math.round(this.value * 10) / 10; // eslint-disable-line no-magic-numbers
-    return (h("div", { role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, this.renderPrefix(), h("span", { class: "value" }, abbreviate(value), h("span", { class: "suffix" }, this.suffix))));
-  }
-};
-CircularProgress.style = circularProgressCss;
-
-export { CircularProgress as limel_circular_progress };