@ktortu/aaa 0.9.5 → 0.9.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -1
- package/button/button-tokens.css +3 -1
- package/button/button.css +3 -3
- package/card/card-tokens.css +2 -1
- package/cdk/styles/foundation.css +19 -10
- package/dialog/dialog.css +8 -4
- package/fesm2022/ktortu-aaa-dialog.mjs +16 -16
- package/fesm2022/ktortu-aaa-dialog.mjs.map +1 -1
- package/fesm2022/ktortu-aaa-forms.mjs +71 -37
- package/fesm2022/ktortu-aaa-forms.mjs.map +1 -1
- package/fesm2022/ktortu-aaa-layout.mjs +286 -0
- package/fesm2022/ktortu-aaa-layout.mjs.map +1 -0
- package/fesm2022/ktortu-aaa.mjs +1 -0
- package/fesm2022/ktortu-aaa.mjs.map +1 -1
- package/forms/chips/chip-listbox.css +15 -0
- package/forms/field/field.css +3 -1
- package/forms/styles/select-panel.css +3 -3
- package/package.json +5 -1
- package/styles/layout.css +140 -0
- package/styles/styles.css +1 -0
- package/themes/theme-ant.css +21 -16
- package/themes/theme-architecte.css +28 -28
- package/themes/theme-aurora.css +23 -23
- package/themes/theme-bootstrap.css +19 -19
- package/themes/theme-carbon.css +18 -18
- package/themes/theme-catppuccin.css +27 -27
- package/themes/theme-cyberpunk.css +28 -28
- package/themes/theme-fluent.css +32 -19
- package/themes/theme-material-you.css +78 -27
- package/themes/theme-material.css +28 -19
- package/themes/theme-primer.css +24 -18
- package/themes/theme-vegetal.css +21 -21
- package/tooltip/tooltip.css +1 -0
- package/types/ktortu-aaa-dialog.d.ts +7 -7
- package/types/ktortu-aaa-forms.d.ts +24 -4
- package/types/ktortu-aaa-layout.d.ts +117 -0
- package/types/ktortu-aaa.d.ts +1 -0
|
@@ -18,15 +18,33 @@
|
|
|
18
18
|
--myou-seed: #0b6e63; /* teal — essayez #7c4dff, #b3261e, #386a20… */
|
|
19
19
|
|
|
20
20
|
/* ============ Socle (tons M3 figés, teinte du seed) ============ */
|
|
21
|
-
--kt-surface:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
--kt-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
--kt-
|
|
21
|
+
--kt-surface: light-dark(
|
|
22
|
+
oklch(from var(--myou-seed) 0.985 0.008 h),
|
|
23
|
+
oklch(from var(--myou-seed) 0.1 0.008 h)
|
|
24
|
+
); /* tone ~98, teinté */
|
|
25
|
+
--kt-on-surface: light-dark(
|
|
26
|
+
oklch(from var(--myou-seed) 0.22 0.02 h),
|
|
27
|
+
oklch(from var(--myou-seed) 0.9 0.02 h)
|
|
28
|
+
); /* tone ~10 */
|
|
29
|
+
--kt-muted: light-dark(
|
|
30
|
+
oklch(from var(--myou-seed) 0.42 0.03 h),
|
|
31
|
+
oklch(from var(--myou-seed) 0.7 0.03 h)
|
|
32
|
+
); /* neutral-variant ~30 */
|
|
33
|
+
--kt-outline: light-dark(
|
|
34
|
+
oklch(from var(--myou-seed) 0.55 0.03 h),
|
|
35
|
+
oklch(from var(--myou-seed) 0.45 0.03 h)
|
|
36
|
+
); /* tone ~50 (3:1 non-texte) */
|
|
37
|
+
--kt-outline-strong: light-dark(oklch(from var(--myou-seed) 0.45 0.04 h), oklch(from var(--myou-seed) 0.65 0.04 h));
|
|
38
|
+
--kt-primary: light-dark(
|
|
39
|
+
oklch(from var(--myou-seed) 0.46 0.09 h),
|
|
40
|
+
oklch(from var(--myou-seed) 0.8 0.09 h)
|
|
41
|
+
); /* tone ~40 : blanc ≥ 6:1 */
|
|
42
|
+
--kt-danger: light-dark(#b3261e, #f2b8b5); /* erreur M3 statique (non dérivée — fidèle à You) */
|
|
43
|
+
--kt-neutral: light-dark(
|
|
44
|
+
oklch(from var(--myou-seed) 0.4 0.02 h),
|
|
45
|
+
oklch(from var(--myou-seed) 0.8 0.02 h)
|
|
46
|
+
); /* neutre teinté, blanc ≥ 7:1 */
|
|
47
|
+
--kt-focus-ring-color: light-dark(oklch(from var(--myou-seed) 0.46 0.09 h), oklch(from var(--myou-seed) 0.8 0.09 h));
|
|
30
48
|
--kt-font: 'Roboto', system-ui, sans-serif;
|
|
31
49
|
|
|
32
50
|
/* ============ Géométrie : rondeurs expressives ============ */
|
|
@@ -35,40 +53,73 @@
|
|
|
35
53
|
--kt-sheet-radius: 28px;
|
|
36
54
|
|
|
37
55
|
/* ============ Champs : surface-container teintée (la signature You) ============ */
|
|
38
|
-
--field-bg:
|
|
39
|
-
|
|
56
|
+
--field-bg: light-dark(
|
|
57
|
+
oklch(from var(--myou-seed) 0.94 0.02 h),
|
|
58
|
+
oklch(from var(--myou-seed) 0.15 0.02 h)
|
|
59
|
+
); /* tone ~94 */
|
|
60
|
+
--field-focus-ring: light-dark(
|
|
61
|
+
color-mix(in srgb, oklch(from var(--myou-seed) 0.46 0.09 h) 55%, transparent),
|
|
62
|
+
color-mix(in srgb, oklch(from var(--myou-seed) 0.8 0.09 h) 55%, transparent)
|
|
63
|
+
);
|
|
40
64
|
--field-transition: border-color 150ms ease;
|
|
41
65
|
|
|
42
66
|
/* ============ Boutons : containers/fg dérivés par la lib depuis les 3 bases ============ */
|
|
43
67
|
--btn-tonal-weight: 18%; /* containers un peu plus présents que le défaut */
|
|
44
68
|
/* on-containers teintés par le seed (tone ~25 sur container ~90 : ≥ 8:1 par construction) —
|
|
45
69
|
les défauts statiques de la lib resteraient AA mais d'une teinte étrangère au seed. */
|
|
46
|
-
--btn-on-primary-container:
|
|
47
|
-
|
|
70
|
+
--btn-on-primary-container: light-dark(
|
|
71
|
+
oklch(from var(--myou-seed) 0.25 0.06 h),
|
|
72
|
+
oklch(from var(--myou-seed) 0.9 0.06 h)
|
|
73
|
+
);
|
|
74
|
+
--btn-on-neutral-container: light-dark(
|
|
75
|
+
oklch(from var(--myou-seed) 0.25 0.02 h),
|
|
76
|
+
oklch(from var(--myou-seed) 0.9 0.02 h)
|
|
77
|
+
);
|
|
48
78
|
|
|
49
79
|
/* ============ Caret + sélection ============ */
|
|
50
|
-
--field-caret-color: oklch(from var(--myou-seed) 0.46 0.09 h);
|
|
51
|
-
--kt-selection-bg:
|
|
52
|
-
|
|
80
|
+
--field-caret-color: light-dark(oklch(from var(--myou-seed) 0.46 0.09 h), oklch(from var(--myou-seed) 0.8 0.09 h));
|
|
81
|
+
--kt-selection-bg: light-dark(
|
|
82
|
+
oklch(from var(--myou-seed) 0.88 0.05 h),
|
|
83
|
+
oklch(from var(--myou-seed) 0.3 0.05 h)
|
|
84
|
+
); /* container ~tone 90 */
|
|
85
|
+
--kt-selection-fg: light-dark(oklch(from var(--myou-seed) 0.25 0.05 h), oklch(from var(--myou-seed) 0.9 0.05 h));
|
|
53
86
|
|
|
54
87
|
/* ============ Select / tooltip ============ */
|
|
55
|
-
--select-popup-bg: oklch(from var(--myou-seed) 0.97 0.01 h);
|
|
56
|
-
--select-popup-shadow:
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
--
|
|
88
|
+
--select-popup-bg: light-dark(oklch(from var(--myou-seed) 0.97 0.01 h), oklch(from var(--myou-seed) 0.12 0.01 h));
|
|
89
|
+
--select-popup-shadow: light-dark(
|
|
90
|
+
0 4px 16px oklch(from var(--myou-seed) 0.3 0.04 h / 25%),
|
|
91
|
+
0 0 0 1px rgba(255, 255, 255, 0.1)
|
|
92
|
+
);
|
|
93
|
+
--kt-sheet-scrim: light-dark(
|
|
94
|
+
oklch(from var(--myou-seed) 0.2 0.03 h / 50%),
|
|
95
|
+
oklch(from var(--myou-seed) 0.1 0.03 h / 60%)
|
|
96
|
+
);
|
|
97
|
+
--kt-sheet-shadow: light-dark(
|
|
98
|
+
0 -4px 16px oklch(from var(--myou-seed) 0.3 0.04 h / 22%),
|
|
99
|
+
0 -1px 0 rgba(255, 255, 255, 0.1)
|
|
100
|
+
); /* élévation M3 teintée */
|
|
101
|
+
--tooltip-bg: light-dark(oklch(from var(--myou-seed) 0.27 0.03 h), oklch(from var(--myou-seed) 0.9 0.03 h));
|
|
102
|
+
--tooltip-fg: light-dark(oklch(from var(--myou-seed) 0.96 0.01 h), oklch(from var(--myou-seed) 0.1 0.01 h));
|
|
61
103
|
|
|
62
104
|
/* ============ Dialog (M3 expressive : rayon hérité de la feuille, sans bord) ============ */
|
|
63
|
-
--dialog-bg:
|
|
105
|
+
--dialog-bg: light-dark(
|
|
106
|
+
oklch(from var(--myou-seed) 0.97 0.01 h),
|
|
107
|
+
oklch(from var(--myou-seed) 0.15 0.01 h)
|
|
108
|
+
); /* surface-container teinté */
|
|
64
109
|
--dialog-radius: 28px;
|
|
65
110
|
--dialog-border-width: 0;
|
|
66
111
|
|
|
67
112
|
/* ============ Card (M3 expressive : surfaces teintées du seed, rayon 16) ============ */
|
|
68
113
|
--card-radius: 16px;
|
|
69
|
-
--card-bg: oklch(from var(--myou-seed) 0.97 0.01 h);
|
|
70
|
-
--card-filled-bg: oklch(from var(--myou-seed) 0.94 0.02 h);
|
|
71
|
-
--card-shadow:
|
|
72
|
-
|
|
114
|
+
--card-bg: light-dark(oklch(from var(--myou-seed) 0.97 0.01 h), oklch(from var(--myou-seed) 0.12 0.01 h));
|
|
115
|
+
--card-filled-bg: light-dark(oklch(from var(--myou-seed) 0.94 0.02 h), oklch(from var(--myou-seed) 0.18 0.02 h));
|
|
116
|
+
--card-shadow: light-dark(
|
|
117
|
+
0 1px 3px oklch(from var(--myou-seed) 0.3 0.04 h / 20%),
|
|
118
|
+
0 0 0 1px rgba(255, 255, 255, 0.1)
|
|
119
|
+
);
|
|
120
|
+
--card-shadow-hover: light-dark(
|
|
121
|
+
0 2px 8px oklch(from var(--myou-seed) 0.3 0.04 h / 26%),
|
|
122
|
+
0 0 0 1px rgba(255, 255, 255, 0.2)
|
|
123
|
+
);
|
|
73
124
|
--card-transition: box-shadow 150ms ease;
|
|
74
125
|
}
|
|
@@ -3,14 +3,19 @@
|
|
|
3
3
|
(bascule --btn-radius prévue par le contrat), surfaces teintées M3. */
|
|
4
4
|
[data-theme='material'] {
|
|
5
5
|
/* ============ Socle (rôles M3 baseline) ============ */
|
|
6
|
-
--kt-primary: #
|
|
7
|
-
--kt-neutral: #625b71; /* secondary — blanc ~6.9:1 */
|
|
8
|
-
--kt-danger: #
|
|
9
|
-
--kt-surface: #fef7ff;
|
|
10
|
-
--kt-
|
|
11
|
-
--kt-
|
|
12
|
-
--kt-
|
|
13
|
-
--kt-
|
|
6
|
+
--kt-primary: light-dark(#463673, #d7c4fc); /* primary — on-primary blanc ~5.6:1 */
|
|
7
|
+
--kt-neutral: light-dark(#625b71, #ccc2dc); /* secondary — blanc ~6.9:1 */
|
|
8
|
+
--kt-danger: light-dark(#8c1d17, #f7c8c6); /* error (= défaut lib, explicite) */
|
|
9
|
+
--kt-surface: light-dark(#fef7ff, #141218);
|
|
10
|
+
--kt-surface-container-lowest: light-dark(#ffffff, #0f0d13);
|
|
11
|
+
--kt-surface-container-low: light-dark(#f7f2fa, #1d1b20);
|
|
12
|
+
--kt-surface-container: light-dark(#f3edf7, #211f26);
|
|
13
|
+
--kt-surface-container-high: light-dark(#ece6f0, #2b2930);
|
|
14
|
+
--kt-surface-container-highest: light-dark(#e6e0e9, #36343b);
|
|
15
|
+
--kt-on-surface: light-dark(#1d1b20, #e6e0e9);
|
|
16
|
+
--kt-muted: light-dark(#49454f, #cac4d0); /* on-surface-variant, ~9:1 */
|
|
17
|
+
--kt-outline: light-dark(#79747e, #938f99);
|
|
18
|
+
--kt-outline-strong: light-dark(#49454f, #cac4d0);
|
|
14
19
|
--kt-font: 'Roboto', system-ui, sans-serif;
|
|
15
20
|
|
|
16
21
|
/* ============ Géométrie ============ */
|
|
@@ -21,28 +26,32 @@
|
|
|
21
26
|
/* ============ Boutons ============ */
|
|
22
27
|
--btn-font-weight: 500; /* label-large M3 (rétrofit lot 6) */
|
|
23
28
|
/* on-containers M3 sur les containers dérivés (≈ primary/secondary-container). */
|
|
24
|
-
--btn-on-primary-container: #21005d;
|
|
25
|
-
--btn-on-neutral-container: #1d192b;
|
|
29
|
+
--btn-on-primary-container: light-dark(#21005d, #eaddff);
|
|
30
|
+
--btn-on-neutral-container: light-dark(#1d192b, #e8def8);
|
|
26
31
|
|
|
27
32
|
/* ============ Champs ============ */
|
|
28
33
|
--field-transition: border-color 150ms ease; /* state transitions M3 (rétrofit lot 3) */
|
|
29
34
|
|
|
30
35
|
/* ============ Select / tooltip ============ */
|
|
31
|
-
--select-popup-bg: #f3edf7; /* surface-container */
|
|
32
|
-
--tooltip-bg: #322f35; /* inverse-surface */
|
|
33
|
-
--tooltip-fg: #f5eff7; /* inverse-on-surface */
|
|
36
|
+
--select-popup-bg: light-dark(#f3edf7, #211f26); /* surface-container */
|
|
37
|
+
--tooltip-bg: light-dark(#322f35, #e6e0e9); /* inverse-surface */
|
|
38
|
+
--tooltip-fg: light-dark(#f5eff7, #322f35); /* inverse-on-surface */
|
|
34
39
|
|
|
35
40
|
/* ============ Dialog (M3 : grand rayon, élévation, sans bord) ============ */
|
|
36
|
-
--dialog-bg: #f3edf7; /* surface-container-high */
|
|
41
|
+
--dialog-bg: light-dark(#f3edf7, #2b2930); /* surface-container-high */
|
|
37
42
|
--dialog-radius: 28px;
|
|
38
43
|
--dialog-border-width: 0;
|
|
39
|
-
--dialog-shadow: 0 8px 24px rgb(29 27 32 / 22%);
|
|
44
|
+
--dialog-shadow: light-dark(0 8px 24px rgb(29 27 32 / 22%), 0 0 0 1px rgba(255, 255, 255, 0.1));
|
|
40
45
|
|
|
41
46
|
/* ============ Card (M3 : surface-container, rayon 12, élévation douce) ============ */
|
|
42
47
|
--card-radius: 12px;
|
|
43
|
-
--card-bg: #f3edf7; /* surface-container */
|
|
44
|
-
--card-filled-bg: #ece6f0; /* surface-container-high */
|
|
45
|
-
--card-shadow:
|
|
46
|
-
|
|
48
|
+
--card-bg: light-dark(#f3edf7, #211f26); /* surface-container */
|
|
49
|
+
--card-filled-bg: light-dark(#ece6f0, #2b2930); /* surface-container-high */
|
|
50
|
+
--card-shadow: light-dark(
|
|
51
|
+
0 1px 3px rgb(29 27 32 / 16%),
|
|
52
|
+
0 1px 2px rgb(29 27 32 / 12%),
|
|
53
|
+
0 0 0 1px rgba(255, 255, 255, 0.1)
|
|
54
|
+
);
|
|
55
|
+
--card-shadow-hover: light-dark(0 2px 6px rgb(29 27 32 / 22%), 0 0 0 1px rgba(255, 255, 255, 0.2));
|
|
47
56
|
--card-transition: box-shadow 150ms ease;
|
|
48
57
|
}
|
package/themes/theme-primer.css
CHANGED
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
les 32px de Primer — exigence d'accessibilité du projet. */
|
|
6
6
|
[data-theme='primer'] {
|
|
7
7
|
/* ============ Socle ============ */
|
|
8
|
-
--kt-primary: #
|
|
9
|
-
--kt-danger: #
|
|
10
|
-
--kt-neutral: #57606a; /* fg.muted historique — blanc ~6.3:1 */
|
|
11
|
-
--kt-surface: #ffffff;
|
|
12
|
-
--kt-on-surface: #1f2328; /* fg.default */
|
|
13
|
-
--kt-muted: #59636e; /* fg.muted, ~5.7:1 */
|
|
14
|
-
--kt-outline: #d0d7de; /* border.default */
|
|
15
|
-
--kt-outline-strong: #818b98;
|
|
16
|
-
--kt-focus-ring-color: #0969da;
|
|
8
|
+
--kt-primary: light-dark(#185929, #3fb558); /* accent.fg — blanc ~5.2:1 */
|
|
9
|
+
--kt-danger: light-dark(#8f141d, #ff5754); /* danger.fg */
|
|
10
|
+
--kt-neutral: light-dark(#57606a, #8b949e); /* fg.muted historique — blanc ~6.3:1 */
|
|
11
|
+
--kt-surface: light-dark(#ffffff, #0d1117);
|
|
12
|
+
--kt-on-surface: light-dark(#1f2328, #e6edf3); /* fg.default */
|
|
13
|
+
--kt-muted: light-dark(#59636e, #7d8590); /* fg.muted, ~5.7:1 */
|
|
14
|
+
--kt-outline: light-dark(#d0d7de, #30363d); /* border.default */
|
|
15
|
+
--kt-outline-strong: light-dark(#818b98, #8b949e);
|
|
16
|
+
--kt-focus-ring-color: light-dark(#0969da, #58a6ff);
|
|
17
17
|
/* Stack système GitHub authentique (le produit n'embarque pas de webfont). */
|
|
18
18
|
--kt-font: -apple-system, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
|
|
19
19
|
|
|
@@ -26,21 +26,27 @@
|
|
|
26
26
|
--btn-font-weight: 500; /* les boutons GitHub sont en medium (rétrofit lot 6) */
|
|
27
27
|
|
|
28
28
|
/* ============ Ombres ============ */
|
|
29
|
-
--field-shadow:
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
--field-shadow: light-dark(
|
|
30
|
+
inset 0 1px 0 rgb(31 35 40 / 4%),
|
|
31
|
+
inset 0 1px 0 rgb(255 255 255 / 4%)
|
|
32
|
+
); /* inner shadow subtile des inputs Primer */
|
|
33
|
+
--btn-shadow: light-dark(
|
|
34
|
+
0 1px 0 rgb(31 35 40 / 4%),
|
|
35
|
+
0 1px 0 rgb(255 255 255 / 4%)
|
|
36
|
+
); /* hérite vers hover/focus via le fallback chaîné */
|
|
37
|
+
--select-popup-shadow: light-dark(0 8px 24px rgb(140 149 159 / 20%), 0 0 0 1px #30363d); /* shadow.medium */
|
|
32
38
|
|
|
33
39
|
/* ============ Tooltip ============ */
|
|
34
|
-
--tooltip-bg: #25292e;
|
|
35
|
-
--tooltip-fg: #ffffff;
|
|
40
|
+
--tooltip-bg: light-dark(#25292e, #e6edf3);
|
|
41
|
+
--tooltip-fg: light-dark(#ffffff, #0d1117);
|
|
36
42
|
|
|
37
43
|
/* ============ Dialog (GitHub : rayon 12, bord net) ============ */
|
|
38
44
|
--dialog-radius: 12px;
|
|
39
|
-
--dialog-border-color: #d0d7de;
|
|
45
|
+
--dialog-border-color: light-dark(#d0d7de, #30363d);
|
|
40
46
|
|
|
41
47
|
/* ============ Card (GitHub Box : rayon 6, filet + ombre discrète) ============ */
|
|
42
48
|
--card-radius: 6px;
|
|
43
|
-
--card-border-color: #d0d7de;
|
|
44
|
-
--card-filled-bg: #f6f8fa; /* canvas.subtle */
|
|
45
|
-
--card-shadow: 0 1px 0 rgb(31 35 40 / 4%), 0 1px 3px rgb(31 35 40 / 6%);
|
|
49
|
+
--card-border-color: light-dark(#d0d7de, #30363d);
|
|
50
|
+
--card-filled-bg: light-dark(#f6f8fa, #161b22); /* canvas.subtle */
|
|
51
|
+
--card-shadow: light-dark(0 1px 0 rgb(31 35 40 / 4%), 0 1px 3px rgb(31 35 40 / 6%), 0 0 0 1px #30363d);
|
|
46
52
|
}
|
package/themes/theme-vegetal.css
CHANGED
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
ombres douces vert-de-gris. Uniquement des redéclarations de tokens. */
|
|
6
6
|
[data-theme='vegetal'] {
|
|
7
7
|
/* ============ Socle ============ */
|
|
8
|
-
--kt-primary: #36743f; /* vert feuille — blanc 5.6:1, texte sur crème 5.1:1 */
|
|
9
|
-
--kt-danger: #b04a2e; /* terracotta — blanc 5.4:1 */
|
|
10
|
-
--kt-neutral: #6b5d4a; /* brun écorce — blanc 6.4:1 */
|
|
11
|
-
--kt-surface: #f5f3e8; /* crème lin */
|
|
12
|
-
--kt-on-surface: #2a3326; /* vert mousse très foncé, ~12:1 */
|
|
13
|
-
--kt-muted: #5b6a51; /* vert-de-gris, 5.2:1 */
|
|
14
|
-
--kt-outline: #7d8a69; /* tige sèche (3.2:1 non-texte) */
|
|
15
|
-
--kt-outline-strong: #5b6a51;
|
|
16
|
-
--kt-focus-ring-color: #36743f;
|
|
8
|
+
--kt-primary: light-dark(#36743f, #84c48f); /* vert feuille — blanc 5.6:1, texte sur crème 5.1:1 */
|
|
9
|
+
--kt-danger: light-dark(#b04a2e, #e8866d); /* terracotta — blanc 5.4:1 */
|
|
10
|
+
--kt-neutral: light-dark(#6b5d4a, #b0a390); /* brun écorce — blanc 6.4:1 */
|
|
11
|
+
--kt-surface: light-dark(#f5f3e8, #182116); /* crème lin */
|
|
12
|
+
--kt-on-surface: light-dark(#2a3326, #e7e3d2); /* vert mousse très foncé, ~12:1 */
|
|
13
|
+
--kt-muted: light-dark(#5b6a51, #9aa88f); /* vert-de-gris, 5.2:1 */
|
|
14
|
+
--kt-outline: light-dark(#7d8a69, #3f4d38); /* tige sèche (3.2:1 non-texte) */
|
|
15
|
+
--kt-outline-strong: light-dark(#5b6a51, #7d8a69);
|
|
16
|
+
--kt-focus-ring-color: light-dark(#36743f, #84c48f);
|
|
17
17
|
--kt-font: 'Quicksand', ui-rounded, 'Trebuchet MS', sans-serif; /* arrondie, organique */
|
|
18
18
|
|
|
19
19
|
/* Gouttière organique : thumb tige sèche (outline) sur une rainure crème un ton sous le lin. */
|
|
@@ -27,21 +27,21 @@
|
|
|
27
27
|
--kt-sheet-radius: 20px;
|
|
28
28
|
|
|
29
29
|
/* ============ Champs ============ */
|
|
30
|
-
--field-bg: #fdfcf5; /* papier clair, en relief sur le lin */
|
|
30
|
+
--field-bg: light-dark(#fdfcf5, #222b1e); /* papier clair, en relief sur le lin */
|
|
31
31
|
/* Forme FEUILLE : radius par coin (haut-gauche/bas-droite ronds, les deux autres pincés).
|
|
32
32
|
Possible depuis toujours — les tokens radius acceptent 4 valeurs (audit lot 6). */
|
|
33
33
|
--field-radius: 16px 4px 16px 4px;
|
|
34
34
|
--field-shadow-focus: 0 2px 10px rgb(54 116 63 / 22%); /* halo de sève discret */
|
|
35
35
|
--field-transition: border-color 150ms ease, box-shadow 150ms ease; /* sève qui monte en douceur */
|
|
36
|
-
--field-caret-color: #36743f;
|
|
37
|
-
--kt-selection-bg: #36743f;
|
|
38
|
-
--kt-selection-fg: #ffffff;
|
|
36
|
+
--field-caret-color: light-dark(#36743f, #84c48f);
|
|
37
|
+
--kt-selection-bg: light-dark(#36743f, #36743f);
|
|
38
|
+
--kt-selection-fg: light-dark(#ffffff, #ffffff);
|
|
39
39
|
|
|
40
40
|
/* ============ Boutons ============ */
|
|
41
41
|
--btn-tonal-weight: 18%; /* containers « jeune pousse » un peu présents */
|
|
42
|
-
--btn-on-primary-container: #1f4a28;
|
|
43
|
-
--btn-on-danger-container: #6e2a18;
|
|
44
|
-
--btn-on-neutral-container: #3a3328;
|
|
42
|
+
--btn-on-primary-container: light-dark(#1f4a28, #b6eac1);
|
|
43
|
+
--btn-on-danger-container: light-dark(#6e2a18, #fcd0c5);
|
|
44
|
+
--btn-on-neutral-container: light-dark(#3a3328, #e0d5c3);
|
|
45
45
|
--btn-shadow: 0 1px 3px rgb(42 51 38 / 14%); /* légère assise, comme posé sur la terre */
|
|
46
46
|
--btn-shadow-hover: 0 4px 14px rgb(54 116 63 / 22%); /* halo de sève au survol */
|
|
47
47
|
--btn-transition: transform 150ms ease, box-shadow 150ms ease;
|
|
@@ -49,12 +49,12 @@
|
|
|
49
49
|
--btn-transform-active: scale(0.98);
|
|
50
50
|
|
|
51
51
|
/* ============ Select / tooltip ============ */
|
|
52
|
-
--select-popup-bg: #fdfcf5;
|
|
52
|
+
--select-popup-bg: light-dark(#fdfcf5, #222b1e);
|
|
53
53
|
--select-popup-shadow: 0 8px 24px rgb(42 51 38 / 18%);
|
|
54
54
|
--kt-sheet-scrim: rgb(42 51 38 / 40%);
|
|
55
55
|
--kt-sheet-shadow: 0 -8px 24px rgb(42 51 38 / 18%); /* assise douce vert-de-gris */
|
|
56
|
-
--tooltip-bg: #33402c; /* sous-bois */
|
|
57
|
-
--tooltip-fg: #eef2e4;
|
|
56
|
+
--tooltip-bg: light-dark(#33402c, #e7e3d2); /* sous-bois */
|
|
57
|
+
--tooltip-fg: light-dark(#eef2e4, #182116);
|
|
58
58
|
|
|
59
59
|
/* ============ Dialog (organique : feuille à l'échelle du dialog, ombre douce héritée) ============ */
|
|
60
60
|
--dialog-radius: 24px 6px 24px 6px;
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
|
|
63
63
|
/* ============ Card : FEUILLE organique (coins asymétriques, assise teintée sève, se déploie) ============ */
|
|
64
64
|
--card-radius: 20px 6px 20px 6px;
|
|
65
|
-
--card-bg: #fdfcf5;
|
|
66
|
-
--card-filled-bg: #eef0e2;
|
|
65
|
+
--card-bg: light-dark(#fdfcf5, #222b1e);
|
|
66
|
+
--card-filled-bg: light-dark(#eef0e2, #2c3826);
|
|
67
67
|
--card-shadow: 0 4px 16px rgb(54 116 63 / 14%), 0 1px 3px rgb(42 51 38 / 10%); /* assise + sève */
|
|
68
68
|
--card-shadow-hover: 0 10px 26px rgb(54 116 63 / 20%), 0 2px 6px rgb(42 51 38 / 12%);
|
|
69
69
|
--card-transition: transform 150ms ease, box-shadow 150ms ease;
|
package/tooltip/tooltip.css
CHANGED
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
border-radius: var(--tooltip-radius);
|
|
24
24
|
background: var(--tooltip-bg);
|
|
25
25
|
color: var(--tooltip-fg);
|
|
26
|
+
backdrop-filter: var(--kt-backdrop-filter, none);
|
|
26
27
|
font-size: 0.85rem;
|
|
27
28
|
line-height: 1.35;
|
|
28
29
|
white-space: pre-line; /* Interprète les \n et les sauts de ligne dans les chaînes de texte */
|
|
@@ -1,10 +1,10 @@
|
|
|
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 { ComponentType } from '@angular/cdk/portal';
|
|
4
5
|
import * as _ktortu_aaa_dialog from '@ktortu/aaa/dialog';
|
|
5
6
|
import { Observable } from 'rxjs';
|
|
6
7
|
import { KtButtonColor } from '@ktortu/aaa/button';
|
|
7
|
-
import { ComponentType } from '@angular/cdk/portal';
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* À poser sur le titre VISIBLE (idéalement un `<h2>`) du contenu d'un CDK Dialog.
|
|
@@ -370,6 +370,12 @@ declare class KtDialogContainer extends CdkDialogContainer {
|
|
|
370
370
|
static ɵcmp: i0.ɵɵComponentDeclaration<KtDialogContainer, "kt-dialog-container", never, {}, {}, never, never, true, never>;
|
|
371
371
|
}
|
|
372
372
|
|
|
373
|
+
/**
|
|
374
|
+
* Import ergonomique de toute la famille dialog en une fois :
|
|
375
|
+
* `imports: [KtDialogImports]` au lieu d'énumérer chaque directive structurelle.
|
|
376
|
+
*/
|
|
377
|
+
declare const KtDialogImports: readonly [typeof KtDialogHeader, typeof KtDialogTitle, typeof KtDialogDescription, typeof KtDialogContent, typeof KtDialogActions, typeof KtDialogClose, typeof KtDialogFocusInitial, typeof KtDialogSheetHandle];
|
|
378
|
+
|
|
373
379
|
/** Option de variante visuelle pour le dialogue d'alerte. */
|
|
374
380
|
type KtAlertDialogVariant = 'neutral' | 'info' | 'success' | 'warning' | 'error';
|
|
375
381
|
/**
|
|
@@ -515,11 +521,5 @@ declare class KtQuickDialog {
|
|
|
515
521
|
static ɵprov: i0.ɵɵInjectableDeclaration<KtQuickDialog>;
|
|
516
522
|
}
|
|
517
523
|
|
|
518
|
-
/**
|
|
519
|
-
* Import ergonomique de toute la famille dialog en une fois :
|
|
520
|
-
* `imports: [KtDialogImports]` au lieu d'énumérer chaque directive structurelle.
|
|
521
|
-
*/
|
|
522
|
-
declare const KtDialogImports: readonly [typeof KtDialogHeader, typeof KtDialogTitle, typeof KtDialogDescription, typeof KtDialogContent, typeof KtDialogActions, typeof KtDialogClose, typeof KtDialogFocusInitial, typeof KtDialogSheetHandle];
|
|
523
|
-
|
|
524
524
|
export { KT_DIALOG_AAA_DEFAULTS, KtAlertDialog, KtConfirmDialog, KtDialogActions, KtDialogClose, KtDialogContainer, KtDialogContent, KtDialogDescription, KtDialogFocusInitial, KtDialogHeader, KtDialogImports, KtDialogSheetHandle, KtDialogTitle, KtQuickDialog, defineKtDialog, injectAlertDialog, injectConfirmDialog, injectKtDialogOpener, provideKtDialogDefaults, resolveKtDialogPanelClass };
|
|
525
525
|
export type { KtAlertData, KtAlertDialogVariant, KtAlertOptions, KtConfirmConfig, KtConfirmResult, KtDecideConfig, KtDialogColor, KtDialogContract, KtDialogOpenerConfig, KtDialogPresentation };
|
|
@@ -66,6 +66,10 @@ interface KtFieldConfig {
|
|
|
66
66
|
appearance: KtFieldAppearance;
|
|
67
67
|
/** Politique du label flottant en `outline` (`auto` | `always`). Défaut : `'auto'`. */
|
|
68
68
|
floatLabel: KtFloatLabel;
|
|
69
|
+
/** Masquer visuellement le label (tout en le gardant dans le DOM pour l'accessibilité). Défaut : `false`. */
|
|
70
|
+
hideLabel: boolean;
|
|
71
|
+
/** Masquer visuellement le bloc d'erreur (tout en le gardant dans le DOM pour l'accessibilité). Défaut : `false`. */
|
|
72
|
+
hideErrors: boolean;
|
|
69
73
|
}
|
|
70
74
|
declare const KT_FIELD_CONFIG: InjectionToken<Partial<KtFieldConfig>>;
|
|
71
75
|
/**
|
|
@@ -153,6 +157,10 @@ declare class KtField implements KtFieldParent {
|
|
|
153
157
|
readonly hideHintWhenInvalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
154
158
|
/** Afficher toutes les erreurs au lieu de la première seule. @default KT_FIELD_CONFIG.showAllErrors ?? false */
|
|
155
159
|
readonly showAllErrors: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
160
|
+
/** Masquer visuellement le label. @default KT_FIELD_CONFIG.hideLabel ?? false */
|
|
161
|
+
readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
162
|
+
/** Masquer visuellement le bloc d'erreur. @default KT_FIELD_CONFIG.hideErrors ?? false */
|
|
163
|
+
readonly hideErrors: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
156
164
|
/** Apparence du chrome : `fill` (label au-dessus) ou `outline` (bordure + label flottant, façon
|
|
157
165
|
Material). Non fournie ⇒ valeur du `KT_FIELD_CONFIG`, sinon `'fill'`. @default undefined */
|
|
158
166
|
readonly appearance: _angular_core.InputSignal<KtFieldAppearance | undefined>;
|
|
@@ -180,7 +188,7 @@ declare class KtField implements KtFieldParent {
|
|
|
180
188
|
readonly describedBy: _angular_core.Signal<string | null>;
|
|
181
189
|
protected onHelpClick(event: MouseEvent): void;
|
|
182
190
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtField, never>;
|
|
183
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtField, "kt-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLabel": { "alias": "helpLabel"; "required": false; "isSignal": true; }; "customDescribedBy": { "alias": "customDescribedBy"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "fieldId": { "alias": "fieldId"; "required": false; "isSignal": true; }; "hideHintWhenInvalid": { "alias": "hideHintWhenInvalid"; "required": false; "isSignal": true; }; "showAllErrors": { "alias": "showAllErrors"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; }, { "helpClick": "helpClick"; }, ["control"], ["[ktFieldHelp]", "*"], true, never>;
|
|
191
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtField, "kt-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLabel": { "alias": "helpLabel"; "required": false; "isSignal": true; }; "customDescribedBy": { "alias": "customDescribedBy"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "fieldId": { "alias": "fieldId"; "required": false; "isSignal": true; }; "hideHintWhenInvalid": { "alias": "hideHintWhenInvalid"; "required": false; "isSignal": true; }; "showAllErrors": { "alias": "showAllErrors"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "hideErrors": { "alias": "hideErrors"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; }, { "helpClick": "helpClick"; }, ["control"], ["[ktFieldHelp]", "*"], true, never>;
|
|
184
192
|
}
|
|
185
193
|
|
|
186
194
|
/** Marque le contrôle (natif ou custom) d'un champ pour que `Field` y câble l'a11y
|
|
@@ -328,6 +336,10 @@ declare abstract class KtBaseInputField<T> {
|
|
|
328
336
|
/** Politique du label flottant en outline (`auto` | `always`) ; non fournie ⇒ `KT_FIELD_CONFIG.floatLabel`
|
|
329
337
|
?? `'auto'`. En `always`, le label reste en haut même vide et le placeholder s'affiche. @default undefined */
|
|
330
338
|
readonly floatLabel: _angular_core.InputSignal<KtFloatLabel | undefined>;
|
|
339
|
+
/** Masquer visuellement le label. @default KT_FIELD_CONFIG.hideLabel ?? false */
|
|
340
|
+
readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
341
|
+
/** Masquer visuellement le bloc d'erreur. @default KT_FIELD_CONFIG.hideErrors ?? false */
|
|
342
|
+
readonly hideErrors: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
331
343
|
protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement | HTMLTextAreaElement> | undefined>;
|
|
332
344
|
private readonly matcher;
|
|
333
345
|
protected readonly showInvalid: _angular_core.Signal<boolean>;
|
|
@@ -362,7 +374,7 @@ declare abstract class KtBaseInputField<T> {
|
|
|
362
374
|
/** La valeur est-elle vide (affichage du bouton d'effacement) ? */
|
|
363
375
|
protected abstract isEmpty(value: T): boolean;
|
|
364
376
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtBaseInputField<any>, never>;
|
|
365
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KtBaseInputField<any>, never, never, { "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLabel": { "alias": "helpLabel"; "required": false; "isSignal": true; }; "customDescribedBy": { "alias": "customDescribedBy"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "errorMatcher": { "alias": "errorMatcher"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "helpClick": "helpClick"; }, never, never, true, never>;
|
|
377
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KtBaseInputField<any>, never, never, { "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLabel": { "alias": "helpLabel"; "required": false; "isSignal": true; }; "customDescribedBy": { "alias": "customDescribedBy"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "errorMatcher": { "alias": "errorMatcher"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "hideErrors": { "alias": "hideErrors"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "helpClick": "helpClick"; }, never, never, true, never>;
|
|
366
378
|
}
|
|
367
379
|
|
|
368
380
|
/** Suggestion d'un champ de saisie (rendu `<datalist>`) : soit la valeur seule, soit un couple
|
|
@@ -982,6 +994,10 @@ declare abstract class KtBaseSelect<T, V = T> {
|
|
|
982
994
|
/** Politique du label flottant en outline (`auto` | `always`) ; non fournie ⇒ `KT_FIELD_CONFIG.floatLabel`
|
|
983
995
|
?? `'auto'`. @default undefined */
|
|
984
996
|
readonly floatLabel: _angular_core.InputSignal<KtFloatLabel | undefined>;
|
|
997
|
+
/** Masquer visuellement le label. @default KT_FIELD_CONFIG.hideLabel ?? false */
|
|
998
|
+
readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
999
|
+
/** Masquer visuellement le bloc d'erreur. @default KT_FIELD_CONFIG.hideErrors ?? false */
|
|
1000
|
+
readonly hideErrors: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
985
1001
|
/** Affiche un champ de recherche en tête du popup (desktop) / de la sheet (téléphone).
|
|
986
1002
|
Pour les listes longues ; le texte tapé ne sert qu'à filtrer (réinitialisé à la fermeture). @default false */
|
|
987
1003
|
readonly filterable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -1086,7 +1102,7 @@ declare abstract class KtBaseSelect<T, V = T> {
|
|
|
1086
1102
|
protected onDragStart(event: PointerEvent): void;
|
|
1087
1103
|
private animateAndCloseSelect;
|
|
1088
1104
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtBaseSelect<any, any>, never>;
|
|
1089
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KtBaseSelect<any, any>, never, never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLabel": { "alias": "helpLabel"; "required": false; "isSignal": true; }; "customDescribedBy": { "alias": "customDescribedBy"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMatcher": { "alias": "errorMatcher"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "maxVisibleOptions": { "alias": "maxVisibleOptions"; "required": false; "isSignal": true; }; "truncatedResultsText": { "alias": "truncatedResultsText"; "required": false; "isSignal": true; }; "truncatedResultsAnnouncement": { "alias": "truncatedResultsAnnouncement"; "required": false; "isSignal": true; }; }, { "helpClick": "helpClick"; "touched": "touchedChange"; }, never, never, true, never>;
|
|
1105
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KtBaseSelect<any, any>, never, never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLabel": { "alias": "helpLabel"; "required": false; "isSignal": true; }; "customDescribedBy": { "alias": "customDescribedBy"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMatcher": { "alias": "errorMatcher"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "hideErrors": { "alias": "hideErrors"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "maxVisibleOptions": { "alias": "maxVisibleOptions"; "required": false; "isSignal": true; }; "truncatedResultsText": { "alias": "truncatedResultsText"; "required": false; "isSignal": true; }; "truncatedResultsAnnouncement": { "alias": "truncatedResultsAnnouncement"; "required": false; "isSignal": true; }; }, { "helpClick": "helpClick"; "touched": "touchedChange"; }, never, never, true, never>;
|
|
1090
1106
|
}
|
|
1091
1107
|
|
|
1092
1108
|
/** Contexte typé reçu par le template d'une option (`ktSelectOption`). */
|
|
@@ -1495,6 +1511,10 @@ declare class KtChipListbox<V> implements FormValueControl<V | V[] | null> {
|
|
|
1495
1511
|
readonly hint: _angular_core.InputSignal<string | undefined>;
|
|
1496
1512
|
/** Nom accessible (aria-label) quand label est absent. @default undefined */
|
|
1497
1513
|
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
1514
|
+
/** Masquer visuellement le label. @default KT_FIELD_CONFIG.hideLabel ?? false */
|
|
1515
|
+
readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1516
|
+
/** Masquer visuellement le bloc d'erreur. @default KT_FIELD_CONFIG.hideErrors ?? false */
|
|
1517
|
+
readonly hideErrors: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1498
1518
|
/** Stratégie d'affichage des erreurs. @default undefined */
|
|
1499
1519
|
readonly errorMatcher: _angular_core.InputSignal<KtFieldErrorMatcher | undefined>;
|
|
1500
1520
|
/** Afficher toutes les erreurs. @default false */
|
|
@@ -1528,7 +1548,7 @@ declare class KtChipListbox<V> implements FormValueControl<V | V[] | null> {
|
|
|
1528
1548
|
/** Focus la première option active. */
|
|
1529
1549
|
focus(options?: FocusOptions): void;
|
|
1530
1550
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtChipListbox<any>, never>;
|
|
1531
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtChipListbox<any>, "kt-chip-listbox", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "errorMatcher": { "alias": "errorMatcher"; "required": false; "isSignal": true; }; "showAllErrors": { "alias": "showAllErrors"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, ["*"], true, never>;
|
|
1551
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtChipListbox<any>, "kt-chip-listbox", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "hideErrors": { "alias": "hideErrors"; "required": false; "isSignal": true; }; "errorMatcher": { "alias": "errorMatcher"; "required": false; "isSignal": true; }; "showAllErrors": { "alias": "showAllErrors"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, ["*"], true, never>;
|
|
1532
1552
|
}
|
|
1533
1553
|
|
|
1534
1554
|
/**
|