@starterlib/ui 0.8.0 → 0.9.1
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 +236 -0
- package/README.md +101 -47
- package/assets/icones/catalogue.json +3296 -0
- package/assets/icones/sprite.svg +235 -35
- package/fesm2022/starterlib-ui-arbre.mjs +473 -80
- package/fesm2022/starterlib-ui-arbre.mjs.map +1 -1
- package/fesm2022/starterlib-ui-donnees.mjs +3551 -522
- package/fesm2022/starterlib-ui-donnees.mjs.map +1 -1
- package/fesm2022/starterlib-ui-formulaires.mjs +3186 -443
- package/fesm2022/starterlib-ui-formulaires.mjs.map +1 -1
- package/fesm2022/starterlib-ui-libelles-en.mjs +380 -139
- package/fesm2022/starterlib-ui-libelles-en.mjs.map +1 -1
- package/fesm2022/starterlib-ui-listes.mjs +5354 -658
- package/fesm2022/starterlib-ui-listes.mjs.map +1 -1
- package/fesm2022/starterlib-ui-messagerie.mjs +737 -0
- package/fesm2022/starterlib-ui-messagerie.mjs.map +1 -0
- package/fesm2022/starterlib-ui-navigation.mjs +506 -243
- package/fesm2022/starterlib-ui-navigation.mjs.map +1 -1
- package/fesm2022/starterlib-ui-onglets.mjs +369 -135
- package/fesm2022/starterlib-ui-onglets.mjs.map +1 -1
- package/fesm2022/starterlib-ui-parcours.mjs +2449 -0
- package/fesm2022/starterlib-ui-parcours.mjs.map +1 -0
- package/fesm2022/starterlib-ui-qr.mjs +907 -0
- package/fesm2022/starterlib-ui-qr.mjs.map +1 -0
- package/fesm2022/starterlib-ui-saisie.mjs +8566 -1589
- package/fesm2022/starterlib-ui-saisie.mjs.map +1 -1
- package/fesm2022/starterlib-ui-selection.mjs +1340 -268
- package/fesm2022/starterlib-ui-selection.mjs.map +1 -1
- package/fesm2022/starterlib-ui-sens.mjs +59 -0
- package/fesm2022/starterlib-ui-sens.mjs.map +1 -0
- package/fesm2022/starterlib-ui-surfaces.mjs +5140 -1387
- package/fesm2022/starterlib-ui-surfaces.mjs.map +1 -1
- package/fesm2022/starterlib-ui.mjs +10721 -2871
- package/fesm2022/starterlib-ui.mjs.map +1 -1
- package/package.json +27 -18
- package/styles/amorce.css +69 -0
- package/styles/couches.css +178 -0
- package/types/starterlib-ui-arbre.d.ts +199 -25
- package/types/starterlib-ui-donnees.d.ts +1441 -180
- package/types/starterlib-ui-formulaires.d.ts +1174 -139
- package/types/starterlib-ui-libelles-en.d.ts +3 -23
- package/types/starterlib-ui-listes.d.ts +2310 -255
- package/types/starterlib-ui-messagerie.d.ts +317 -0
- package/types/starterlib-ui-navigation.d.ts +201 -63
- package/types/starterlib-ui-onglets.d.ts +172 -43
- package/types/starterlib-ui-parcours.d.ts +916 -0
- package/types/starterlib-ui-qr.d.ts +105 -0
- package/types/starterlib-ui-saisie.d.ts +3431 -549
- package/types/starterlib-ui-selection.d.ts +441 -65
- package/types/starterlib-ui-sens.d.ts +44 -0
- package/types/starterlib-ui-surfaces.d.ts +1899 -510
- package/types/starterlib-ui.d.ts +4749 -1115
- package/fesm2022/starterlib-ui-interactions.mjs +0 -43
- package/fesm2022/starterlib-ui-interactions.mjs.map +0 -1
- package/types/starterlib-ui-interactions.d.ts +0 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@starterlib/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.1",
|
|
4
4
|
"description": "Bibliotheque de composants st-* du socle frontal starter, sur CDK et Aria.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
"ui"
|
|
20
20
|
],
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@angular/core": "^22.
|
|
23
|
-
"@angular/common": "^22.
|
|
24
|
-
"@angular/router": "^22.
|
|
25
|
-
"@angular/forms": "^22.
|
|
26
|
-
"@angular/cdk": "^22.
|
|
27
|
-
"@angular/aria": "^22.
|
|
28
|
-
"@starterlib/tokens": "^0.
|
|
29
|
-
"@starterlib/util": "^0.
|
|
22
|
+
"@angular/core": "^22.2.0",
|
|
23
|
+
"@angular/common": "^22.2.0",
|
|
24
|
+
"@angular/router": "^22.2.0",
|
|
25
|
+
"@angular/forms": "^22.2.0",
|
|
26
|
+
"@angular/cdk": "^22.2.0",
|
|
27
|
+
"@angular/aria": "^22.2.0",
|
|
28
|
+
"@starterlib/tokens": "^0.9.0",
|
|
29
|
+
"@starterlib/util": "^0.9.0"
|
|
30
30
|
},
|
|
31
31
|
"peerDependenciesMeta": {
|
|
32
32
|
"@angular/cdk": {
|
|
@@ -61,10 +61,6 @@
|
|
|
61
61
|
"types": "./types/starterlib-ui-formulaires.d.ts",
|
|
62
62
|
"default": "./fesm2022/starterlib-ui-formulaires.mjs"
|
|
63
63
|
},
|
|
64
|
-
"./interactions": {
|
|
65
|
-
"types": "./types/starterlib-ui-interactions.d.ts",
|
|
66
|
-
"default": "./fesm2022/starterlib-ui-interactions.mjs"
|
|
67
|
-
},
|
|
68
64
|
"./libelles-en": {
|
|
69
65
|
"types": "./types/starterlib-ui-libelles-en.d.ts",
|
|
70
66
|
"default": "./fesm2022/starterlib-ui-libelles-en.mjs"
|
|
@@ -73,6 +69,10 @@
|
|
|
73
69
|
"types": "./types/starterlib-ui-listes.d.ts",
|
|
74
70
|
"default": "./fesm2022/starterlib-ui-listes.mjs"
|
|
75
71
|
},
|
|
72
|
+
"./messagerie": {
|
|
73
|
+
"types": "./types/starterlib-ui-messagerie.d.ts",
|
|
74
|
+
"default": "./fesm2022/starterlib-ui-messagerie.mjs"
|
|
75
|
+
},
|
|
76
76
|
"./navigation": {
|
|
77
77
|
"types": "./types/starterlib-ui-navigation.d.ts",
|
|
78
78
|
"default": "./fesm2022/starterlib-ui-navigation.mjs"
|
|
@@ -81,6 +81,14 @@
|
|
|
81
81
|
"types": "./types/starterlib-ui-onglets.d.ts",
|
|
82
82
|
"default": "./fesm2022/starterlib-ui-onglets.mjs"
|
|
83
83
|
},
|
|
84
|
+
"./parcours": {
|
|
85
|
+
"types": "./types/starterlib-ui-parcours.d.ts",
|
|
86
|
+
"default": "./fesm2022/starterlib-ui-parcours.mjs"
|
|
87
|
+
},
|
|
88
|
+
"./qr": {
|
|
89
|
+
"types": "./types/starterlib-ui-qr.d.ts",
|
|
90
|
+
"default": "./fesm2022/starterlib-ui-qr.mjs"
|
|
91
|
+
},
|
|
84
92
|
"./saisie": {
|
|
85
93
|
"types": "./types/starterlib-ui-saisie.d.ts",
|
|
86
94
|
"default": "./fesm2022/starterlib-ui-saisie.mjs"
|
|
@@ -89,13 +97,14 @@
|
|
|
89
97
|
"types": "./types/starterlib-ui-selection.d.ts",
|
|
90
98
|
"default": "./fesm2022/starterlib-ui-selection.mjs"
|
|
91
99
|
},
|
|
100
|
+
"./sens": {
|
|
101
|
+
"types": "./types/starterlib-ui-sens.d.ts",
|
|
102
|
+
"default": "./fesm2022/starterlib-ui-sens.mjs"
|
|
103
|
+
},
|
|
92
104
|
"./surfaces": {
|
|
93
105
|
"types": "./types/starterlib-ui-surfaces.d.ts",
|
|
94
106
|
"default": "./fesm2022/starterlib-ui-surfaces.mjs"
|
|
95
107
|
}
|
|
96
108
|
},
|
|
97
|
-
"type": "module"
|
|
98
|
-
|
|
99
|
-
"tslib": "^2.3.0"
|
|
100
|
-
}
|
|
101
|
-
}
|
|
109
|
+
"type": "module"
|
|
110
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
/* Amorce statique de @starterlib/ui — @starterlib/ui/styles/amorce.css (greffe 212b, D25).
|
|
2
|
+
|
|
3
|
+
Ce que la page montre AVANT le JavaScript : un fragment HTML pose par l'HOTE dans
|
|
4
|
+
son element racine (<sc-root>), que le premier rendu d'Angular remplace. Recette :
|
|
5
|
+
docs/recettes/assembler-une-spa.md, « L'amorce ».
|
|
6
|
+
|
|
7
|
+
Contraintes tenues ici, et verifiees par packages/ui/src/lib/styles/amorce.spec.ts :
|
|
8
|
+
- aucune ressource tierce : ni police distante, ni image, ni url() ;
|
|
9
|
+
- aucun script, aucun style en ligne : la politique de securite du contenu reste
|
|
10
|
+
stricte (style-src 'self'), la feuille est servie avec les autres ;
|
|
11
|
+
- aucune animation : l'amorce ne dure que le temps du telechargement, et une
|
|
12
|
+
boucle CSS de plus serait un indicateur de plus a tenir ;
|
|
13
|
+
- aucune retention : Angular la remplace des son premier rendu.
|
|
14
|
+
|
|
15
|
+
Elle reprend la mise en page de st-splash-screen (variante clair) : le passage de
|
|
16
|
+
l'une a l'autre ne fait pas sauter le nom. Les jetons sont lus s'ils sont charges
|
|
17
|
+
(starter-tokens.css, AVANT cette feuille), avec des replis systeme sinon. */
|
|
18
|
+
|
|
19
|
+
.st-amorce {
|
|
20
|
+
position: fixed;
|
|
21
|
+
inset: 0;
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: column;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
align-items: center;
|
|
26
|
+
padding: var(--st-espacement-4, 1rem);
|
|
27
|
+
margin: 0;
|
|
28
|
+
color: var(--st-couleur-texte, CanvasText);
|
|
29
|
+
font-family: var(--st-police-base, system-ui, sans-serif);
|
|
30
|
+
text-align: center;
|
|
31
|
+
background-color: var(--st-couleur-surface, Canvas);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Liseret de la marque, comme l'ecran de demarrage clair. */
|
|
35
|
+
.st-amorce::before {
|
|
36
|
+
position: absolute;
|
|
37
|
+
inset: 0 0 auto;
|
|
38
|
+
block-size: var(--st-espacement-1-5, 0.375rem);
|
|
39
|
+
content: '';
|
|
40
|
+
background-color: var(--st-couleur-primaire, CanvasText);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.st-amorce__nom {
|
|
44
|
+
margin: 0;
|
|
45
|
+
font-size: var(--st-taille-lg, 1.125rem);
|
|
46
|
+
font-weight: var(--st-graisse-semi, 600);
|
|
47
|
+
line-height: var(--st-interligne-md, 1.5rem);
|
|
48
|
+
letter-spacing: var(--st-interlettrage-serre, -0.01em);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.st-amorce__statut {
|
|
52
|
+
margin: var(--st-espacement-4, 1rem) 0 0;
|
|
53
|
+
font-size: var(--st-taille-sm, 0.875rem);
|
|
54
|
+
font-weight: var(--st-graisse-moyenne, 500);
|
|
55
|
+
line-height: var(--st-interligne-sm, 1.25rem);
|
|
56
|
+
color: var(--st-couleur-texte-discret, CanvasText);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@media (forced-colors: active) {
|
|
60
|
+
.st-amorce::before {
|
|
61
|
+
display: none;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@media print {
|
|
66
|
+
.st-amorce {
|
|
67
|
+
display: none;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
/* Feuille des couches de @starterlib/ui — @starterlib/ui/styles/couches.css.
|
|
2
|
+
|
|
3
|
+
A charger par l'HOTE seulement, APRES starter-tokens.css (recette
|
|
4
|
+
docs/recettes/assembler-une-spa.md). Le conteneur des couches du CDK appartient
|
|
5
|
+
au document : le voile et les pseudo-elements de transition de vue vivent hors
|
|
6
|
+
de toute portee de composant, aucune feuille de composant ne peut les regler.
|
|
7
|
+
|
|
8
|
+
Aucune valeur n'est ecrite ici : tout se lit dans les jetons, qui obeissent au
|
|
9
|
+
mouvement reduit, a data-mouvement et au gel d'une image. */
|
|
10
|
+
|
|
11
|
+
/* Voile des dialogues et des tiroirs (03 §2.6 f, MV-1) : le fond du theme, en
|
|
12
|
+
fondu linear sur la duree d'une couche. Il remplace les 400 ms et la courbe du
|
|
13
|
+
CDK, etrangeres a l'echelle et sourdes au mouvement reduit. Deux classes : la
|
|
14
|
+
feuille du CDK est injectee APRES celle de l'hote, et gagnerait a egalite. */
|
|
15
|
+
.cdk-overlay-backdrop.st-voile {
|
|
16
|
+
background: var(--st-voile);
|
|
17
|
+
transition: opacity var(--st-duree-normale) linear;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Le CDK pose `cdk-overlay-backdrop-showing` dans un requestAnimationFrame. Quand
|
|
21
|
+
aucun style n'a ete calcule pour le voile avant cette image (aucune mise en page
|
|
22
|
+
forcee entre son insertion et l'image, ce qui arrive sous charge), le navigateur
|
|
23
|
+
n'a pas de valeur de depart, et le voile paraissait d'un coup a cote d'un panneau
|
|
24
|
+
qui arrivait en fondu. `@starting-style` la donne, comme au panneau : le fondu a
|
|
25
|
+
lieu a chaque ouverture. */
|
|
26
|
+
@starting-style {
|
|
27
|
+
.cdk-overlay-backdrop.st-voile.cdk-overlay-backdrop-showing {
|
|
28
|
+
opacity: 0;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Largeurs des panneaux de StDialog (D2, D21) : plus aucune n'est ecrite en
|
|
33
|
+
TypeScript. Un dialogue ne depasse jamais l'ecran ; un tiroir laisse voir la
|
|
34
|
+
page a cote de lui ; une feuille inferieure prend toute la largeur. Une
|
|
35
|
+
largeur passee par l'appelant (option largeur) reste prioritaire. */
|
|
36
|
+
.cdk-overlay-pane.st-dialogue {
|
|
37
|
+
inline-size: min(var(--st-largeur-dialogue-md), calc(100vw - 2rem));
|
|
38
|
+
/* Le panneau (max-block-size: inherit) et son corps defilant derivent de cette
|
|
39
|
+
hauteur : `dvh`, pour que le pied ne passe jamais sous la barre d'adresse. */
|
|
40
|
+
max-block-size: calc(100dvh - 3rem);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Tailles d'un dialogue centre (option taille, lot 229) : 24 / 32 / 48 rem. */
|
|
44
|
+
.cdk-overlay-pane.st-dialogue--sm {
|
|
45
|
+
inline-size: min(var(--st-largeur-dialogue-sm), calc(100vw - 2rem));
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.cdk-overlay-pane.st-dialogue--lg {
|
|
49
|
+
inline-size: min(var(--st-largeur-dialogue-lg), calc(100vw - 2rem));
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Le corps d'un dialogue DERIVE de la hauteur du panneau (lot 229, A1443) : le panneau est
|
|
53
|
+
une colonne flexible, mais un contenu ouvert par COMPOSANT (st-confirm-dialog, un
|
|
54
|
+
formulaire) est enveloppe par l'hote de ce composant, qui romprait la chaine. Il la
|
|
55
|
+
transmet, s'il porte un st-dialog-content. Une feuille de composant ne peut pas viser l'hote
|
|
56
|
+
d'un composant cree par le portail du CDK : la regle vit ici. */
|
|
57
|
+
.st-dialog-container > :has(> st-dialog-content) {
|
|
58
|
+
display: flex;
|
|
59
|
+
flex: 1 1 auto;
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
min-block-size: 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.cdk-overlay-pane.st-tiroir {
|
|
65
|
+
inline-size: min(var(--st-largeur-tiroir), calc(100vw - 3rem));
|
|
66
|
+
block-size: 100%;
|
|
67
|
+
max-block-size: 100dvh;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.cdk-overlay-pane.st-tiroir--bas {
|
|
71
|
+
inline-size: 100%;
|
|
72
|
+
block-size: auto;
|
|
73
|
+
max-block-size: calc(100dvh - 3rem);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* Transitions de vue (03 §2.6 e) : consommees par l'HOTE seulement, sous son ADR
|
|
77
|
+
d'exception (lot M13) ; rien dans le socle ne les declenche. Fondu croise de la
|
|
78
|
+
page, linear, sur la duree d'une couche : instantane sous mouvement reduit. */
|
|
79
|
+
::view-transition-old(root),
|
|
80
|
+
::view-transition-new(root) {
|
|
81
|
+
animation-duration: var(--st-duree-normale);
|
|
82
|
+
animation-timing-function: linear;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Lien etendu d'une carte (st-card, stLienEtendu, lot 214) : le lien projete
|
|
86
|
+
s'etend a toute la carte par un pseudo-element, la carte restant le premier
|
|
87
|
+
ancetre positionne. Une feuille de composant ne peut pas regler un element
|
|
88
|
+
projete sans ::ng-deep (deprecie) : la regle vit ici, dans la feuille que
|
|
89
|
+
l'hote charge deja. L'anneau du lien passe a la CARTE (data-lien-focalise,
|
|
90
|
+
pose par la carte) : le lien ne dessine pas le sien en double. */
|
|
91
|
+
.st-card .st-lien-etendu::after {
|
|
92
|
+
position: absolute;
|
|
93
|
+
inset: 0;
|
|
94
|
+
content: '';
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* Les AUTRES controles d'une carte a lien etendu passent au-dessus de la zone
|
|
98
|
+
etendue, qu'ils precedent ou suivent le lien dans le document (sans z-index,
|
|
99
|
+
les elements positionnes se peignent dans l'ordre du document : le pseudo-
|
|
100
|
+
element recouvrirait un controle place avant lui). Sans specificite (:where) :
|
|
101
|
+
une position ecrite par l'application ou un composant (absolute, relative)
|
|
102
|
+
gagne, seul le z-index s'y ajoute. */
|
|
103
|
+
:where(
|
|
104
|
+
.st-card[data-interactive]
|
|
105
|
+
:is(a[href], button, input, select, textarea, summary, [tabindex]):not(
|
|
106
|
+
.st-lien-etendu,
|
|
107
|
+
:has(.st-lien-etendu)
|
|
108
|
+
)
|
|
109
|
+
) {
|
|
110
|
+
position: relative;
|
|
111
|
+
z-index: 1;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.st-card[data-lien-focalise] .st-lien-etendu:focus-visible {
|
|
115
|
+
outline: none;
|
|
116
|
+
box-shadow: none;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* Marque de l'en-tete (st-header, lot 212) : elle cede avant les actions et se
|
|
120
|
+
tronque sur une ligne ; l'en-tete garde ses 64 px quelle que soit la longueur
|
|
121
|
+
du nom. Le texte complet reste dans le document (lecteur d'ecran, nom du lien).
|
|
122
|
+
Sans specificite (:where) : une application qui prefere un nom sur deux lignes
|
|
123
|
+
l'ecrit dans sa propre feuille. Le debordement cache ne rogne pas l'anneau de
|
|
124
|
+
la marque quand elle est le lien (un element ne rogne que ses descendants). */
|
|
125
|
+
:where(.st-header__debut > [marque]) {
|
|
126
|
+
min-inline-size: 0;
|
|
127
|
+
overflow: hidden;
|
|
128
|
+
text-overflow: ellipsis;
|
|
129
|
+
white-space: nowrap;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* Declencheur d'un menu COLLE (st-menu accroche="collee", lot 231) : stMenuTrigger
|
|
133
|
+
pose data-accroche-menu sur LUI en permanence (D53), StMenu y ajoute data-menu-cote
|
|
134
|
+
pendant l'ouverture ; aucune feuille de composant ne peut le lire, quel que soit le
|
|
135
|
+
composant du declencheur. Le cote du menu perd ses coins (le menu perd les
|
|
136
|
+
siens en face), et la fleche de fin (stButton iconeApres) se retourne, dans la
|
|
137
|
+
couleur de la marque. Rotation sur la duree d'une commande : instantanee sous
|
|
138
|
+
mouvement reduit. */
|
|
139
|
+
/* Revue E12 (fidelite, MOYENNE) : le panneau retire son filet et ses coins du cote du
|
|
140
|
+
declencheur sur TOUTE la largeur du panneau (au moins --st-largeur-menu, 192 px). Un
|
|
141
|
+
declencheur plus etroit (ex. un bouton d'environ 130 px) laissait donc ce filet et ce coin
|
|
142
|
+
ouverts au-dela de lui. Le declencheur d'un menu colle est donc lui-meme au moins aussi large
|
|
143
|
+
que le panneau : les deux bords coincident toujours. */
|
|
144
|
+
[data-accroche-menu='collee'] {
|
|
145
|
+
min-inline-size: var(--st-largeur-menu);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/* D53 : le declencheur colle reste le bouton secondaire du canon, mais sa disposition
|
|
149
|
+
suit la planche 5 : libelle (et glyphe d'entree) au debut, fleche repoussee en fin
|
|
150
|
+
de ligne, qui dit « liste deroulante ». Attribut double : passe devant le centrage de
|
|
151
|
+
la feuille de stButton (`:host`, portee d'un attribut). */
|
|
152
|
+
[data-accroche-menu='collee'][data-accroche-menu] {
|
|
153
|
+
justify-content: flex-start;
|
|
154
|
+
text-align: start;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
[data-accroche-menu='collee'][data-accroche-menu] > .st-button__apres {
|
|
158
|
+
margin-inline-start: auto;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
[data-accroche-menu='collee'][data-menu-cote='bas'] {
|
|
162
|
+
border-end-start-radius: 0;
|
|
163
|
+
border-end-end-radius: 0;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
[data-accroche-menu='collee'][data-menu-cote='haut'] {
|
|
167
|
+
border-start-start-radius: 0;
|
|
168
|
+
border-start-end-radius: 0;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
[aria-haspopup='menu'] > .st-button__apres {
|
|
172
|
+
transition: rotate var(--st-duree-rapide) var(--st-courbe-standard);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
[data-accroche-menu='collee'][data-menu-cote] > .st-button__apres {
|
|
176
|
+
rotate: 180deg;
|
|
177
|
+
color: var(--st-couleur-primaire);
|
|
178
|
+
}
|
|
@@ -1,12 +1,42 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { InjectionToken, Provider, Signal } from "@angular/core";
|
|
3
|
+
import { CatalogueDuPointDEntree, Icone, NiveauDeTitre } from "@starterlib/ui";
|
|
4
|
+
import { sansCommandesDeDirection } from "@starterlib/util";
|
|
3
5
|
/** Un noeud, decrit en donnees. */
|
|
4
|
-
interface NoeudDArbre {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
export interface NoeudDArbre {
|
|
7
|
+
/** Identifiant stable : il porte la selection et le depliage. */
|
|
8
|
+
readonly valeur: string;
|
|
9
|
+
readonly libelle: string;
|
|
10
|
+
readonly enfants?: readonly NoeudDArbre[];
|
|
11
|
+
readonly desactive?: boolean;
|
|
12
|
+
/** Une icone avant le libelle (un dossier, un compte) : decorative, le libelle nomme. */
|
|
13
|
+
readonly icone?: Icone | null;
|
|
14
|
+
/** L'icone du noeud deplie (le dossier ouvert de la planche 5) ; sans elle, `icone`. */
|
|
15
|
+
readonly iconeDepliee?: Icone | null;
|
|
16
|
+
/** Un compte en pastille (« 14 ») : lu dans le nom (« 61 Services exterieurs, 14 elements »). */
|
|
17
|
+
readonly compte?: number | null;
|
|
18
|
+
/** Un complement en fin de ligne (un solde), deja formate : lu apres le libelle. */
|
|
19
|
+
readonly complement?: string | null;
|
|
20
|
+
/**
|
|
21
|
+
* Le complement est un MONTANT : il se masque avec les montants de l'ecran
|
|
22
|
+
* (`ST_MONTANTS_MASQUES`, `st-privacy-toggle`), a l'ecran comme dans le nom du noeud (audit du
|
|
23
|
+
* 2026-09-27, A-12). Sans lui, un solde restait lisible quand la personne avait masque les siens.
|
|
24
|
+
*/
|
|
25
|
+
readonly complementMontant?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* `positif` : une plus-value (« +8'410'000 CHF »), a l'encre des plus-values et en gras (EA-24).
|
|
28
|
+
* Le signe reste dans le texte : la couleur ne dit rien seule.
|
|
29
|
+
*/
|
|
30
|
+
readonly tonDuComplement?: 'positif' | null;
|
|
31
|
+
/** Les enfants se chargent : `aria-busy`, et un anneau en fin de ligne apres 200 ms. */
|
|
32
|
+
readonly chargement?: boolean;
|
|
33
|
+
/** Faux : un noeud qui se deplie sans se choisir (un groupe de comptes). Defaut : vrai. */
|
|
34
|
+
readonly selectionnable?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Des enfants existent sans etre encore charges : le noeud se deplie, et `chargementDemande`
|
|
37
|
+
* les demande a l'application.
|
|
38
|
+
*/
|
|
39
|
+
readonly aDesEnfants?: boolean;
|
|
10
40
|
}
|
|
11
41
|
/**
|
|
12
42
|
* Arbre de donnees hierarchiques, sur `@angular/aria/tree` : dossiers, plan
|
|
@@ -25,27 +55,171 @@ interface NoeudDArbre {
|
|
|
25
55
|
* primitive relie un element a son arbre par injection, et un contenu projete
|
|
26
56
|
* garde l'injecteur de l'endroit ou il est ecrit — lecon de `st-menu`.
|
|
27
57
|
*
|
|
58
|
+
* Structure (lot 237, planche 5) : `ul[role=tree] > li[role=treeitem] > .st-tree__ligne` puis, DANS
|
|
59
|
+
* le `li`, le `ul[role=group]` de ses enfants, rendus a la demande. Replie, le groupe reste pose,
|
|
60
|
+
* vide et masque : la primitive tient l'expansibilite d'un element de l'enregistrement de son
|
|
61
|
+
* groupe. Le nom de chaque element est son libelle, son compte et son complement (`aria-label`) :
|
|
62
|
+
* jamais le texte de ses enfants. Sans noeud, un `st-empty` `sm` tient la place (D68).
|
|
63
|
+
*
|
|
28
64
|
* Clavier de la primitive : fleches haut et bas entre les elements visibles,
|
|
29
65
|
* droite pour deplier ou entrer, gauche pour replier ou remonter, Debut et Fin,
|
|
30
66
|
* recherche a la frappe ; Espace ou Entree choisit. Selection et depliage sont des
|
|
31
67
|
* listes de VALEURS, lisibles et restaurables par l'application.
|
|
32
68
|
*/
|
|
33
|
-
declare class StTree {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
69
|
+
export declare class StTree {
|
|
70
|
+
/**
|
|
71
|
+
* Un texte de donnees : sans commande de direction, et isole par son element (`dir="auto"` ou
|
|
72
|
+
* `<bdi>`), il ne reordonne ni lui-meme ni ce qui l'entoure (audit du 2026-09-26, S-1 ; audit
|
|
73
|
+
* etendu du 2026-09-27, A-2).
|
|
74
|
+
*/
|
|
75
|
+
protected readonly affichable: typeof sansCommandesDeDirection;
|
|
76
|
+
private readonly locale;
|
|
77
|
+
private readonly catalogue;
|
|
78
|
+
private readonly libelles;
|
|
79
|
+
private readonly libellesUi;
|
|
80
|
+
private readonly montantsMasques;
|
|
81
|
+
/** Nom de l'arbre, lu a l'entree. Obligatoire. */
|
|
82
|
+
readonly etiquette: import("@angular/core").InputSignal<string>;
|
|
83
|
+
readonly noeuds: import("@angular/core").InputSignal<readonly NoeudDArbre[]>;
|
|
84
|
+
readonly multiple: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
85
|
+
/** Le titre de l'etat vide (« Aucun compte »), deja traduit ; defaut : « Aucun element ». */
|
|
86
|
+
readonly texteVide: import("@angular/core").InputSignal<string | null>;
|
|
87
|
+
/** Ce qui manque, en une phrase, sous le titre de l'etat vide. */
|
|
88
|
+
readonly descriptionVide: import("@angular/core").InputSignal<string | null>;
|
|
89
|
+
/** Le niveau du titre de l'etat vide dans la page : l'appelant le connait, pas l'arbre. */
|
|
90
|
+
readonly niveauDuTitreVide: import("@angular/core").InputSignal<NiveauDeTitre>;
|
|
91
|
+
readonly selection: import("@angular/core").ModelSignal<readonly string[]>;
|
|
92
|
+
readonly deplies: import("@angular/core").ModelSignal<readonly string[]>;
|
|
93
|
+
/** Un noeud deplie dont les enfants restent a charger (`aDesEnfants` sans `enfants`). */
|
|
94
|
+
readonly chargementDemande: import("@angular/core").OutputEmitterRef<string>;
|
|
95
|
+
/** La primitive attend un tableau modifiable ; le modele est en lecture seule. */
|
|
96
|
+
protected readonly valeursChoisies: Signal<string[]>;
|
|
97
|
+
private readonly ensembleDeplie;
|
|
98
|
+
private readonly ensembleChoisi;
|
|
99
|
+
private readonly formatDesComptes;
|
|
100
|
+
/** Un noeud au moins porte une icone : toutes les lignes tiennent sa colonne (brief 17). */
|
|
101
|
+
protected readonly avecIcones: Signal<boolean>;
|
|
102
|
+
protected readonly texteDuVide: Signal<string>;
|
|
103
|
+
/**
|
|
104
|
+
* Le `lang` de l'etat vide quand le catalogue retombe sur le francais (audit du 2026-09-27,
|
|
105
|
+
* D-29) : seulement si tout son texte vient du catalogue. Une description de l'application
|
|
106
|
+
* partage l'element ; le titre garde alors la langue de la page, comme les noms des elements, ou
|
|
107
|
+
* le catalogue (« 14 elements ») se melange au libelle du noeud.
|
|
108
|
+
*/
|
|
109
|
+
protected readonly langueDuVide: Signal<string | null>;
|
|
110
|
+
protected estDeplie(noeud: NoeudDArbre): boolean;
|
|
111
|
+
/** Un chevron quand le noeud a (ou aura) des enfants ; un point de feuille sinon. */
|
|
112
|
+
protected estParent(noeud: NoeudDArbre): boolean;
|
|
113
|
+
/**
|
|
114
|
+
* Les parents partiellement choisis, calcules UNE fois par selection, en un seul parcours sans
|
|
115
|
+
* recursion (audit du 2026-09-27, A-13) : la descente par noeud, appelee trois fois par ligne a
|
|
116
|
+
* chaque detection, coutait la taille du sous-arbre de chaque noeud.
|
|
117
|
+
*/
|
|
118
|
+
private readonly parentsPartiels;
|
|
119
|
+
/**
|
|
120
|
+
* En selection multiple, un parent non choisi dont une partie des descendants l'est : il le
|
|
121
|
+
* montre (cercle-moins) et le dit dans son nom, sans etre choisi pour autant.
|
|
122
|
+
*/
|
|
123
|
+
protected estPartiel(noeud: NoeudDArbre): boolean;
|
|
124
|
+
/** Le complement est un montant, et les montants de l'ecran sont masques (A-12). */
|
|
125
|
+
protected complementMasque(noeud: NoeudDArbre): boolean;
|
|
126
|
+
protected iconeDe(noeud: NoeudDArbre): Icone | null;
|
|
127
|
+
protected compteDe(compte: number): string;
|
|
128
|
+
/**
|
|
129
|
+
* Le nom : le libelle, puis le compte (« 14 elements » : la pastille seule dirait « 14 »), le
|
|
130
|
+
* complement et la selection partielle ; jamais le texte des enfants. Sans `lang`, meme quand le
|
|
131
|
+
* catalogue retombe sur le francais : le libelle du noeud est une donnee, dans la langue de la
|
|
132
|
+
* page (D-29).
|
|
133
|
+
*/
|
|
134
|
+
protected nomDe(noeud: NoeudDArbre): string;
|
|
135
|
+
protected surDepliage(noeud: NoeudDArbre, deplie: boolean): void;
|
|
136
|
+
protected surSelection(valeurs: readonly string[]): void;
|
|
137
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<StTree, never>;
|
|
138
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<StTree, "st-tree", never, {
|
|
139
|
+
"etiquette": {
|
|
140
|
+
"alias": "etiquette";
|
|
141
|
+
"required": true;
|
|
142
|
+
"isSignal": true;
|
|
143
|
+
};
|
|
144
|
+
"noeuds": {
|
|
145
|
+
"alias": "noeuds";
|
|
146
|
+
"required": true;
|
|
147
|
+
"isSignal": true;
|
|
148
|
+
};
|
|
149
|
+
"multiple": {
|
|
150
|
+
"alias": "multiple";
|
|
151
|
+
"required": false;
|
|
152
|
+
"isSignal": true;
|
|
153
|
+
};
|
|
154
|
+
"texteVide": {
|
|
155
|
+
"alias": "texteVide";
|
|
156
|
+
"required": false;
|
|
157
|
+
"isSignal": true;
|
|
158
|
+
};
|
|
159
|
+
"descriptionVide": {
|
|
160
|
+
"alias": "descriptionVide";
|
|
161
|
+
"required": false;
|
|
162
|
+
"isSignal": true;
|
|
163
|
+
};
|
|
164
|
+
"niveauDuTitreVide": {
|
|
165
|
+
"alias": "niveauDuTitreVide";
|
|
166
|
+
"required": false;
|
|
167
|
+
"isSignal": true;
|
|
168
|
+
};
|
|
169
|
+
"selection": {
|
|
170
|
+
"alias": "selection";
|
|
171
|
+
"required": false;
|
|
172
|
+
"isSignal": true;
|
|
173
|
+
};
|
|
174
|
+
"deplies": {
|
|
175
|
+
"alias": "deplies";
|
|
176
|
+
"required": false;
|
|
177
|
+
"isSignal": true;
|
|
178
|
+
};
|
|
179
|
+
}, {
|
|
180
|
+
"selection": "selectionChange";
|
|
181
|
+
"deplies": "depliesChange";
|
|
182
|
+
"chargementDemande": "chargementDemande";
|
|
183
|
+
}, never, never, true, never>;
|
|
184
|
+
}
|
|
185
|
+
/**
|
|
186
|
+
* Les libelles de `@starterlib/ui/arbre` (lot 237) : le catalogue par point d'entree (AD-10, D147),
|
|
187
|
+
* apres ceux de la messagerie et des formulaires. La langue suit celle du dictionnaire du tronc.
|
|
188
|
+
*/
|
|
189
|
+
export interface LibellesArbre {
|
|
190
|
+
/** Le titre de l'etat vide d'un arbre sans noeud, a defaut du `texteVide` de l'application. */
|
|
191
|
+
readonly aucunElement: string;
|
|
192
|
+
/**
|
|
193
|
+
* Le compte d'un noeud, lu dans son nom (« 61 Services exterieurs, 14 elements ») : le nombre, et
|
|
194
|
+
* le meme deja ecrit a la locale (« 1 250 »).
|
|
195
|
+
*/
|
|
196
|
+
readonly elementsAuNombreDe: (nombre: number, enChiffres: string) => string;
|
|
197
|
+
/**
|
|
198
|
+
* Un parent dont une partie des descendants est choisie (selection multiple), dit dans son nom :
|
|
199
|
+
* `aria-selected` n'a pas de valeur mixte pour un element d'arbre.
|
|
200
|
+
*/
|
|
201
|
+
readonly partiellementSelectionne: string;
|
|
48
202
|
}
|
|
203
|
+
export declare const LIBELLES_ARBRE_FR: LibellesArbre;
|
|
204
|
+
export declare const LIBELLES_ARBRE_EN: LibellesArbre;
|
|
205
|
+
/**
|
|
206
|
+
* Les catalogues de l'arbre par langue (sous-etiquette primaire : `fr`, `en`). Une application qui
|
|
207
|
+
* ajoute une langue au dictionnaire du tronc ajoute la sienne ici, par
|
|
208
|
+
* `fournirLibellesArbre({ de: ... })`.
|
|
209
|
+
*/
|
|
210
|
+
export declare const ST_LIBELLES_ARBRE: InjectionToken<Readonly<Record<string, LibellesArbre>>>;
|
|
211
|
+
/** Ajoute (ou remplace) des catalogues de l'arbre, par langue. */
|
|
212
|
+
export declare function fournirLibellesArbre(catalogues: Readonly<Record<string, LibellesArbre>>): Provider;
|
|
213
|
+
/**
|
|
214
|
+
* Le catalogue de la langue du dictionnaire du tronc ; le francais quand la langue n'en a pas, un
|
|
215
|
+
* repli signale en developpement (audit du 2026-09-27, D-29). A appeler dans un contexte
|
|
216
|
+
* d'injection.
|
|
217
|
+
*/
|
|
218
|
+
export declare function libellesDeLArbre(): Signal<LibellesArbre>;
|
|
219
|
+
/**
|
|
220
|
+
* Le catalogue de l'arbre ET la langue de son repli (`catalogueDuPointDEntree`) : `lang` de ce
|
|
221
|
+
* qu'il ecrit seul (audit du 2026-09-27, D-29). A appeler dans un contexte d'injection.
|
|
222
|
+
*/
|
|
223
|
+
export declare function catalogueDeLArbre(): Signal<CatalogueDuPointDEntree<LibellesArbre>>;
|
|
49
224
|
|
|
50
|
-
export {
|
|
51
|
-
export type { NoeudDArbre };
|
|
225
|
+
export {};
|