@starterlib/ui 0.10.13 → 0.10.14
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/LICENCES-TIERCES.md +9 -3
- package/README.md +41 -11
- package/assets/icones/catalogue.json +1 -1
- package/assets/logos/starter-bank-clair.svg +1 -0
- package/assets/logos/starter-bank-monochrome.svg +1 -0
- package/assets/logos/starter-bank-sombre.svg +1 -0
- package/fesm2022/starterlib-ui-formulaires.mjs +389 -7
- package/fesm2022/starterlib-ui-formulaires.mjs.map +1 -1
- package/fesm2022/starterlib-ui-saisie.mjs +11 -4
- package/fesm2022/starterlib-ui-saisie.mjs.map +1 -1
- package/fesm2022/starterlib-ui-virtuel.mjs +272 -0
- package/fesm2022/starterlib-ui-virtuel.mjs.map +1 -0
- package/fesm2022/starterlib-ui.mjs +6 -6
- package/fesm2022/starterlib-ui.mjs.map +1 -1
- package/package.json +5 -1
- package/types/starterlib-ui-formulaires.d.ts +132 -1
- package/types/starterlib-ui-saisie.d.ts +2 -0
- package/types/starterlib-ui-virtuel.d.ts +103 -0
- package/virtuel/README.md +46 -0
package/LICENCES-TIERCES.md
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
# Licences tierces de `@starterlib/ui`
|
|
2
2
|
|
|
3
|
-
Ce paquet livre
|
|
4
|
-
son catalogue `assets/icones/catalogue.json`)
|
|
5
|
-
|
|
3
|
+
Ce paquet livre deux actifs d'origine tierce : le sprite d'icones `assets/icones/sprite.svg` (et
|
|
4
|
+
son catalogue `assets/icones/catalogue.json`), et le logo de la planche 8 (`assets/logos/`, lot 240),
|
|
5
|
+
dont la tuile porte le glyphe `account_balance` (`banque` du sprite). Aucune bibliotheque d'icones
|
|
6
|
+
n'est une dependance du paquet ; les symboles sont derives a la construction du depot, puis
|
|
7
|
+
versionnes.
|
|
6
8
|
|
|
7
9
|
## Material Symbols Outlined
|
|
8
10
|
|
|
@@ -28,6 +30,10 @@ paquet ; les symboles sont derives a la construction du depot, puis versionnes.
|
|
|
28
30
|
Le catalogue source le declare (`origine.derive`), et `pnpm icones:check` exige que chaque dessin
|
|
29
31
|
du depot declare ses glyphes d'origine, ou se declare original.
|
|
30
32
|
|
|
33
|
+
- **Logo de la planche 8** (`assets/logos/starter-bank-*.svg`, lot 240) : le contour de
|
|
34
|
+
`account_balance` (`@material-symbols/svg-400` 0.47.5, grille de 960 unites) pose tel quel, reduit a
|
|
35
|
+
18 px, dans une tuile de 28 px ; meme licence.
|
|
36
|
+
|
|
31
37
|
---
|
|
32
38
|
|
|
33
39
|
```text
|
package/README.md
CHANGED
|
@@ -14,12 +14,13 @@ des dependances de pair : c'est l'application qui les installe, et elles doivent
|
|
|
14
14
|
etre **identiques dans l'hote et dans chaque remote**. Deux versions du socle
|
|
15
15
|
dans le meme navigateur, ce sont deux jeux de jetons d'injection.
|
|
16
16
|
|
|
17
|
-
## Dix-
|
|
17
|
+
## Dix-neuf points d'entree
|
|
18
18
|
|
|
19
19
|
Deux criteres, dans cet ordre (le douzieme, `sens`, le treizieme, `parcours`, et le
|
|
20
20
|
quatorzieme, `qr`, et le quinzieme, `messagerie`, depuis la 0.9.0 : lots 228, 243, 264 et 266 ;
|
|
21
21
|
`etats`, `indicateurs` et `mise-en-page` depuis la 0.10.0 : greffe 268c, ce que la coquille ne peint
|
|
22
|
-
pas sort du tronc
|
|
22
|
+
pas sort du tronc ; `virtuel` depuis la 0.10.14 : lot 267, la liste virtuelle, bonus sous condition
|
|
23
|
+
ecrite, `packages/ui/virtuel/README.md`).
|
|
23
24
|
|
|
24
25
|
1. **La dependance** (ADR 0003) : un composant sort du tronc quand il traine un
|
|
25
26
|
pair lourd, et le point d'entree ou il va se choisit par ce qu'il EST pour
|
|
@@ -42,7 +43,7 @@ pas sort du tronc).
|
|
|
42
43
|
| `@starterlib/ui/onglets` | les onglets et leurs panneaux | `@angular/aria/tabs` |
|
|
43
44
|
| `@starterlib/ui/selection` | liste deroulante filtrante, choix multiple, recherche d'adresse (`st-address-search`), liste des pays filtrable (`st-country-combobox`) | `@angular/aria/{combobox,listbox}`, `@angular/cdk/overlay` |
|
|
44
45
|
| `@starterlib/ui/arbre` | l'arborescence | `@angular/aria/tree` |
|
|
45
|
-
| `@starterlib/ui/formulaires` | les champs qui LISENT leur saisie : montant, date, plage de dates, heure (`st-time-field`), plage de montants (`st-amount-range`), recurrence d'un virement (`st-recurrence-field`)
|
|
46
|
+
| `@starterlib/ui/formulaires` | les champs qui LISENT leur saisie : montant, date, plage de dates, heure (`st-time-field`), plage de montants (`st-amount-range`), recurrence d'un virement (`st-recurrence-field`) ; bonus sous condition ecrite du lot 267 (README de chacun) : mois (`st-month-field`), date memorable (`st-memorable-date`) | le code d'`@angular/forms` (`transformedValue`) |
|
|
46
47
|
| `@starterlib/ui/sens` | le sens d'ecriture du CDK tenu a jour avec `dir` (`provideSensDuDocument`, pose par l'hote) | `@angular/cdk/bidi` — et rien d'autre |
|
|
47
48
|
| `@starterlib/ui/parcours` | les patrons composites d'un parcours : refus du serveur (`st-refusal`), issue d'une operation (`st-outcome`), assistant par etapes et son indicateur (`st-wizard`, `st-wizard-step`, `st-stepper`), dossier a completer (`st-task-list`), ceremonie de second facteur (`st-challenge`) et codes de secours (`st-recovery-codes`) | aucun |
|
|
48
49
|
| `@starterlib/ui/qr` | le code QR : l'encodeur pur (`encoderQr`, ISO/IEC 18004) et son dessin (`st-qr-code`), pour l'enrolement d'un authentificateur et le virement a scanner | aucun |
|
|
@@ -50,6 +51,7 @@ pas sort du tronc).
|
|
|
50
51
|
| `@starterlib/ui/etats` | l'etat d'un bloc de donnees et ses gabarits (`st-state`, `GABARITS_D_ETAT`), le squelette de chargement (`st-skeleton`), l'ecran d'attente d'une application (`st-splash-screen`) | aucun |
|
|
51
52
|
| `@starterlib/ui/indicateurs` | pastille de statut (`st-status-pill`), badge et compteur ancre (`st-badge`, `st-badge-ancre`), etiquettes et groupes d'etiquettes (`st-tag`, `st-tag-group`, `st-groupe-d-etiquettes`) | aucun |
|
|
52
53
|
| `@starterlib/ui/mise-en-page` | section, separateur, texte long (`st-text`), rangee de reglage (`st-settings-row`), groupe de boutons (`st-button-group`) | aucun |
|
|
54
|
+
| `@starterlib/ui/virtuel` | la liste virtuelle (`st-virtual-list`, `stVirtualItem`) : plusieurs milliers de lignes affichees ensemble, la fenetre seule rendue ; bonus sous condition ecrite du lot 267 (`packages/ui/virtuel/README.md`) | `@angular/cdk/scrolling` — et rien d'autre |
|
|
53
55
|
|
|
54
56
|
```ts
|
|
55
57
|
import { StButton, StCard, StError } from '@starterlib/ui';
|
|
@@ -66,6 +68,7 @@ import { provideSensDuDocument } from '@starterlib/ui/sens';
|
|
|
66
68
|
import { GABARITS_D_ETAT, StState } from '@starterlib/ui/etats';
|
|
67
69
|
import { StStatusPill, StTag } from '@starterlib/ui/indicateurs';
|
|
68
70
|
import { StSection, StText } from '@starterlib/ui/mise-en-page';
|
|
71
|
+
import { StVirtualItem, StVirtualList } from '@starterlib/ui/virtuel';
|
|
69
72
|
```
|
|
70
73
|
|
|
71
74
|
`sens` ne porte aucun composant : il remplace le `Directionality` du CDK, qui ne lit `dir` qu'a sa
|
|
@@ -84,8 +87,8 @@ d'abord des CHAMPS ; `parcours` et `messagerie` composent le tronc, `saisie`, `l
|
|
|
84
87
|
0.10.0, ce qui est sorti du tronc est importe la ou il se compose : `listes` importe `etats` (le
|
|
85
88
|
squelette) et `indicateurs` (la pastille de statut), `saisie` et `parcours` importent
|
|
86
89
|
`indicateurs`, `formulaires` et `surfaces` importent `mise-en-page`.
|
|
87
|
-
`libelles-en` et `
|
|
88
|
-
anglais ne lit du tronc que le TYPE `LibellesUi
|
|
90
|
+
`libelles-en`, `sens` et `virtuel` n'importent aucun autre point d'entree : le catalogue
|
|
91
|
+
anglais ne lit du tronc que le TYPE `LibellesUi`, et la liste virtuelle ne compose que le CDK. `navigation` atteint
|
|
89
92
|
`surfaces` par `import()` seulement : le dialogue du tiroir ne pese pas sur le
|
|
90
93
|
premier rendu.
|
|
91
94
|
|
|
@@ -119,12 +122,12 @@ construit (`pnpm paquets:check`), **au specificateur exact** : `navigation` a
|
|
|
119
122
|
droit a `@angular/cdk/layout`, et un `@angular/cdk/overlay` qui s'y glisserait
|
|
120
123
|
echoue avant la publication. Une regle non outillee est une opinion.
|
|
121
124
|
|
|
122
|
-
⚠️ **En federation, chaque point d'entree se partage SEPAREMENT.** Ce sont dix-
|
|
125
|
+
⚠️ **En federation, chaque point d'entree se partage SEPAREMENT.** Ce sont dix-neuf
|
|
123
126
|
specificateurs de module distincts : partager `@starterlib/ui` ne couvre aucun
|
|
124
|
-
des dix-
|
|
127
|
+
des dix-huit autres. Omis de la configuration, chaque remote en embarque sa propre
|
|
125
128
|
copie — et la regle `singleton: true, strictVersion: true` qui protege le tronc
|
|
126
129
|
ne protege plus rien au-dessus. Le decoupage achete l'independance de
|
|
127
|
-
CHARGEMENT, jamais celle de VERSION : les dix-
|
|
130
|
+
CHARGEMENT, jamais celle de VERSION : les dix-neuf portent le numero de leur paquet.
|
|
128
131
|
|
|
129
132
|
```js
|
|
130
133
|
// federation.config.mjs de l'hote ET de chaque remote
|
|
@@ -134,9 +137,10 @@ shared: { ...share({ ...partageAngular('22.2', '7.8'), ...partageDuSocle('0.10')
|
|
|
134
137
|
```
|
|
135
138
|
|
|
136
139
|
⚠️ **Cette liste ne se recopie plus.** Depuis la 0.8.0 elle est publiee par
|
|
137
|
-
`@starterlib/core/federation` : `partageDuSocle(train)` rend les **vingt-
|
|
138
|
-
specificateurs du socle — les dix-
|
|
139
|
-
`util/valeurs`, `core`, `core/federation`, `core/adresses` et `core/
|
|
140
|
+
`@starterlib/core/federation` : `partageDuSocle(train)` rend les **vingt-huit**
|
|
141
|
+
specificateurs du socle — les dix-neuf de `ui`, `tokens`, `tokens/moteur`, `util`,
|
|
142
|
+
`util/valeurs`, `core`, `core/federation`, `core/adresses`, `core/fichiers` et `core/navigateur` —,
|
|
143
|
+
chacun en `singleton: true, strictVersion: true,
|
|
140
144
|
includeSecondaries: false`. La raison n'est pas la commodite : une ligne oubliee
|
|
141
145
|
**n'est pas une erreur de construction**, le specificateur se duplique simplement
|
|
142
146
|
dans le remote, avec son etat. Passer de quatre a douze specificateurs `ui` en
|
|
@@ -209,6 +213,32 @@ export const appConfig: ApplicationConfig = {
|
|
|
209
213
|
```
|
|
210
214
|
|
|
211
215
|
Le prefixe est celui sous lequel l'interface est servie (`/ui/<interface>/`).
|
|
216
|
+
|
|
217
|
+
## Logo de la planche 8 — un actif du socle (0.10.14, lot 240)
|
|
218
|
+
|
|
219
|
+
`assets/logos/` livre le logo de la carte d'authentification de la planche 8 : la tuile de 28 px a
|
|
220
|
+
l'encre primaire (glyphe `banque`, Material Symbols, `LICENCES-TIERCES.md`) et le nom « Starter
|
|
221
|
+
Bank » en 18/700, en trois variantes (`starter-bank-clair.svg`, `starter-bank-sombre.svg`,
|
|
222
|
+
`starter-bank-monochrome.svg`), aux couleurs des jetons (garde `tools/logos-du-socle.test.mjs`).
|
|
223
|
+
L'ecran anonyme et la coquille le servent depuis le paquet, au lieu d'en garder chacun une copie :
|
|
224
|
+
|
|
225
|
+
```jsonc
|
|
226
|
+
"assets": [
|
|
227
|
+
{ "glob": "starter-bank-*.svg", "input": "node_modules/@starterlib/ui/assets/logos", "output": "assets/logos" },
|
|
228
|
+
]
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
```html
|
|
232
|
+
<st-logo
|
|
233
|
+
nom="Starter Bank"
|
|
234
|
+
[clair]="'/ui/identity-auth/assets/logos/starter-bank-clair.svg'"
|
|
235
|
+
[sombre]="'/ui/identity-auth/assets/logos/starter-bank-sombre.svg'"
|
|
236
|
+
[monochrome]="'/ui/identity-auth/assets/logos/starter-bank-monochrome.svg'"
|
|
237
|
+
/>
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
Le nom est le texte alternatif du logo (`st-logo`) : jamais « logo ». Le texte du SVG est rendu dans
|
|
241
|
+
la police du systeme quand l'image est servie seule (une image n'a pas acces aux polices de la page).
|
|
212
242
|
Un chemin empreinte (`sprite.<hash>.svg`) donne un cache immuable.
|
|
213
243
|
|
|
214
244
|
## Feuille de jetons
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 28" role="img" aria-label="Starter Bank"><rect width="28" height="28" rx="4" fill="#003181"/><path transform="translate(5 23) scale(0.01875)" d="M212-241v-339h60v339h-60Zm242 0v-339h60v339h-60ZM80-121v-60h800v60H80Zm608-120v-339h60v339h-60ZM80-640v-53l400-228 400 228v53H80Zm134-60h532-532Zm0 0h532L480-852 214-700Z" fill="#ffffff"/><text x="36" y="20.5" font-family="Inter, system-ui, -apple-system, 'Segoe UI', sans-serif" font-size="18" font-weight="700" letter-spacing="-0.45" fill="#003181">Starter Bank</text></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 28" role="img" aria-label="Starter Bank"><rect width="28" height="28" rx="4" fill="#000000"/><path transform="translate(5 23) scale(0.01875)" d="M212-241v-339h60v339h-60Zm242 0v-339h60v339h-60ZM80-121v-60h800v60H80Zm608-120v-339h60v339h-60ZM80-640v-53l400-228 400 228v53H80Zm134-60h532-532Zm0 0h532L480-852 214-700Z" fill="#ffffff"/><text x="36" y="20.5" font-family="Inter, system-ui, -apple-system, 'Segoe UI', sans-serif" font-size="18" font-weight="700" letter-spacing="-0.45" fill="#000000">Starter Bank</text></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 28" role="img" aria-label="Starter Bank"><rect width="28" height="28" rx="4" fill="#9ebef8"/><path transform="translate(5 23) scale(0.01875)" d="M212-241v-339h60v339h-60Zm242 0v-339h60v339h-60ZM80-121v-60h800v60H80Zm608-120v-339h60v339h-60ZM80-640v-53l400-228 400 228v53H80Zm134-60h532-532Zm0 0h532L480-852 214-700Z" fill="#070d14"/><text x="36" y="20.5" font-family="Inter, system-ui, -apple-system, 'Segoe UI', sans-serif" font-size="18" font-weight="700" letter-spacing="-0.45" fill="#9ebef8">Starter Bank</text></svg>
|