@limetech/lime-elements 40.21.1 → 40.22.0

package/dist/collection/components/chart/format.js

@@ -0,0 +1,302 @@
+import { getSupportedLocale } from "../../util/language";
+import { getMaximumValue, getMinimumValue, isDate, } from "./scale";
+const FALLBACK_LOCALE = 'en';
+const PERCENT = 100;
+/**
+ * The largest value on an axis from which its values are shortened,
+ * such as `1.2M` for 1 200 000.
+ */
+const SHORTEN_FROM = 10000;
+/**
+ * The most decimals `Intl` writes in every browser.
+ */
+const MAX_DECIMALS = 20;
+/**
+ * The most significant digits `Intl` writes.
+ */
+const MAX_SIGNIFICANT_DIGITS = 21;
+/**
+ * Up to three decimals, and six significant digits below one, so `0.0004`
+ * is not written as `0`.
+ */
+const NUMBERS = {
+    options: { maximumFractionDigits: 3 },
+    small: { maximumSignificantDigits: 6 },
+    smallBelow: 1,
+};
+/**
+ * Up to one decimal, and two significant digits below 1 %, so `0.0004` is
+ * written as `0.04%` rather than `0%`.
+ */
+const PERCENTAGES = {
+    options: { style: 'percent', maximumFractionDigits: 1 },
+    small: { style: 'percent', maximumSignificantDigits: 2 },
+    smallBelow: 0.01,
+};
+const SHARE_OPTIONS = {
+    style: 'percent',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+};
+/**
+ * The ticks of an axis of dates that are not known, whose dates are all
+ * written with their year.
+ */
+const UNKNOWN_DATE_TICKS = { values: [], unit: 'day' };
+const locales = new Map();
+const numberFormats = new Map();
+const currencyCodes = new Map();
+const dateFormats = new Map();
+/**
+ * The item's value as text: its `formattedValue` when set, otherwise its
+ * value, range, or scatter point, written in the chart's language and
+ * value format.
+ * @param item - the item
+ * @param style - how the chart writes values
+ */
+export function formatValue(item, style) {
+    const { value, formattedValue } = item;
+    if (formattedValue) {
+        return formattedValue;
+    }
+    const write = getValueWriter(style);
+    if (!Array.isArray(value)) {
+        return write(value);
+    }
+    const [first, second] = value.map((part) => write(part));
+    if (style.type === 'scatter') {
+        return writePoint(first, second);
+    }
+    const [start, end] = [getMinimumValue(item), getMaximumValue(item)];
+    if (style.valueFormat === 'date' && isDate(start) && isDate(end)) {
+        return getDateFormat(style.language).formatRange(start, end);
+    }
+    return `${first} — ${second}`;
+}
+/**
+ * Writes the values of an axis in the chart's language and value format,
+ * with as many decimals as the step between them has. Amounts leave out
+ * their currency, which the item values and tooltips show. On an axis
+ * that reaches 10 000 or more, every number is shortened, such as `1.2M`,
+ * so the values stay short and alike. Dates are written by what the axis
+ * steps through: days, months or years, with the year on the first date
+ * and on the first date of each new year.
+ * @param range - the range of the axis
+ * @param style - how the chart writes values
+ * @param dates - the dates an axis of dates marks
+ */
+export function getAxisValueFormatter(range, style, dates) {
+    const locale = getLocale(style.language);
+    if (style.valueFormat === 'date') {
+        return getDateAxisFormatter(locale, dates);
+    }
+    if (style.valueFormat === 'percent') {
+        const percentages = getNumberFormat(locale, {
+            style: 'percent',
+            maximumFractionDigits: countDecimals(range.increment * PERCENT),
+        });
+        return (value) => percentages.format(value);
+    }
+    const largest = Math.max(Math.abs(range.minValue), Math.abs(range.maxValue));
+    const numbers = getNumberFormat(locale, largest >= SHORTEN_FROM
+        ? {
+            notation: 'compact',
+            maximumSignificantDigits: countSignificantDigits(largest, range.increment),
+        }
+        : { maximumFractionDigits: countDecimals(range.increment) });
+    return (value) => numbers.format(value);
+}
+/**
+ * An item's share of the whole as a percentage with two decimals, such as
+ * `25.00%`, written in the chart's language.
+ * @param share - the share, in percent
+ * @param language - the language of the chart
+ */
+export function formatShare(share, language) {
+    return getNumberFormat(getLocale(language), SHARE_OPTIONS).format(share / PERCENT);
+}
+/**
+ * Whether `currency` can be written as one: a three-letter code such as
+ * `SEK`.
+ * @param currency - the currency of the chart
+ */
+export function isCurrencyCode(currency) {
+    let valid = currencyCodes.get(currency);
+    if (valid === undefined) {
+        valid = canWriteAmountsIn(currency);
+        currencyCodes.set(currency, valid);
+    }
+    return valid;
+}
+function canWriteAmountsIn(currency) {
+    try {
+        getNumberFormat(FALLBACK_LOCALE, { style: 'currency', currency });
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+/**
+ * Whether values can be written in `language`. When they cannot, they are
+ * written in English.
+ * @param language - the language of the chart
+ */
+export function canWriteIn(language) {
+    return findLocale(language) !== undefined;
+}
+function getValueWriter(style) {
+    if (style.valueFormat === 'date') {
+        const dates = getDateFormat(style.language);
+        return (value) => (isDate(value) ? dates.format(value) : `${value}`);
+    }
+    const numbers = getValueFormat(style);
+    return (value) => numbers.format(value);
+}
+/**
+ * Writes the dates on an axis by what it steps through: day and month for
+ * days and weeks, the month for months, and the year for years. The first
+ * date, and the first date of each new year, also get their year, except
+ * January among months, which is written as its year alone.
+ * @param locale - the locale of the chart
+ * @param ticks - the dates the axis marks
+ */
+function getDateAxisFormatter(locale, ticks = UNKNOWN_DATE_TICKS) {
+    const years = getDateTimeFormat(locale, { year: 'numeric' });
+    if (ticks.unit === 'year') {
+        return (value) => years.format(value);
+    }
+    const parts = ticks.unit === 'month'
+        ? { month: 'short' }
+        : { day: 'numeric', month: 'short' };
+    const dates = getDateTimeFormat(locale, parts);
+    const datesWithYear = getDateTimeFormat(locale, Object.assign(Object.assign({}, parts), { year: 'numeric' }));
+    return (value) => {
+        if (!isFirstOfItsYear(value, ticks.values)) {
+            return dates.format(value);
+        }
+        return ticks.unit === 'month' && new Date(value).getMonth() === 0
+            ? years.format(value)
+            : datesWithYear.format(value);
+    };
+}
+/**
+ * Whether `value` is the first of `ticks` in its year. A date that is not
+ * one of them counts as the first, so that it gets its year.
+ * @param value - the date
+ * @param ticks - the dates an axis marks
+ */
+function isFirstOfItsYear(value, ticks) {
+    const index = ticks.indexOf(value);
+    return (index <= 0 ||
+        new Date(ticks[index - 1]).getFullYear() !==
+            new Date(value).getFullYear());
+}
+function getDateFormat(language) {
+    return getDateTimeFormat(getLocale(language), { dateStyle: 'medium' });
+}
+function getValueFormat(style) {
+    const locale = getLocale(style.language);
+    if (style.valueFormat === 'percent') {
+        return getNumberWriter(locale, PERCENTAGES);
+    }
+    if (style.valueFormat === 'currency' && isCurrencyCode(style.currency)) {
+        return getNumberFormat(locale, {
+            style: 'currency',
+            currency: style.currency,
+            trailingZeroDisplay: 'stripIfInteger',
+        });
+    }
+    return getNumberWriter(locale, NUMBERS);
+}
+/**
+ * The two values of a scatter point, separated by a semicolon when either
+ * of them has a comma in it, such as `(1,5; 2,5)` in Swedish.
+ * @param first - the first value, as text
+ * @param second - the second value, as text
+ */
+function writePoint(first, second) {
+    const separator = `${first}${second}`.includes(',') ? '; ' : ', ';
+    return `(${first}${separator}${second})`;
+}
+function countDecimals(value) {
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    return Math.min(MAX_DECIMALS, Math.max(0, -getLowestDigit(value)));
+}
+/**
+ * How many significant digits the values of an axis need for every step
+ * between them to show, such as four for `1.025M` on an axis that steps
+ * by 25 000 up to 2 000 000.
+ * @param largest - the largest value on the axis, ignoring its sign
+ * @param increment - the step between the values
+ */
+function countSignificantDigits(largest, increment) {
+    if (!Number.isFinite(increment)) {
+        return MAX_SIGNIFICANT_DIGITS;
+    }
+    const digits = Math.floor(Math.log10(largest)) - getLowestDigit(increment);
+    return Math.min(MAX_SIGNIFICANT_DIGITS, Math.max(1, digits + 1));
+}
+/**
+ * The power of ten of the last digit of `value` that is not zero, such as
+ * 3 for 25 000 and -2 for 0.25.
+ * @param value - a finite number
+ */
+function getLowestDigit(value) {
+    var _a, _b;
+    const [digits, exponent] = Number(value.toPrecision(12))
+        .toExponential()
+        .split('e', 2);
+    const decimals = (_b = (_a = digits.split('.', 2)[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    return Number(exponent) - decimals;
+}
+function getNumberWriter(locale, style) {
+    const numbers = getNumberFormat(locale, style.options);
+    const small = getNumberFormat(locale, style.small);
+    return {
+        format: (value) => value !== 0 && Math.abs(value) < style.smallBelow
+            ? small.format(value)
+            : numbers.format(value),
+    };
+}
+/**
+ * Making an `Intl.NumberFormat` costs far more than using one, and values
+ * are written on every render, so each one is made once.
+ * @param locale - the locale to write in
+ * @param options - how to write the numbers
+ */
+function getNumberFormat(locale, options) {
+    const key = `${locale} ${JSON.stringify(options)}`;
+    let format = numberFormats.get(key);
+    if (!format) {
+        format = new Intl.NumberFormat(locale, options);
+        numberFormats.set(key, format);
+    }
+    return format;
+}
+function getDateTimeFormat(locale, options) {
+    const key = `${locale} ${JSON.stringify(options)}`;
+    let format = dateFormats.get(key);
+    if (!format) {
+        format = new Intl.DateTimeFormat(locale, options);
+        dateFormats.set(key, format);
+    }
+    return format;
+}
+/**
+ * The locale to write values in: the chart's language when `Intl` can
+ * write in it, otherwise English.
+ * @param language - the language of the chart
+ */
+function getLocale(language) {
+    var _a;
+    return (_a = findLocale(language)) !== null && _a !== void 0 ? _a : FALLBACK_LOCALE;
+}
+function findLocale(language) {
+    if (!locales.has(language)) {
+        locales.set(language, getSupportedLocale(language));
+    }
+    return locales.get(language);
+}

package/dist/collection/components/chart/options.js

@@ -1,12 +1,12 @@
 import { format } from "echarts/core";
-import { formatValue, getAxisRange, getMaximumValue, getMinimumValue, getScatterRanges, getXValue, getYValue, getShare, getValueSpan, getWholeRange, isPartOfWhole, isRangeItem, } from "./scale";
+import { getAxisRange, getDateRange, getDateTicks, getMaximumValue, getMinimumValue, getScatterRanges, getXValue, getYValue, getShare, getValueSpan, getWholeRange, isPartOfWhole, isRangeItem, } from "./scale";
+import { formatShare, formatValue, getAxisValueFormatter, } from "./format";
 const DOT_SIZE = 8;
 const LINE_DOT_SIZE = 6;
 const CONNECTOR_WIDTH = 2;
 const DIMMED_OPACITY = 0.4;
 const AREA_OPACITY = 0.4;
 const PADDING = 8;
-const PERCENT_DECIMALS = 2;
 const NPS_MIN = -100;
 const NPS_MAX = 100;
 const NPS_START_ANGLE = 200;
@@ -96,8 +96,8 @@ export function getItemLabel(settings, index) {
         return item.text;
     }
     const whole = getWholeRange(settings.items, settings.maxValue);
-    const share = getShare(item, whole).toFixed(PERCENT_DECIMALS);
-    return `${item.text} (${share}%)`;
+    const share = formatShare(getShare(item, whole), settings.language);
+    return `${item.text} (${share})`;
 }
 /**
  * The tooltip of an item, as HTML: its label and its value.
@@ -109,7 +109,7 @@ export function getTooltip(settings, index) {
     if (!item) {
         return '';
     }
-    return [getItemLabel(settings, index), formatValue(item, settings.type)]
+    return [getItemLabel(settings, index), formatValue(item, settings)]
         .map((text) => format.encodeHTML(text))
         .join('<br/>');
 }
@@ -138,12 +138,17 @@ function drawSeries(settings, theme, itemSpace) {
 }
 function drawOnAxes(settings, theme, itemSpace) {
     const { items, orientation } = settings;
-    const range = getAxisRange(items, settings.maxValue, settings.axisIncrement);
+    const range = settings.valueFormat === 'date'
+        ? getDateRange(items.flatMap((item) => [
+            getMinimumValue(item),
+            getMaximumValue(item),
+        ]), settings.maxValue)
+        : getAxisRange(items, settings.maxValue, settings.axisIncrement);
     const itemTextAxis = getItemTextAxis(settings);
     const categoryAxis = Object.assign(Object.assign(Object.assign({}, getCategoryAxis(settings)), { axisLabel: Object.assign({ show: settings.displayItemText, color: theme.textColor }, (itemTextAxis &&
             itemSpace &&
             getItemTextLayout(itemTextAxis, itemSpace))), axisTick: hidden, axisLine: { lineStyle: { color: theme.axisLineColor } } }), getAxisName(settings, settings.itemsLabel, theme));
-    const valueAxis = getValueAxis(range, getAxisName(settings, settings.valuesLabel, theme), theme);
+    const valueAxis = getValueAxis(range, getAxisName(settings, settings.valuesLabel, theme), settings, theme);
     const { series, seriesIndex } = getAxisSeries(settings, theme);
     const option = {
         grid: getGrid(theme),
@@ -306,10 +311,15 @@ function getRangeStarts(items) {
 }
 function drawScatter(settings, theme) {
     const { items } = settings;
-    const ranges = getScatterRanges(items);
+    const ranges = settings.valueFormat === 'date'
+        ? {
+            x: getDateRange(items.map((item) => getXValue(item))),
+            y: getDateRange(items.map((item) => getYValue(item))),
+        }
+        : getScatterRanges(items);
     const landscape = settings.orientation === 'landscape';
-    const firstAxis = getValueAxis(ranges.x, getAxisName(settings, settings.itemsLabel, theme), theme);
-    const secondAxis = getValueAxis(ranges.y, getAxisName(settings, settings.valuesLabel, theme), theme);
+    const firstAxis = getValueAxis(ranges.x, getAxisName(settings, settings.itemsLabel, theme), settings, theme);
+    const secondAxis = getValueAxis(ranges.y, getAxisName(settings, settings.valuesLabel, theme), settings, theme);
     const scatter = {
         type: 'scatter',
         symbolSize: theme.scatterItemSize,
@@ -531,8 +541,10 @@ function getGrid(theme) {
         borderWidth: 0,
     };
 }
-function getValueAxis(range, name, theme) {
-    return Object.assign({ type: 'value', min: range.minValue, max: range.maxValue, interval: range.increment, axisLabel: { show: true, color: theme.textColor }, axisLine: { lineStyle: { color: theme.axisLineColor } }, splitLine: { lineStyle: { color: theme.axisLineColor } } }, name);
+function getValueAxis(range, name, settings, theme) {
+    const dates = settings.valueFormat === 'date' && getDateTicks(range);
+    const ticks = dates && { customValues: dates.values };
+    return Object.assign(Object.assign(Object.assign({ type: 'value', min: range.minValue, max: range.maxValue, interval: dates ? undefined : range.increment, axisLabel: Object.assign({ show: true, color: theme.textColor, formatter: getAxisValueFormatter(range, settings, dates || undefined) }, ticks) }, (ticks && { axisTick: ticks })), { axisLine: { lineStyle: { color: theme.axisLineColor } }, splitLine: { lineStyle: { color: theme.axisLineColor } } }), name);
 }
 function getAxisName(settings, name, theme) {
     if (!settings.displayAxisLabels) {
@@ -545,7 +557,7 @@ function getAxisName(settings, name, theme) {
     };
 }
 function getValueLabel(settings, theme) {
-    return Object.assign(Object.assign({ show: settings.displayItemValue, position: settings.orientation === 'landscape' ? 'top' : 'right' }, getLabelStyle(theme)), { formatter: ({ dataIndex }) => formatValue(settings.items[dataIndex], settings.type) });
+    return Object.assign(Object.assign({ show: settings.displayItemValue, position: settings.orientation === 'landscape' ? 'top' : 'right' }, getLabelStyle(theme)), { formatter: ({ dataIndex }) => formatValue(settings.items[dataIndex], settings) });
 }
 function getLabelStyle(theme) {
     return { color: theme.textColor, textBorderWidth: 0 };
@@ -556,7 +568,7 @@ function getPointLabel(settings, item) {
         parts.push(item.text);
     }
     if (settings.displayItemValue) {
-        parts.push(formatValue(item, settings.type));
+        parts.push(formatValue(item, settings));
     }
     return parts.join(' ');
 }

package/dist/collection/components/chart/scale.js

@@ -1,5 +1,6 @@
 const PERCENT = 100;
 const STEP_COUNT = 10;
+const DAY = 24 * 60 * 60 * 1000;
 /**
  * The most steps that an `axisIncrement` may divide a value axis into.
  */
@@ -102,6 +103,114 @@ export function getAxisRange(items, maxValue, axisIncrement) {
         : getNiceStep(span);
     return roundOutwards(minRange, finalMaxRange, increment);
 }
+/**
+ * Whether `value` is a date in milliseconds that `Date` can hold. A date
+ * in nanoseconds is not, and neither is a date given as text.
+ * @param value - the value to check
+ */
+export function isDate(value) {
+    return (typeof value === 'number' && Number.isFinite(new Date(value).getTime()));
+}
+/**
+ * The range of an axis of dates, in milliseconds: from the start of the
+ * earliest day to the latest date, or to `maxValue` when that is set, as an
+ * axis of numbers ends at `maxValue`. An end during a day is moved to the
+ * end of that day. Unlike an axis of numbers, it does not reach down to
+ * zero, which would be 1970, and values that are not dates are left out.
+ * Its increment is a day, though `getDateTicks` decides what the axis
+ * marks.
+ * @param values - the dates on the axis
+ * @param maxValue - the requested upper bound, if any
+ */
+export function getDateRange(values, maxValue) {
+    const dates = values.filter((value) => isDate(value));
+    const start = new Date(dates.length > 0 ? Math.min(...dates) : Date.now());
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(isDate(maxValue) ? maxValue : Math.max(start.getTime(), ...dates));
+    if (end.getTime() <= start.getTime()) {
+        end.setTime(addDays(start, 1).getTime());
+    }
+    else if (end.getTime() > startOfDay(end)) {
+        end.setTime(addDays(new Date(startOfDay(end)), 1).getTime());
+    }
+    return {
+        minValue: start.getTime(),
+        maxValue: end.getTime(),
+        totalRange: end.getTime() - start.getTime(),
+        increment: DAY,
+    };
+}
+const DAYS_IN_MONTH = 30.44;
+const DAYS_IN_YEAR = 365.25;
+const DATE_STEP_COUNT = 6;
+const dayStep = (count) => ({
+    unit: 'day',
+    days: count,
+    first: (date) => date,
+    next: (date) => addDays(date, count),
+});
+const weekStep = (count) => ({
+    unit: 'day',
+    days: 7 * count,
+    first: (date) => addDays(date, (8 - date.getDay()) % 7),
+    next: (date) => addDays(date, 7 * count),
+});
+const monthStep = (count) => ({
+    unit: 'month',
+    days: DAYS_IN_MONTH * count,
+    first: (date) => {
+        let month = date.getDate() === 1 ? date : getFirstOfMonth(date, 1);
+        while (month.getMonth() % count !== 0) {
+            month = getFirstOfMonth(month, 1);
+        }
+        return month;
+    },
+    next: (date) => getFirstOfMonth(date, count),
+});
+const yearStep = (count) => ({
+    unit: 'year',
+    days: DAYS_IN_YEAR * count,
+    first: (date) => {
+        let year = date.getFullYear();
+        if (date.getTime() > createDate(year, 0, 1).getTime()) {
+            year += 1;
+        }
+        return createDate(Math.ceil(year / count) * count, 0, 1);
+    },
+    next: (date) => createDate(date.getFullYear() + count, 0, 1),
+});
+const DATE_STEPS = [
+    dayStep(1),
+    dayStep(2),
+    weekStep(1),
+    weekStep(2),
+    monthStep(1),
+    monthStep(3),
+    monthStep(6),
+    yearStep(1),
+    yearStep(2),
+    yearStep(5),
+    yearStep(10),
+];
+/**
+ * The dates to mark on an axis of dates: days, Mondays, or the first days
+ * of months, quarters, half years or years, whichever divides the axis
+ * into at most about six steps. Dates take more room than numbers, so
+ * they get fewer steps.
+ * @param range - the range of the axis, from `getDateRange`
+ * @returns the dates to mark, and whether they are days, months or years
+ */
+export function getDateTicks(range) {
+    var _a;
+    const days = (range.maxValue - range.minValue) / DAY;
+    const decades = days / DAYS_IN_YEAR / 10;
+    const step = (_a = DATE_STEPS.find((candidate) => days / candidate.days <= DATE_STEP_COUNT)) !== null && _a !== void 0 ? _a : yearStep(10 * Math.ceil(decades / DATE_STEP_COUNT));
+    const ticks = [];
+    for (let date = step.first(new Date(range.minValue)); date.getTime() <= range.maxValue; date = step.next(date)) {
+        ticks.push(date.getTime());
+    }
+    return { values: ticks, unit: step.unit };
+}
 /**
  * The range of a chart whose items are parts of one whole: `maxValue`
  * when set, otherwise the combined item values or range extents. The value
@@ -144,25 +253,6 @@ export function getScatterRanges(items) {
 export function getShare(item, whole) {
     return (getValueSpan(item) / whole.totalRange) * PERCENT;
 }
-/**
- * The item's value as text: its `formattedValue` when set, otherwise its
- * value, range, or scatter point.
- * @param item - the item
- * @param type - the chart type
- */
-export function formatValue(item, type) {
-    const { value, formattedValue } = item;
-    if (formattedValue) {
-        return formattedValue;
-    }
-    if (Array.isArray(value)) {
-        if (type === 'scatter') {
-            return `(${value[0]}, ${value[1]})`;
-        }
-        return `${value[0]} — ${value[1]}`;
-    }
-    return `${value}`;
-}
 function isUsableStep(step, span) {
     return step > 0 && span / step <= MAX_AXIS_STEPS;
 }
@@ -181,6 +271,29 @@ function getZeroAnchoredRange(values) {
     const maxValue = Math.max(0, ...values);
     return roundOutwards(minValue, maxValue, getNiceStep(maxValue - minValue));
 }
+function addDays(date, days) {
+    return createDate(date.getFullYear(), date.getMonth(), date.getDate() + days);
+}
+function getFirstOfMonth(date, monthsLater) {
+    return createDate(date.getFullYear(), date.getMonth() + monthsLater, 1);
+}
+/**
+ * The start of a day in local time. Unlike `new Date(year, month, day)`, it
+ * keeps the years 0 to 99 rather than reading them as 1900 to 1999, see
+ * https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-makefullyear
+ * @param year - the full year
+ * @param month - the month, from 0 for January
+ * @param day - the day of the month
+ */
+function createDate(year, month, day) {
+    const date = new Date(0);
+    date.setFullYear(year, month, day);
+    date.setHours(0, 0, 0, 0);
+    return date;
+}
+function startOfDay(date) {
+    return new Date(date).setHours(0, 0, 0, 0);
+}
 function roundOutwards(minValue, maxValue, increment) {
     const lowerEnd = Math.floor(minValue / increment) * increment;
     const upperEnd = Math.ceil(maxValue / increment) * increment;

package/dist/collection/components/pagination/pagination.js

@@ -1,7 +1,7 @@
 import { h, Host, } from "@stencil/core";
 import translate from "../../global/translations";
 import { createRandomString } from "../../util/random-string";
-import { getPrimarySubtag } from "../../util/language";
+import { getSupportedLocale } from "../../util/language";
 import { getPageSlots } from "./pagination.util";
 const FIRST_PAGE = 1;
 const DEFAULT_PAGE_SIZE = 100;
@@ -304,7 +304,7 @@ export class Pagination {
     }
     render() {
         const { slots } = this.view;
-        return (h(Host, { key: '924becb588f7d773572b61865b9dd79b14171153' }, h("nav", { key: 'f517b62cf0107c912d576f08e9d99594f868be44', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: '21758520849acfe32f43e86570fe60a040cf2748', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
+        return (h(Host, { key: '7c47cdc658859b4cd8199ef92ebd9bc48275a8ae' }, h("nav", { key: '3bba45547a7183a4b1df58294a56788f9b2e078f', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: '60fff33d8e135b1605d0a0f68b6c1ede1b571281', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
     }
     /**
      * Without a count we know where the user is but not how far the set goes,
@@ -620,9 +620,7 @@ export class Pagination {
     }
     /**
      * 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.
      */
     get languageForNumbers() {
         var _a;
@@ -630,31 +628,21 @@ export class Pagination {
         return this.settledLanguage;
     }
     /**
-     * `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
      */
     createNumberFormat() {
         const { language } = this;
-        try {
-            const format = new Intl.NumberFormat(language);
-            const resolved = format.resolvedOptions().locale;
-            if (getPrimarySubtag(resolved) === getPrimarySubtag(language)) {
-                this.warnedAbout.delete('language');
-                this.settledLanguage = language;
-                return format;
-            }
-        }
-        catch (_a) {
-            // Fall through to the warning below.
+        const locale = getSupportedLocale(language);
+        if (locale) {
+            this.warnedAbout.delete('language');
+            this.settledLanguage = language;
+            return new Intl.NumberFormat(locale);
         }
         this.warnOnce('language', language, () => `\`language\` must be one this browser can write numbers in, but was ${JSON.stringify(language)}. Using ${FALLBACK_LANGUAGE}.`);
         // Where the translations land for the same unusable value, rather than

package/dist/collection/util/language.js

@@ -22,3 +22,32 @@ export function getPrimarySubtag(language) {
     }
     return language.toLowerCase().split('-', 1)[0];
 }
+/**
+ * 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 function getSupportedLocale(language) {
+    if (typeof language !== 'string') {
+        return;
+    }
+    try {
+        return Intl.NumberFormat.supportedLocalesOf(language)[0];
+    }
+    catch (_a) {
+        return;
+    }
+}