@brightspace-ui/intl 3.19.1 → 3.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -7
- package/lang/ar.js +15 -0
- package/lang/cy.js +15 -0
- package/lang/da.js +15 -0
- package/lang/de.js +15 -0
- package/lang/en-gb.js +15 -0
- package/lang/en.js +15 -0
- package/lang/es-es.js +15 -0
- package/lang/es.js +15 -0
- package/lang/fr-fr.js +15 -0
- package/lang/fr.js +15 -0
- package/lang/hi.js +15 -0
- package/lang/ja.js +15 -0
- package/lang/ko.js +15 -0
- package/lang/nl.js +15 -0
- package/lang/pt.js +15 -0
- package/lang/sv.js +15 -0
- package/lang/tr.js +15 -0
- package/lang/zh-cn.js +15 -0
- package/lang/zh-tw.js +15 -0
- package/lib/PluralRules.js +4 -3
- package/lib/localize.js +90 -46
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
## Overview
|
|
7
7
|
|
|
8
|
-
This library consists of APIs to format and parse numbers, dates, times and file sizes for use in D2L Brightspace.
|
|
8
|
+
This library consists of APIs to format and parse numbers, dates, times and file sizes for use in D2L Brightspace. It also provides localization for common terms.
|
|
9
9
|
|
|
10
10
|
> Looking for the older `d2l-intl` library? It's still here [in the `v2.x` branch](https://github.com/BrightspaceUI/intl/tree/v2.x).
|
|
11
11
|
|
|
@@ -28,7 +28,9 @@ import { formatNumber, formatPercent } from '@brightspace-ui/intl/lib/number.js'
|
|
|
28
28
|
|
|
29
29
|
All of the APIs will automatically detect the document's language via the `lang` attribute on the `<html>` element. They'll also look for various `data-` attributes that will be present in Brightspace pages to access override and timezone information.
|
|
30
30
|
|
|
31
|
-
##
|
|
31
|
+
## Numbers
|
|
32
|
+
|
|
33
|
+
### Number Formatting
|
|
32
34
|
|
|
33
35
|
Integer and decimal numbers can be formatted in the user's locale using `formatNumber`. Percentages can be formatted using `formatPercent`. Use the optional `options` parameter for rounding.
|
|
34
36
|
|
|
@@ -65,7 +67,7 @@ const value = formatPercent(0.333, {
|
|
|
65
67
|
}); // -> '33.30 %' in en-US
|
|
66
68
|
```
|
|
67
69
|
|
|
68
|
-
|
|
70
|
+
### Number Parsing
|
|
69
71
|
|
|
70
72
|
The `parseNumber` method can be used to parse an integer or decimal number written in the user's locale.
|
|
71
73
|
|
|
@@ -75,7 +77,9 @@ import { parseNumber } from '@brightspace-ui/intl/lib/number.js';
|
|
|
75
77
|
const value = parseNumber('-8 942,39'); // -> -8942.39 in fr-CA
|
|
76
78
|
```
|
|
77
79
|
|
|
78
|
-
##
|
|
80
|
+
## Dates & Times
|
|
81
|
+
|
|
82
|
+
### Date & Time Formatting
|
|
79
83
|
|
|
80
84
|
Dates and times can be formatted in the user's locale using `formatDate`, `formatTime`, `formatDateTime`, and `formatRelativeDateTime`.
|
|
81
85
|
|
|
@@ -183,7 +187,7 @@ const relativeDateTime = formatRelativeDateTime(
|
|
|
183
187
|
); // If today is 2024-08-22, -> 'last week' in en-US
|
|
184
188
|
```
|
|
185
189
|
|
|
186
|
-
|
|
190
|
+
### Date Parsing
|
|
187
191
|
|
|
188
192
|
To parse a date written in the user's locale, use `parseDate`:
|
|
189
193
|
|
|
@@ -196,7 +200,7 @@ date.getMonth(); // -> 8 (months are 0-11)
|
|
|
196
200
|
date.getDate(); // -> 23
|
|
197
201
|
```
|
|
198
202
|
|
|
199
|
-
|
|
203
|
+
### Time Parsing
|
|
200
204
|
|
|
201
205
|
To parse a time written in the user's locale, use `parseTime`:
|
|
202
206
|
|
|
@@ -208,7 +212,7 @@ date.getHours(); // -> 14
|
|
|
208
212
|
date.getMinutes(); // -> 5
|
|
209
213
|
```
|
|
210
214
|
|
|
211
|
-
|
|
215
|
+
### Date/Time Conversion based on user timezone
|
|
212
216
|
|
|
213
217
|
To convert an object containing a UTC date to an object containing a local date corresponding to the `data-timezone` attribute:
|
|
214
218
|
```javascript
|
|
@@ -372,7 +376,41 @@ In addition to the Basic Formatting elements, these additional elements may also
|
|
|
372
376
|
* `<d2l-link>`
|
|
373
377
|
* `<d2l-tooltip-help>`
|
|
374
378
|
|
|
379
|
+
### Common Resources
|
|
380
|
+
|
|
381
|
+
Some localization resources are common and shared across D2L applications. To use these resources, set the `loadCommon` option:
|
|
382
|
+
|
|
383
|
+
```javascript
|
|
384
|
+
import { Localize } from '@brightspace-ui/intl/lib/localize.js';
|
|
385
|
+
|
|
386
|
+
const localizer = new Localize({
|
|
387
|
+
loadCommon: true
|
|
388
|
+
});
|
|
389
|
+
```
|
|
390
|
+
|
|
391
|
+
#### localizeCharacter
|
|
392
|
+
|
|
393
|
+
The localized value of the following characters can be accessed using `localizeCharacter(char)`:
|
|
394
|
+
* `'` (apostrophe)
|
|
395
|
+
* `&` (ampersand)
|
|
396
|
+
* `*` (asterisk)
|
|
397
|
+
* `\` (backslash)
|
|
398
|
+
* `:` (colon)
|
|
399
|
+
* `,` (comma)
|
|
400
|
+
* `>` (greater-than sign)
|
|
401
|
+
* `<` (less-than sign)
|
|
402
|
+
* `#` (number sign)
|
|
403
|
+
* `%` (percent sign)
|
|
404
|
+
* `|` (pipe)
|
|
405
|
+
* `?` (question mark)
|
|
406
|
+
* `"` (quotation mark)
|
|
407
|
+
|
|
408
|
+
```javascript
|
|
409
|
+
const value = localizer.localizeCharacter('&'); // -> 'ampersand' in en-US
|
|
410
|
+
```
|
|
411
|
+
|
|
375
412
|
### `onResourcesChange`
|
|
413
|
+
|
|
376
414
|
Provide an `onResourcesChange` callback function to perform tasks when the document language is changed and updated resources are available:
|
|
377
415
|
|
|
378
416
|
```javascript
|
package/lang/ar.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/cy.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/da.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/de.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/en-gb.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/en.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe", // short name or description of the "'" character
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand", // short name or description of the "&" character
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk", // short name or description of the "*" character
|
|
5
|
+
"intl-common:characters:backslash": "backslash", // short name or description of the "\" character
|
|
6
|
+
"intl-common:characters:colon": "colon", // short name or description of the ":" character
|
|
7
|
+
"intl-common:characters:comma": "comma", // short name or description of the "," character
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign", // short name or description of the ">" character
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign", // short name or description of the "<" character
|
|
10
|
+
"intl-common:characters:numberSign": "number sign", // short name or description of the "#" character
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign", // short name or description of the "%" character
|
|
12
|
+
"intl-common:characters:pipe": "pipe", // short name or description of the "|" character
|
|
13
|
+
"intl-common:characters:questionMark": "question mark", // short name or description of the "?" character
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark", // short name or description of the '"' character
|
|
15
|
+
};
|
package/lang/es-es.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/es.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/fr-fr.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/fr.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/hi.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/ja.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/ko.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/nl.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/pt.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/sv.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/tr.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/zh-cn.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lang/zh-tw.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"intl-common:characters:apostrophe": "apostrophe",
|
|
3
|
+
"intl-common:characters:ampersand": "ampersand",
|
|
4
|
+
"intl-common:characters:asterisk": "asterisk",
|
|
5
|
+
"intl-common:characters:backslash": "backslash",
|
|
6
|
+
"intl-common:characters:colon": "colon",
|
|
7
|
+
"intl-common:characters:comma": "comma",
|
|
8
|
+
"intl-common:characters:greaterThan": "greater-than sign",
|
|
9
|
+
"intl-common:characters:lessThan": "less-than sign",
|
|
10
|
+
"intl-common:characters:numberSign": "number sign",
|
|
11
|
+
"intl-common:characters:percentSign": "percent sign",
|
|
12
|
+
"intl-common:characters:pipe": "pipe",
|
|
13
|
+
"intl-common:characters:questionMark": "question mark",
|
|
14
|
+
"intl-common:characters:quotationMark": "quotation mark",
|
|
15
|
+
};
|
package/lib/PluralRules.js
CHANGED
|
@@ -43,9 +43,6 @@ class PluralRules extends Intl.PluralRules {
|
|
|
43
43
|
return super.supportedLocalesOf(l);
|
|
44
44
|
}).flat();
|
|
45
45
|
}
|
|
46
|
-
#localeData;
|
|
47
|
-
#locale;
|
|
48
|
-
#type;
|
|
49
46
|
|
|
50
47
|
constructor(locales, options = {}) {
|
|
51
48
|
super(locales, options);
|
|
@@ -68,6 +65,10 @@ class PluralRules extends Intl.PluralRules {
|
|
|
68
65
|
}
|
|
69
66
|
}
|
|
70
67
|
|
|
68
|
+
#localeData;
|
|
69
|
+
#locale;
|
|
70
|
+
#type;
|
|
71
|
+
|
|
71
72
|
}
|
|
72
73
|
|
|
73
74
|
Object.defineProperty(Intl, 'PluralRules', {
|
package/lib/localize.js
CHANGED
|
@@ -5,6 +5,24 @@ import IntlMessageFormat from 'intl-messageformat';
|
|
|
5
5
|
|
|
6
6
|
export const allowedTags = Object.freeze(['d2l-link', 'd2l-tooltip-help', 'p', 'br', 'b', 'strong', 'i', 'em', 'button']);
|
|
7
7
|
|
|
8
|
+
const characterMap = new Map([
|
|
9
|
+
['\'', 'apostrophe'],
|
|
10
|
+
['&', 'ampersand'],
|
|
11
|
+
['*', 'asterisk'],
|
|
12
|
+
['\\', 'backslash'],
|
|
13
|
+
[':', 'colon'],
|
|
14
|
+
[',', 'comma'],
|
|
15
|
+
['>', 'greaterThan'],
|
|
16
|
+
['<', 'lessThan'],
|
|
17
|
+
['#', 'numberSign'],
|
|
18
|
+
['%', 'percentSign'],
|
|
19
|
+
['|', 'pipe'],
|
|
20
|
+
['?', 'questionMark'],
|
|
21
|
+
['"', 'quotationMark']
|
|
22
|
+
]);
|
|
23
|
+
const commonResources = new Map();
|
|
24
|
+
export let commonResourcesImportCount = 0;
|
|
25
|
+
|
|
8
26
|
const getDisallowedTagsRegex = allowedTags => {
|
|
9
27
|
const validTerminators = '([>\\s/]|$)';
|
|
10
28
|
const allowedAfterTriangleBracket = `/?(${allowedTags.join('|')})?${validTerminators}`;
|
|
@@ -16,58 +34,14 @@ const noAllowedTagsRegex = getDisallowedTagsRegex([]);
|
|
|
16
34
|
|
|
17
35
|
export const getLocalizeClass = (superclass = class {}) => class LocalizeClass extends superclass {
|
|
18
36
|
|
|
19
|
-
static #localizeMarkup;
|
|
20
37
|
static documentLocaleSettings = getDocumentLocaleSettings();
|
|
21
38
|
|
|
22
39
|
static setLocalizeMarkup(localizeMarkup) {
|
|
23
40
|
this.#localizeMarkup ??= localizeMarkup;
|
|
24
41
|
}
|
|
25
42
|
|
|
26
|
-
#connected = false;
|
|
27
|
-
#localeChangeCallback;
|
|
28
|
-
#resolveResourcesLoaded;
|
|
29
|
-
#resourcesPromise;
|
|
30
43
|
pristine = true;
|
|
31
44
|
|
|
32
|
-
async #localeChangeHandler() {
|
|
33
|
-
if (!this._hasResources()) return;
|
|
34
|
-
|
|
35
|
-
const resourcesPromise = this.constructor._getAllLocalizeResources(this.config);
|
|
36
|
-
this.#resourcesPromise = resourcesPromise;
|
|
37
|
-
const localizeResources = (await resourcesPromise).flat(Infinity);
|
|
38
|
-
// If the locale changed while resources were being fetched, abort
|
|
39
|
-
if (this.#resourcesPromise !== resourcesPromise) return;
|
|
40
|
-
|
|
41
|
-
const allResources = {};
|
|
42
|
-
const resolvedLocales = new Set();
|
|
43
|
-
for (const { language, resources } of localizeResources) {
|
|
44
|
-
for (const [name, value] of Object.entries(resources)) {
|
|
45
|
-
allResources[name] = { language, value };
|
|
46
|
-
resolvedLocales.add(language);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
this.localize.resources = allResources;
|
|
50
|
-
this.localize.resolvedLocale = [...resolvedLocales][0];
|
|
51
|
-
if (resolvedLocales.size > 1) {
|
|
52
|
-
console.warn(`Resolved multiple locales in '${this.constructor.name || this.tagName || ''}': ${[...resolvedLocales].join(', ')}`);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
if (this.pristine) {
|
|
56
|
-
this.pristine = false;
|
|
57
|
-
this.#resolveResourcesLoaded();
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
this.#onResourcesChange();
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
#onResourcesChange() {
|
|
64
|
-
if (this.#connected) {
|
|
65
|
-
this.dispatchEvent?.(new CustomEvent('d2l-localize-resources-change'));
|
|
66
|
-
this.config?.onResourcesChange?.();
|
|
67
|
-
this.onLocalizeResourcesChange?.();
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
45
|
connect() {
|
|
72
46
|
this.#localeChangeCallback = () => this.#localeChangeHandler();
|
|
73
47
|
LocalizeClass.documentLocaleSettings.addChangeListener(this.#localeChangeCallback);
|
|
@@ -112,6 +86,17 @@ export const getLocalizeClass = (superclass = class {}) => class LocalizeClass e
|
|
|
112
86
|
return formattedMessage;
|
|
113
87
|
}
|
|
114
88
|
|
|
89
|
+
localizeCharacter(char) {
|
|
90
|
+
if (!characterMap.has(char)) {
|
|
91
|
+
throw new Error(`localizeCharacter() does not support character: "${char}"`);
|
|
92
|
+
}
|
|
93
|
+
const value = this.localize(`intl-common:characters:${characterMap.get(char)}`);
|
|
94
|
+
if (value.length === 0) {
|
|
95
|
+
throw new Error('localizeCharacter() cannot be used unless loadCommon in localizeConfig is enabled');
|
|
96
|
+
}
|
|
97
|
+
return value;
|
|
98
|
+
}
|
|
99
|
+
|
|
115
100
|
localizeHTML(name, replacements = {}) {
|
|
116
101
|
|
|
117
102
|
const { language, value } = this.localize.resources?.[name] ?? {};
|
|
@@ -139,6 +124,13 @@ export const getLocalizeClass = (superclass = class {}) => class LocalizeClass e
|
|
|
139
124
|
return formattedMessage;
|
|
140
125
|
}
|
|
141
126
|
|
|
127
|
+
static #localizeMarkup;
|
|
128
|
+
|
|
129
|
+
#connected = false;
|
|
130
|
+
#localeChangeCallback;
|
|
131
|
+
#resolveResourcesLoaded;
|
|
132
|
+
#resourcesPromise;
|
|
133
|
+
|
|
142
134
|
__resourcesLoadedPromise = new Promise(r => this.#resolveResourcesLoaded = r);
|
|
143
135
|
|
|
144
136
|
static _generatePossibleLanguages(config) {
|
|
@@ -164,8 +156,21 @@ export const getLocalizeClass = (superclass = class {}) => class LocalizeClass e
|
|
|
164
156
|
}
|
|
165
157
|
if (Object.prototype.hasOwnProperty.call(this, 'getLocalizeResources') || Object.prototype.hasOwnProperty.call(this, 'resources')) {
|
|
166
158
|
const possibleLanguages = this._generatePossibleLanguages(config);
|
|
167
|
-
|
|
168
|
-
|
|
159
|
+
if (config?.importFunc) {
|
|
160
|
+
const resourcesPromise = this.getLocalizeResources(possibleLanguages, config);
|
|
161
|
+
resourcesLoadedPromises.push(resourcesPromise);
|
|
162
|
+
}
|
|
163
|
+
if (config?.loadCommon) {
|
|
164
|
+
resourcesLoadedPromises.push(this.getLocalizeResources(possibleLanguages, {
|
|
165
|
+
importFunc: async(lang) => {
|
|
166
|
+
if (commonResources.has(lang)) return commonResources.get(lang);
|
|
167
|
+
const resources = (await import(`../lang/${lang}.js`)).default;
|
|
168
|
+
commonResourcesImportCount++;
|
|
169
|
+
commonResources.set(lang, resources);
|
|
170
|
+
return resources;
|
|
171
|
+
}
|
|
172
|
+
}));
|
|
173
|
+
}
|
|
169
174
|
}
|
|
170
175
|
return Promise.all(resourcesLoadedPromises);
|
|
171
176
|
}
|
|
@@ -203,6 +208,45 @@ export const getLocalizeClass = (superclass = class {}) => class LocalizeClass e
|
|
|
203
208
|
return this.constructor.localizeConfig ? Boolean(this.constructor.localizeConfig.importFunc) : this.constructor.getLocalizeResources !== undefined;
|
|
204
209
|
}
|
|
205
210
|
|
|
211
|
+
async #localeChangeHandler() {
|
|
212
|
+
if (!this._hasResources()) return;
|
|
213
|
+
|
|
214
|
+
const resourcesPromise = this.constructor._getAllLocalizeResources(this.config);
|
|
215
|
+
this.#resourcesPromise = resourcesPromise;
|
|
216
|
+
const localizeResources = (await resourcesPromise).flat(Infinity);
|
|
217
|
+
// If the locale changed while resources were being fetched, abort
|
|
218
|
+
if (this.#resourcesPromise !== resourcesPromise) return;
|
|
219
|
+
|
|
220
|
+
const allResources = {};
|
|
221
|
+
const resolvedLocales = new Set();
|
|
222
|
+
for (const { language, resources } of localizeResources) {
|
|
223
|
+
for (const [name, value] of Object.entries(resources)) {
|
|
224
|
+
allResources[name] = { language, value };
|
|
225
|
+
resolvedLocales.add(language);
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
this.localize.resources = allResources;
|
|
229
|
+
this.localize.resolvedLocale = [...resolvedLocales][0];
|
|
230
|
+
if (resolvedLocales.size > 1) {
|
|
231
|
+
console.warn(`Resolved multiple locales in '${this.constructor.name || this.tagName || ''}': ${[...resolvedLocales].join(', ')}`);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
if (this.pristine) {
|
|
235
|
+
this.pristine = false;
|
|
236
|
+
this.#resolveResourcesLoaded();
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
this.#onResourcesChange();
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
#onResourcesChange() {
|
|
243
|
+
if (this.#connected) {
|
|
244
|
+
this.dispatchEvent?.(new CustomEvent('d2l-localize-resources-change'));
|
|
245
|
+
this.config?.onResourcesChange?.();
|
|
246
|
+
this.onLocalizeResourcesChange?.();
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
|
|
206
250
|
};
|
|
207
251
|
|
|
208
252
|
export const Localize = class extends getLocalizeClass() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/intl",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.20.0",
|
|
4
4
|
"description": "Internationalization APIs for number, date, time and file size formatting and parsing in D2L Brightspace.",
|
|
5
5
|
"main": "lib/number.js",
|
|
6
6
|
"type": "module",
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
"test": "npm run lint && npm run test:unit"
|
|
12
12
|
},
|
|
13
13
|
"files": [
|
|
14
|
+
"/lang",
|
|
14
15
|
"/lib",
|
|
15
16
|
"/helpers"
|
|
16
17
|
],
|