@italia/i18n 0.0.1-alpha.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/AUTHORS +3 -0
- package/LICENSE +11 -0
- package/README.md +257 -0
- package/dist/src/controllers/localize.d.ts +75 -0
- package/dist/src/controllers/localize.d.ts.map +1 -0
- package/dist/src/index.d.ts +5 -0
- package/dist/src/index.d.ts.map +1 -0
- package/dist/src/index.js +287 -0
- package/dist/src/index.js.map +1 -0
- package/dist/src/mixins/localization.d.ts +447 -0
- package/dist/src/mixins/localization.d.ts.map +1 -0
- package/package.json +57 -0
package/AUTHORS
ADDED
package/LICENSE
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
Copyright (c) 2025, the respective contributors, as shown by the AUTHORS file.
|
|
2
|
+
|
|
3
|
+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
|
|
4
|
+
|
|
5
|
+
1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
|
|
6
|
+
|
|
7
|
+
2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
|
|
8
|
+
|
|
9
|
+
3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
|
|
10
|
+
|
|
11
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
package/README.md
ADDED
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
# \i18n
|
|
2
|
+
|
|
3
|
+
Questa micro-libreria senza dipendenze ha l’obiettivo di fornire un Reactive Controller leggero per condividere e applicare traduzioni all’interno di componenti personalizzati. Non è pensata per sostituire strumenti di i18n completi come i18next
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm i @italia/i18n
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## How it works
|
|
12
|
+
|
|
13
|
+
To achieve this goal, we lean on HTML’s [`lang`](~https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang~) attribute to determine what language should be used. The default locale is specified by `<html lang="...">`, but any localized element can be scoped to a locale by setting its `lang` attribute. This means you can have more than one language per page, if desired.
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<html lang="en">
|
|
17
|
+
<body>
|
|
18
|
+
<my-element>This element will be English</my-element>
|
|
19
|
+
<my-element lang="es">This element will be Spanish</my-element>
|
|
20
|
+
<my-element lang="fr">This element will be French</my-element>
|
|
21
|
+
</body>
|
|
22
|
+
</html>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
This library provides a set of tools to localize dates, currencies, numbers, and terms in your custom element library with a minimal footprint. Reactivity is achieved with a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) that listens for `lang` changes on `<html>`.
|
|
26
|
+
|
|
27
|
+
Majority of use cases appear to favor a single language per page. However, multiple languages per page are also supported, but you'll need to explicitly set the `lang` attribute on all components whose language differs from the one set in `<html lang>`.
|
|
28
|
+
|
|
29
|
+
## Usage
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<script type="module">
|
|
33
|
+
import '@italia/i18n';
|
|
34
|
+
registerTranslation(
|
|
35
|
+
{
|
|
36
|
+
$code: 'it',
|
|
37
|
+
$name: 'Italiano',
|
|
38
|
+
$dir: 'ltr',
|
|
39
|
+
|
|
40
|
+
// le tue traduzioni
|
|
41
|
+
video_consent_accept: 'Accetto i cookie',
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
$code: 'en',
|
|
45
|
+
$name: 'English',
|
|
46
|
+
$dir: 'ltr',
|
|
47
|
+
|
|
48
|
+
// le tue traduzioni
|
|
49
|
+
video_consent_accept: 'Accept',
|
|
50
|
+
},
|
|
51
|
+
);
|
|
52
|
+
</script>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
To set the page locale, apply the desired lang attribute to the <html> element.
|
|
56
|
+
|
|
57
|
+
If you want to change a locale only on a specific web-component, you could pass lang and dir attribute on it.
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<my-component lang="en" dir="ltr"></my-component>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Creating a Translation
|
|
64
|
+
|
|
65
|
+
All translations must extend the `Translation` type and implement the required meta properties (denoted by a `$` prefix). Additional terms can be implemented as show below.
|
|
66
|
+
|
|
67
|
+
```ts
|
|
68
|
+
// en.ts
|
|
69
|
+
import type { Translation } from '@italia/i18n';
|
|
70
|
+
|
|
71
|
+
const translation: Translation = {
|
|
72
|
+
$code: 'en',
|
|
73
|
+
$name: 'English',
|
|
74
|
+
$dir: 'ltr',
|
|
75
|
+
|
|
76
|
+
// Simple terms
|
|
77
|
+
upload: 'Upload',
|
|
78
|
+
|
|
79
|
+
// Terms with placeholders
|
|
80
|
+
greetUser: (name: string) => `Hello, ${name}!`,
|
|
81
|
+
|
|
82
|
+
// Plurals
|
|
83
|
+
numFilesSelected: (count: number) => {
|
|
84
|
+
if (count === 0) return 'No files selected';
|
|
85
|
+
if (count === 1) return '1 file selected';
|
|
86
|
+
return `${count} files selected`;
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
export default translation;
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Registering Translations
|
|
94
|
+
|
|
95
|
+
Once you've created a translation, you need to register it before use. To register a translation, call the `registerTranslation()` method. This example imports and register two translations up front.
|
|
96
|
+
|
|
97
|
+
```ts
|
|
98
|
+
import { registerTranslation } from '@italia/i18n';
|
|
99
|
+
import en from './en';
|
|
100
|
+
import es from './es';
|
|
101
|
+
|
|
102
|
+
registerTranslation(en, es);
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
The first translation that's registered will be used as the _fallback_. That is, if a term is missing from the target language, the fallback language will be used instead.
|
|
106
|
+
|
|
107
|
+
Translations registered with country such as `en-GB` are supported. However, your fallback translation must be registered with only a language code (e.g. `en`) to ensure users of unsupported regions will still receive a comprehensible translation.
|
|
108
|
+
|
|
109
|
+
For example, if you're fallback language is `en-US`, you should register it as `en` so users with unsupported `en-*` country codes will receive it as a fallback. Then you can register country codes such as `en-GB` and `en-AU` to improve the experience for additional regions.
|
|
110
|
+
|
|
111
|
+
It's important to note that translations _do not_ have to be registered up front. You can register them on demand as the language changes in your app. Upon registration, localized components will update automatically.
|
|
112
|
+
|
|
113
|
+
Here's a sample function that dynamically loads a translation.
|
|
114
|
+
|
|
115
|
+
```ts
|
|
116
|
+
import { registerTranslation } from '@italia/i18n';
|
|
117
|
+
|
|
118
|
+
async function changeLanguage(lang) {
|
|
119
|
+
const availableTranslations = ['en', 'es', 'fr', 'de'];
|
|
120
|
+
|
|
121
|
+
if (availableTranslations.includes(lang)) {
|
|
122
|
+
const translation = await import(`/path/to/translations/${lang}.js`);
|
|
123
|
+
registerTranslation(translation);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Localizing Components
|
|
129
|
+
|
|
130
|
+
You can use the `LocalizeController` with any library that supports [Lit's Reactive Controller pattern](https://lit.dev/docs/composition/controllers/). In Lit, a localized custom element will look something like this.
|
|
131
|
+
|
|
132
|
+
```ts
|
|
133
|
+
import { LitElement } from 'lit';
|
|
134
|
+
import { customElement } from 'lit/decorators.js';
|
|
135
|
+
import { LocalizeController } from '@italia/i18n';
|
|
136
|
+
|
|
137
|
+
@customElement('my-element')
|
|
138
|
+
export class MyElement extends LitElement {
|
|
139
|
+
private localize = new LocalizeController(this);
|
|
140
|
+
|
|
141
|
+
// Make sure to make `dir` and `lang` reactive so the component will respond to changes to its own attributes
|
|
142
|
+
@property() dir: string;
|
|
143
|
+
@property() lang: string;
|
|
144
|
+
|
|
145
|
+
render() {
|
|
146
|
+
return html`
|
|
147
|
+
<!-- Terms -->
|
|
148
|
+
${this.localize.term('hello')}
|
|
149
|
+
|
|
150
|
+
<!-- Dates -->
|
|
151
|
+
${(this.localize.date('2021-09-15 14:00:00 ET'), { month: 'long', day: 'numeric', year: 'numeric' })}
|
|
152
|
+
|
|
153
|
+
<!-- Numbers/currency -->
|
|
154
|
+
${this.localize.number(1000, { style: 'currency', currency: 'USD' })}
|
|
155
|
+
|
|
156
|
+
<!-- Determining language -->
|
|
157
|
+
${this.localize.lang()}
|
|
158
|
+
|
|
159
|
+
<!-- Determining directionality, e.g. 'ltr' or 'rtl' -->
|
|
160
|
+
${this.localize.dir()}
|
|
161
|
+
`;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
## Typed Translations and Arguments
|
|
167
|
+
|
|
168
|
+
Because translations are defined by the user, there's no way for TypeScript to automatically know about the terms you've defined. This means you won't get strongly typed arguments when calling `this.localize.term()`. However, you can solve this by extending `Translation` and `LocalizeController`.
|
|
169
|
+
|
|
170
|
+
In a separate file, e.g. `my-localize.ts`, add the following code.
|
|
171
|
+
|
|
172
|
+
```ts
|
|
173
|
+
import { LocalizeController as DefaultLocalizeController } from '@italia/i18n';
|
|
174
|
+
|
|
175
|
+
// Extend the default controller with your custom translation
|
|
176
|
+
export class LocalizeController extends DefaultLocalizeController<MyTranslation> {}
|
|
177
|
+
|
|
178
|
+
// Export `registerTranslation` so you can import everything from this file
|
|
179
|
+
export { registerTranslation } from '@italia/i18n';
|
|
180
|
+
|
|
181
|
+
// Define your translation terms here
|
|
182
|
+
export interface MyTranslation extends Translation {
|
|
183
|
+
myTerm: string;
|
|
184
|
+
myOtherTerm: string;
|
|
185
|
+
myTermWithArgs: (count: string) => string;
|
|
186
|
+
}
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
Now you can import `MyLocalizeController` and get strongly typed translations when you use `this.localize.term()`!
|
|
190
|
+
|
|
191
|
+
## Advantages
|
|
192
|
+
|
|
193
|
+
- Zero dependencies
|
|
194
|
+
- Extremely lightweight
|
|
195
|
+
- Supports simple terms, plurals, and complex translations
|
|
196
|
+
- Fun fact: some languages have [six plural forms](https://lingohub.com/blog/2019/02/pluralization) and this utility supports that
|
|
197
|
+
- Supports dates, numbers, and currencies using built-in [`Intl` APIs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)
|
|
198
|
+
- Good DX for custom element authors and consumers
|
|
199
|
+
- Intuitive API for custom element authors
|
|
200
|
+
- Consumers only need to load the translations they want and set the `lang` attribute
|
|
201
|
+
- Translations can be loaded up front or on demand
|
|
202
|
+
|
|
203
|
+
## Linting and formatting
|
|
204
|
+
|
|
205
|
+
To scan the project for linting and formatting errors, run
|
|
206
|
+
|
|
207
|
+
```bash
|
|
208
|
+
npm run lint
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
To automatically fix linting and formatting errors, run
|
|
212
|
+
|
|
213
|
+
```bash
|
|
214
|
+
npm run format
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
## Testing with Web Test Runner
|
|
218
|
+
|
|
219
|
+
To execute a single test run:
|
|
220
|
+
|
|
221
|
+
```bash
|
|
222
|
+
npm run test
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
To run the tests in interactive watch mode run:
|
|
226
|
+
|
|
227
|
+
```bash
|
|
228
|
+
npm run test:watch
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
## Demoing with Storybook
|
|
232
|
+
|
|
233
|
+
To run a local instance of Storybook for your component, run
|
|
234
|
+
|
|
235
|
+
```bash
|
|
236
|
+
npm run storybook
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
To build a production version of Storybook, run
|
|
240
|
+
|
|
241
|
+
```bash
|
|
242
|
+
npm run storybook:build
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
## Tooling configs
|
|
246
|
+
|
|
247
|
+
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
|
|
248
|
+
|
|
249
|
+
If you customize the configuration a lot, you can consider moving them to individual files.
|
|
250
|
+
|
|
251
|
+
## Local Demo with `web-dev-server`
|
|
252
|
+
|
|
253
|
+
```bash
|
|
254
|
+
npm start
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
To run a local development server that serves the basic demo located in `demo/index.html`
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import type { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2
|
+
export type FunctionParams<T> = T extends (...args: infer U) => string ? U : [];
|
|
3
|
+
export interface Translation {
|
|
4
|
+
$code: string;
|
|
5
|
+
$name: string;
|
|
6
|
+
$dir: 'ltr' | 'rtl';
|
|
7
|
+
}
|
|
8
|
+
export interface DefaultTranslation extends Translation {
|
|
9
|
+
[key: string]: any;
|
|
10
|
+
}
|
|
11
|
+
export interface ExistsOptions {
|
|
12
|
+
lang: string;
|
|
13
|
+
includeFallback: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare global {
|
|
16
|
+
interface Window {
|
|
17
|
+
translations?: Map<string, Translation>;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
/** Updates all localized elements that are currently connected */
|
|
21
|
+
export declare function update(): void;
|
|
22
|
+
/** Registers one or more translations */
|
|
23
|
+
export declare function registerTranslation(...translation: Translation[]): void;
|
|
24
|
+
declare global {
|
|
25
|
+
interface Window {
|
|
26
|
+
registerTranslation: typeof registerTranslation;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Localize Reactive Controller for components built with Lit
|
|
31
|
+
*
|
|
32
|
+
* To use this controller, import the class and instantiate it in a custom element constructor:
|
|
33
|
+
*
|
|
34
|
+
* private localize = new LocalizeController(this);
|
|
35
|
+
*
|
|
36
|
+
* This will add the element to the set and make it respond to changes to <html dir|lang> automatically. To make it
|
|
37
|
+
* respond to changes to its own dir|lang properties, make it a property:
|
|
38
|
+
*
|
|
39
|
+
* @property() dir: string;
|
|
40
|
+
* @property() lang: string;
|
|
41
|
+
*
|
|
42
|
+
* To use a translation method, call it like this:
|
|
43
|
+
*
|
|
44
|
+
* ${this.localize.term('term_key_here')}
|
|
45
|
+
* ${this.localize.date('2021-12-03')}
|
|
46
|
+
* ${this.localize.number(1000000)}
|
|
47
|
+
*/
|
|
48
|
+
export declare class LocalizeController<UserTranslation extends Translation = DefaultTranslation> implements ReactiveController {
|
|
49
|
+
host: ReactiveControllerHost & HTMLElement;
|
|
50
|
+
constructor(host: ReactiveControllerHost & HTMLElement);
|
|
51
|
+
hostConnected(): void;
|
|
52
|
+
hostDisconnected(): void;
|
|
53
|
+
/**
|
|
54
|
+
* Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to
|
|
55
|
+
* lowercase.
|
|
56
|
+
*/
|
|
57
|
+
dir(): string;
|
|
58
|
+
/**
|
|
59
|
+
* Gets the host element's language as determined by the `lang` attribute. The return value is transformed to
|
|
60
|
+
* lowercase.
|
|
61
|
+
*/
|
|
62
|
+
lang(): string;
|
|
63
|
+
private getTranslationData;
|
|
64
|
+
/** Determines if the specified term exists, optionally checking the fallback translation. */
|
|
65
|
+
exists<K extends keyof UserTranslation>(key: K, options: Partial<ExistsOptions>): boolean;
|
|
66
|
+
/** Outputs a translated term. */
|
|
67
|
+
term<K extends keyof UserTranslation>(key: K, ...args: FunctionParams<UserTranslation[K]>): string;
|
|
68
|
+
/** Outputs a localized date in the specified format. */
|
|
69
|
+
date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string;
|
|
70
|
+
/** Outputs a localized number in the specified format. */
|
|
71
|
+
number(numberToFormat: number | string, options?: Intl.NumberFormatOptions): string;
|
|
72
|
+
/** Outputs a localized time in relative format. */
|
|
73
|
+
relativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions): string;
|
|
74
|
+
}
|
|
75
|
+
//# sourceMappingURL=localize.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"localize.d.ts","sourceRoot":"","sources":["../../../src/controllers/localize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAElF,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,MAAM,CAAC,KAAK,MAAM,GAAG,CAAC,GAAG,EAAE,CAAC;AAEhF,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,GAAG,KAAK,CAAC;CACrB;AAED,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,OAAO,CAAC;CAC1B;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;KACzC;CACF;AAuBD,kEAAkE;AAClE,wBAAgB,MAAM,SAYrB;AAcD,yCAAyC;AACzC,wBAAgB,mBAAmB,CAAC,GAAG,WAAW,EAAE,WAAW,EAAE,QAkBhE;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,mBAAmB,EAAE,OAAO,mBAAmB,CAAC;KACjD;CACF;AAID;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,kBAAkB,CAAC,eAAe,SAAS,WAAW,GAAG,kBAAkB,CACtF,YAAW,kBAAkB;IAE7B,IAAI,EAAE,sBAAsB,GAAG,WAAW,CAAC;gBAE/B,IAAI,EAAE,sBAAsB,GAAG,WAAW;IAKtD,aAAa;IAIb,gBAAgB;IAIhB;;;OAGG;IACH,GAAG;IAIH;;;OAGG;IACH,IAAI;IAKJ,OAAO,CAAC,kBAAkB;IAY1B,6FAA6F;IAC7F,MAAM,CAAC,CAAC,SAAS,MAAM,eAAe,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,OAAO;IAmBzF,iCAAiC;IACjC,IAAI,CAAC,CAAC,SAAS,MAAM,eAAe,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM;IAwBlG,wDAAwD;IACxD,IAAI,CAAC,YAAY,EAAE,IAAI,GAAG,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,GAAG,MAAM;IAK/E,0DAA0D;IAC1D,MAAM,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,GAAG,MAAM;IAKnF,mDAAmD;IACnD,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,yBAAyB,GAAG,MAAM;CAGjH"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import LocalizeMixin from './mixins/localization.js';
|
|
2
|
+
export { type Translation, type DefaultTranslation, registerTranslation, LocalizeController, } from './controllers/localize.js';
|
|
3
|
+
export { LocalizeMixin };
|
|
4
|
+
export type Constructor<T = {}> = new (...args: any[]) => T;
|
|
5
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,0BAA0B,CAAC;AAErD,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACvB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC"}
|
|
@@ -0,0 +1,287 @@
|
|
|
1
|
+
const connectedElements = new Set();
|
|
2
|
+
if (window && !window.translations) {
|
|
3
|
+
window.translations = new Map();
|
|
4
|
+
}
|
|
5
|
+
const { translations } = window;
|
|
6
|
+
let fallback;
|
|
7
|
+
// TODO: We need some way for users to be able to set these on the server.
|
|
8
|
+
let documentDirection = 'ltr';
|
|
9
|
+
// Fallback for server.
|
|
10
|
+
let documentLanguage = 'en';
|
|
11
|
+
const isClient = typeof MutationObserver !== 'undefined' &&
|
|
12
|
+
typeof document !== 'undefined' &&
|
|
13
|
+
typeof document.documentElement !== 'undefined';
|
|
14
|
+
/** Updates all localized elements that are currently connected */
|
|
15
|
+
function update() {
|
|
16
|
+
if (isClient) {
|
|
17
|
+
documentDirection = document.documentElement.dir || 'ltr';
|
|
18
|
+
documentLanguage = document.documentElement.lang || navigator.language;
|
|
19
|
+
}
|
|
20
|
+
[...connectedElements.keys()].forEach((el) => {
|
|
21
|
+
const litEl = el;
|
|
22
|
+
if (typeof litEl.requestUpdate === 'function') {
|
|
23
|
+
litEl.requestUpdate();
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
if (isClient) {
|
|
28
|
+
const documentElementObserver = new MutationObserver(update);
|
|
29
|
+
documentDirection = document.documentElement.dir || 'ltr';
|
|
30
|
+
documentLanguage = document.documentElement.lang || navigator.language;
|
|
31
|
+
// Watch for changes on <html lang>
|
|
32
|
+
documentElementObserver.observe(document.documentElement, {
|
|
33
|
+
attributes: true,
|
|
34
|
+
attributeFilter: ['dir', 'lang'],
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
/** Registers one or more translations */
|
|
38
|
+
function registerTranslation(...translation) {
|
|
39
|
+
translation.forEach((t) => {
|
|
40
|
+
const code = t.$code.toLowerCase();
|
|
41
|
+
if (translations.has(code)) {
|
|
42
|
+
// Merge translations that share the same language code
|
|
43
|
+
translations.set(code, { ...translations.get(code), ...t });
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
translations.set(code, t);
|
|
47
|
+
}
|
|
48
|
+
// The first translation that's registered is the fallback
|
|
49
|
+
if (!fallback) {
|
|
50
|
+
fallback = t;
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
update();
|
|
54
|
+
}
|
|
55
|
+
window.registerTranslation = registerTranslation;
|
|
56
|
+
/**
|
|
57
|
+
* Localize Reactive Controller for components built with Lit
|
|
58
|
+
*
|
|
59
|
+
* To use this controller, import the class and instantiate it in a custom element constructor:
|
|
60
|
+
*
|
|
61
|
+
* private localize = new LocalizeController(this);
|
|
62
|
+
*
|
|
63
|
+
* This will add the element to the set and make it respond to changes to <html dir|lang> automatically. To make it
|
|
64
|
+
* respond to changes to its own dir|lang properties, make it a property:
|
|
65
|
+
*
|
|
66
|
+
* @property() dir: string;
|
|
67
|
+
* @property() lang: string;
|
|
68
|
+
*
|
|
69
|
+
* To use a translation method, call it like this:
|
|
70
|
+
*
|
|
71
|
+
* ${this.localize.term('term_key_here')}
|
|
72
|
+
* ${this.localize.date('2021-12-03')}
|
|
73
|
+
* ${this.localize.number(1000000)}
|
|
74
|
+
*/
|
|
75
|
+
class LocalizeController {
|
|
76
|
+
constructor(host) {
|
|
77
|
+
this.host = host;
|
|
78
|
+
this.host.addController(this);
|
|
79
|
+
}
|
|
80
|
+
hostConnected() {
|
|
81
|
+
connectedElements.add(this.host);
|
|
82
|
+
}
|
|
83
|
+
hostDisconnected() {
|
|
84
|
+
connectedElements.delete(this.host);
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to
|
|
88
|
+
* lowercase.
|
|
89
|
+
*/
|
|
90
|
+
dir() {
|
|
91
|
+
return `${this.host.dir || documentDirection}`.toLowerCase();
|
|
92
|
+
}
|
|
93
|
+
/**
|
|
94
|
+
* Gets the host element's language as determined by the `lang` attribute. The return value is transformed to
|
|
95
|
+
* lowercase.
|
|
96
|
+
*/
|
|
97
|
+
lang() {
|
|
98
|
+
return `${this.host.lang || documentLanguage}`.toLowerCase();
|
|
99
|
+
}
|
|
100
|
+
// eslint-disable-next-line class-methods-use-this
|
|
101
|
+
getTranslationData(lang) {
|
|
102
|
+
// Convert "en_US" to "en-US". Note that both underscores and dashes are allowed per spec, but underscores result in
|
|
103
|
+
// a RangeError by the call to `new Intl.Locale()`. See: https://unicode.org/reports/tr35/#unicode-locale-identifier
|
|
104
|
+
const locale = new Intl.Locale(lang.replace(/_/g, '-'));
|
|
105
|
+
const language = locale?.language.toLowerCase();
|
|
106
|
+
const region = locale?.region?.toLowerCase() ?? '';
|
|
107
|
+
const primary = translations.get(`${language}-${region}`);
|
|
108
|
+
const secondary = translations.get(language);
|
|
109
|
+
return { locale, language, region, primary, secondary };
|
|
110
|
+
}
|
|
111
|
+
/** Determines if the specified term exists, optionally checking the fallback translation. */
|
|
112
|
+
exists(key, options) {
|
|
113
|
+
const { primary, secondary } = this.getTranslationData(options.lang ?? this.lang());
|
|
114
|
+
const mergedOptions = {
|
|
115
|
+
includeFallback: false,
|
|
116
|
+
...options,
|
|
117
|
+
};
|
|
118
|
+
if ((primary && primary[key]) ||
|
|
119
|
+
(secondary && secondary[key]) ||
|
|
120
|
+
(mergedOptions.includeFallback && fallback && fallback[key])) {
|
|
121
|
+
return true;
|
|
122
|
+
}
|
|
123
|
+
return false;
|
|
124
|
+
}
|
|
125
|
+
/** Outputs a translated term. */
|
|
126
|
+
term(key, ...args) {
|
|
127
|
+
const { primary, secondary } = this.getTranslationData(this.lang());
|
|
128
|
+
let term;
|
|
129
|
+
// Look for a matching term using regionCode, code, then the fallback
|
|
130
|
+
if (primary && primary[key]) {
|
|
131
|
+
term = primary[key];
|
|
132
|
+
}
|
|
133
|
+
else if (secondary && secondary[key]) {
|
|
134
|
+
term = secondary[key];
|
|
135
|
+
}
|
|
136
|
+
else if (fallback && fallback[key]) {
|
|
137
|
+
term = fallback[key];
|
|
138
|
+
}
|
|
139
|
+
else {
|
|
140
|
+
// eslint-disable-next-line no-console
|
|
141
|
+
console.error(`No translation found for: ${String(key)}`);
|
|
142
|
+
return String(key);
|
|
143
|
+
}
|
|
144
|
+
if (typeof term === 'function') {
|
|
145
|
+
return term(...args);
|
|
146
|
+
}
|
|
147
|
+
return term;
|
|
148
|
+
}
|
|
149
|
+
/** Outputs a localized date in the specified format. */
|
|
150
|
+
date(dateToFormat, options) {
|
|
151
|
+
const date = new Date(dateToFormat);
|
|
152
|
+
return new Intl.DateTimeFormat(this.lang(), options).format(date);
|
|
153
|
+
}
|
|
154
|
+
/** Outputs a localized number in the specified format. */
|
|
155
|
+
number(numberToFormat, options) {
|
|
156
|
+
const num = Number(numberToFormat);
|
|
157
|
+
return Number.isNaN(num) ? '' : new Intl.NumberFormat(this.lang(), options).format(num);
|
|
158
|
+
}
|
|
159
|
+
/** Outputs a localized time in relative format. */
|
|
160
|
+
relativeTime(value, unit, options) {
|
|
161
|
+
return new Intl.RelativeTimeFormat(this.lang(), options).format(value, unit);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/**
|
|
166
|
+
* @param Base The base class.
|
|
167
|
+
* @returns A mix-in implementing `localizations` method.
|
|
168
|
+
*
|
|
169
|
+
*@example
|
|
170
|
+
* <!-- Terms -->
|
|
171
|
+
${this.$localize.term('hello')}
|
|
172
|
+
or
|
|
173
|
+
${this.$t('hello')}
|
|
174
|
+
|
|
175
|
+
<!-- Dates -->
|
|
176
|
+
${this.$localize.date('2021-09-15 14:00:00 ET', { month: 'long', day: 'numeric', year: 'numeric' })}
|
|
177
|
+
or
|
|
178
|
+
${this.$d('2021-09-15 14:00:00 ET', { month: 'long', day: 'numeric', year: 'numeric' })}
|
|
179
|
+
|
|
180
|
+
<!-- Numbers/currency -->
|
|
181
|
+
${this.$localize.number(1000, { style: 'currency', currency: 'USD'})}
|
|
182
|
+
or
|
|
183
|
+
${this.$n(1000,{ style: 'currency', currency: 'USD'})}
|
|
184
|
+
|
|
185
|
+
<!-- Determining language -->
|
|
186
|
+
${this.$localize.lang()}
|
|
187
|
+
|
|
188
|
+
<!-- Determining directionality, e.g. 'ltr' or 'rtl' -->
|
|
189
|
+
${this.$localize.dir()}
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
*** HOW TO DEFINE TRANSLATIONS: ***
|
|
193
|
+
// Simple terms
|
|
194
|
+
upload: 'Upload',
|
|
195
|
+
|
|
196
|
+
// Terms with placeholders
|
|
197
|
+
greetUser: (name: string) => `Hello, ${name}!`,
|
|
198
|
+
|
|
199
|
+
// Plurals
|
|
200
|
+
numFilesSelected: (count: number) => {
|
|
201
|
+
if (count === 0) return 'No files selected';
|
|
202
|
+
if (count === 1) return '1 file selected';
|
|
203
|
+
return `${count} files selected`;
|
|
204
|
+
}
|
|
205
|
+
*/
|
|
206
|
+
const LocalizeMixin = (Base) => class extends Base {
|
|
207
|
+
constructor() {
|
|
208
|
+
super(...arguments);
|
|
209
|
+
this.localize = new LocalizeController(this);
|
|
210
|
+
// Provide default values to avoid definite assignment errors and avoid decorators
|
|
211
|
+
this.dir = '';
|
|
212
|
+
this.lang = '';
|
|
213
|
+
}
|
|
214
|
+
/**
|
|
215
|
+
* Restituisce tutta l'utility di traduzione
|
|
216
|
+
*
|
|
217
|
+
|
|
218
|
+
*
|
|
219
|
+
* @returns tutta l'utility di traduzione
|
|
220
|
+
*
|
|
221
|
+
* @example
|
|
222
|
+
* this.$localize.lang() -> ritorna la lingua corrente
|
|
223
|
+
* this.$localize.dir() -> ritorna la direzione della lingua corrente
|
|
224
|
+
*/
|
|
225
|
+
get $localize() {
|
|
226
|
+
return this.localize;
|
|
227
|
+
}
|
|
228
|
+
/**
|
|
229
|
+
* Restituisce una stringa localizzata a partire da una chiave di termine.
|
|
230
|
+
*
|
|
231
|
+
* Utilizza il `LocalizeController` per accedere al dizionario corrente e
|
|
232
|
+
* tradurre la chiave fornita secondo la lingua attiva.
|
|
233
|
+
*
|
|
234
|
+
* @param t - La chiave del termine da localizzare (es. 'hello', 'submit', ecc.).
|
|
235
|
+
* @returns La stringa tradotta in base alla lingua attiva. Se la chiave non è trovata, restituisce la chiave stessa.
|
|
236
|
+
*
|
|
237
|
+
* @example
|
|
238
|
+
* this.$t('hello'); // → "Ciao" (in locale it-IT)
|
|
239
|
+
*/
|
|
240
|
+
$t(t) {
|
|
241
|
+
// format term
|
|
242
|
+
return this.localize.term(t);
|
|
243
|
+
}
|
|
244
|
+
/**
|
|
245
|
+
* Formatta una data in base alla localizzazione attiva.
|
|
246
|
+
*
|
|
247
|
+
* Utilizza il `LocalizeController` per restituire una stringa localizzata
|
|
248
|
+
* secondo le opzioni fornite (es. mese esteso, anno, ecc.).
|
|
249
|
+
*
|
|
250
|
+
* @param n - La data da formattare come stringa compatibile (es. ISO o con timezone, es. '2021-09-15 14:00:00 ET').
|
|
251
|
+
* @param p - Le opzioni di formattazione per `Intl.DateTimeFormat` (es. { year: 'numeric', month: 'long', day: 'numeric' }).
|
|
252
|
+
* @returns Una stringa rappresentante la data formattata secondo la localizzazione attiva.
|
|
253
|
+
*
|
|
254
|
+
* @example
|
|
255
|
+
* this.$d('2021-09-15 14:00:00 ET', { year: 'numeric', month: 'long', day: 'numeric' });
|
|
256
|
+
* // → "15 settembre 2021" (in locale it-IT)
|
|
257
|
+
*/
|
|
258
|
+
$d(d, p) {
|
|
259
|
+
// format date
|
|
260
|
+
return this.localize.date(d, p);
|
|
261
|
+
}
|
|
262
|
+
/**
|
|
263
|
+
* Formatta un numero secondo le impostazioni locali dell'utente corrente.
|
|
264
|
+
*
|
|
265
|
+
* Utilizza il `LocalizeController` per applicare formattazione numerica,
|
|
266
|
+
* incluse opzioni come separatori, decimali, valute, ecc.
|
|
267
|
+
*
|
|
268
|
+
* @param d - Il numero da formattare.
|
|
269
|
+
* @param p - Le opzioni di formattazione (es. { style: 'currency', currency: 'EUR' }).
|
|
270
|
+
* @returns Una stringa rappresentante il numero formattato secondo la localizzazione attiva.
|
|
271
|
+
*
|
|
272
|
+
* @example
|
|
273
|
+
* this.$n(1234.56, { style: 'currency', currency: 'USD' }); // → "$1,234.56" (in locale en-US)
|
|
274
|
+
*/
|
|
275
|
+
$n(d, p) {
|
|
276
|
+
return this.localize.number(d, p);
|
|
277
|
+
}
|
|
278
|
+
};
|
|
279
|
+
// export interface LocalizedComponent {
|
|
280
|
+
// $t(t: string): string;
|
|
281
|
+
// $d(d: Date | string, p?: Intl.DateTimeFormatOptions): string;
|
|
282
|
+
// $n(n: number, p?: Intl.NumberFormatOptions): string;
|
|
283
|
+
// $localize: LocalizeController;
|
|
284
|
+
// }
|
|
285
|
+
|
|
286
|
+
export { LocalizeController, LocalizeMixin, registerTranslation };
|
|
287
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/controllers/localize.ts","../../../src/mixins/localization.ts"],"sourcesContent":["import type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport type FunctionParams<T> = T extends (...args: infer U) => string ? U : [];\n\nexport interface Translation {\n $code: string; // e.g. en, en-GB\n $name: string; // e.g. English, Español\n $dir: 'ltr' | 'rtl';\n}\n\nexport interface DefaultTranslation extends Translation {\n [key: string]: any;\n}\n\nexport interface ExistsOptions {\n lang: string;\n includeFallback: boolean;\n}\n\nconst connectedElements = new Set<HTMLElement>();\n\ndeclare global {\n interface Window {\n translations?: Map<string, Translation>;\n }\n}\n\nif (window && !window.translations) {\n window.translations = new Map<string, Translation>();\n}\n\nconst { translations }: { translations: Map<string, Translation> } = window as Window & {\n translations: Map<string, Translation>;\n};\n\nlet fallback: Translation;\n\n// TODO: We need some way for users to be able to set these on the server.\nlet documentDirection = 'ltr';\n\n// Fallback for server.\nlet documentLanguage = 'en';\n\nconst isClient =\n typeof MutationObserver !== 'undefined' &&\n typeof document !== 'undefined' &&\n typeof document.documentElement !== 'undefined';\n\n/** Updates all localized elements that are currently connected */\nexport function update() {\n if (isClient) {\n documentDirection = document.documentElement.dir || 'ltr';\n documentLanguage = document.documentElement.lang || navigator.language;\n }\n\n [...connectedElements.keys()].forEach((el) => {\n const litEl = el as unknown as LitElement;\n if (typeof litEl.requestUpdate === 'function') {\n litEl.requestUpdate();\n }\n });\n}\n\nif (isClient) {\n const documentElementObserver = new MutationObserver(update);\n documentDirection = document.documentElement.dir || 'ltr';\n documentLanguage = document.documentElement.lang || navigator.language;\n\n // Watch for changes on <html lang>\n documentElementObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['dir', 'lang'],\n });\n}\n\n/** Registers one or more translations */\nexport function registerTranslation(...translation: Translation[]) {\n translation.forEach((t) => {\n const code = t.$code.toLowerCase();\n\n if (translations.has(code)) {\n // Merge translations that share the same language code\n translations.set(code, { ...translations.get(code), ...t });\n } else {\n translations.set(code, t);\n }\n\n // The first translation that's registered is the fallback\n if (!fallback) {\n fallback = t;\n }\n });\n\n update();\n}\ndeclare global {\n interface Window {\n registerTranslation: typeof registerTranslation;\n }\n}\n\nwindow.registerTranslation = registerTranslation;\n\n/**\n * Localize Reactive Controller for components built with Lit\n *\n * To use this controller, import the class and instantiate it in a custom element constructor:\n *\n * private localize = new LocalizeController(this);\n *\n * This will add the element to the set and make it respond to changes to <html dir|lang> automatically. To make it\n * respond to changes to its own dir|lang properties, make it a property:\n *\n * @property() dir: string;\n * @property() lang: string;\n *\n * To use a translation method, call it like this:\n *\n * ${this.localize.term('term_key_here')}\n * ${this.localize.date('2021-12-03')}\n * ${this.localize.number(1000000)}\n */\nexport class LocalizeController<UserTranslation extends Translation = DefaultTranslation>\n implements ReactiveController\n{\n host: ReactiveControllerHost & HTMLElement;\n\n constructor(host: ReactiveControllerHost & HTMLElement) {\n this.host = host;\n this.host.addController(this);\n }\n\n hostConnected() {\n connectedElements.add(this.host);\n }\n\n hostDisconnected() {\n connectedElements.delete(this.host);\n }\n\n /**\n * Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to\n * lowercase.\n */\n dir() {\n return `${this.host.dir || documentDirection}`.toLowerCase();\n }\n\n /**\n * Gets the host element's language as determined by the `lang` attribute. The return value is transformed to\n * lowercase.\n */\n lang() {\n return `${this.host.lang || documentLanguage}`.toLowerCase();\n }\n\n // eslint-disable-next-line class-methods-use-this\n private getTranslationData(lang: string) {\n // Convert \"en_US\" to \"en-US\". Note that both underscores and dashes are allowed per spec, but underscores result in\n // a RangeError by the call to `new Intl.Locale()`. See: https://unicode.org/reports/tr35/#unicode-locale-identifier\n const locale = new Intl.Locale(lang.replace(/_/g, '-'));\n const language = locale?.language.toLowerCase();\n const region = locale?.region?.toLowerCase() ?? '';\n const primary = <UserTranslation>translations.get(`${language}-${region}`);\n const secondary = <UserTranslation>translations.get(language);\n\n return { locale, language, region, primary, secondary };\n }\n\n /** Determines if the specified term exists, optionally checking the fallback translation. */\n exists<K extends keyof UserTranslation>(key: K, options: Partial<ExistsOptions>): boolean {\n const { primary, secondary } = this.getTranslationData(options.lang ?? this.lang());\n\n const mergedOptions = {\n includeFallback: false,\n ...options,\n };\n\n if (\n (primary && primary[key]) ||\n (secondary && secondary[key]) ||\n (mergedOptions.includeFallback && fallback && fallback[key as keyof Translation])\n ) {\n return true;\n }\n\n return false;\n }\n\n /** Outputs a translated term. */\n term<K extends keyof UserTranslation>(key: K, ...args: FunctionParams<UserTranslation[K]>): string {\n const { primary, secondary } = this.getTranslationData(this.lang());\n let term: any;\n\n // Look for a matching term using regionCode, code, then the fallback\n if (primary && primary[key]) {\n term = primary[key];\n } else if (secondary && secondary[key]) {\n term = secondary[key];\n } else if (fallback && fallback[key as keyof Translation]) {\n term = fallback[key as keyof Translation];\n } else {\n // eslint-disable-next-line no-console\n console.error(`No translation found for: ${String(key)}`);\n return String(key);\n }\n\n if (typeof term === 'function') {\n return term(...args) as string;\n }\n\n return term;\n }\n\n /** Outputs a localized date in the specified format. */\n date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string {\n const date = new Date(dateToFormat);\n return new Intl.DateTimeFormat(this.lang(), options).format(date);\n }\n\n /** Outputs a localized number in the specified format. */\n number(numberToFormat: number | string, options?: Intl.NumberFormatOptions): string {\n const num = Number(numberToFormat);\n return Number.isNaN(num) ? '' : new Intl.NumberFormat(this.lang(), options).format(num);\n }\n\n /** Outputs a localized time in relative format. */\n relativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions): string {\n return new Intl.RelativeTimeFormat(this.lang(), options).format(value, unit);\n }\n}\n","import { ReactiveControllerHost } from 'lit';\nimport { LocalizeController } from '../controllers/localize.js';\nimport { Constructor } from '../index.js';\n\n/**\n * @param Base The base class.\n * @returns A mix-in implementing `localizations` method.\n *\n *@example\n * <!-- Terms -->\n ${this.$localize.term('hello')}\n or\n ${this.$t('hello')}\n\n <!-- Dates -->\n ${this.$localize.date('2021-09-15 14:00:00 ET', { month: 'long', day: 'numeric', year: 'numeric' })}\n or\n ${this.$d('2021-09-15 14:00:00 ET', { month: 'long', day: 'numeric', year: 'numeric' })}\n\n <!-- Numbers/currency -->\n ${this.$localize.number(1000, { style: 'currency', currency: 'USD'})}\n or\n ${this.$n(1000,{ style: 'currency', currency: 'USD'})}\n\n <!-- Determining language -->\n ${this.$localize.lang()}\n\n <!-- Determining directionality, e.g. 'ltr' or 'rtl' -->\n ${this.$localize.dir()}\n\n\n *** HOW TO DEFINE TRANSLATIONS: ***\n // Simple terms\n upload: 'Upload',\n\n // Terms with placeholders\n greetUser: (name: string) => `Hello, ${name}!`,\n\n // Plurals\n numFilesSelected: (count: number) => {\n if (count === 0) return 'No files selected';\n if (count === 1) return '1 file selected';\n return `${count} files selected`;\n }\n */\n\nconst LocalizeMixin = <T extends Constructor<ReactiveControllerHost & HTMLElement>>(Base: T) =>\n class extends Base {\n public localize: LocalizeController = new LocalizeController(this);\n\n // Provide default values to avoid definite assignment errors and avoid decorators\n dir: string = '';\n\n lang: string = '';\n\n /**\n * Restituisce tutta l'utility di traduzione\n *\n\n *\n * @returns tutta l'utility di traduzione\n *\n * @example\n * this.$localize.lang() -> ritorna la lingua corrente\n * this.$localize.dir() -> ritorna la direzione della lingua corrente\n */\n get $localize() {\n return this.localize;\n }\n\n /**\n * Restituisce una stringa localizzata a partire da una chiave di termine.\n *\n * Utilizza il `LocalizeController` per accedere al dizionario corrente e\n * tradurre la chiave fornita secondo la lingua attiva.\n *\n * @param t - La chiave del termine da localizzare (es. 'hello', 'submit', ecc.).\n * @returns La stringa tradotta in base alla lingua attiva. Se la chiave non è trovata, restituisce la chiave stessa.\n *\n * @example\n * this.$t('hello'); // → \"Ciao\" (in locale it-IT)\n */\n public $t(t: string) {\n // format term\n return this.localize.term(t);\n }\n\n /**\n * Formatta una data in base alla localizzazione attiva.\n *\n * Utilizza il `LocalizeController` per restituire una stringa localizzata\n * secondo le opzioni fornite (es. mese esteso, anno, ecc.).\n *\n * @param n - La data da formattare come stringa compatibile (es. ISO o con timezone, es. '2021-09-15 14:00:00 ET').\n * @param p - Le opzioni di formattazione per `Intl.DateTimeFormat` (es. { year: 'numeric', month: 'long', day: 'numeric' }).\n * @returns Una stringa rappresentante la data formattata secondo la localizzazione attiva.\n *\n * @example\n * this.$d('2021-09-15 14:00:00 ET', { year: 'numeric', month: 'long', day: 'numeric' });\n * // → \"15 settembre 2021\" (in locale it-IT)\n */\n public $d(d: Date | string, p: Intl.DateTimeFormatOptions) {\n // format date\n return this.localize.date(d, p);\n }\n\n /**\n * Formatta un numero secondo le impostazioni locali dell'utente corrente.\n *\n * Utilizza il `LocalizeController` per applicare formattazione numerica,\n * incluse opzioni come separatori, decimali, valute, ecc.\n *\n * @param d - Il numero da formattare.\n * @param p - Le opzioni di formattazione (es. { style: 'currency', currency: 'EUR' }).\n * @returns Una stringa rappresentante il numero formattato secondo la localizzazione attiva.\n *\n * @example\n * this.$n(1234.56, { style: 'currency', currency: 'USD' }); // → \"$1,234.56\" (in locale en-US)\n */\n public $n(d: number, p: Intl.NumberFormatOptions) {\n return this.localize.number(d, p);\n }\n };\n\nexport default LocalizeMixin;\n\n// export interface LocalizedComponent {\n// $t(t: string): string;\n// $d(d: Date | string, p?: Intl.DateTimeFormatOptions): string;\n// $n(n: number, p?: Intl.NumberFormatOptions): string;\n// $localize: LocalizeController;\n// }\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,447 @@
|
|
|
1
|
+
import { ReactiveControllerHost } from 'lit';
|
|
2
|
+
import { LocalizeController } from '../controllers/localize.js';
|
|
3
|
+
import { Constructor } from '../index.js';
|
|
4
|
+
/**
|
|
5
|
+
* @param Base The base class.
|
|
6
|
+
* @returns A mix-in implementing `localizations` method.
|
|
7
|
+
*
|
|
8
|
+
*@example
|
|
9
|
+
* <!-- Terms -->
|
|
10
|
+
${this.$localize.term('hello')}
|
|
11
|
+
or
|
|
12
|
+
${this.$t('hello')}
|
|
13
|
+
|
|
14
|
+
<!-- Dates -->
|
|
15
|
+
${this.$localize.date('2021-09-15 14:00:00 ET', { month: 'long', day: 'numeric', year: 'numeric' })}
|
|
16
|
+
or
|
|
17
|
+
${this.$d('2021-09-15 14:00:00 ET', { month: 'long', day: 'numeric', year: 'numeric' })}
|
|
18
|
+
|
|
19
|
+
<!-- Numbers/currency -->
|
|
20
|
+
${this.$localize.number(1000, { style: 'currency', currency: 'USD'})}
|
|
21
|
+
or
|
|
22
|
+
${this.$n(1000,{ style: 'currency', currency: 'USD'})}
|
|
23
|
+
|
|
24
|
+
<!-- Determining language -->
|
|
25
|
+
${this.$localize.lang()}
|
|
26
|
+
|
|
27
|
+
<!-- Determining directionality, e.g. 'ltr' or 'rtl' -->
|
|
28
|
+
${this.$localize.dir()}
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
*** HOW TO DEFINE TRANSLATIONS: ***
|
|
32
|
+
// Simple terms
|
|
33
|
+
upload: 'Upload',
|
|
34
|
+
|
|
35
|
+
// Terms with placeholders
|
|
36
|
+
greetUser: (name: string) => `Hello, ${name}!`,
|
|
37
|
+
|
|
38
|
+
// Plurals
|
|
39
|
+
numFilesSelected: (count: number) => {
|
|
40
|
+
if (count === 0) return 'No files selected';
|
|
41
|
+
if (count === 1) return '1 file selected';
|
|
42
|
+
return `${count} files selected`;
|
|
43
|
+
}
|
|
44
|
+
*/
|
|
45
|
+
declare const LocalizeMixin: <T extends Constructor<ReactiveControllerHost & HTMLElement>>(Base: T) => {
|
|
46
|
+
new (...args: any[]): {
|
|
47
|
+
localize: LocalizeController;
|
|
48
|
+
dir: string;
|
|
49
|
+
lang: string;
|
|
50
|
+
/**
|
|
51
|
+
* Restituisce tutta l'utility di traduzione
|
|
52
|
+
*
|
|
53
|
+
|
|
54
|
+
*
|
|
55
|
+
* @returns tutta l'utility di traduzione
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
* this.$localize.lang() -> ritorna la lingua corrente
|
|
59
|
+
* this.$localize.dir() -> ritorna la direzione della lingua corrente
|
|
60
|
+
*/
|
|
61
|
+
readonly $localize: LocalizeController<import("../index.js").DefaultTranslation>;
|
|
62
|
+
/**
|
|
63
|
+
* Restituisce una stringa localizzata a partire da una chiave di termine.
|
|
64
|
+
*
|
|
65
|
+
* Utilizza il `LocalizeController` per accedere al dizionario corrente e
|
|
66
|
+
* tradurre la chiave fornita secondo la lingua attiva.
|
|
67
|
+
*
|
|
68
|
+
* @param t - La chiave del termine da localizzare (es. 'hello', 'submit', ecc.).
|
|
69
|
+
* @returns La stringa tradotta in base alla lingua attiva. Se la chiave non è trovata, restituisce la chiave stessa.
|
|
70
|
+
*
|
|
71
|
+
* @example
|
|
72
|
+
* this.$t('hello'); // → "Ciao" (in locale it-IT)
|
|
73
|
+
*/
|
|
74
|
+
$t(t: string): string;
|
|
75
|
+
/**
|
|
76
|
+
* Formatta una data in base alla localizzazione attiva.
|
|
77
|
+
*
|
|
78
|
+
* Utilizza il `LocalizeController` per restituire una stringa localizzata
|
|
79
|
+
* secondo le opzioni fornite (es. mese esteso, anno, ecc.).
|
|
80
|
+
*
|
|
81
|
+
* @param n - La data da formattare come stringa compatibile (es. ISO o con timezone, es. '2021-09-15 14:00:00 ET').
|
|
82
|
+
* @param p - Le opzioni di formattazione per `Intl.DateTimeFormat` (es. { year: 'numeric', month: 'long', day: 'numeric' }).
|
|
83
|
+
* @returns Una stringa rappresentante la data formattata secondo la localizzazione attiva.
|
|
84
|
+
*
|
|
85
|
+
* @example
|
|
86
|
+
* this.$d('2021-09-15 14:00:00 ET', { year: 'numeric', month: 'long', day: 'numeric' });
|
|
87
|
+
* // → "15 settembre 2021" (in locale it-IT)
|
|
88
|
+
*/
|
|
89
|
+
$d(d: Date | string, p: Intl.DateTimeFormatOptions): string;
|
|
90
|
+
/**
|
|
91
|
+
* Formatta un numero secondo le impostazioni locali dell'utente corrente.
|
|
92
|
+
*
|
|
93
|
+
* Utilizza il `LocalizeController` per applicare formattazione numerica,
|
|
94
|
+
* incluse opzioni come separatori, decimali, valute, ecc.
|
|
95
|
+
*
|
|
96
|
+
* @param d - Il numero da formattare.
|
|
97
|
+
* @param p - Le opzioni di formattazione (es. { style: 'currency', currency: 'EUR' }).
|
|
98
|
+
* @returns Una stringa rappresentante il numero formattato secondo la localizzazione attiva.
|
|
99
|
+
*
|
|
100
|
+
* @example
|
|
101
|
+
* this.$n(1234.56, { style: 'currency', currency: 'USD' }); // → "$1,234.56" (in locale en-US)
|
|
102
|
+
*/
|
|
103
|
+
$n(d: number, p: Intl.NumberFormatOptions): string;
|
|
104
|
+
addController(controller: import("lit").ReactiveController): void;
|
|
105
|
+
removeController(controller: import("lit").ReactiveController): void;
|
|
106
|
+
requestUpdate(): void;
|
|
107
|
+
readonly updateComplete: Promise<boolean>;
|
|
108
|
+
accessKey: string;
|
|
109
|
+
readonly accessKeyLabel: string;
|
|
110
|
+
autocapitalize: string;
|
|
111
|
+
draggable: boolean;
|
|
112
|
+
hidden: boolean;
|
|
113
|
+
inert: boolean;
|
|
114
|
+
innerText: string;
|
|
115
|
+
readonly offsetHeight: number;
|
|
116
|
+
readonly offsetLeft: number;
|
|
117
|
+
readonly offsetParent: Element | null;
|
|
118
|
+
readonly offsetTop: number;
|
|
119
|
+
readonly offsetWidth: number;
|
|
120
|
+
outerText: string;
|
|
121
|
+
popover: string | null;
|
|
122
|
+
spellcheck: boolean;
|
|
123
|
+
title: string;
|
|
124
|
+
translate: boolean;
|
|
125
|
+
writingSuggestions: string;
|
|
126
|
+
attachInternals(): ElementInternals;
|
|
127
|
+
click(): void;
|
|
128
|
+
hidePopover(): void;
|
|
129
|
+
showPopover(): void;
|
|
130
|
+
togglePopover(options?: boolean): boolean;
|
|
131
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
132
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
133
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
134
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
135
|
+
readonly attributes: NamedNodeMap;
|
|
136
|
+
get classList(): DOMTokenList;
|
|
137
|
+
set classList(value: string);
|
|
138
|
+
className: string;
|
|
139
|
+
readonly clientHeight: number;
|
|
140
|
+
readonly clientLeft: number;
|
|
141
|
+
readonly clientTop: number;
|
|
142
|
+
readonly clientWidth: number;
|
|
143
|
+
readonly currentCSSZoom: number;
|
|
144
|
+
id: string;
|
|
145
|
+
innerHTML: string;
|
|
146
|
+
readonly localName: string;
|
|
147
|
+
readonly namespaceURI: string | null;
|
|
148
|
+
onfullscreenchange: ((this: Element, ev: Event) => any) | null;
|
|
149
|
+
onfullscreenerror: ((this: Element, ev: Event) => any) | null;
|
|
150
|
+
outerHTML: string;
|
|
151
|
+
readonly ownerDocument: Document;
|
|
152
|
+
get part(): DOMTokenList;
|
|
153
|
+
set part(value: string);
|
|
154
|
+
readonly prefix: string | null;
|
|
155
|
+
readonly scrollHeight: number;
|
|
156
|
+
scrollLeft: number;
|
|
157
|
+
scrollTop: number;
|
|
158
|
+
readonly scrollWidth: number;
|
|
159
|
+
readonly shadowRoot: ShadowRoot | null;
|
|
160
|
+
slot: string;
|
|
161
|
+
readonly tagName: string;
|
|
162
|
+
attachShadow(init: ShadowRootInit): ShadowRoot;
|
|
163
|
+
checkVisibility(options?: CheckVisibilityOptions): boolean;
|
|
164
|
+
closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
|
|
165
|
+
closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
|
|
166
|
+
closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
|
|
167
|
+
closest<E extends Element = Element>(selectors: string): E | null;
|
|
168
|
+
computedStyleMap(): StylePropertyMapReadOnly;
|
|
169
|
+
getAttribute(qualifiedName: string): string | null;
|
|
170
|
+
getAttributeNS(namespace: string | null, localName: string): string | null;
|
|
171
|
+
getAttributeNames(): string[];
|
|
172
|
+
getAttributeNode(qualifiedName: string): Attr | null;
|
|
173
|
+
getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
|
|
174
|
+
getBoundingClientRect(): DOMRect;
|
|
175
|
+
getClientRects(): DOMRectList;
|
|
176
|
+
getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
|
|
177
|
+
getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
|
|
178
|
+
getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
|
|
179
|
+
getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
|
|
180
|
+
getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
|
|
181
|
+
getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
|
|
182
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
|
|
183
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
|
|
184
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
|
|
185
|
+
getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
|
|
186
|
+
getHTML(options?: GetHTMLOptions): string;
|
|
187
|
+
hasAttribute(qualifiedName: string): boolean;
|
|
188
|
+
hasAttributeNS(namespace: string | null, localName: string): boolean;
|
|
189
|
+
hasAttributes(): boolean;
|
|
190
|
+
hasPointerCapture(pointerId: number): boolean;
|
|
191
|
+
insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
|
|
192
|
+
insertAdjacentHTML(position: InsertPosition, string: string): void;
|
|
193
|
+
insertAdjacentText(where: InsertPosition, data: string): void;
|
|
194
|
+
matches(selectors: string): boolean;
|
|
195
|
+
releasePointerCapture(pointerId: number): void;
|
|
196
|
+
removeAttribute(qualifiedName: string): void;
|
|
197
|
+
removeAttributeNS(namespace: string | null, localName: string): void;
|
|
198
|
+
removeAttributeNode(attr: Attr): Attr;
|
|
199
|
+
requestFullscreen(options?: FullscreenOptions): Promise<void>;
|
|
200
|
+
requestPointerLock(options?: PointerLockOptions): Promise<void>;
|
|
201
|
+
scroll(options?: ScrollToOptions): void;
|
|
202
|
+
scroll(x: number, y: number): void;
|
|
203
|
+
scrollBy(options?: ScrollToOptions): void;
|
|
204
|
+
scrollBy(x: number, y: number): void;
|
|
205
|
+
scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
|
|
206
|
+
scrollTo(options?: ScrollToOptions): void;
|
|
207
|
+
scrollTo(x: number, y: number): void;
|
|
208
|
+
setAttribute(qualifiedName: string, value: string): void;
|
|
209
|
+
setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
|
|
210
|
+
setAttributeNode(attr: Attr): Attr | null;
|
|
211
|
+
setAttributeNodeNS(attr: Attr): Attr | null;
|
|
212
|
+
setHTMLUnsafe(html: string): void;
|
|
213
|
+
setPointerCapture(pointerId: number): void;
|
|
214
|
+
toggleAttribute(qualifiedName: string, force?: boolean): boolean;
|
|
215
|
+
webkitMatchesSelector(selectors: string): boolean;
|
|
216
|
+
readonly baseURI: string;
|
|
217
|
+
readonly childNodes: NodeListOf<ChildNode>;
|
|
218
|
+
readonly firstChild: ChildNode | null;
|
|
219
|
+
readonly isConnected: boolean;
|
|
220
|
+
readonly lastChild: ChildNode | null;
|
|
221
|
+
readonly nextSibling: ChildNode | null;
|
|
222
|
+
readonly nodeName: string;
|
|
223
|
+
readonly nodeType: number;
|
|
224
|
+
nodeValue: string | null;
|
|
225
|
+
readonly parentElement: HTMLElement | null;
|
|
226
|
+
readonly parentNode: ParentNode | null;
|
|
227
|
+
readonly previousSibling: ChildNode | null;
|
|
228
|
+
textContent: string | null;
|
|
229
|
+
appendChild<T_1 extends Node>(node: T_1): T_1;
|
|
230
|
+
cloneNode(subtree?: boolean): Node;
|
|
231
|
+
compareDocumentPosition(other: Node): number;
|
|
232
|
+
contains(other: Node | null): boolean;
|
|
233
|
+
getRootNode(options?: GetRootNodeOptions): Node;
|
|
234
|
+
hasChildNodes(): boolean;
|
|
235
|
+
insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
|
|
236
|
+
isDefaultNamespace(namespace: string | null): boolean;
|
|
237
|
+
isEqualNode(otherNode: Node | null): boolean;
|
|
238
|
+
isSameNode(otherNode: Node | null): boolean;
|
|
239
|
+
lookupNamespaceURI(prefix: string | null): string | null;
|
|
240
|
+
lookupPrefix(namespace: string | null): string | null;
|
|
241
|
+
normalize(): void;
|
|
242
|
+
removeChild<T_1 extends Node>(child: T_1): T_1;
|
|
243
|
+
replaceChild<T_1 extends Node>(node: Node, child: T_1): T_1;
|
|
244
|
+
readonly ELEMENT_NODE: 1;
|
|
245
|
+
readonly ATTRIBUTE_NODE: 2;
|
|
246
|
+
readonly TEXT_NODE: 3;
|
|
247
|
+
readonly CDATA_SECTION_NODE: 4;
|
|
248
|
+
readonly ENTITY_REFERENCE_NODE: 5;
|
|
249
|
+
readonly ENTITY_NODE: 6;
|
|
250
|
+
readonly PROCESSING_INSTRUCTION_NODE: 7;
|
|
251
|
+
readonly COMMENT_NODE: 8;
|
|
252
|
+
readonly DOCUMENT_NODE: 9;
|
|
253
|
+
readonly DOCUMENT_TYPE_NODE: 10;
|
|
254
|
+
readonly DOCUMENT_FRAGMENT_NODE: 11;
|
|
255
|
+
readonly NOTATION_NODE: 12;
|
|
256
|
+
readonly DOCUMENT_POSITION_DISCONNECTED: 1;
|
|
257
|
+
readonly DOCUMENT_POSITION_PRECEDING: 2;
|
|
258
|
+
readonly DOCUMENT_POSITION_FOLLOWING: 4;
|
|
259
|
+
readonly DOCUMENT_POSITION_CONTAINS: 8;
|
|
260
|
+
readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
|
|
261
|
+
readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
|
|
262
|
+
dispatchEvent(event: Event): boolean;
|
|
263
|
+
ariaAtomic: string | null;
|
|
264
|
+
ariaAutoComplete: string | null;
|
|
265
|
+
ariaBrailleLabel: string | null;
|
|
266
|
+
ariaBrailleRoleDescription: string | null;
|
|
267
|
+
ariaBusy: string | null;
|
|
268
|
+
ariaChecked: string | null;
|
|
269
|
+
ariaColCount: string | null;
|
|
270
|
+
ariaColIndex: string | null;
|
|
271
|
+
ariaColIndexText: string | null;
|
|
272
|
+
ariaColSpan: string | null;
|
|
273
|
+
ariaCurrent: string | null;
|
|
274
|
+
ariaDescription: string | null;
|
|
275
|
+
ariaDisabled: string | null;
|
|
276
|
+
ariaExpanded: string | null;
|
|
277
|
+
ariaHasPopup: string | null;
|
|
278
|
+
ariaHidden: string | null;
|
|
279
|
+
ariaInvalid: string | null;
|
|
280
|
+
ariaKeyShortcuts: string | null;
|
|
281
|
+
ariaLabel: string | null;
|
|
282
|
+
ariaLevel: string | null;
|
|
283
|
+
ariaLive: string | null;
|
|
284
|
+
ariaModal: string | null;
|
|
285
|
+
ariaMultiLine: string | null;
|
|
286
|
+
ariaMultiSelectable: string | null;
|
|
287
|
+
ariaOrientation: string | null;
|
|
288
|
+
ariaPlaceholder: string | null;
|
|
289
|
+
ariaPosInSet: string | null;
|
|
290
|
+
ariaPressed: string | null;
|
|
291
|
+
ariaReadOnly: string | null;
|
|
292
|
+
ariaRelevant: string | null;
|
|
293
|
+
ariaRequired: string | null;
|
|
294
|
+
ariaRoleDescription: string | null;
|
|
295
|
+
ariaRowCount: string | null;
|
|
296
|
+
ariaRowIndex: string | null;
|
|
297
|
+
ariaRowIndexText: string | null;
|
|
298
|
+
ariaRowSpan: string | null;
|
|
299
|
+
ariaSelected: string | null;
|
|
300
|
+
ariaSetSize: string | null;
|
|
301
|
+
ariaSort: string | null;
|
|
302
|
+
ariaValueMax: string | null;
|
|
303
|
+
ariaValueMin: string | null;
|
|
304
|
+
ariaValueNow: string | null;
|
|
305
|
+
ariaValueText: string | null;
|
|
306
|
+
role: string | null;
|
|
307
|
+
animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
|
|
308
|
+
getAnimations(options?: GetAnimationsOptions): Animation[];
|
|
309
|
+
after(...nodes: (Node | string)[]): void;
|
|
310
|
+
before(...nodes: (Node | string)[]): void;
|
|
311
|
+
remove(): void;
|
|
312
|
+
replaceWith(...nodes: (Node | string)[]): void;
|
|
313
|
+
readonly nextElementSibling: Element | null;
|
|
314
|
+
readonly previousElementSibling: Element | null;
|
|
315
|
+
readonly childElementCount: number;
|
|
316
|
+
readonly children: HTMLCollection;
|
|
317
|
+
readonly firstElementChild: Element | null;
|
|
318
|
+
readonly lastElementChild: Element | null;
|
|
319
|
+
append(...nodes: (Node | string)[]): void;
|
|
320
|
+
prepend(...nodes: (Node | string)[]): void;
|
|
321
|
+
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
|
|
322
|
+
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
|
|
323
|
+
querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
|
|
324
|
+
querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
|
|
325
|
+
querySelector<E extends Element = Element>(selectors: string): E | null;
|
|
326
|
+
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
|
|
327
|
+
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
|
|
328
|
+
querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
|
|
329
|
+
querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
|
|
330
|
+
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
|
|
331
|
+
replaceChildren(...nodes: (Node | string)[]): void;
|
|
332
|
+
readonly assignedSlot: HTMLSlotElement | null;
|
|
333
|
+
readonly attributeStyleMap: StylePropertyMap;
|
|
334
|
+
get style(): CSSStyleDeclaration;
|
|
335
|
+
set style(cssText: string);
|
|
336
|
+
contentEditable: string;
|
|
337
|
+
enterKeyHint: string;
|
|
338
|
+
inputMode: string;
|
|
339
|
+
readonly isContentEditable: boolean;
|
|
340
|
+
onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
|
|
341
|
+
onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
342
|
+
onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
343
|
+
onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
344
|
+
onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
345
|
+
onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
346
|
+
onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
|
|
347
|
+
onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
348
|
+
onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
|
349
|
+
oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
350
|
+
oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
351
|
+
oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
352
|
+
onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
353
|
+
onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
354
|
+
onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
355
|
+
oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
356
|
+
oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
357
|
+
oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
358
|
+
oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
359
|
+
oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
360
|
+
oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
361
|
+
ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
362
|
+
ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
363
|
+
ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
364
|
+
ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
365
|
+
ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
366
|
+
ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
367
|
+
ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
368
|
+
ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
369
|
+
ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
370
|
+
onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
371
|
+
onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
372
|
+
onerror: OnErrorEventHandler;
|
|
373
|
+
onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
|
374
|
+
onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
|
|
375
|
+
ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
376
|
+
oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
377
|
+
oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
378
|
+
onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
379
|
+
onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
380
|
+
onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
381
|
+
onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
382
|
+
onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
383
|
+
onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
384
|
+
onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
385
|
+
onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
386
|
+
onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
387
|
+
onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
388
|
+
onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
389
|
+
onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
390
|
+
onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
391
|
+
onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
392
|
+
onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
393
|
+
onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
394
|
+
onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
395
|
+
onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
396
|
+
onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
397
|
+
onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
398
|
+
onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
399
|
+
onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
400
|
+
onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
401
|
+
onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
402
|
+
onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
403
|
+
onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
404
|
+
onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
405
|
+
onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
|
|
406
|
+
onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
407
|
+
onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
408
|
+
onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
|
|
409
|
+
onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
410
|
+
onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
411
|
+
onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
|
|
412
|
+
onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
413
|
+
onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
414
|
+
onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
415
|
+
onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
416
|
+
onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
417
|
+
onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
418
|
+
onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
419
|
+
onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
|
|
420
|
+
onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
421
|
+
ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
422
|
+
ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
423
|
+
ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
424
|
+
ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
425
|
+
ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
426
|
+
ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
427
|
+
ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
428
|
+
ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
429
|
+
ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
430
|
+
ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
431
|
+
onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
432
|
+
onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
433
|
+
onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
434
|
+
onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
435
|
+
onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
436
|
+
onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
437
|
+
onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
|
|
438
|
+
autofocus: boolean;
|
|
439
|
+
readonly dataset: DOMStringMap;
|
|
440
|
+
nonce?: string;
|
|
441
|
+
tabIndex: number;
|
|
442
|
+
blur(): void;
|
|
443
|
+
focus(options?: FocusOptions): void;
|
|
444
|
+
};
|
|
445
|
+
} & T;
|
|
446
|
+
export default LocalizeMixin;
|
|
447
|
+
//# sourceMappingURL=localization.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"localization.d.ts","sourceRoot":"","sources":["../../../src/mixins/localization.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,QAAA,MAAM,aAAa,GAAI,CAAC,SAAS,WAAW,CAAC,sBAAsB,GAAG,WAAW,CAAC,EAAE,MAAM,CAAC;;kBAEtE,kBAAkB;aAG9B,MAAM;cAEL,MAAM;QAEZ;;;;;;;;;;WAUG;;QAKH;;;;;;;;;;;WAWG;cACU,MAAM;QAKnB;;;;;;;;;;;;;WAaG;cACU,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC,qBAAqB;QAKzD;;;;;;;;;;;;WAYG;cACU,MAAM,KAAK,IAAI,CAAC,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAGjD,CAAC;AAEJ,eAAe,aAAa,CAAC"}
|
package/package.json
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@italia/i18n",
|
|
3
|
+
"description": "Translations utility del Design system .italia",
|
|
4
|
+
"version": "0.0.1-alpha.0",
|
|
5
|
+
"publishConfig": {
|
|
6
|
+
"access": "public"
|
|
7
|
+
},
|
|
8
|
+
"license": "BSD-3-Clause",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/italia/design-web-components.git",
|
|
12
|
+
"directory": "packages/i18n"
|
|
13
|
+
},
|
|
14
|
+
"author": "Presidenza del Consiglio dei Ministri",
|
|
15
|
+
"homepage": "https://italia.github.io/design-web-components",
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/italia/design-web-components/issues"
|
|
18
|
+
},
|
|
19
|
+
"type": "module",
|
|
20
|
+
"main": "./dist/src/index.js",
|
|
21
|
+
"module": "./dist/src/index.js",
|
|
22
|
+
"types": "./dist/src/index.d.ts",
|
|
23
|
+
"exports": {
|
|
24
|
+
".": "./dist/src/index.js",
|
|
25
|
+
"./i18n.js": "./dist/src/index.js"
|
|
26
|
+
},
|
|
27
|
+
"files": [
|
|
28
|
+
"dist/src",
|
|
29
|
+
"README.md",
|
|
30
|
+
"AUTHORS",
|
|
31
|
+
"LICENSE"
|
|
32
|
+
],
|
|
33
|
+
"dependencies": {
|
|
34
|
+
"lit": "^3.3.0"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@custom-elements-manifest/analyzer": "^0.10.3",
|
|
38
|
+
"@open-wc/testing": "^4.0.0",
|
|
39
|
+
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
40
|
+
"@rollup/plugin-typescript": "^12.1.2",
|
|
41
|
+
"@types/mocha": "^10.0.10",
|
|
42
|
+
"@web/test-runner": "^0.18.2",
|
|
43
|
+
"rollup": "^4.42.0",
|
|
44
|
+
"tslib": "^2.6.3",
|
|
45
|
+
"typescript": "^5.5.3",
|
|
46
|
+
"@italia/typescript-config": "^0.0.0",
|
|
47
|
+
"@italia/test-config": "^0.0.0"
|
|
48
|
+
},
|
|
49
|
+
"scripts": {
|
|
50
|
+
"analyze": "cem analyze --litelement --exclude dist",
|
|
51
|
+
"build": "rollup --config rollup.config.js",
|
|
52
|
+
"clean": "rimraf node_modules .turbo .rollup.cache dist coverage",
|
|
53
|
+
"lint": "eslint --ext .ts \"src/**/*.ts\" && prettier \"src/**/*.ts\" --check",
|
|
54
|
+
"format": "eslint --ext .ts \"src/**/*.ts\" \"stories/**/*.ts\" \"test/**/*.ts\" --fix && stylelint \"src/**/*.scss\" --fix && prettier \"src/**/*.ts\" \"stories/**/*.ts\" \"test/**/*.ts\" --write",
|
|
55
|
+
"test": "wtr --coverage --node-resolve --config web-test-runner.config.js"
|
|
56
|
+
}
|
|
57
|
+
}
|