@limetech/lime-elements 33.13.0-next.2 → 33.13.0-next.6

package/dist/lime-elements/p-eb81fc35.entry.js

@@ -0,0 +1 @@
+import{r,h as o}from"./p-fabb836f.js";import{a}from"./p-f08f504b.js";import"./p-eab67c09.js";const n=class{constructor(o){r(this,o)}render(){return o("div",{class:"badge-container"},a(this.label))}};n.style=":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}:host([hidden]){display:none}*{box-sizing:border-box}.badge-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif);display:inline-block;font-size:0.6875rem;min-width:1.25rem;height:1.25rem;border-radius:1.25rem;line-height:1.25rem;text-align:center;background-color:var(--badge-background-color, rgb(var(--contrast-500)));color:var(--badge-text-color, rgb(var(--contrast-1200)));padding:0 0.3125rem;margin-left:0.25rem}";export{n as limel_badge}

package/dist/lime-elements/p-f08f504b.js

@@ -0,0 +1 @@
+import{c as t,a as n}from"./p-eab67c09.js";var r=t((function(t){!function(n){function r(){var t;if(!(this instanceof r)){var n=arguments[0],a=arguments[1],i=new r(t=arguments[2]);return i.abbreviate(n,a)}this.units=null==(t=arguments[0])?["k","m","b","t"]:t}r.prototype._abbreviate=function(t,n){n=Math.pow(10,n);for(var r=this.units.length-1;r>=0;r--){var a=Math.pow(10,3*(r+1));if(a<=t){1e3==(t=Math.round(t*n/a)/n)&&r<this.units.length-1&&(t=1,r++),t+=this.units[r];break}}return t},r.prototype.abbreviate=function(t,n){var r=t<0,a=this._abbreviate(Math.abs(t),n||0);return r?"-"+a:a},t.exports?t.exports=r:n.NumberAbbreviate=r}(n)}));function a(t){return"number"!=typeof t?"":new r(["k","M","B","T"]).abbreviate(t,1)}export{a}

package/dist/lime-elements/style/internal/shared_input-select-picker.scss

@@ -62,7 +62,10 @@ $cropped-label-hack--font-size: 0.875rem; //14px
 @mixin cropped-label-hack {
     // Some font size applied to `label--float-above` causes the labels to get cut off
     // when an empty field gets focused
-    .mdc-text-field--outlined.mdc-notched-outline--upgraded.mdc-text-field--textarea,
+    .mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-notched-outline--upgraded,
+    .mdc-text-field--outlined.mdc-text-field--with-leading-icon
+        .mdc-notched-outline--upgraded,
+    .mdc-text-field--outlined.mdc-text-field--textarea.mdc-notched-outline--upgraded,
     .mdc-text-field--outlined.mdc-text-field--textarea
         .mdc-notched-outline--upgraded,
     .mdc-text-field--outlined.mdc-notched-outline--upgraded,

package/dist/lime-elements/style/internal/z-index.scss

@@ -15,3 +15,4 @@ $button-group-radio-button-keyboard-focused: 1 !default;
 $list-mdc-list-item: 0 !default;
 $limel-progress-flow-step-content: 2 !default;
 $limel-progress-flow-divider: 1 !default;
+$limel-circular-progress-value: 1 !default;

package/dist/types/components/circular-progress/circular-progress.d.ts

@@ -0,0 +1,48 @@
+import { CircularProgressSize } from './circular-progress.types';
+/**
+ * The circular progress component can be used to visualize the curent state of
+ * a progress in a scale; for example percentage of completion of a task.
+ *
+ * Its compact UI makes the component suitable when there is not enough screen
+ * space available to visualise such information.
+ *
+ * This component allows you to define your scale, from `0` to a desired
+ * `maxValue`; and also lets you chose a proper `suffix` for your scale.
+ *
+ * :::note
+ * The component will round up the value when it is displayed, and only shows
+ * one decimal digit.
+ * It also abbreviates large numbers. For example 1234 will be displayed as 1.2k.
+ * Of course such numbers, if bigger than `maxValue` will be visualized as a
+ * full progress.
+ * :::
+ *
+ * @exampleComponent limel-example-circular-progress
+ * @exampleComponent limel-example-circular-progress-sizes
+ * @exampleComponent limel-example-circular-progress-props
+ * @exampleComponent limel-example-circular-progress-css-variables
+ * @exampleComponent limel-example-circular-progress-percentage-colors
+ */
+export declare class CircularProgress {
+  /**
+   * The value of the progress bar.
+   */
+  value: number;
+  /**
+   * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
+   */
+  maxValue: number;
+  /**
+   * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
+   */
+  suffix: string;
+  /**
+   * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
+   */
+  displayPercentageColors: boolean;
+  /**
+   * Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified.
+   */
+  size: CircularProgressSize;
+  render(): any;
+}

package/dist/types/components/circular-progress/circular-progress.types.d.ts

@@ -0,0 +1 @@
+export declare type CircularProgressSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';

package/dist/types/components.d.ts

@@ -7,6 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Button } from "./components/button/button.types";
 import { Action as Action1, Chip, DateType, DialogHeading, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, IconSize as IconSize1, Languages, ListItem, ListSeparator, ListType, 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 { ValidationStatus } from "./components/form/form.types";
@@ -170,6 +171,28 @@ export namespace Components {
          */
         "value": Chip[];
     }
+    interface LimelCircularProgress {
+        /**
+          * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
+         */
+        "displayPercentageColors": boolean;
+        /**
+          * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
+         */
+        "maxValue": number;
+        /**
+          * Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified.
+         */
+        "size": CircularProgressSize;
+        /**
+          * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
+         */
+        "suffix": string;
+        /**
+          * The value of the progress bar.
+         */
+        "value": number;
+    }
     interface LimelCodeEditor {
         /**
           * Select color scheme for the editor
@@ -942,6 +965,12 @@ declare global {
         prototype: HTMLLimelChipSetElement;
         new (): HTMLLimelChipSetElement;
     };
+    interface HTMLLimelCircularProgressElement extends Components.LimelCircularProgress, HTMLStencilElement {
+    }
+    var HTMLLimelCircularProgressElement: {
+        prototype: HTMLLimelCircularProgressElement;
+        new (): HTMLLimelCircularProgressElement;
+    };
     interface HTMLLimelCodeEditorElement extends Components.LimelCodeEditor, HTMLStencilElement {
     }
     var HTMLLimelCodeEditorElement: {
@@ -1141,6 +1170,7 @@ declare global {
         "limel-button-group": HTMLLimelButtonGroupElement;
         "limel-checkbox": HTMLLimelCheckboxElement;
         "limel-chip-set": HTMLLimelChipSetElement;
+        "limel-circular-progress": HTMLLimelCircularProgressElement;
         "limel-code-editor": HTMLLimelCodeEditorElement;
         "limel-collapsible-section": HTMLLimelCollapsibleSectionElement;
         "limel-config": HTMLLimelConfigElement;
@@ -1332,6 +1362,28 @@ declare namespace LocalJSX {
          */
         "value"?: Chip[];
     }
+    interface LimelCircularProgress {
+        /**
+          * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
+         */
+        "displayPercentageColors"?: boolean;
+        /**
+          * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
+         */
+        "maxValue"?: number;
+        /**
+          * Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified.
+         */
+        "size"?: CircularProgressSize;
+        /**
+          * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
+         */
+        "suffix"?: string;
+        /**
+          * The value of the progress bar.
+         */
+        "value"?: number;
+    }
     interface LimelCodeEditor {
         /**
           * Select color scheme for the editor
@@ -2213,6 +2265,7 @@ declare namespace LocalJSX {
         "limel-button-group": LimelButtonGroup;
         "limel-checkbox": LimelCheckbox;
         "limel-chip-set": LimelChipSet;
+        "limel-circular-progress": LimelCircularProgress;
         "limel-code-editor": LimelCodeEditor;
         "limel-collapsible-section": LimelCollapsibleSection;
         "limel-config": LimelConfig;
@@ -2257,6 +2310,7 @@ declare module "@stencil/core" {
             "limel-button-group": LocalJSX.LimelButtonGroup & JSXBase.HTMLAttributes<HTMLLimelButtonGroupElement>;
             "limel-checkbox": LocalJSX.LimelCheckbox & JSXBase.HTMLAttributes<HTMLLimelCheckboxElement>;
             "limel-chip-set": LocalJSX.LimelChipSet & JSXBase.HTMLAttributes<HTMLLimelChipSetElement>;
+            "limel-circular-progress": LocalJSX.LimelCircularProgress & JSXBase.HTMLAttributes<HTMLLimelCircularProgressElement>;
             "limel-code-editor": LocalJSX.LimelCodeEditor & JSXBase.HTMLAttributes<HTMLLimelCodeEditorElement>;
             "limel-collapsible-section": LocalJSX.LimelCollapsibleSection & JSXBase.HTMLAttributes<HTMLLimelCollapsibleSectionElement>;
             "limel-config": LocalJSX.LimelConfig & JSXBase.HTMLAttributes<HTMLLimelConfigElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "33.13.0-next.2",
+  "version": "33.13.0-next.6",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-52db6af8.entry.js

@@ -1 +0,0 @@
-import{r,h as o}from"./p-fabb836f.js";import{c as a,a as n}from"./p-eab67c09.js";var e=a((function(r){!function(o){function a(){var r;if(!(this instanceof a)){var o=arguments[0],n=arguments[1],e=new a(r=arguments[2]);return e.abbreviate(o,n)}this.units=null==(r=arguments[0])?["k","m","b","t"]:r}a.prototype._abbreviate=function(r,o){o=Math.pow(10,o);for(var a=this.units.length-1;a>=0;a--){var n=Math.pow(10,3*(a+1));if(n<=r){1e3==(r=Math.round(r*o/n)/o)&&a<this.units.length-1&&(r=1,a++),r+=this.units[a];break}}return r},a.prototype.abbreviate=function(r,o){var a=r<0,n=this._abbreviate(Math.abs(r),o||0);return a?"-"+n:n},r.exports?r.exports=a:o.NumberAbbreviate=a}(n)}));const t=class{constructor(o){r(this,o)}render(){return o("div",{class:"badge-container"},"number"!=typeof(r=this.label)?"":new e(["k","M","B","T"]).abbreviate(r,1));var r}};t.style=":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}:host([hidden]){display:none}*{box-sizing:border-box}.badge-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif);display:inline-block;font-size:0.6875rem;min-width:1.25rem;height:1.25rem;border-radius:1.25rem;line-height:1.25rem;text-align:center;background-color:var(--badge-background-color, rgb(var(--contrast-500)));color:var(--badge-text-color, rgb(var(--contrast-1200)));padding:0 0.3125rem;margin-left:0.25rem}";export{t as limel_badge}