@limetech/lime-elements 40.21.1 → 40.22.0

package/dist/types/components.d.ts

@@ -16,7 +16,7 @@ import { Button } from "./components/button/button.types";
 import { CalloutType } from "./components/callout/callout.types";
 import { Image } from "./global/shared-types/image.types";
 import { ListSeparator as ListSeparator1 } from "./global/shared-types/separator.types";
-import { ChartItem, ChartType } from "./components/chart/chart.types";
+import { ChartItem, ChartType, ChartValueFormat } 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";
@@ -68,7 +68,7 @@ export { Button } from "./components/button/button.types";
 export { CalloutType } from "./components/callout/callout.types";
 export { Image } from "./global/shared-types/image.types";
 export { ListSeparator as ListSeparator1 } from "./global/shared-types/separator.types";
-export { ChartItem, ChartType } from "./components/chart/chart.types";
+export { ChartItem, ChartType, ChartValueFormat } 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";
@@ -528,6 +528,8 @@ export namespace Components {
      * @exampleComponent limel-example-chart-orientation
      * @exampleComponent limel-example-chart-max-value
      * @exampleComponent limel-example-chart-display-item-percentage
+     * @exampleComponent limel-example-chart-value-format
+     * @exampleComponent limel-example-chart-value-format-date
      * @exampleComponent limel-example-chart-type-bar
      * @exampleComponent limel-example-chart-type-dot
      * @exampleComponent limel-example-chart-type-area
@@ -563,9 +565,13 @@ export namespace Components {
          */
         "accessibleValuesLabel"?: string;
         /**
-          * Sets the axis increment for `bar`, `dot`, `area`, and `line` charts. When it is not set, or not above zero, the chart works out a step from the values. It also does that when the step would divide the axis into more than 100 parts, so that it does not draw too many lines. Has no effect on other chart types.
+          * Sets the axis increment for `bar`, `dot`, `area`, and `line` charts. When it is not set, or not above zero, the chart works out a step from the values. It also does that when the step would divide the axis into more than 100 parts, so that it does not draw too many lines. Has no effect on other chart types, or when `valueFormat` is `date`, where the axis steps through days, weeks, months or years by itself.
          */
         "axisIncrement"?: number;
+        /**
+          * The currency of the values when `valueFormat` is `currency`, as a three-letter code such as `SEK`. Without one, the values are written as numbers.
+         */
+        "currency"?: string;
         /**
           * When set to true, renders visible labels for X and Y axes. Only affects chart types with X and Y axes, such as area, bar, and line charts.
           * @default false
@@ -591,7 +597,7 @@ export namespace Components {
          */
         "items": ChartItem[];
         /**
-          * Defines the language for translations. Will translate the translatable strings on the components.
+          * Defines the language for translations, and for the way values are written, such as `1 234,5` in Swedish.
           * @default 'en'
          */
         "language": Languages;
@@ -601,7 +607,7 @@ export namespace Components {
          */
         "loading": boolean;
         /**
-          * Sets the value used to scale item values. For `proportion-bar`, `pie`, `doughnut`, and `ring`, it is the denominator used as the whole. It defaults to the combined item values or range extents. The combined size can exceed `maxValue` and produce a total above 100%. For `bar`, `dot`, `area`, and `line`, it is the requested upper bound. The chart can round that bound up to the next `axisIncrement`. Has no effect on `nps` or `scatter`.
+          * Sets the value used to scale item values. For `proportion-bar`, `pie`, `doughnut`, and `ring`, it is the denominator used as the whole. It defaults to the combined item values or range extents. The combined size can exceed `maxValue` and produce a total above 100%. For `bar`, `dot`, `area`, and `line`, it is the requested upper bound. The chart can round that bound up to the next `axisIncrement`, or to the end of its day when `valueFormat` is `date`. Has no effect on `nps` or `scatter`.
          */
         "maxValue"?: number;
         /**
@@ -614,6 +620,11 @@ export namespace Components {
           * @default 'proportion-bar'
          */
         "type"?: ChartType;
+        /**
+          * Defines how values are written: as numbers, as percentages where `0.25` is `25 %`, as amounts of `currency`, or as dates. With `date`, each value is a date in milliseconds since 1970, and the value axis steps through days, weeks, months or years. The axes, the values shown with `displayItemValue`, the tooltips, and the screen reader table all follow it, in the chart's `language`. An item's `formattedValue` is shown as it is.
+          * @default 'number'
+         */
+        "valueFormat": ChartValueFormat;
     }
     /**
      * The Checkbox component is a classic and essential element in UI design that allows
@@ -4989,6 +5000,8 @@ declare global {
      * @exampleComponent limel-example-chart-orientation
      * @exampleComponent limel-example-chart-max-value
      * @exampleComponent limel-example-chart-display-item-percentage
+     * @exampleComponent limel-example-chart-value-format
+     * @exampleComponent limel-example-chart-value-format-date
      * @exampleComponent limel-example-chart-type-bar
      * @exampleComponent limel-example-chart-type-dot
      * @exampleComponent limel-example-chart-type-area
@@ -7762,6 +7775,8 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-chart-orientation
      * @exampleComponent limel-example-chart-max-value
      * @exampleComponent limel-example-chart-display-item-percentage
+     * @exampleComponent limel-example-chart-value-format
+     * @exampleComponent limel-example-chart-value-format-date
      * @exampleComponent limel-example-chart-type-bar
      * @exampleComponent limel-example-chart-type-dot
      * @exampleComponent limel-example-chart-type-area
@@ -7797,9 +7812,13 @@ declare namespace LocalJSX {
          */
         "accessibleValuesLabel"?: string;
         /**
-          * Sets the axis increment for `bar`, `dot`, `area`, and `line` charts. When it is not set, or not above zero, the chart works out a step from the values. It also does that when the step would divide the axis into more than 100 parts, so that it does not draw too many lines. Has no effect on other chart types.
+          * Sets the axis increment for `bar`, `dot`, `area`, and `line` charts. When it is not set, or not above zero, the chart works out a step from the values. It also does that when the step would divide the axis into more than 100 parts, so that it does not draw too many lines. Has no effect on other chart types, or when `valueFormat` is `date`, where the axis steps through days, weeks, months or years by itself.
          */
         "axisIncrement"?: number;
+        /**
+          * The currency of the values when `valueFormat` is `currency`, as a three-letter code such as `SEK`. Without one, the values are written as numbers.
+         */
+        "currency"?: string;
         /**
           * When set to true, renders visible labels for X and Y axes. Only affects chart types with X and Y axes, such as area, bar, and line charts.
           * @default false
@@ -7825,7 +7844,7 @@ declare namespace LocalJSX {
          */
         "items": ChartItem[];
         /**
-          * Defines the language for translations. Will translate the translatable strings on the components.
+          * Defines the language for translations, and for the way values are written, such as `1 234,5` in Swedish.
           * @default 'en'
          */
         "language"?: Languages;
@@ -7835,7 +7854,7 @@ declare namespace LocalJSX {
          */
         "loading"?: boolean;
         /**
-          * Sets the value used to scale item values. For `proportion-bar`, `pie`, `doughnut`, and `ring`, it is the denominator used as the whole. It defaults to the combined item values or range extents. The combined size can exceed `maxValue` and produce a total above 100%. For `bar`, `dot`, `area`, and `line`, it is the requested upper bound. The chart can round that bound up to the next `axisIncrement`. Has no effect on `nps` or `scatter`.
+          * Sets the value used to scale item values. For `proportion-bar`, `pie`, `doughnut`, and `ring`, it is the denominator used as the whole. It defaults to the combined item values or range extents. The combined size can exceed `maxValue` and produce a total above 100%. For `bar`, `dot`, `area`, and `line`, it is the requested upper bound. The chart can round that bound up to the next `axisIncrement`, or to the end of its day when `valueFormat` is `date`. Has no effect on `nps` or `scatter`.
          */
         "maxValue"?: number;
         /**
@@ -7852,6 +7871,11 @@ declare namespace LocalJSX {
           * @default 'proportion-bar'
          */
         "type"?: ChartType;
+        /**
+          * Defines how values are written: as numbers, as percentages where `0.25` is `25 %`, as amounts of `currency`, or as dates. With `date`, each value is a date in milliseconds since 1970, and the value axis steps through days, weeks, months or years. The axes, the values shown with `displayItemValue`, the tooltips, and the screen reader table all follow it, in the chart's `language`. An item's `formattedValue` is shown as it is.
+          * @default 'number'
+         */
+        "valueFormat"?: ChartValueFormat;
     }
     /**
      * The Checkbox component is a classic and essential element in UI design that allows
@@ -12087,6 +12111,8 @@ declare namespace LocalJSX {
         "orientation": 'landscape' | 'portrait';
         "maxValue": number;
         "axisIncrement": number;
+        "valueFormat": ChartValueFormat;
+        "currency": string;
         "loading": boolean;
     }
     interface LimelCheckboxAttributes {
@@ -12969,6 +12995,8 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-chart-orientation
              * @exampleComponent limel-example-chart-max-value
              * @exampleComponent limel-example-chart-display-item-percentage
+             * @exampleComponent limel-example-chart-value-format
+             * @exampleComponent limel-example-chart-value-format-date
              * @exampleComponent limel-example-chart-type-bar
              * @exampleComponent limel-example-chart-type-dot
              * @exampleComponent limel-example-chart-type-area

package/dist/types/util/language.d.ts

@@ -17,4 +17,23 @@
  * @returns the lower-cased primary subtag, or an empty string
  */
 export declare function getPrimarySubtag(language: unknown): string;
+/**
+ * The locale that `Intl` writes numbers and dates in for `language`, or
+ * `undefined` when it cannot write in that language. `Intl` throws on a
+ * tag it cannot read, such as `sv_SE`, and quietly uses the viewer's own
+ * locale for one it does not know, such as `zz`. A component that writes in
+ * its `language` while it renders checks it here, and falls back to English
+ * when this gives `undefined`.
+ *
+ * Examples:
+ *  - "sv" => "sv"
+ *  - "SV-se" => "sv-SE"
+ *  - "sv_SE" => undefined
+ *  - "zz" => undefined
+ *  - undefined => undefined
+ *
+ * @param language - the language to write in
+ * @returns the locale, or `undefined`
+ */
+export declare function getSupportedLocale(language: unknown): string | undefined;
 //# sourceMappingURL=language.d.ts.map

package/package.json

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

package/dist/cjs/language-v-MMS6ym.js

@@ -1,28 +0,0 @@
-'use strict';
-
-/**
- * Reduce a language to the primary subtag that our language maps are keyed by.
- *
- * A `language` prop is typed, but a custom element takes whatever string an
- * attribute carries — commonly a full BCP 47 tag such as `nb-NO`, since a host
- * application often derives the language from `document.documentElement.lang`.
- * Anything that is not a string must resolve rather than throw, so that an
- * unexpected value can never break a component's render.
- *
- * Examples:
- *  - "nb" => "nb"
- *  - "nb-NO" => "nb"
- *  - "SV-SE" => "sv"
- *  - undefined => ""
- *
- * @param language - the language to reduce
- * @returns the lower-cased primary subtag, or an empty string
- */
-function getPrimarySubtag(language) {
-    if (typeof language !== 'string') {
-        return '';
-    }
-    return language.toLowerCase().split('-', 1)[0];
-}
-
-exports.getPrimarySubtag = getPrimarySubtag;

package/dist/esm/language-ChagAaNf.js

@@ -1,26 +0,0 @@
-/**
- * Reduce a language to the primary subtag that our language maps are keyed by.
- *
- * A `language` prop is typed, but a custom element takes whatever string an
- * attribute carries — commonly a full BCP 47 tag such as `nb-NO`, since a host
- * application often derives the language from `document.documentElement.lang`.
- * Anything that is not a string must resolve rather than throw, so that an
- * unexpected value can never break a component's render.
- *
- * Examples:
- *  - "nb" => "nb"
- *  - "nb-NO" => "nb"
- *  - "SV-SE" => "sv"
- *  - undefined => ""
- *
- * @param language - the language to reduce
- * @returns the lower-cased primary subtag, or an empty string
- */
-function getPrimarySubtag(language) {
-    if (typeof language !== 'string') {
-        return '';
-    }
-    return language.toLowerCase().split('-', 1)[0];
-}
-
-export { getPrimarySubtag as g };