@limetech/lime-elements 37.67.0 → 37.69.0

package/dist/types/components.d.ts

@@ -12,9 +12,11 @@ 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 { Image } from "./global/shared-types/image.types";
+import { Icon } from "./global/shared-types/icon.types";
+import { ListSeparator as ListSeparator1 } from "./global/shared-types/separator.types";
+import { ChartItem } from "./components/chart/chart.types";
+import { Label, LabelValue } from "./components/dynamic-label/label.types";
 import { Link } from "./global/shared-types/link.types";
 import { Chip, ChipType } from "./components/chip-set/chip.types";
 import { MenuItem as MenuItem1 } from "./components";
@@ -53,9 +55,11 @@ 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 { Image } from "./global/shared-types/image.types";
+export { Icon } from "./global/shared-types/icon.types";
+export { ListSeparator as ListSeparator1 } from "./global/shared-types/separator.types";
+export { ChartItem } from "./components/chart/chart.types";
+export { Label, LabelValue } from "./components/dynamic-label/label.types";
 export { Link } from "./global/shared-types/link.types";
 export { Chip, ChipType } from "./components/chip-set/chip.types";
 export { MenuItem as MenuItem1 } from "./components";
@@ -349,6 +353,124 @@ export namespace Components {
          */
         "type"?: CalloutType;
     }
+    /**
+     * Card is a component that displays content about a single topic,
+     * in a structured way. It can contain a header, and some supporting media such
+     * as an image or an icon, a body of text, or optional actions.
+     * @exampleComponent limel-example-card-basic
+     * @exampleComponent limel-example-card-image
+     * @exampleComponent limel-example-card-actions
+     * @exampleComponent limel-example-card-clickable
+     * @exampleComponent limel-example-card-orientation
+     * @exampleComponent limel-example-card-slot
+     * @exampleComponent limel-example-card-styling
+     * @beta 
+     */
+    interface LimelCard {
+        /**
+          * Actions to display in the card, to provide the user with options to interact with the content.
+         */
+        "actions"?: Array<ActionBarItem | ListSeparator1>;
+        /**
+          * When true, improve the accessibility of the component and hints the user that the card can be interacted width.
+         */
+        "clickable": boolean;
+        /**
+          * Heading of the card, to provide a short title about the context.
+         */
+        "heading"?: string;
+        /**
+          * An icon, to display along with the heading and subheading.
+         */
+        "icon"?: string | Icon;
+        /**
+          * A hero image to display in the card, to enrich the content with visual information.
+         */
+        "image"?: Image;
+        /**
+          * The orientation of the card, specially useful when the card has an image.
+         */
+        "orientation": 'landscape' | 'portrait';
+        /**
+          * Subheading of the card to provide a short description of the context.
+         */
+        "subheading"?: string;
+        /**
+          * The content of the card. Supports markdown, to provide a rich text experience.
+         */
+        "value"?: string;
+    }
+    /**
+     * 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
@@ -2763,6 +2885,10 @@ export interface LimelButtonGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelButtonGroupElement;
 }
+export interface LimelCardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLimelCardElement;
+}
 export interface LimelCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelCheckboxElement;
@@ -3093,6 +3219,56 @@ declare global {
         prototype: HTMLLimelCalloutElement;
         new (): HTMLLimelCalloutElement;
     };
+    /**
+     * Card is a component that displays content about a single topic,
+     * in a structured way. It can contain a header, and some supporting media such
+     * as an image or an icon, a body of text, or optional actions.
+     * @exampleComponent limel-example-card-basic
+     * @exampleComponent limel-example-card-image
+     * @exampleComponent limel-example-card-actions
+     * @exampleComponent limel-example-card-clickable
+     * @exampleComponent limel-example-card-orientation
+     * @exampleComponent limel-example-card-slot
+     * @exampleComponent limel-example-card-styling
+     * @beta 
+     */
+    interface HTMLLimelCardElement extends Components.LimelCard, HTMLStencilElement {
+    }
+    var HTMLLimelCardElement: {
+        prototype: HTMLLimelCardElement;
+        new (): HTMLLimelCardElement;
+    };
+    /**
+     * 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 +4465,8 @@ declare global {
         "limel-button": HTMLLimelButtonElement;
         "limel-button-group": HTMLLimelButtonGroupElement;
         "limel-callout": HTMLLimelCalloutElement;
+        "limel-card": HTMLLimelCardElement;
+        "limel-chart": HTMLLimelChartElement;
         "limel-checkbox": HTMLLimelCheckboxElement;
         "limel-chip": HTMLLimelChipElement;
         "limel-chip-set": HTMLLimelChipSetElement;
@@ -4625,6 +4803,128 @@ declare namespace LocalJSX {
          */
         "type"?: CalloutType;
     }
+    /**
+     * Card is a component that displays content about a single topic,
+     * in a structured way. It can contain a header, and some supporting media such
+     * as an image or an icon, a body of text, or optional actions.
+     * @exampleComponent limel-example-card-basic
+     * @exampleComponent limel-example-card-image
+     * @exampleComponent limel-example-card-actions
+     * @exampleComponent limel-example-card-clickable
+     * @exampleComponent limel-example-card-orientation
+     * @exampleComponent limel-example-card-slot
+     * @exampleComponent limel-example-card-styling
+     * @beta 
+     */
+    interface LimelCard {
+        /**
+          * Actions to display in the card, to provide the user with options to interact with the content.
+         */
+        "actions"?: Array<ActionBarItem | ListSeparator1>;
+        /**
+          * When true, improve the accessibility of the component and hints the user that the card can be interacted width.
+         */
+        "clickable"?: boolean;
+        /**
+          * Heading of the card, to provide a short title about the context.
+         */
+        "heading"?: string;
+        /**
+          * An icon, to display along with the heading and subheading.
+         */
+        "icon"?: string | Icon;
+        /**
+          * A hero image to display in the card, to enrich the content with visual information.
+         */
+        "image"?: Image;
+        /**
+          * Fired when a action bar item has been clicked.
+         */
+        "onActionSelected"?: (event: LimelCardCustomEvent<ActionBarItem>) => void;
+        /**
+          * The orientation of the card, specially useful when the card has an image.
+         */
+        "orientation"?: 'landscape' | 'portrait';
+        /**
+          * Subheading of the card to provide a short description of the context.
+         */
+        "subheading"?: string;
+        /**
+          * The content of the card. Supports markdown, to provide a rich text experience.
+         */
+        "value"?: string;
+    }
+    /**
+     * 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 +7590,8 @@ declare namespace LocalJSX {
         "limel-button": LimelButton;
         "limel-button-group": LimelButtonGroup;
         "limel-callout": LimelCallout;
+        "limel-card": LimelCard;
+        "limel-chart": LimelChart;
         "limel-checkbox": LimelCheckbox;
         "limel-chip": LimelChip;
         "limel-chip-set": LimelChipSet;
@@ -7489,6 +7791,46 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-callout-composite
              */
             "limel-callout": LocalJSX.LimelCallout & JSXBase.HTMLAttributes<HTMLLimelCalloutElement>;
+            /**
+             * Card is a component that displays content about a single topic,
+             * in a structured way. It can contain a header, and some supporting media such
+             * as an image or an icon, a body of text, or optional actions.
+             * @exampleComponent limel-example-card-basic
+             * @exampleComponent limel-example-card-image
+             * @exampleComponent limel-example-card-actions
+             * @exampleComponent limel-example-card-clickable
+             * @exampleComponent limel-example-card-orientation
+             * @exampleComponent limel-example-card-slot
+             * @exampleComponent limel-example-card-styling
+             * @beta 
+             */
+            "limel-card": LocalJSX.LimelCard & JSXBase.HTMLAttributes<HTMLLimelCardElement>;
+            /**
+             * 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.69.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",