@ktortu/aaa 0.9.9 → 0.10.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/README.md +40 -3
- package/dialog/dialog.css +85 -0
- package/fesm2022/ktortu-aaa-dialog.mjs +172 -13
- package/fesm2022/ktortu-aaa-dialog.mjs.map +1 -1
- package/fesm2022/ktortu-aaa-forms.mjs +17 -3
- package/fesm2022/ktortu-aaa-forms.mjs.map +1 -1
- package/fesm2022/ktortu-aaa-i18n.mjs +7 -0
- package/fesm2022/ktortu-aaa-i18n.mjs.map +1 -1
- package/fesm2022/ktortu-aaa-icon.mjs +174 -0
- package/fesm2022/ktortu-aaa-icon.mjs.map +1 -0
- package/fesm2022/ktortu-aaa-layout.mjs +12 -2
- package/fesm2022/ktortu-aaa-layout.mjs.map +1 -1
- package/fesm2022/ktortu-aaa.mjs +1 -0
- package/fesm2022/ktortu-aaa.mjs.map +1 -1
- package/forms/multi-select/multi-select.css +48 -0
- package/icon/icon.css +52 -0
- package/package.json +5 -1
- package/styles/icon.css +7 -0
- package/styles/styles.css +1 -0
- package/types/ktortu-aaa-dialog.d.ts +92 -7
- package/types/ktortu-aaa-forms.d.ts +8 -1
- package/types/ktortu-aaa-i18n.d.ts +3 -0
- package/types/ktortu-aaa-icon.d.ts +158 -0
- package/types/ktortu-aaa-layout.d.ts +11 -1
- package/types/ktortu-aaa.d.ts +1 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { OnInit, OnDestroy, Provider } from '@angular/core';
|
|
2
|
+
import { OnInit, OnDestroy, InjectionToken, Provider } from '@angular/core';
|
|
3
3
|
import { DialogConfig, DialogRef, CdkDialogContainer } from '@angular/cdk/dialog';
|
|
4
4
|
import { ComponentType } from '@angular/cdk/portal';
|
|
5
5
|
import * as _ktortu_aaa_dialog from '@ktortu/aaa/dialog';
|
|
@@ -105,6 +105,10 @@ declare class KtDialogClose {
|
|
|
105
105
|
* aria-labelledby). En usage simple — titre nu sans header — [ktDialogTitle] conserve son propre
|
|
106
106
|
* padding : ce header n'est à utiliser que pour les en-têtes composés (icône, close top-right…).
|
|
107
107
|
*
|
|
108
|
+
* ⚠️ Ne rend RIEN par lui-même — pas de bouton de fermeture implicite : c'est vous qui posez la
|
|
109
|
+
* croix (cf. exemple). En présentation `sheet`, l'option `sheetCloseButton` en rend une
|
|
110
|
+
* automatiquement, hors flux ; les deux ensemble feraient doublon (le conteneur avertit en dev).
|
|
111
|
+
*
|
|
108
112
|
* @example
|
|
109
113
|
* ```html
|
|
110
114
|
* <header ktDialogHeader>
|
|
@@ -163,7 +167,7 @@ declare class KtDialogFocusInitial {
|
|
|
163
167
|
}
|
|
164
168
|
/**
|
|
165
169
|
* @deprecated ADR-0005 — la poignée est désormais RENDUE AUTOMATIQUEMENT par `KtDialogContainer`
|
|
166
|
-
* en présentation `sheet` (opt-out :
|
|
170
|
+
* en présentation `sheet` (opt-out : option typée `sheetHandle: false`), et le
|
|
167
171
|
* drag-to-dismiss s'attrape sur TOUTE la surface de la sheet (scroll-snap natif). Cette
|
|
168
172
|
* directive est INERTE et son hôte est masqué (évite une double poignée) : retirez-la de vos
|
|
169
173
|
* templates. Sera supprimée dans une prochaine version majeure.
|
|
@@ -207,6 +211,63 @@ declare const KT_DIALOG_AAA_DEFAULTS: DialogConfig;
|
|
|
207
211
|
* @returns Un `Provider` pour le token `DEFAULT_DIALOG_CONFIG`.
|
|
208
212
|
*/
|
|
209
213
|
declare function provideKtDialogDefaults(overrides?: Partial<DialogConfig>): Provider;
|
|
214
|
+
/**
|
|
215
|
+
* Options MAISON du dialog (≠ {@link KT_DIALOG_AAA_DEFAULTS}, qui porte la config du CDK).
|
|
216
|
+
* Conforme à l'ADR-0003 : un token `KT_*_CONFIG` par entry-point, défauts anglais neutres,
|
|
217
|
+
* cascade `option d'ouverture ?? token ?? défaut`.
|
|
218
|
+
*
|
|
219
|
+
* Toutes les clés actuelles ne concernent que la présentation `sheet` (préfixe `sheet*`) : sur les
|
|
220
|
+
* présentations `centered` / `fullscreen`, la place d'un bouton de fermeture est un
|
|
221
|
+
* `[ktDialogHeader]`, où on le POSE soi-même, dans le flux. Un usage hors sheet déclenche un
|
|
222
|
+
* avertissement en mode dev.
|
|
223
|
+
*/
|
|
224
|
+
interface KtDialogConfig {
|
|
225
|
+
/**
|
|
226
|
+
* Bouton de fermeture AUTO-RENDU en haut de la carte, en présentation `sheet`.
|
|
227
|
+
*
|
|
228
|
+
* Désactivé par défaut, pour une raison de COMPATIBILITÉ, pas d'ergonomie : `[ktDialogHeader]`
|
|
229
|
+
* ne rend aucune croix (c'est une simple rangée flex), mais un dialog qui en compose un y place
|
|
230
|
+
* généralement la sienne à la main. Activer l'option par défaut ferait donc apparaître une
|
|
231
|
+
* DEUXIÈME croix chez ces consommateurs-là sans qu'ils aient rien changé.
|
|
232
|
+
*
|
|
233
|
+
* Recommandé sur toute sheet qui ne pose pas déjà son propre bouton de fermeture en tête.
|
|
234
|
+
* @default false
|
|
235
|
+
*/
|
|
236
|
+
sheetCloseButton: boolean;
|
|
237
|
+
/** Nom accessible du bouton de fermeture auto-rendu (WCAG 4.1.2). @default 'Close' */
|
|
238
|
+
sheetCloseLabel: string;
|
|
239
|
+
/** Poignée décorative auto-rendue en présentation `sheet` (ADR-0005). @default true */
|
|
240
|
+
sheetHandle: boolean;
|
|
241
|
+
}
|
|
242
|
+
/**
|
|
243
|
+
* Défauts effectifs des options maison du dialog. Objet `Required` figé : c'est la SOURCE des
|
|
244
|
+
* valeurs de repli, lue à la fois par l'ouvreur (résolution) et par le conteneur (fusion
|
|
245
|
+
* idempotente), et énumérée par la garde de complétude i18n.
|
|
246
|
+
*/
|
|
247
|
+
declare const DEFAULT_KT_DIALOG_CONFIG: Required<KtDialogConfig>;
|
|
248
|
+
/**
|
|
249
|
+
* Token des options maison du dialog. Deux usages, un seul chemin de résolution :
|
|
250
|
+
* - **application** : fourni via {@link provideKtDialog} (valeur partielle) ;
|
|
251
|
+
* - **par ouverture** : `injectKtDialogOpener` REFOURNIT ce même token, déjà RÉSOLU, dans
|
|
252
|
+
* l'injecteur du conteneur (canal `container.providers` du CDK). Le conteneur fusionne
|
|
253
|
+
* toujours par-dessus {@link DEFAULT_KT_DIALOG_CONFIG} : l'opération est idempotente sur une
|
|
254
|
+
* valeur déjà résolue, et reste correcte si le conteneur est monté sans passer par l'ouvreur.
|
|
255
|
+
*/
|
|
256
|
+
declare const KT_DIALOG_CONFIG: InjectionToken<Partial<KtDialogConfig>>;
|
|
257
|
+
/**
|
|
258
|
+
* Enregistre les options maison du dialog pour l'application (ou un sous-arbre).
|
|
259
|
+
* Complémentaire de {@link provideKtDialogDefaults}, qui porte la config du CDK : les deux
|
|
260
|
+
* coexistent et ne se recouvrent pas.
|
|
261
|
+
*
|
|
262
|
+
* @example
|
|
263
|
+
* ```ts
|
|
264
|
+
* // app.config.ts — bouton de fermeture sur toutes les bottom-sheets
|
|
265
|
+
* providers: [provideKtDialog({ sheetCloseButton: true })];
|
|
266
|
+
* ```
|
|
267
|
+
* @param config Options partielles fusionnées par-dessus `DEFAULT_KT_DIALOG_CONFIG`.
|
|
268
|
+
* @returns Un `Provider` pour le token `KT_DIALOG_CONFIG`.
|
|
269
|
+
*/
|
|
270
|
+
declare function provideKtDialog(config: Partial<KtDialogConfig>): Provider;
|
|
210
271
|
/**
|
|
211
272
|
* Présentation du dialog, CHOISIE EXPLICITEMENT PAR LE DÉVELOPPEUR à l'ouverture (option
|
|
212
273
|
* `presentation` de `injectKtDialogOpener`). Aucune bascule CSS automatique : le dev décide.
|
|
@@ -236,8 +297,11 @@ type KtDialogPresentation = 'centered' | 'fullscreen' | 'sheet' | 'centered-full
|
|
|
236
297
|
*/
|
|
237
298
|
declare function resolveKtDialogPanelClass(presentation?: KtDialogPresentation, compact?: boolean): string[];
|
|
238
299
|
|
|
239
|
-
/**
|
|
240
|
-
|
|
300
|
+
/**
|
|
301
|
+
* Config d'ouverture sans le champ `data` (fourni séparément, typé), enrichie de `presentation` et
|
|
302
|
+
* des options maison de {@link KtDialogConfig} (surcharge par ouverture de `KT_DIALOG_CONFIG`).
|
|
303
|
+
*/
|
|
304
|
+
type KtDialogOpenerConfig<D, R, C> = Omit<DialogConfig<D, DialogRef<R, C>>, 'data'> & Partial<KtDialogConfig> & {
|
|
241
305
|
/** Présentation du dialog (cf. `KtDialogPresentation`) — choisie par le dev. Résolue à CHAQUE
|
|
242
306
|
ouverture : les variantes responsive lisent le signal d'écran compact. Défaut : `'centered'`.
|
|
243
307
|
Combinée à un éventuel `panelClass` additionnel. */
|
|
@@ -343,6 +407,11 @@ declare class KtDialogContainer extends CdkDialogContainer {
|
|
|
343
407
|
private readonly platformId;
|
|
344
408
|
private readonly destroyRef;
|
|
345
409
|
private readonly bodyScrollLock;
|
|
410
|
+
/** Options maison RÉSOLUES. `injectKtDialogOpener` refournit `KT_DIALOG_CONFIG` déjà résolu dans
|
|
411
|
+
l'injecteur du conteneur : la fusion ci-dessous est alors un no-op. Elle reste indispensable
|
|
412
|
+
quand le conteneur est monté sans l'ouvreur (`dialog.open` brut), où le token remonte à
|
|
413
|
+
l'application et n'est que partiel. Un seul chemin de code, idempotent. */
|
|
414
|
+
protected readonly ktConfig: Required<KtDialogConfig>;
|
|
346
415
|
protected readonly isClosing: i0.WritableSignal<boolean>;
|
|
347
416
|
/** Armé quand l'ouverture a dépassé 50px : un repos à ~0 est alors forcément le snap « fermé ». */
|
|
348
417
|
private sheetArmed;
|
|
@@ -355,9 +424,25 @@ declare class KtDialogContainer extends CdkDialogContainer {
|
|
|
355
424
|
renomme ce membre, on dégrade proprement vers `null` au lieu de casser le rendu du conteneur. */
|
|
356
425
|
protected get ariaLabelledBy(): string | null;
|
|
357
426
|
constructor();
|
|
427
|
+
/** Garde-fous dev sur la config maison : usage hors sheet, double bouton de fermeture, opt-out
|
|
428
|
+
déprécié de la poignée. On AVERTIT sans jamais corriger en silence — un masquage automatique
|
|
429
|
+
dépendrait de l'ordre de rendu du portail et serait indébogable. */
|
|
430
|
+
private warnOnConfigMisuse;
|
|
358
431
|
protected isSheet(): boolean;
|
|
359
|
-
/**
|
|
432
|
+
/** panelClass d'opt-out historique de la poignée — repli DÉPRÉCIÉ, remplacé par `sheetHandle`. */
|
|
433
|
+
private hasLegacyNoHandleClass;
|
|
434
|
+
/** Poignée décorative auto-rendue en présentation sheet (ADR-0005). Opt-out : option `sheetHandle`
|
|
435
|
+
(le panelClass historique reste honoré, en déprécié). */
|
|
360
436
|
protected showSheetHandle(): boolean;
|
|
437
|
+
/** Bouton de fermeture auto-rendu : opt-in `sheetCloseButton`, et UNIQUEMENT en présentation sheet
|
|
438
|
+
(ailleurs, la croix se pose à la main dans un `[ktDialogHeader]` — cf. `KtDialogConfig`). */
|
|
439
|
+
protected showSheetClose(): boolean;
|
|
440
|
+
/** Clic sur le bouton de fermeture auto-rendu. Ne consulte VOLONTAIREMENT pas `disableClose` :
|
|
441
|
+
contrairement au tap-extérieur et à Échap (fermetures « par inadvertance » que `disableClose`
|
|
442
|
+
protège), ce bouton est une sortie EXPLICITEMENT demandée par le dev via `sheetCloseButton` —
|
|
443
|
+
le combiner à `disableClose` est le patron « une seule sortie contrôlée ». Le drapeau
|
|
444
|
+
`isClosing` garde l'idempotence face à un geste de glissement simultané. */
|
|
445
|
+
protected onSheetCloseClick(): void;
|
|
361
446
|
/** Tap sur le spacer (zone extérieure à la carte) = fermeture, façon backdrop. Le conteneur
|
|
362
447
|
captant désormais le tactile (pointer-events auto, requis pour le drag iOS), le clic ne
|
|
363
448
|
traverse plus vers le backdrop CDK : on porte donc ICI la fermeture au tap-extérieur, en
|
|
@@ -531,5 +616,5 @@ declare class KtQuickDialog {
|
|
|
531
616
|
static ɵprov: i0.ɵɵInjectableDeclaration<KtQuickDialog>;
|
|
532
617
|
}
|
|
533
618
|
|
|
534
|
-
export { KT_DIALOG_AAA_DEFAULTS, KtAlertDialog, KtConfirmDialog, KtDialogActions, KtDialogClose, KtDialogContainer, KtDialogContent, KtDialogDescription, KtDialogFocusInitial, KtDialogHeader, KtDialogImports, KtDialogSheetHandle, KtDialogTitle, KtQuickDialog, defineKtDialog, injectAlertDialog, injectConfirmDialog, injectKtDialogOpener, provideKtDialogDefaults, resolveKtDialogPanelClass };
|
|
535
|
-
export type { KtAlertData, KtAlertDialogVariant, KtAlertOptions, KtConfirmConfig, KtConfirmResult, KtDecideConfig, KtDialogColor, KtDialogContract, KtDialogOpenerConfig, KtDialogPresentation };
|
|
619
|
+
export { DEFAULT_KT_DIALOG_CONFIG, KT_DIALOG_AAA_DEFAULTS, KT_DIALOG_CONFIG, KtAlertDialog, KtConfirmDialog, KtDialogActions, KtDialogClose, KtDialogContainer, KtDialogContent, KtDialogDescription, KtDialogFocusInitial, KtDialogHeader, KtDialogImports, KtDialogSheetHandle, KtDialogTitle, KtQuickDialog, defineKtDialog, injectAlertDialog, injectConfirmDialog, injectKtDialogOpener, provideKtDialog, provideKtDialogDefaults, resolveKtDialogPanelClass };
|
|
620
|
+
export type { KtAlertData, KtAlertDialogVariant, KtAlertOptions, KtConfirmConfig, KtConfirmResult, KtDecideConfig, KtDialogColor, KtDialogConfig, KtDialogContract, KtDialogOpenerConfig, KtDialogPresentation };
|
|
@@ -1284,6 +1284,8 @@ interface KtSelectConfigOptions {
|
|
|
1284
1284
|
truncatedResultsText: (max: number, total: number) => string;
|
|
1285
1285
|
/** Annonce de la troncature des résultats (live region). Défaut : `'X results displayed out of Y...'`. */
|
|
1286
1286
|
truncatedResultsAnnouncement: (max: number, total: number) => string;
|
|
1287
|
+
/** Libellé du bouton de validation en bas de la sheet mobile (opt-in, multi-select). Défaut : `''` (aucun bouton). */
|
|
1288
|
+
validationButtonLabel: string;
|
|
1287
1289
|
}
|
|
1288
1290
|
declare const KT_SELECT_CONFIG: InjectionToken<Partial<KtSelectConfigOptions>>;
|
|
1289
1291
|
/**
|
|
@@ -1432,10 +1434,13 @@ declare class KtMultiSelect<T, V = T> extends KtBaseSelect<T, V> implements Form
|
|
|
1432
1434
|
readonly selectionActions: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1433
1435
|
/** Nombre maximal de chips affichés avant repli derrière un bouton « +N more ». Défaut : illimité. */
|
|
1434
1436
|
readonly maxVisibleChips: _angular_core.InputSignal<number | undefined>;
|
|
1437
|
+
/** Libellé du bouton de validation affiché en bas de la sheet mobile. Défaut : `KT_SELECT_CONFIG.validationButtonLabel` ou vide. */
|
|
1438
|
+
readonly validationButtonLabel: _angular_core.InputSignal<string | undefined>;
|
|
1435
1439
|
protected readonly optionDef: _angular_core.Signal<KtMultiSelectOptionDef<any> | undefined>;
|
|
1436
1440
|
protected readonly triggerDef: _angular_core.Signal<KtMultiSelectTriggerDef<any> | undefined>;
|
|
1437
1441
|
protected readonly chipDef: _angular_core.Signal<KtMultiSelectChipDef<any> | undefined>;
|
|
1438
1442
|
private readonly chipList;
|
|
1443
|
+
protected readonly resolvedValidationButtonLabel: _angular_core.Signal<string>;
|
|
1439
1444
|
protected readonly resolvedRemoveItemLabel: _angular_core.Signal<(itemLabel: string) => string>;
|
|
1440
1445
|
protected readonly resolvedSelectedItemsLabel: _angular_core.Signal<string>;
|
|
1441
1446
|
private readonly resolvedSelectionSummaryText;
|
|
@@ -1487,8 +1492,10 @@ declare class KtMultiSelect<T, V = T> extends KtBaseSelect<T, V> implements Form
|
|
|
1487
1492
|
protected clearAllFiltered(): void;
|
|
1488
1493
|
/** Annonce immédiate (action ponctuelle, pas de débounce) du total sélectionné. */
|
|
1489
1494
|
private announceSelectionCount;
|
|
1495
|
+
/** Valide la sélection depuis la sheet mobile (ferme le popup, marque le champ comme visité et replace le focus sur le trigger). */
|
|
1496
|
+
protected validateSheet(): void;
|
|
1490
1497
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtMultiSelect<any, any>, never>;
|
|
1491
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtMultiSelect<any, any>, "kt-multi-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectionActions": { "alias": "selectionActions"; "required": false; "isSignal": true; }; "maxVisibleChips": { "alias": "maxVisibleChips"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectionChange": "selectionChange"; }, ["optionDef", "triggerDef", "chipDef"], ["[ktFieldHelp]"], true, never>;
|
|
1498
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtMultiSelect<any, any>, "kt-multi-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectionActions": { "alias": "selectionActions"; "required": false; "isSignal": true; }; "maxVisibleChips": { "alias": "maxVisibleChips"; "required": false; "isSignal": true; }; "validationButtonLabel": { "alias": "validationButtonLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectionChange": "selectionChange"; }, ["optionDef", "triggerDef", "chipDef"], ["[ktFieldHelp]"], true, never>;
|
|
1492
1499
|
}
|
|
1493
1500
|
|
|
1494
1501
|
/** Portée de transition des chips. Fourni par `ChipList` (via `useExisting`) ; injecté en
|
|
@@ -2,6 +2,7 @@ import { EnvironmentProviders } from '@angular/core';
|
|
|
2
2
|
import { KtFieldConfig, KtSelectConfigOptions, KtChipsConfig } from '@ktortu/aaa/forms';
|
|
3
3
|
import { KtSnackbarConfig } from '@ktortu/aaa/snackbar';
|
|
4
4
|
import { KtTabsConfig } from '@ktortu/aaa/tabs';
|
|
5
|
+
import { KtDialogConfig } from '@ktortu/aaa/dialog';
|
|
5
6
|
|
|
6
7
|
/**
|
|
7
8
|
* Agrégat de TOUS les libellés traduisibles de la lib, groupés par famille de composants.
|
|
@@ -23,6 +24,8 @@ interface KtTranslations {
|
|
|
23
24
|
snackbar?: Partial<KtSnackbarConfig>;
|
|
24
25
|
/** Libellés de la pagination des onglets → {@link KT_TABS_CONFIG}. */
|
|
25
26
|
tabs?: Partial<KtTabsConfig>;
|
|
27
|
+
/** Libellés du dialog (`sheetCloseLabel`) → {@link KT_DIALOG_CONFIG}. */
|
|
28
|
+
dialog?: Partial<KtDialogConfig>;
|
|
26
29
|
}
|
|
27
30
|
/**
|
|
28
31
|
* Enregistre, en un seul appel, les libellés fournis sur les tokens de config de la lib.
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { InjectionToken, Provider } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Définition d'une police d'icônes **à ligatures** enregistrée dans le registre (cf.
|
|
6
|
+
* {@link KtIconConfig}). Le registre ne charge AUCUNE police : il se contente d'associer un alias
|
|
7
|
+
* court à la famille CSS réelle (à vous de charger le fichier de police, façon « apportez la vôtre »).
|
|
8
|
+
*/
|
|
9
|
+
interface KtIconFont {
|
|
10
|
+
/** Famille de police CSS réelle (ex. `'Material Symbols Rounded'`). Valeur `font-family` brute :
|
|
11
|
+
si elle commence par un chiffre ou contient des caractères spéciaux, la citer vous-même. */
|
|
12
|
+
family: string;
|
|
13
|
+
/** Graisse par défaut de cette police (ex. `300` ou `'normal'`). @default hérité de `--kt-icon-font-weight` */
|
|
14
|
+
weight?: string | number;
|
|
15
|
+
/** `font-variation-settings` par défaut (polices variables, ex. `"'FILL' 0, 'wght' 300"`). @default `normal` */
|
|
16
|
+
variationSettings?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Défauts applicables à toutes les icônes `[ktIcon]` (registre de polices + police par défaut),
|
|
20
|
+
* fournis via {@link provideKtIcon}. Fourni en `Partial` : on ne déclare que ce qu'on veut.
|
|
21
|
+
*/
|
|
22
|
+
interface KtIconConfig {
|
|
23
|
+
/** Registre `alias → police`. L'alias est ensuite choisi sur la primitive via `[font]`. */
|
|
24
|
+
fonts: Record<string, KtIconFont>;
|
|
25
|
+
/** Alias utilisé quand aucune police n'est précisée sur la primitive (`[font]` absent). */
|
|
26
|
+
defaultFont: string;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Interface d'**enregistrement des alias de POLICE** à augmenter côté application pour typer l'input
|
|
30
|
+
* `[font]` et obtenir son **autocomplétion** dans les templates. Vide par défaut : sans augmentation,
|
|
31
|
+
* `[font]` accepte n'importe quelle chaîne (dégradation gracieuse, zéro config).
|
|
32
|
+
*
|
|
33
|
+
* Nommée `KtIconFontRegistry` (et non `KtIconRegistry`) à dessein : le nom générique reste réservé à
|
|
34
|
+
* un futur registre de **noms d'icônes** (SVG), qui bénéficiera du même mécanisme.
|
|
35
|
+
*
|
|
36
|
+
* @example Recette à source unique (le même objet type ET fournit le registre) :
|
|
37
|
+
* ```ts
|
|
38
|
+
* // app-icons.ts
|
|
39
|
+
* export const APP_ICON_FONTS = {
|
|
40
|
+
* material: { family: 'Material Symbols Outlined' },
|
|
41
|
+
* rounded: { family: 'Material Symbols Rounded', variationSettings: "'FILL' 0, 'wght' 300" },
|
|
42
|
+
* } as const;
|
|
43
|
+
*
|
|
44
|
+
* declare module '@ktortu/aaa/icon' {
|
|
45
|
+
* // Injecte les clés de APP_ICON_FONTS comme alias connus → autocomplétion de [font].
|
|
46
|
+
* // eslint-disable-next-line @typescript-eslint/no-empty-object-type
|
|
47
|
+
* interface KtIconFontRegistry extends Record<keyof typeof APP_ICON_FONTS, unknown> {}
|
|
48
|
+
* }
|
|
49
|
+
*
|
|
50
|
+
* // app.config.ts
|
|
51
|
+
* providers: [provideKtIcon({ fonts: APP_ICON_FONTS, defaultFont: 'material' })];
|
|
52
|
+
* ```
|
|
53
|
+
*/
|
|
54
|
+
interface KtIconFontRegistry {
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Alias de police connus : l'union des clés de {@link KtIconFontRegistry} une fois augmentée, sinon
|
|
58
|
+
* `string` (registre vide → chaîne libre). Le tuple `[…] extends […]` évite la distribution du
|
|
59
|
+
* conditionnel sur l'union.
|
|
60
|
+
*/
|
|
61
|
+
type KtIconFontAlias = [keyof KtIconFontRegistry] extends [never] ? string : keyof KtIconFontRegistry;
|
|
62
|
+
declare const KT_ICON_CONFIG: InjectionToken<Partial<KtIconConfig>>;
|
|
63
|
+
/**
|
|
64
|
+
* Fournit un registre de polices d'icônes (alias → famille) et l'alias par défaut, pour un
|
|
65
|
+
* sous-arbre ou l'application entière. Combiné à l'augmentation de {@link KtIconFontRegistry}, il
|
|
66
|
+
* offre l'autocomplétion typée de l'input `[font]`.
|
|
67
|
+
*
|
|
68
|
+
* `defaultFont` est **contraint aux clés de `fonts`** passées dans le même appel : un typo devient
|
|
69
|
+
* une erreur de compilation (pas de repli silencieux de toutes les icônes sur la police globale).
|
|
70
|
+
*
|
|
71
|
+
* @example
|
|
72
|
+
* ```ts
|
|
73
|
+
* providers: [
|
|
74
|
+
* provideKtIcon({
|
|
75
|
+
* fonts: {
|
|
76
|
+
* material: { family: 'Material Symbols Outlined' },
|
|
77
|
+
* rounded: { family: 'Material Symbols Rounded' },
|
|
78
|
+
* },
|
|
79
|
+
* defaultFont: 'material', // 'rouded' → erreur TS
|
|
80
|
+
* }),
|
|
81
|
+
* ];
|
|
82
|
+
* ```
|
|
83
|
+
*/
|
|
84
|
+
declare function provideKtIcon<F extends Record<string, KtIconFont>>(config: {
|
|
85
|
+
fonts?: F;
|
|
86
|
+
defaultFont?: keyof F & string;
|
|
87
|
+
}): Provider;
|
|
88
|
+
/**
|
|
89
|
+
* Primitive d'icône **autonome** : pose une icône seule (en-tête, item de liste, badge d'état…),
|
|
90
|
+
* là où le bouton et les champs ne suffisent pas. Directive présentationnelle — **jamais focusable
|
|
91
|
+
* ni cliquable** (pour une icône cliquable, utilisez `ktButton iconOnly`).
|
|
92
|
+
*
|
|
93
|
+
* Sélecteur d'attribut `[ktIcon]` (camelCase) ; l'hôte reçoit la classe stable `.kt-icon` (cible du
|
|
94
|
+
* style et du harness). Ne pas confondre avec le slot de projection `[kt-icon]` (kebab) de
|
|
95
|
+
* `kt-nav-item`, qui est un autre mécanisme.
|
|
96
|
+
*
|
|
97
|
+
* Deux régimes, comme dans le reste de la lib :
|
|
98
|
+
* - **Ligature** (`[ktIcon]="nom"`) : le nom devient un glyphe via une police d'icônes à ligatures
|
|
99
|
+
* (défaut `--kt-icon-font` → Material Symbols Outlined). Choisissez une autre police enregistrée
|
|
100
|
+
* via `[font]`.
|
|
101
|
+
* - **Projection** (set à classes, ex. Font Awesome, ou SVG en ligne) : laissez `ktIcon` vide et
|
|
102
|
+
* projetez votre markup dans l'élément ; la primitive ne fait que l'habiller (taille, couleur
|
|
103
|
+
* héritée, alignement). Le contenu projeté **ne doit jamais être focusable** (l'hôte décoratif
|
|
104
|
+
* porte `aria-hidden` : un descendant focusable violerait WCAG 4.1.2).
|
|
105
|
+
*
|
|
106
|
+
* Accessibilité : **décorative par défaut** (`aria-hidden`). Fournissez `[ariaLabel]` (ou un
|
|
107
|
+
* `aria-label` natif) pour une icône **porteuse de sens** (bascule en `role="img"`).
|
|
108
|
+
*
|
|
109
|
+
* @example
|
|
110
|
+
* ```html
|
|
111
|
+
* <!-- Ligature autonome, taille et couleur héritées du contexte ; `fill` = version remplie -->
|
|
112
|
+
* <span ktIcon="home"></span>
|
|
113
|
+
* <span ktIcon="favorite" fill size="2rem" style="color: var(--kt-primary)"></span>
|
|
114
|
+
*
|
|
115
|
+
* <!-- Set à classes (Font Awesome) : projection, ktIcon reste vide -->
|
|
116
|
+
* <span ktIcon><i class="fa-solid fa-user"></i></span>
|
|
117
|
+
*
|
|
118
|
+
* <!-- Icône porteuse de sens (nommée pour les lecteurs d'écran) -->
|
|
119
|
+
* <span ktIcon="error" ariaLabel="Erreur" style="color: var(--kt-danger)"></span>
|
|
120
|
+
* ```
|
|
121
|
+
*/
|
|
122
|
+
declare class KtIcon {
|
|
123
|
+
private readonly config;
|
|
124
|
+
private readonly auditEnabled;
|
|
125
|
+
private readonly platformId;
|
|
126
|
+
private readonly host;
|
|
127
|
+
private readonly nativeAriaLabel;
|
|
128
|
+
/** Nom de l'icône (ligature). Laisser vide pour projeter un set à classes / un SVG. @default '' */
|
|
129
|
+
readonly ktIcon: _angular_core.InputSignal<string>;
|
|
130
|
+
/** Alias de police d'icônes du registre (cf. {@link provideKtIcon}). @default `KtIconConfig.defaultFont` */
|
|
131
|
+
readonly font: _angular_core.InputSignal<string | undefined>;
|
|
132
|
+
/** Nom accessible : le fournir rend l'icône **porteuse de sens** (`role="img"`). Aligné sur `ktButton`.
|
|
133
|
+
@default undefined (icône décorative ; un `aria-label` natif reste toutefois préservé) */
|
|
134
|
+
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
135
|
+
/** Taille de l'icône (longueur CSS, ex. `'24px'`, `'2rem'`, `'1.5em'`). @default `1.25em` (héritée du contexte) */
|
|
136
|
+
readonly size: _angular_core.InputSignal<string | undefined>;
|
|
137
|
+
/** Version **remplie** plutôt que contour, pour les polices variables à axe `FILL` (Material Symbols).
|
|
138
|
+
Force `FILL` à 1 en préservant les autres axes (graisse…) ; sans effet sur une police sans cet axe.
|
|
139
|
+
Nécessite une police chargée **avec l'axe FILL ajustable** (ex. Google Fonts :
|
|
140
|
+
`…Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200`).
|
|
141
|
+
@default false (contour) */
|
|
142
|
+
readonly fill: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
143
|
+
/** Nom rendu en ligature : coupé, `null` si vide (aucun `::before`, laisse place à la projection). */
|
|
144
|
+
protected readonly renderedName: _angular_core.Signal<string | null>;
|
|
145
|
+
/** Libellé accessible résolu : input prioritaire, sinon `aria-label` natif préservé, sinon `null` (décorative). */
|
|
146
|
+
protected readonly accessibleLabel: _angular_core.Signal<string | null>;
|
|
147
|
+
/** Police résolue depuis le registre : alias explicite, sinon police par défaut du provider. */
|
|
148
|
+
private readonly resolvedFont;
|
|
149
|
+
protected readonly resolvedFamily: _angular_core.Signal<string | null>;
|
|
150
|
+
protected readonly resolvedWeight: _angular_core.Signal<string | null>;
|
|
151
|
+
protected readonly resolvedVariation: _angular_core.Signal<string | null>;
|
|
152
|
+
constructor();
|
|
153
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtIcon, never>;
|
|
154
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KtIcon, "[ktIcon]", never, { "ktIcon": { "alias": "ktIcon"; "required": false; "isSignal": true; }; "font": { "alias": "font"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
export { KT_ICON_CONFIG, KtIcon, provideKtIcon };
|
|
158
|
+
export type { KtIconConfig, KtIconFont, KtIconFontAlias, KtIconFontRegistry };
|
|
@@ -77,11 +77,21 @@ declare class KtToolbarComponent {
|
|
|
77
77
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtToolbarComponent, "kt-toolbar", never, {}, {}, never, ["*"], true, never>;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
+
/**
|
|
81
|
+
* Item de navigation : projette une icône dans son slot dédié + un libellé.
|
|
82
|
+
*
|
|
83
|
+
* Le slot d'icône accepte :
|
|
84
|
+
* - la directive `[ktIcon]` (primitive d'icône `@ktortu/aaa/icon`), forme canonique.
|
|
85
|
+
* - l'attribut de projection `kt-icon` (historique/legacy).
|
|
86
|
+
*
|
|
87
|
+
* Note : la classe `.kt-icon` (posée à l'exécution par la directive) n'est PAS un critère de
|
|
88
|
+
* projection valable (ng-content matche la forme statique du template) — d'où le sélecteur d'attribut.
|
|
89
|
+
*/
|
|
80
90
|
declare class KtNavItemComponent {
|
|
81
91
|
label: _angular_core.InputSignal<string>;
|
|
82
92
|
protected readonly layout: KtLayoutService;
|
|
83
93
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtNavItemComponent, never>;
|
|
84
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtNavItemComponent, "kt-nav-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; }, {}, never, ["[kt-icon]", "*"], true, never>;
|
|
94
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtNavItemComponent, "kt-nav-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; }, {}, never, ["[ktIcon], [kt-icon]", "*"], true, never>;
|
|
85
95
|
}
|
|
86
96
|
|
|
87
97
|
/**
|
package/types/ktortu-aaa.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ export * from '@ktortu/aaa/dialog';
|
|
|
5
5
|
export * from '@ktortu/aaa/disclosure';
|
|
6
6
|
export * from '@ktortu/aaa/forms';
|
|
7
7
|
export * from '@ktortu/aaa/i18n';
|
|
8
|
+
export * from '@ktortu/aaa/icon';
|
|
8
9
|
export * from '@ktortu/aaa/menu';
|
|
9
10
|
export * from '@ktortu/aaa/snackbar';
|
|
10
11
|
export * from '@ktortu/aaa/tabs';
|