@limetech/lime-elements 40.21.1 → 40.23.0

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

@@ -345,21 +345,15 @@ export declare class Pagination {
     private formatNumber;
     /**
      * What the jump form is given, so that the one warning about a language
-     * this browser cannot write numbers in describes both of us. A tag it
-     * accepts but does not support, `zz`, resolves to the viewer's own locale
-     * rather than throwing, so asking the formatter is the only way to know.
+     * this browser cannot write numbers in describes both of us.
      */
     private get languageForNumbers();
     /**
-     * `Intl.NumberFormat` throws on a language it cannot parse, and this is
-     * called from `render`, so an unusable one would leave the control drawing
-     * nothing at all — the single state a user cannot click their way out of.
-     * `src/util/language.ts` states the rule this keeps.
-     *
-     * A tag it cannot parse throws; a well-formed tag it does not support, like
-     * `zz`, does not — it quietly resolves to whatever locale the machine runs
-     * in. Both end up formatting numbers in something other than what was
-     * asked for, so both are worth saying out loud.
+     * This is called from `render`, so a language that `Intl` cannot write
+     * numbers in must not throw, or the control would draw nothing at all —
+     * the single state a user cannot click their way out of.
+     * `getSupportedLocale` in `src/util/language.ts` decides which languages
+     * those are.
      *
      * @returns a formatter, in the given language where that is possible
      */

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
@@ -1913,6 +1924,7 @@ export namespace Components {
      * @exampleComponent limel-example-code-editor-form
      * @exampleComponent limel-example-form-highlighted-field
      * @exampleComponent limel-example-form-heading-level
+     * @exampleComponent limel-example-form-include-defaults
      */
     interface LimelForm {
         /**
@@ -1934,6 +1946,11 @@ export namespace Components {
           * @beta
          */
         "highlightedField"?: Array<string | number>;
+        /**
+          * Set to `false` to leave the defaults of the schema out of the value, so that it stays as it was given until the user changes something. The form still shows the defaults. A default the user changes is in the value from then on, and so are the defaults that a change brings in, such as those of a new list item or of fields that depend on the changed one. Pass the value the form emits back in as `value`. The form validates what it shows, defaults included. When the user changes everything back, the value is what the form was given, also when that is `null` or `undefined`.
+          * @default true
+         */
+        "includeDefaults": boolean;
         /**
           * Factory for creating properties for custom form components  When using custom components in the form some properties might have to be set dynamically. If this factory is set, it will be called with the current schema for the field for each custom component in the form. The factory must return an object where each key is the name of the property that should be set, along with its value.
          */
@@ -4989,6 +5006,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
@@ -5771,6 +5790,7 @@ declare global {
      * @exampleComponent limel-example-code-editor-form
      * @exampleComponent limel-example-form-highlighted-field
      * @exampleComponent limel-example-form-heading-level
+     * @exampleComponent limel-example-form-include-defaults
      */
     interface HTMLLimelFormElement extends Components.LimelForm, HTMLStencilElement {
         addEventListener<K extends keyof HTMLLimelFormElementEventMap>(type: K, listener: (this: HTMLLimelFormElement, ev: LimelFormCustomEvent<HTMLLimelFormElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -7762,6 +7782,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 +7819,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 +7851,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 +7861,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 +7878,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
@@ -9260,6 +9291,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-code-editor-form
      * @exampleComponent limel-example-form-highlighted-field
      * @exampleComponent limel-example-form-heading-level
+     * @exampleComponent limel-example-form-include-defaults
      */
     interface LimelForm {
         /**
@@ -9281,6 +9313,11 @@ declare namespace LocalJSX {
           * @beta
          */
         "highlightedField"?: Array<string | number>;
+        /**
+          * Set to `false` to leave the defaults of the schema out of the value, so that it stays as it was given until the user changes something. The form still shows the defaults. A default the user changes is in the value from then on, and so are the defaults that a change brings in, such as those of a new list item or of fields that depend on the changed one. Pass the value the form emits back in as `value`. The form validates what it shows, defaults included. When the user changes everything back, the value is what the form was given, also when that is `null` or `undefined`.
+          * @default true
+         */
+        "includeDefaults"?: boolean;
         /**
           * Emitted when a change is made within the form
          */
@@ -12087,6 +12124,8 @@ declare namespace LocalJSX {
         "orientation": 'landscape' | 'portrait';
         "maxValue": number;
         "axisIncrement": number;
+        "valueFormat": ChartValueFormat;
+        "currency": string;
         "loading": boolean;
     }
     interface LimelCheckboxAttributes {
@@ -12293,6 +12332,7 @@ declare namespace LocalJSX {
         "disabled": boolean;
         "headingLevel": HeadingLevel;
         "revealErrors": boolean;
+        "includeDefaults": boolean;
     }
     interface LimelFormHeaderAttributes {
         "heading": string;
@@ -12969,6 +13009,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
@@ -13417,6 +13459,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-code-editor-form
              * @exampleComponent limel-example-form-highlighted-field
              * @exampleComponent limel-example-form-heading-level
+             * @exampleComponent limel-example-form-include-defaults
              */
             "limel-form": LocalJSX.IntrinsicElements["limel-form"] & JSXBase.HTMLAttributes<HTMLLimelFormElement>;
             /**

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.23.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -77,9 +77,9 @@
     "dayjs": "^1.11.23",
     "diff": "^9.0.0",
     "echarts": "^6.1.0",
-    "eslint": "^10.13.0",
+    "eslint": "^10.14.0",
     "flatpickr": "^4.6.13",
-    "glob": "^13.0.6",
+    "glob": "^14.0.3",
     "globals": "^17.13.0",
     "hast-util-from-dom": "^5.0.1",
     "hast-util-to-mdast": "^10.1.2",

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 };