@limetech/lime-elements 37.67.0 → 37.68.0

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 { ChartItem } from "./components/chart/chart.types";
 import { Label, LabelValue } from "./components/dynamic-label/label.types";
 import { Icon } from "./global/shared-types/icon.types";
 import { Image } from "./global/shared-types/image.types";
@@ -53,6 +54,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 { ChartItem } from "./components/chart/chart.types";
 export { Label, LabelValue } from "./components/dynamic-label/label.types";
 export { Icon } from "./global/shared-types/icon.types";
 export { Image } from "./global/shared-types/image.types";
@@ -349,6 +351,77 @@ export namespace Components {
          */
         "type"?: CalloutType;
     }
+    /**
+     * A chart is a graphical representation of data, in which
+     * visual symbols such as such bars, dots, lines, or slices, represent
+     * each data point, in comparison to others.
+     * @exampleComponent limel-example-chart-stacked-bar
+     * @exampleComponent limel-example-chart-orientation
+     * @exampleComponent limel-example-chart-max-value
+     * @exampleComponent limel-example-chart-type-bar
+     * @exampleComponent limel-example-chart-type-dot
+     * @exampleComponent limel-example-chart-type-area
+     * @exampleComponent limel-example-chart-type-line
+     * @exampleComponent limel-example-chart-type-pie
+     * @exampleComponent limel-example-chart-type-doughnut
+     * @exampleComponent limel-example-chart-type-ring
+     * @exampleComponent limel-example-chart-type-gantt
+     * @exampleComponent limel-example-chart-type-nps
+     * @exampleComponent limel-example-chart-multi-axis
+     * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values
+     * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values
+     * @exampleComponent limel-example-chart-axis-increment
+     * @exampleComponent limel-example-chart-accessibility
+     * @exampleComponent limel-example-chart-styling
+     * @exampleComponent limel-example-chart-creative-styling
+     * @beta 
+     */
+    interface LimelChart {
+        /**
+          * Helps users of assistive technologies to understand what the items in the chart represent.
+         */
+        "accessibleItemsLabel"?: string;
+        /**
+          * Helps users of assistive technologies to understand the context of the chart, and what is being displayed.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * Specifies the increment for the axis lines.
+         */
+        "axisIncrement"?: number;
+        /**
+          * List of items in the chart, each representing a data point.
+         */
+        "items": ChartItem[];
+        /**
+          * Defines the language for translations. Will translate the translatable strings on the components.
+         */
+        "language": Languages;
+        /**
+          * Indicates whether the chart is in a loading state.
+         */
+        "loading": boolean;
+        /**
+          * Specifies the range that items' values could be in. This is used in calculation of the size of the items in the chart. When not provided, the sum of all values in the items will be considered as the range.
+         */
+        "maxValue"?: number;
+        /**
+          * Defines whether the chart is intended to be displayed wide or tall. Does not have any effect on chart types which generate circular forms.
+         */
+        "orientation"?: 'landscape' | 'portrait';
+        /**
+          * Defines how items are visualized in the chart.
+         */
+        "type"?: | 'area'
+        | 'bar'
+        | 'doughnut'
+        | 'line'
+        | 'nps'
+        | 'pie'
+        | 'ring'
+        | 'dot'
+        | 'stacked-bar';
+    }
     /**
      * 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
@@ -3093,6 +3166,37 @@ declare global {
         prototype: HTMLLimelCalloutElement;
         new (): HTMLLimelCalloutElement;
     };
+    /**
+     * A chart is a graphical representation of data, in which
+     * visual symbols such as such bars, dots, lines, or slices, represent
+     * each data point, in comparison to others.
+     * @exampleComponent limel-example-chart-stacked-bar
+     * @exampleComponent limel-example-chart-orientation
+     * @exampleComponent limel-example-chart-max-value
+     * @exampleComponent limel-example-chart-type-bar
+     * @exampleComponent limel-example-chart-type-dot
+     * @exampleComponent limel-example-chart-type-area
+     * @exampleComponent limel-example-chart-type-line
+     * @exampleComponent limel-example-chart-type-pie
+     * @exampleComponent limel-example-chart-type-doughnut
+     * @exampleComponent limel-example-chart-type-ring
+     * @exampleComponent limel-example-chart-type-gantt
+     * @exampleComponent limel-example-chart-type-nps
+     * @exampleComponent limel-example-chart-multi-axis
+     * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values
+     * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values
+     * @exampleComponent limel-example-chart-axis-increment
+     * @exampleComponent limel-example-chart-accessibility
+     * @exampleComponent limel-example-chart-styling
+     * @exampleComponent limel-example-chart-creative-styling
+     * @beta 
+     */
+    interface HTMLLimelChartElement extends Components.LimelChart, HTMLStencilElement {
+    }
+    var HTMLLimelChartElement: {
+        prototype: HTMLLimelChartElement;
+        new (): HTMLLimelChartElement;
+    };
     /**
      * 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
@@ -4289,6 +4393,7 @@ declare global {
         "limel-button": HTMLLimelButtonElement;
         "limel-button-group": HTMLLimelButtonGroupElement;
         "limel-callout": HTMLLimelCalloutElement;
+        "limel-chart": HTMLLimelChartElement;
         "limel-checkbox": HTMLLimelCheckboxElement;
         "limel-chip": HTMLLimelChipElement;
         "limel-chip-set": HTMLLimelChipSetElement;
@@ -4625,6 +4730,77 @@ declare namespace LocalJSX {
          */
         "type"?: CalloutType;
     }
+    /**
+     * A chart is a graphical representation of data, in which
+     * visual symbols such as such bars, dots, lines, or slices, represent
+     * each data point, in comparison to others.
+     * @exampleComponent limel-example-chart-stacked-bar
+     * @exampleComponent limel-example-chart-orientation
+     * @exampleComponent limel-example-chart-max-value
+     * @exampleComponent limel-example-chart-type-bar
+     * @exampleComponent limel-example-chart-type-dot
+     * @exampleComponent limel-example-chart-type-area
+     * @exampleComponent limel-example-chart-type-line
+     * @exampleComponent limel-example-chart-type-pie
+     * @exampleComponent limel-example-chart-type-doughnut
+     * @exampleComponent limel-example-chart-type-ring
+     * @exampleComponent limel-example-chart-type-gantt
+     * @exampleComponent limel-example-chart-type-nps
+     * @exampleComponent limel-example-chart-multi-axis
+     * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values
+     * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values
+     * @exampleComponent limel-example-chart-axis-increment
+     * @exampleComponent limel-example-chart-accessibility
+     * @exampleComponent limel-example-chart-styling
+     * @exampleComponent limel-example-chart-creative-styling
+     * @beta 
+     */
+    interface LimelChart {
+        /**
+          * Helps users of assistive technologies to understand what the items in the chart represent.
+         */
+        "accessibleItemsLabel"?: string;
+        /**
+          * Helps users of assistive technologies to understand the context of the chart, and what is being displayed.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * Specifies the increment for the axis lines.
+         */
+        "axisIncrement"?: number;
+        /**
+          * List of items in the chart, each representing a data point.
+         */
+        "items": ChartItem[];
+        /**
+          * Defines the language for translations. Will translate the translatable strings on the components.
+         */
+        "language"?: Languages;
+        /**
+          * Indicates whether the chart is in a loading state.
+         */
+        "loading"?: boolean;
+        /**
+          * Specifies the range that items' values could be in. This is used in calculation of the size of the items in the chart. When not provided, the sum of all values in the items will be considered as the range.
+         */
+        "maxValue"?: number;
+        /**
+          * Defines whether the chart is intended to be displayed wide or tall. Does not have any effect on chart types which generate circular forms.
+         */
+        "orientation"?: 'landscape' | 'portrait';
+        /**
+          * Defines how items are visualized in the chart.
+         */
+        "type"?: | 'area'
+        | 'bar'
+        | 'doughnut'
+        | 'line'
+        | 'nps'
+        | 'pie'
+        | 'ring'
+        | 'dot'
+        | 'stacked-bar';
+    }
     /**
      * 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
@@ -7290,6 +7466,7 @@ declare namespace LocalJSX {
         "limel-button": LimelButton;
         "limel-button-group": LimelButtonGroup;
         "limel-callout": LimelCallout;
+        "limel-chart": LimelChart;
         "limel-checkbox": LimelCheckbox;
         "limel-chip": LimelChip;
         "limel-chip-set": LimelChipSet;
@@ -7489,6 +7666,32 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-callout-composite
              */
             "limel-callout": LocalJSX.LimelCallout & JSXBase.HTMLAttributes<HTMLLimelCalloutElement>;
+            /**
+             * A chart is a graphical representation of data, in which
+             * visual symbols such as such bars, dots, lines, or slices, represent
+             * each data point, in comparison to others.
+             * @exampleComponent limel-example-chart-stacked-bar
+             * @exampleComponent limel-example-chart-orientation
+             * @exampleComponent limel-example-chart-max-value
+             * @exampleComponent limel-example-chart-type-bar
+             * @exampleComponent limel-example-chart-type-dot
+             * @exampleComponent limel-example-chart-type-area
+             * @exampleComponent limel-example-chart-type-line
+             * @exampleComponent limel-example-chart-type-pie
+             * @exampleComponent limel-example-chart-type-doughnut
+             * @exampleComponent limel-example-chart-type-ring
+             * @exampleComponent limel-example-chart-type-gantt
+             * @exampleComponent limel-example-chart-type-nps
+             * @exampleComponent limel-example-chart-multi-axis
+             * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values
+             * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values
+             * @exampleComponent limel-example-chart-axis-increment
+             * @exampleComponent limel-example-chart-accessibility
+             * @exampleComponent limel-example-chart-styling
+             * @exampleComponent limel-example-chart-creative-styling
+             * @beta 
+             */
+            "limel-chart": LocalJSX.LimelChart & JSXBase.HTMLAttributes<HTMLLimelChartElement>;
             /**
              * 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

package/dist/types/translations/da.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   save: string;
   cancel: string;
   loading: string;
+  value: string;
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;

package/dist/types/translations/de.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   save: string;
   cancel: string;
   loading: string;
+  value: string;
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;

package/dist/types/translations/en.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   save: string;
   cancel: string;
   loading: string;
+  value: string;
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;

package/dist/types/translations/fi.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   save: string;
   canceL: string;
   loading: string;
+  value: string;
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;

package/dist/types/translations/fr.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   save: string;
   cancel: string;
   loading: string;
+  value: string;
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;

package/dist/types/translations/nl.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   save: string;
   cancel: string;
   loading: string;
+  value: string;
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;

package/dist/types/translations/no.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   save: string;
   cancel: string;
   loading: string;
+  value: string;
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;

package/dist/types/translations/sv.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   save: string;
   cancel: string;
   loading: string;
+  value: string;
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.67.0",
+  "version": "37.68.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",