@ktortu/aaa 0.9.1 → 0.9.3
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/dialog/dialog.css +6 -0
- package/fesm2022/ktortu-aaa-button.mjs +10 -2
- package/fesm2022/ktortu-aaa-button.mjs.map +1 -1
- package/fesm2022/ktortu-aaa-card.mjs +112 -99
- package/fesm2022/ktortu-aaa-card.mjs.map +1 -1
- package/fesm2022/ktortu-aaa-cdk.mjs +49 -2
- package/fesm2022/ktortu-aaa-cdk.mjs.map +1 -1
- package/fesm2022/ktortu-aaa-dialog.mjs +240 -32
- package/fesm2022/ktortu-aaa-dialog.mjs.map +1 -1
- package/fesm2022/ktortu-aaa-disclosure.mjs +203 -0
- package/fesm2022/ktortu-aaa-disclosure.mjs.map +1 -0
- package/fesm2022/ktortu-aaa-forms.mjs +217 -103
- package/fesm2022/ktortu-aaa-forms.mjs.map +1 -1
- package/fesm2022/ktortu-aaa-progress-bar.mjs +91 -0
- package/fesm2022/ktortu-aaa-progress-bar.mjs.map +1 -0
- package/fesm2022/ktortu-aaa-snackbar.mjs +16 -3
- package/fesm2022/ktortu-aaa-snackbar.mjs.map +1 -1
- package/fesm2022/ktortu-aaa-tooltip.mjs +20 -30
- package/fesm2022/ktortu-aaa-tooltip.mjs.map +1 -1
- package/fesm2022/ktortu-aaa.mjs +1 -0
- package/fesm2022/ktortu-aaa.mjs.map +1 -1
- package/forms/field/field.css +16 -0
- package/forms/styles/field-box.css +11 -5
- package/package.json +9 -1
- package/progress-bar/progress-bar.css +127 -0
- package/styles/disclosure.css +6 -0
- package/styles/progress-bar.css +5 -0
- package/styles/styles.css +2 -0
- package/themes/theme-cyberpunk.css +11 -0
- package/tooltip/tooltip.css +1 -1
- package/types/ktortu-aaa-button.d.ts +2 -0
- package/types/ktortu-aaa-card.d.ts +69 -65
- package/types/ktortu-aaa-cdk.d.ts +27 -1
- package/types/ktortu-aaa-dialog.d.ts +134 -15
- package/types/ktortu-aaa-disclosure.d.ts +121 -0
- package/types/ktortu-aaa-forms.d.ts +69 -16
- package/types/ktortu-aaa-progress-bar.d.ts +27 -0
- package/types/ktortu-aaa-snackbar.d.ts +11 -68
- package/types/ktortu-aaa-tooltip.d.ts +0 -1
- package/types/ktortu-aaa.d.ts +1 -0
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Temporal (Date/Time/DateTime/YearMonth/Instant), qui réutilise la même `.kt-field-box`.
|
|
4
4
|
Globale + classes namespacées : partagée entre plusieurs composants, donc non scopable. */
|
|
5
5
|
kt-text-field,
|
|
6
|
+
kt-password-field,
|
|
6
7
|
kt-text-area,
|
|
7
8
|
kt-number-field,
|
|
8
9
|
kt-date-field,
|
|
@@ -131,12 +132,14 @@
|
|
|
131
132
|
|
|
132
133
|
/* Le bouton « effacer » est une icône INTERNE de la lib : toujours Material Symbols,
|
|
133
134
|
indépendante de --kt-icon-font (sinon un override consommateur casserait la croix). */
|
|
134
|
-
.kt-field-box__clear .kt-field-box__icon
|
|
135
|
+
.kt-field-box__clear .kt-field-box__icon,
|
|
136
|
+
.kt-field-box__toggle .kt-field-box__icon {
|
|
135
137
|
font-family: 'Material Symbols Outlined';
|
|
136
138
|
font-weight: normal;
|
|
137
139
|
}
|
|
138
140
|
|
|
139
|
-
.kt-field-box__clear
|
|
141
|
+
.kt-field-box__clear,
|
|
142
|
+
.kt-field-box__toggle {
|
|
140
143
|
display: inline-flex;
|
|
141
144
|
align-items: center;
|
|
142
145
|
justify-content: center;
|
|
@@ -151,7 +154,8 @@
|
|
|
151
154
|
}
|
|
152
155
|
|
|
153
156
|
/* Cible tactile AAA 44x44px étendue via un pseudo-élément transparent */
|
|
154
|
-
.kt-field-box__clear::after
|
|
157
|
+
.kt-field-box__clear::after,
|
|
158
|
+
.kt-field-box__toggle::after {
|
|
155
159
|
content: '';
|
|
156
160
|
position: absolute;
|
|
157
161
|
top: 50%;
|
|
@@ -161,11 +165,13 @@
|
|
|
161
165
|
height: 44px;
|
|
162
166
|
}
|
|
163
167
|
|
|
164
|
-
.kt-field-box__clear:hover
|
|
168
|
+
.kt-field-box__clear:hover,
|
|
169
|
+
.kt-field-box__toggle:hover {
|
|
165
170
|
color: var(--field-color, inherit);
|
|
166
171
|
}
|
|
167
172
|
|
|
168
|
-
.kt-field-box__clear:focus-visible
|
|
173
|
+
.kt-field-box__clear:focus-visible,
|
|
174
|
+
.kt-field-box__toggle:focus-visible {
|
|
169
175
|
outline: 2px solid var(--field-border-color-focus, #0b57d0);
|
|
170
176
|
outline-offset: 1px;
|
|
171
177
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ktortu/aaa",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.3",
|
|
4
4
|
"description": "Bibliothèque de composants Angular headless + thémés par tokens CSS.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -73,6 +73,10 @@
|
|
|
73
73
|
"types": "./types/ktortu-aaa-dialog.d.ts",
|
|
74
74
|
"default": "./fesm2022/ktortu-aaa-dialog.mjs"
|
|
75
75
|
},
|
|
76
|
+
"./disclosure": {
|
|
77
|
+
"types": "./types/ktortu-aaa-disclosure.d.ts",
|
|
78
|
+
"default": "./fesm2022/ktortu-aaa-disclosure.mjs"
|
|
79
|
+
},
|
|
76
80
|
"./forms": {
|
|
77
81
|
"types": "./types/ktortu-aaa-forms.d.ts",
|
|
78
82
|
"default": "./fesm2022/ktortu-aaa-forms.mjs"
|
|
@@ -85,6 +89,10 @@
|
|
|
85
89
|
"types": "./types/ktortu-aaa-menu.d.ts",
|
|
86
90
|
"default": "./fesm2022/ktortu-aaa-menu.mjs"
|
|
87
91
|
},
|
|
92
|
+
"./progress-bar": {
|
|
93
|
+
"types": "./types/ktortu-aaa-progress-bar.d.ts",
|
|
94
|
+
"default": "./fesm2022/ktortu-aaa-progress-bar.mjs"
|
|
95
|
+
},
|
|
88
96
|
"./snackbar": {
|
|
89
97
|
"types": "./types/ktortu-aaa-snackbar.d.ts",
|
|
90
98
|
"default": "./fesm2022/ktortu-aaa-snackbar.mjs"
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
width: 100%;
|
|
5
|
+
gap: var(--kt-progress-bar-gap, 8px);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.kt-progress-bar-label {
|
|
9
|
+
font-family: var(--kt-font-family, sans-serif);
|
|
10
|
+
font-size: var(--kt-font-size-sm, 0.875rem);
|
|
11
|
+
color: var(--kt-text-color-secondary, var(--kt-neutral-dark, #555));
|
|
12
|
+
text-align: var(--kt-progress-bar-label-align, start);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* Si le label est vide (pas d'input et ng-content vide), on le masque pour éviter le gap */
|
|
16
|
+
.kt-progress-bar-label:empty {
|
|
17
|
+
display: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.kt-progress-bar-track {
|
|
21
|
+
width: 100%;
|
|
22
|
+
height: var(--kt-progress-bar-height, 4px);
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
background-color: var(--kt-progress-bar-track-color, var(--kt-neutral-light, #e0e0e0));
|
|
25
|
+
border-radius: var(--kt-progress-bar-border-radius, 2px);
|
|
26
|
+
position: relative;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.kt-progress-bar-indicator {
|
|
30
|
+
position: absolute;
|
|
31
|
+
top: 0;
|
|
32
|
+
bottom: 0;
|
|
33
|
+
left: 0;
|
|
34
|
+
right: 0;
|
|
35
|
+
background-color: var(--kt-progress-bar-indicator-color, var(--kt-primary, #0056b3));
|
|
36
|
+
transform-origin: top left;
|
|
37
|
+
transition: transform 250ms ease;
|
|
38
|
+
will-change: transform;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Mode indéterminé : triple animation parallèle dissociée */
|
|
42
|
+
:host([data-mode='indeterminate']) .kt-progress-bar-indicator {
|
|
43
|
+
animation:
|
|
44
|
+
kt-progress-bar-indeterminate-translate 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1),
|
|
45
|
+
kt-progress-bar-indeterminate-scale 2.2s infinite ease-in-out,
|
|
46
|
+
kt-progress-bar-indeterminate-fade 2.2s infinite linear;
|
|
47
|
+
transform-origin: left;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Masquage visuel accessible (sr-only) */
|
|
51
|
+
.kt-sr-only {
|
|
52
|
+
position: absolute;
|
|
53
|
+
width: 1px;
|
|
54
|
+
height: 1px;
|
|
55
|
+
padding: 0;
|
|
56
|
+
margin: -1px;
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
clip: rect(0, 0, 0, 0);
|
|
59
|
+
white-space: nowrap;
|
|
60
|
+
border: 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@keyframes kt-progress-bar-indeterminate-translate {
|
|
64
|
+
0% {
|
|
65
|
+
translate: -100% 0;
|
|
66
|
+
}
|
|
67
|
+
100% {
|
|
68
|
+
translate: 100% 0;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@keyframes kt-progress-bar-indeterminate-scale {
|
|
73
|
+
0% {
|
|
74
|
+
scale: 0.15 1;
|
|
75
|
+
}
|
|
76
|
+
35% {
|
|
77
|
+
scale: 0.7 1;
|
|
78
|
+
}
|
|
79
|
+
70% {
|
|
80
|
+
scale: 0.4 1;
|
|
81
|
+
}
|
|
82
|
+
100% {
|
|
83
|
+
scale: 0.15 1;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@keyframes kt-progress-bar-indeterminate-fade {
|
|
88
|
+
0% {
|
|
89
|
+
opacity: 0;
|
|
90
|
+
}
|
|
91
|
+
15% {
|
|
92
|
+
opacity: 1;
|
|
93
|
+
}
|
|
94
|
+
85% {
|
|
95
|
+
opacity: 1;
|
|
96
|
+
}
|
|
97
|
+
100% {
|
|
98
|
+
opacity: 0;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Support pour prefers-reduced-motion ou bypass réduit manuel */
|
|
103
|
+
@media (prefers-reduced-motion: reduce) {
|
|
104
|
+
:host([data-mode='indeterminate']) .kt-progress-bar-indicator {
|
|
105
|
+
animation: kt-progress-bar-pulsate 2s infinite ease-in-out;
|
|
106
|
+
transform: none;
|
|
107
|
+
transform-origin: center;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.kt-progress-bar-indicator.kt-reduced-motion {
|
|
112
|
+
animation: kt-progress-bar-pulsate 2s infinite ease-in-out !important;
|
|
113
|
+
transform: none !important;
|
|
114
|
+
transform-origin: center !important;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@keyframes kt-progress-bar-pulsate {
|
|
118
|
+
0% {
|
|
119
|
+
opacity: 0.3;
|
|
120
|
+
}
|
|
121
|
+
50% {
|
|
122
|
+
opacity: 0.8;
|
|
123
|
+
}
|
|
124
|
+
100% {
|
|
125
|
+
opacity: 0.3;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
@layer kt-aaa.tokens, kt-aaa.base, kt-aaa.components;
|
|
2
|
+
|
|
3
|
+
/* Disclosure (ktDisclosure + déclencheur + panneau) : tokens + apparence. Nécessite le socle.
|
|
4
|
+
@import '@ktortu/aaa/disclosure.css'; */
|
|
5
|
+
@import '../disclosure/disclosure-tokens.css';
|
|
6
|
+
@import '../disclosure/disclosure.css';
|
package/styles/styles.css
CHANGED
|
@@ -138,6 +138,10 @@
|
|
|
138
138
|
--tab-radius: 6px 6px 0 0;
|
|
139
139
|
--tab-border: none;
|
|
140
140
|
--tab-margin: 0 4px 0 0;
|
|
141
|
+
|
|
142
|
+
/* ============ Progress Bar ============ */
|
|
143
|
+
--kt-progress-bar-track-color: #10182a;
|
|
144
|
+
--kt-progress-bar-indicator-color: transparent;
|
|
141
145
|
}
|
|
142
146
|
|
|
143
147
|
/* Fills DUOTONE cyan→magenta (ex-Synthwave) : niveau élément pour substituer var(--btn-fill) ;
|
|
@@ -158,6 +162,13 @@
|
|
|
158
162
|
--btn-shadow-focus: 0 0 16px color-mix(in srgb, var(--btn-fg) 75%, transparent);
|
|
159
163
|
}
|
|
160
164
|
|
|
165
|
+
[data-theme='cyberpunk'] .kt-progress-bar-indicator {
|
|
166
|
+
background-image: linear-gradient(90deg, #28d6ef, #ff3d8b);
|
|
167
|
+
box-shadow:
|
|
168
|
+
0 0 8px rgb(40 214 239 / 60%),
|
|
169
|
+
0 0 12px rgb(255 61 139 / 40%);
|
|
170
|
+
}
|
|
171
|
+
|
|
161
172
|
/* LASER en bord HAUT des cartes : ligne néon qui balaie (signature « partout »). Le pseudo
|
|
162
173
|
est libre (le lien étiré utilise ::after du lien, pas de la carte). z-index au-dessus du média. */
|
|
163
174
|
[data-theme='cyberpunk'] [ktCard] {
|
package/tooltip/tooltip.css
CHANGED
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
white-space: pre-line; /* Interprète les \n et les sauts de ligne dans les chaînes de texte */
|
|
29
29
|
box-shadow: 0 4px 12px color-mix(in srgb, #000 25%, transparent);
|
|
30
30
|
pointer-events: auto; /* requis pour le « hoverable » (WCAG 1.4.13) */
|
|
31
|
-
user-select: text; /*
|
|
31
|
+
user-select: text; /* Autorise la sélection et la traduction du texte du tooltip. */
|
|
32
32
|
cursor: default;
|
|
33
33
|
}
|
|
34
34
|
|
|
@@ -44,7 +44,9 @@ declare class KtButton implements AfterViewInit {
|
|
|
44
44
|
private readonly config;
|
|
45
45
|
private readonly host;
|
|
46
46
|
private readonly platformId;
|
|
47
|
+
private isDestroyed;
|
|
47
48
|
private readonly viewInitialized;
|
|
49
|
+
private readonly auditEnabled;
|
|
48
50
|
protected readonly isLink: boolean;
|
|
49
51
|
private readonly nativeAriaLabel;
|
|
50
52
|
/** Emphase visuelle du bouton (apparence, ≠ `type`). @default 'filled' (ou KT_BUTTON_CONFIG.mode) */
|
|
@@ -1,6 +1,70 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, Provider } from '@angular/core';
|
|
2
|
+
import { InjectionToken, AfterContentInit, AfterViewInit, Provider } from '@angular/core';
|
|
3
3
|
|
|
4
|
+
/** Axe "apparence" de la surface. */
|
|
5
|
+
type KtCardVariant = 'elevated' | 'outlined' | 'filled';
|
|
6
|
+
/** Défauts applicables à toutes les `[ktCard]` (surchargeables par carte via les inputs). */
|
|
7
|
+
interface KtCardConfig {
|
|
8
|
+
/** Apparence par défaut de la surface. */
|
|
9
|
+
variant: KtCardVariant;
|
|
10
|
+
}
|
|
11
|
+
declare const KT_CARD_CONFIG: InjectionToken<Partial<KtCardConfig>>;
|
|
12
|
+
/**
|
|
13
|
+
* Fournit des défauts de carte (apparence de surface) pour un sous-arbre ou l'application entière.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```ts
|
|
17
|
+
* providers: [provideKtCard({ variant: 'outlined' })]
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
declare function provideKtCard(config: Partial<KtCardConfig>): Provider;
|
|
21
|
+
/**
|
|
22
|
+
* Carte : SURFACE de contenu. Directive (pas de composant) posée sur l'élément SÉMANTIQUE choisi
|
|
23
|
+
* par le consommateur (`<article>`, `<section>`, `<li>`, `<a>`…) — la lib n'impose jamais de
|
|
24
|
+
* wrapper non sémantique ni de rôle (cf. précédent Dialog : la sémantique appartient à l'hôte).
|
|
25
|
+
*
|
|
26
|
+
* Trois axes pilotés en `data-*` (même contrat que ktButton) :
|
|
27
|
+
* - variant : data-variant = elevated | outlined | filled (apparence)
|
|
28
|
+
* - interactive : data-interactive (affordance hover/focus — PAS un rôle ; la cible cliquable
|
|
29
|
+
* est un [ktCardLink], lien/bouton primaire au lien étiré)
|
|
30
|
+
* - disabled : data-disabled (surface inerte)
|
|
31
|
+
*
|
|
32
|
+
* La mise en forme (layout des marqueurs, lien étiré, états) vit dans `card.css` ; les couleurs
|
|
33
|
+
* et la géométrie dérivent du socle `--kt-*` via `card-tokens.css`.
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```html
|
|
37
|
+
* <article ktCard variant="outlined" interactive>
|
|
38
|
+
* <div ktCardContent>
|
|
39
|
+
* <h3 id="t1">Titre</h3>
|
|
40
|
+
* <a ktCardLink routerLink="/detail" aria-labelledby="t1">Voir le détail</a>
|
|
41
|
+
* </div>
|
|
42
|
+
* </article>
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
declare class KtCard implements AfterContentInit {
|
|
46
|
+
private readonly config;
|
|
47
|
+
private readonly host;
|
|
48
|
+
private readonly platformId;
|
|
49
|
+
private readonly auditEnabled;
|
|
50
|
+
/** Référence réactive sur le lien primaire de la carte */
|
|
51
|
+
readonly cardLink: i0.Signal<KtCardLink | undefined>;
|
|
52
|
+
/** Apparence de la surface : `elevated` | `outlined` | `filled`. @default 'elevated' (ou `KT_CARD_CONFIG.variant`) */
|
|
53
|
+
readonly variant: i0.InputSignal<KtCardVariant>;
|
|
54
|
+
/**
|
|
55
|
+
* Affordance visuelle d'élément cliquable (hover/focus). N'AJOUTE pas de rôle : un lien/bouton
|
|
56
|
+
* primaire ([ktCardLink]) porte l'interaction et le nom accessible. @default false
|
|
57
|
+
*/
|
|
58
|
+
readonly interactive: i0.InputSignalWithTransform<boolean, unknown>;
|
|
59
|
+
/** Rend la surface inerte (état `data-disabled`). @default false */
|
|
60
|
+
readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
|
|
61
|
+
private isDestroyed;
|
|
62
|
+
private readonly contentInitialized;
|
|
63
|
+
constructor();
|
|
64
|
+
ngAfterContentInit(): void;
|
|
65
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<KtCard, never>;
|
|
66
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<KtCard, "[ktCard]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, ["cardLink"], never, true, never>;
|
|
67
|
+
}
|
|
4
68
|
/**
|
|
5
69
|
* En-tête de la carte (rangée flex : média/avatar + titre + éventuelle action). Marqueur
|
|
6
70
|
* structurel sans logique — la mise en forme vit dans `card.css` via `[ktCardHeader]`.
|
|
@@ -58,7 +122,7 @@ declare class KtCardActions {
|
|
|
58
122
|
}
|
|
59
123
|
/**
|
|
60
124
|
* Lien (ou bouton) PRIMAIRE d'une carte interactive : pattern « lien étiré » (Inclusive
|
|
61
|
-
* Components). Un pseudo-élément `::after`
|
|
125
|
+
* Components). Un pseudo-élément `::after` covers toute la carte (cf. `card.css`) → toute la
|
|
62
126
|
* surface est cliquable, SANS imbriquer de contrôles interactifs (anti-pattern WCAG 4.1.2). Les
|
|
63
127
|
* actions secondaires de la carte repassent au-dessus du lien (z-index dans `card.css`).
|
|
64
128
|
*
|
|
@@ -78,8 +142,9 @@ declare class KtCardActions {
|
|
|
78
142
|
* </article>
|
|
79
143
|
* ```
|
|
80
144
|
*/
|
|
81
|
-
declare class KtCardLink {
|
|
145
|
+
declare class KtCardLink implements AfterViewInit {
|
|
82
146
|
private readonly host;
|
|
147
|
+
private readonly auditEnabled;
|
|
83
148
|
/**
|
|
84
149
|
* Carte ancêtre, injectée optionnellement via `inject(Card, { optional: true })` (DI par
|
|
85
150
|
* hiérarchie d'éléments) : `null` si [ktCardLink] est utilisé hors d'une [ktCard]. Sert à relayer
|
|
@@ -87,72 +152,11 @@ declare class KtCardLink {
|
|
|
87
152
|
*/
|
|
88
153
|
protected readonly card: KtCard | null;
|
|
89
154
|
handleClick(event: Event): void;
|
|
90
|
-
|
|
155
|
+
ngAfterViewInit(): void;
|
|
91
156
|
static ɵfac: i0.ɵɵFactoryDeclaration<KtCardLink, never>;
|
|
92
157
|
static ɵdir: i0.ɵɵDirectiveDeclaration<KtCardLink, "a[ktCardLink], button[ktCardLink]", never, {}, {}, never, never, true, never>;
|
|
93
158
|
}
|
|
94
159
|
|
|
95
|
-
/** Axe "apparence" de la surface. */
|
|
96
|
-
type KtCardVariant = 'elevated' | 'outlined' | 'filled';
|
|
97
|
-
/** Défauts applicables à toutes les `[ktCard]` (surchargeables par carte via les inputs). */
|
|
98
|
-
interface KtCardConfig {
|
|
99
|
-
/** Apparence par défaut de la surface. */
|
|
100
|
-
variant: KtCardVariant;
|
|
101
|
-
}
|
|
102
|
-
declare const KT_CARD_CONFIG: InjectionToken<Partial<KtCardConfig>>;
|
|
103
|
-
/**
|
|
104
|
-
* Fournit des défauts de carte (apparence de surface) pour un sous-arbre ou l'application entière.
|
|
105
|
-
*
|
|
106
|
-
* @example
|
|
107
|
-
* ```ts
|
|
108
|
-
* providers: [provideKtCard({ variant: 'outlined' })]
|
|
109
|
-
* ```
|
|
110
|
-
*/
|
|
111
|
-
declare function provideKtCard(config: Partial<KtCardConfig>): Provider;
|
|
112
|
-
/**
|
|
113
|
-
* Carte : SURFACE de contenu. Directive (pas de composant) posée sur l'élément SÉMANTIQUE choisi
|
|
114
|
-
* par le consommateur (`<article>`, `<section>`, `<li>`, `<a>`…) — la lib n'impose jamais de
|
|
115
|
-
* wrapper non sémantique ni de rôle (cf. précédent Dialog : la sémantique appartient à l'hôte).
|
|
116
|
-
*
|
|
117
|
-
* Trois axes pilotés en `data-*` (même contrat que ktButton) :
|
|
118
|
-
* - variant : data-variant = elevated | outlined | filled (apparence)
|
|
119
|
-
* - interactive : data-interactive (affordance hover/focus — PAS un rôle ; la cible cliquable
|
|
120
|
-
* est un [ktCardLink], lien/bouton primaire au lien étiré)
|
|
121
|
-
* - disabled : data-disabled (surface inerte)
|
|
122
|
-
*
|
|
123
|
-
* La mise en forme (layout des marqueurs, lien étiré, états) vit dans `card.css` ; les couleurs
|
|
124
|
-
* et la géométrie dérivent du socle `--kt-*` via `card-tokens.css`.
|
|
125
|
-
*
|
|
126
|
-
* @example
|
|
127
|
-
* ```html
|
|
128
|
-
* <article ktCard variant="outlined" interactive>
|
|
129
|
-
* <div ktCardContent>
|
|
130
|
-
* <h3 id="t1">Titre</h3>
|
|
131
|
-
* <a ktCardLink routerLink="/detail" aria-labelledby="t1">Voir le détail</a>
|
|
132
|
-
* </div>
|
|
133
|
-
* </article>
|
|
134
|
-
* ```
|
|
135
|
-
*/
|
|
136
|
-
declare class KtCard {
|
|
137
|
-
private readonly config;
|
|
138
|
-
private readonly host;
|
|
139
|
-
private readonly platformId;
|
|
140
|
-
/** Référence réactive sur le lien primaire de la carte */
|
|
141
|
-
readonly cardLink: i0.Signal<KtCardLink | undefined>;
|
|
142
|
-
/** Apparence de la surface : `elevated` | `outlined` | `filled`. @default 'elevated' (ou `KT_CARD_CONFIG.variant`) */
|
|
143
|
-
readonly variant: i0.InputSignal<KtCardVariant>;
|
|
144
|
-
/**
|
|
145
|
-
* Affordance visuelle d'élément cliquable (hover/focus). N'AJOUTE pas de rôle : un lien/bouton
|
|
146
|
-
* primaire ([ktCardLink]) porte l'interaction et le nom accessible. @default false
|
|
147
|
-
*/
|
|
148
|
-
readonly interactive: i0.InputSignalWithTransform<boolean, unknown>;
|
|
149
|
-
/** Rend la surface inerte (état `data-disabled`). @default false */
|
|
150
|
-
readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
|
|
151
|
-
constructor();
|
|
152
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<KtCard, never>;
|
|
153
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<KtCard, "[ktCard]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, ["cardLink"], never, true, never>;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
160
|
/**
|
|
157
161
|
* Import ergonomique de toute la famille card en une fois :
|
|
158
162
|
* `imports: [KtCardImports]` au lieu d'énumérer chaque directive.
|
|
@@ -42,6 +42,26 @@ interface KtSheetDragOptions {
|
|
|
42
42
|
*/
|
|
43
43
|
declare function createKtSheetDrag(opts: KtSheetDragOptions): KtSheetDrag;
|
|
44
44
|
|
|
45
|
+
/**
|
|
46
|
+
* Verrou de défilement du `<body>` à COMPTEUR DE RÉFÉRENCES, partagé (`providedIn: 'root'`).
|
|
47
|
+
*
|
|
48
|
+
* Plusieurs surfaces modales simultanées (sheets, popups) peuvent verrouiller le scroll du fond :
|
|
49
|
+
* `overflow: hidden` n'est posé qu'au premier `lock()` et restauré (à sa valeur d'origine) qu'au
|
|
50
|
+
* dernier `unlock()`. Sans ce compteur, deux consommateurs par-instance se désynchronisent — la
|
|
51
|
+
* fermeture du premier restaure le scroll alors que le second est encore ouvert.
|
|
52
|
+
*/
|
|
53
|
+
declare class KtBodyScrollLock {
|
|
54
|
+
private readonly doc;
|
|
55
|
+
private count;
|
|
56
|
+
private previousOverflow;
|
|
57
|
+
/** Pose un verrou (premier appelant : mémorise puis force `overflow: hidden`). */
|
|
58
|
+
lock(): void;
|
|
59
|
+
/** Relâche un verrou ; restaure l'`overflow` d'origine quand le dernier consommateur relâche. */
|
|
60
|
+
unlock(): void;
|
|
61
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<KtBodyScrollLock, never>;
|
|
62
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<KtBodyScrollLock>;
|
|
63
|
+
}
|
|
64
|
+
|
|
45
65
|
/**
|
|
46
66
|
* Valeur d'un palier de breakpoint, CONFIGURABLE PAR APPLICATION :
|
|
47
67
|
* - un **nombre** = largeur (px) à partir de laquelle le palier commence ; la lib en dérive une
|
|
@@ -144,5 +164,11 @@ declare class KtIdGenerator {
|
|
|
144
164
|
static ɵprov: i0.ɵɵInjectableDeclaration<KtIdGenerator>;
|
|
145
165
|
}
|
|
146
166
|
|
|
147
|
-
|
|
167
|
+
/**
|
|
168
|
+
* InjectionToken permettant d'activer ou désactiver les audits d'accessibilité à l'exécution
|
|
169
|
+
* (gardes-fous console.warn en mode dev). Activé par défaut si `isDevMode()` est vrai.
|
|
170
|
+
*/
|
|
171
|
+
declare const KT_AUDIT_ENABLED: InjectionToken<boolean>;
|
|
172
|
+
|
|
173
|
+
export { KT_AUDIT_ENABLED, KT_BREAKPOINTS, KT_DEFAULT_BREAKPOINTS, KtBodyScrollLock, KtIdGenerator, KtViewport, createKtSheetDrag, provideKtBreakpoints, resolveKtBreakpointMedia };
|
|
148
174
|
export type { KtBreakpointMedia, KtBreakpointValue, KtBreakpoints, KtSheetDrag, KtSheetDragOptions };
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { OnInit, OnDestroy, Provider } from '@angular/core';
|
|
3
3
|
import { DialogConfig, DialogRef, CdkDialogContainer } from '@angular/cdk/dialog';
|
|
4
|
+
import * as _ktortu_aaa_dialog from '@ktortu/aaa/dialog';
|
|
5
|
+
import { Observable } from 'rxjs';
|
|
6
|
+
import { KtButtonColor } from '@ktortu/aaa/button';
|
|
4
7
|
import { ComponentType } from '@angular/cdk/portal';
|
|
5
8
|
|
|
6
9
|
/**
|
|
@@ -249,16 +252,6 @@ type KtDialogPresentation = 'centered' | 'fullscreen' | 'sheet' | 'centered-full
|
|
|
249
252
|
*/
|
|
250
253
|
declare function resolveKtDialogPanelClass(presentation?: KtDialogPresentation, compact?: boolean): string[];
|
|
251
254
|
|
|
252
|
-
/**
|
|
253
|
-
* ⚠️ API BAS-NIVEAU — n'utilisez PAS ceci par défaut. Pour implémenter un dialog, passez par
|
|
254
|
-
* {@link defineKtDialog} et son `injectData()` (qui lie le type des données à l'ouvreur).
|
|
255
|
-
*
|
|
256
|
-
* Sucre typé pour récupérer les données injectées dans un composant de dialogue (`DIALOG_DATA`).
|
|
257
|
-
* Le type `T` est affirmé ICI indépendamment de l'ouvreur : rien ne garantit qu'il corresponde au
|
|
258
|
-
* type passé à `injectKtDialogOpener` → risque de divergence silencieuse. À réserver à un cas où
|
|
259
|
-
* `defineKtDialog` ne convient pas.
|
|
260
|
-
*/
|
|
261
|
-
declare function injectKtDialogData<T>(): T;
|
|
262
255
|
/** Config d'ouverture sans le champ `data` (fourni séparément, typé), enrichie de `presentation`. */
|
|
263
256
|
type KtDialogOpenerConfig<D, R, C> = Omit<DialogConfig<D, DialogRef<R, C>>, 'data'> & {
|
|
264
257
|
/** Présentation du dialog (cf. `KtDialogPresentation`) — choisie par le dev. Résolue à CHAQUE
|
|
@@ -359,26 +352,152 @@ interface KtDialogContract<D, R> {
|
|
|
359
352
|
*/
|
|
360
353
|
declare function defineKtDialog<D = void, R = unknown>(): KtDialogContract<D, R>;
|
|
361
354
|
|
|
362
|
-
declare class KtDialogContainer extends CdkDialogContainer
|
|
355
|
+
declare class KtDialogContainer extends CdkDialogContainer {
|
|
363
356
|
private readonly dialogRef;
|
|
364
357
|
private readonly elementRef;
|
|
365
358
|
private readonly host;
|
|
366
359
|
private readonly platformId;
|
|
367
|
-
private readonly destroyRef;
|
|
368
360
|
protected readonly isClosing: i0.WritableSignal<boolean>;
|
|
361
|
+
/** Premier id de la file `aria-labelledby` exposée par `CdkDialogContainer`. Le membre
|
|
362
|
+
`_ariaLabelledByQueue` est interne au CDK (préfixe `_`) : on l'encapsule ICI, gardé, pour que
|
|
363
|
+
le binding de template ne lise jamais l'interne directement. Si une montée du CDK retire ou
|
|
364
|
+
renomme ce membre, on dégrade proprement vers `null` au lieu de casser le rendu du conteneur. */
|
|
365
|
+
protected get ariaLabelledBy(): string | null;
|
|
369
366
|
constructor();
|
|
370
|
-
ngOnInit(): void;
|
|
371
367
|
protected isSheet(): boolean;
|
|
372
368
|
private animateAndClose;
|
|
373
369
|
static ɵfac: i0.ɵɵFactoryDeclaration<KtDialogContainer, never>;
|
|
374
370
|
static ɵcmp: i0.ɵɵComponentDeclaration<KtDialogContainer, "kt-dialog-container", never, {}, {}, never, never, true, never>;
|
|
375
371
|
}
|
|
376
372
|
|
|
373
|
+
/**
|
|
374
|
+
* Configuration pour l'ouverture d'une boîte de dialogue d'alerte simple.
|
|
375
|
+
*/
|
|
376
|
+
interface KtAlertData {
|
|
377
|
+
/** Titre de la boîte de dialogue. */
|
|
378
|
+
title: string;
|
|
379
|
+
/**
|
|
380
|
+
* Message explicatif. Peut être une simple chaîne de caractères
|
|
381
|
+
* ou un tableau de chaînes pour composer plusieurs paragraphes.
|
|
382
|
+
* Supporte le HTML (balises sécurisées) désinfecté à l'affichage.
|
|
383
|
+
*/
|
|
384
|
+
message: string | string[];
|
|
385
|
+
/** Libellé du bouton de fermeture. Par défaut: 'Fermer'. */
|
|
386
|
+
closeLabel?: string;
|
|
387
|
+
}
|
|
388
|
+
/**
|
|
389
|
+
* Composant interne d'alerte générique.
|
|
390
|
+
* Affiche un titre, un message (simple ou multiligne HTML) et un bouton de fermeture.
|
|
391
|
+
*/
|
|
392
|
+
declare class KtAlertDialog {
|
|
393
|
+
protected readonly data: KtAlertData;
|
|
394
|
+
protected isMessageArray(): boolean;
|
|
395
|
+
protected messageArray(): string[];
|
|
396
|
+
protected messageString(): string;
|
|
397
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<KtAlertDialog, never>;
|
|
398
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<KtAlertDialog, "kt-alert-dialog", never, {}, {}, never, never, true, never>;
|
|
399
|
+
}
|
|
400
|
+
/** Ouvreur co-localisé officiel pour l'alerte. Utilise la présentation responsive par défaut. */
|
|
401
|
+
declare const injectAlertDialog: () => (data: KtAlertData, config?: _ktortu_aaa_dialog.KtDialogOpenerConfig<KtAlertData, void, KtAlertDialog> | undefined) => DialogRef<void, KtAlertDialog>;
|
|
402
|
+
/** Option de variante visuelle pour le bouton d'action principal. */
|
|
403
|
+
type KtDialogColor = KtButtonColor;
|
|
404
|
+
/**
|
|
405
|
+
* Configuration pour l'ouverture d'une boîte de dialogue de confirmation binaire (Oui/Non).
|
|
406
|
+
*/
|
|
407
|
+
interface KtConfirmConfig {
|
|
408
|
+
/** Titre de la boîte de dialogue. */
|
|
409
|
+
title: string;
|
|
410
|
+
/**
|
|
411
|
+
* Message explicatif. Peut être une simple chaîne ou un tableau
|
|
412
|
+
* de chaînes de caractères pour composer plusieurs paragraphes.
|
|
413
|
+
* Supporte le HTML désinfecté à l'affichage.
|
|
414
|
+
*/
|
|
415
|
+
message: string | string[];
|
|
416
|
+
/** Libellé du bouton de validation. Par défaut: 'Oui'. */
|
|
417
|
+
confirmLabel?: string;
|
|
418
|
+
/** Libellé du bouton de rejet. Par défaut: 'Non'. */
|
|
419
|
+
rejectLabel?: string;
|
|
420
|
+
/**
|
|
421
|
+
* Variante de couleur du bouton principal.
|
|
422
|
+
* Utile pour marquer une action destructive ou critique.
|
|
423
|
+
* Par défaut: 'primary'.
|
|
424
|
+
*/
|
|
425
|
+
color?: KtDialogColor;
|
|
426
|
+
}
|
|
427
|
+
/**
|
|
428
|
+
* Configuration pour une décision ternaire (inclut obligatoirement un bouton d'annulation).
|
|
429
|
+
*/
|
|
430
|
+
interface KtDecideConfig extends KtConfirmConfig {
|
|
431
|
+
/** Libellé du bouton d'annulation. Requis. */
|
|
432
|
+
cancelLabel: string;
|
|
433
|
+
}
|
|
434
|
+
/**
|
|
435
|
+
* Type de retour d'une boîte de dialogue de confirmation ou de décision.
|
|
436
|
+
* - 'confirm' : Choix de validation (Oui / Enregistrer)
|
|
437
|
+
* - 'reject' : Choix de rejet (Non / Ignorer)
|
|
438
|
+
* - 'cancel' : Choix d'annulation (Annuler)
|
|
439
|
+
*/
|
|
440
|
+
type KtConfirmResult = 'confirm' | 'reject' | 'cancel';
|
|
441
|
+
/**
|
|
442
|
+
* Composant interne de confirmation/décision générique.
|
|
443
|
+
* Supporte le mode binaire (Oui/Non) et le mode ternaire (Oui/Non/Annuler).
|
|
444
|
+
* Gère l'empilement vertical des boutons et les messages HTML multi-lignes.
|
|
445
|
+
*/
|
|
446
|
+
declare class KtConfirmDialog {
|
|
447
|
+
protected readonly data: KtDecideConfig;
|
|
448
|
+
private readonly ref;
|
|
449
|
+
protected isMessageArray(): boolean;
|
|
450
|
+
protected messageArray(): string[];
|
|
451
|
+
protected messageString(): string;
|
|
452
|
+
protected confirm(): void;
|
|
453
|
+
protected reject(): void;
|
|
454
|
+
protected cancel(): void;
|
|
455
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<KtConfirmDialog, never>;
|
|
456
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<KtConfirmDialog, "kt-confirm-dialog", never, {}, {}, never, never, true, never>;
|
|
457
|
+
}
|
|
458
|
+
/** Ouvreur co-localisé officiel pour la confirmation/décision. Utilise la présentation responsive par défaut. */
|
|
459
|
+
declare const injectConfirmDialog: () => (data: KtDecideConfig, config?: _ktortu_aaa_dialog.KtDialogOpenerConfig<KtDecideConfig, KtConfirmResult, KtConfirmDialog> | undefined) => DialogRef<KtConfirmResult, KtConfirmDialog>;
|
|
460
|
+
/**
|
|
461
|
+
* Service d'aide global pour l'ouverture simplifiée de boîtes de dialogue d'alerte et de confirmation.
|
|
462
|
+
* S'appuie sur les ouvreurs de dialogues officiels co-localisés.
|
|
463
|
+
* Propose une présentation adaptative (centrée sur grand écran, bottom-sheet sur mobile).
|
|
464
|
+
*/
|
|
465
|
+
declare class KtQuickDialog {
|
|
466
|
+
private readonly openAlert;
|
|
467
|
+
private readonly openConfirm;
|
|
468
|
+
/**
|
|
469
|
+
* Ouvre une boîte de dialogue d'alerte simple.
|
|
470
|
+
*
|
|
471
|
+
* @param title Titre de l'alerte.
|
|
472
|
+
* @param message Message d'explication (string simple ou tableau de strings pour du multi-lignes HTML).
|
|
473
|
+
* @param closeLabel Libellé du bouton de fermeture.
|
|
474
|
+
* @returns La référence DialogRef de la modale ouverte.
|
|
475
|
+
*/
|
|
476
|
+
alert(title: string, message: string | string[], closeLabel?: string): DialogRef<void, KtAlertDialog>;
|
|
477
|
+
/**
|
|
478
|
+
* Ouvre une boîte de dialogue de confirmation binaire (Oui/Non).
|
|
479
|
+
*
|
|
480
|
+
* @param config Options de configuration (titre, message, libellés de boutons, couleur).
|
|
481
|
+
* @returns Un Observable émettant true si l'utilisateur valide (Oui),
|
|
482
|
+
* false s'il rejette (Non), et undefined si la boîte est fermée en cliquant en dehors ou via Échap.
|
|
483
|
+
*/
|
|
484
|
+
confirm(config: KtConfirmConfig): Observable<boolean | undefined>;
|
|
485
|
+
/**
|
|
486
|
+
* Ouvre une boîte de dialogue de décision ternaire (Oui/Non/Annuler).
|
|
487
|
+
*
|
|
488
|
+
* @param config Options de configuration (titre, message, libellés de boutons dont cancelLabel obligatoire).
|
|
489
|
+
* @returns Un Observable émettant 'confirm', 'reject', 'cancel' ou undefined si fermeture externe.
|
|
490
|
+
*/
|
|
491
|
+
decide(config: KtDecideConfig): Observable<KtConfirmResult | undefined>;
|
|
492
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<KtQuickDialog, never>;
|
|
493
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<KtQuickDialog>;
|
|
494
|
+
}
|
|
495
|
+
|
|
377
496
|
/**
|
|
378
497
|
* Import ergonomique de toute la famille dialog en une fois :
|
|
379
498
|
* `imports: [KtDialogImports]` au lieu d'énumérer chaque directive structurelle.
|
|
380
499
|
*/
|
|
381
500
|
declare const KtDialogImports: readonly [typeof KtDialogHeader, typeof KtDialogTitle, typeof KtDialogDescription, typeof KtDialogContent, typeof KtDialogActions, typeof KtDialogClose, typeof KtDialogFocusInitial, typeof KtDialogSheetHandle];
|
|
382
501
|
|
|
383
|
-
export { KT_DIALOG_AAA_DEFAULTS, KtDialogActions, KtDialogClose, KtDialogContainer, KtDialogContent, KtDialogDescription, KtDialogFocusInitial, KtDialogHeader, KtDialogImports, KtDialogSheetHandle, KtDialogTitle, defineKtDialog,
|
|
384
|
-
export type { KtDialogContract, KtDialogOpenerConfig, KtDialogPresentation };
|
|
502
|
+
export { KT_DIALOG_AAA_DEFAULTS, KtAlertDialog, KtConfirmDialog, KtDialogActions, KtDialogClose, KtDialogContainer, KtDialogContent, KtDialogDescription, KtDialogFocusInitial, KtDialogHeader, KtDialogImports, KtDialogSheetHandle, KtDialogTitle, KtQuickDialog, defineKtDialog, injectAlertDialog, injectConfirmDialog, injectKtDialogOpener, provideKtDialogDefaults, resolveKtDialogPanelClass };
|
|
503
|
+
export type { KtAlertData, KtConfirmConfig, KtConfirmResult, KtDecideConfig, KtDialogColor, KtDialogContract, KtDialogOpenerConfig, KtDialogPresentation };
|