@starterlib/ui 0.9.1 → 0.10.1

package/types/starterlib-ui-indicateurs.d.ts

@@ -0,0 +1,463 @@
+import { Ton, TonSemantique } from "@starterlib/util";
+import { AnnonceLocale, Icone, TailleDIcone } from "@starterlib/ui";
+import * as i0 from "@angular/core";
+import { InjectionToken } from "@angular/core";
+/**
+ * ⚠️ `primaire` et non « info » : les deux designaient deja la meme couleur
+ * d'accent, et rien ne distinguait un statut « info » d'un statut « primaire »
+ * ailleurs dans le socle.
+ */
+export type TonDeStatut = TonSemantique;
+/**
+ * `md` (defaut) : 24 px, libelle de 11 px, icone de 16 px au trait (planche 2 de Claude Design).
+ * `sm` : 18 px, icone de 14 px PLEINE, pour les tableaux denses (a cette taille, un trait ne
+ * se lit plus).
+ */
+export type TailleDePastille = 'md' | 'sm';
+/**
+ * `icone` (defaut) : la forme du statut devant le libelle. `point` : un point fixe de 8 px,
+ * reserve au TEMOIN DE LIAISON (« Passerelle active ») ; un statut metier garde sa forme.
+ */
+export type VarianteDePastille = 'icone' | 'point';
+/**
+ * `capitales` (defaut) : le libelle en capitales de 11 px, a l'interlettrage du micro-libelle
+ * (forme de la planche 4, DESIGN.md « label-sm uppercase »). `phrase` : la casse du texte, en
+ * 12/16 — 11 px est reserve aux micro-libelles en capitales (ADR 0005 D18, D38).
+ */
+export type CasseDePastille = 'phrase' | 'capitales';
+/**
+ * Pastille de statut.
+ *
+ * ⚠️ Le libelle est OBLIGATOIRE, et l'icone differe par sa FORME d'un ton a l'autre (coche,
+ * horloge, croix, cercle) : un statut porte par la seule couleur est illisible pour une personne
+ * daltonienne, a l'impression, et sous un theme a fort contraste. Sans icone fournie, la forme
+ * vient du ton (lot 206) : un appelant ne peut plus l'oublier.
+ *
+ * ⚠️ Aucun role ARIA, malgre le nom du composant : `role="status"` en ferait
+ * une region vivante, et une liste de vingt lignes ferait annoncer vingt
+ * statuts a chaque rendu.
+ *
+ * Rendu de reference : la forme de la planche 4 (icone du ton, filet du ton a 20 %, capitales)
+ * a la taille de la planche 2 (24 px, libelle 11/600, icone de 16 au trait), ADR web/starter 0005
+ * D23. Les capitales sont le DEFAUT (revue E8) : un libelle de 11 px en casse de phrase est
+ * refuse par D18 ; la casse de phrase passe a 12/16.
+ */
+export declare class StStatusPill {
+  /** Code machine du statut : sert aux tests et aux selecteurs, jamais a l'affichage. */
+  readonly statut: import("@angular/core").InputSignal<string>;
+  /** Texte deja traduit par l'appelant : le socle ne traduit rien. */
+  readonly libelle: import("@angular/core").InputSignal<string>;
+  /**
+   * `null` : la forme du ton (neutre `cercle`, information et primaire `cercle-info`, succes
+   * `cercle-coche`, avertissement `triangle-alerte`, danger `cercle-croix`). Fournie, une forme
+   * plus precise : `horloge` (en attente), `octogone-alerte` (bloque), `interdit` (opposition).
+   */
+  readonly icone: import("@angular/core").InputSignal<Icone | null>;
+  readonly ton: import("@angular/core").InputSignal<TonSemantique>;
+  readonly taille: import("@angular/core").InputSignal<TailleDePastille>;
+  readonly variante: import("@angular/core").InputSignal<VarianteDePastille>;
+  readonly casse: import("@angular/core").InputSignal<CasseDePastille>;
+  /**
+   * L'icone dessinee : celle de l'appelant, ou la forme du ton. En `sm`, le jumeau PLEIN des
+   * qu'il existe (a 14 px, un contour ne se lit plus) ; en `md`, le trait, sauf si l'appelant
+   * demande lui-meme le plein (`{ nom, variante: 'plein' }`).
+   */
+  protected readonly iconeDessinee: import("@angular/core").Signal<Icone>;
+  protected readonly tailleDIcone: import("@angular/core").Signal<TailleDIcone>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StStatusPill, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StStatusPill, "st-status-pill", never, {
+    "statut": {
+      "alias": "statut";
+      "required": true;
+      "isSignal": true;
+    };
+    "libelle": {
+      "alias": "libelle";
+      "required": true;
+      "isSignal": true;
+    };
+    "icone": {
+      "alias": "icone";
+      "required": false;
+      "isSignal": true;
+    };
+    "ton": {
+      "alias": "ton";
+      "required": false;
+      "isSignal": true;
+    };
+    "taille": {
+      "alias": "taille";
+      "required": false;
+      "isSignal": true;
+    };
+    "variante": {
+      "alias": "variante";
+      "required": false;
+      "isSignal": true;
+    };
+    "casse": {
+      "alias": "casse";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Ou le badge se pose sur son porteur :
+ * - `haut-fin` (defaut) : centre sur le coin superieur de fin (droit en francais), a 6 px du bord ;
+ * - `haut-debut` : le coin superieur de debut ;
+ * - `en-ligne` : dans le flux, apres le libelle (entree de navigation, onglet).
+ */
+export type PositionDeBadge = 'haut-fin' | 'haut-debut' | 'en-ligne';
+/**
+ * Porteur d'un `st-badge` : la cloche, l'entree de navigation, l'onglet qui compte.
+ *
+ * ```html
+ * <span stBadgeAncre etiquetteDuCompte=", 3 non lues">
+ *   <st-icon nom="cloche" /> Notifications
+ *   <st-badge [valeur]="3" />
+ * </span>
+ * ```
+ *
+ * ⚠️ Elle remplace la classe `st-badge-ancre` que la 0.8.0 exigeait et qu'aucune feuille ne
+ * definissait (A1099) : le badge restait dans le flux, loin de son porteur.
+ *
+ * Le badge est pose en ABSOLU dans son porteur : il apparait, grandit de « 3 » a « 99+ » et
+ * disparait sans jamais deplacer le porteur ni la page (aucun decalage de mise en page). Un seul
+ * decalage pour tous les badges : leur CENTRE a 6 px du coin, quelle que soit leur largeur.
+ *
+ * ⚠️ Le badge est MUET (un « 5 » flottant n'apprend rien) : le compte se dit par
+ * `etiquetteDuCompte`, texte masque rendu DANS le porteur, donc dans son nom accessible
+ * (« Notifications, 3 non lues »). Un porteur nomme par `aria-label` (un `stIconButton`) ignore
+ * son contenu : le compte va alors dans son `etiquette`.
+ */
+export declare class StBadgeAncre {
+  /** La position du badge ; l'attribut nu vaut `haut-fin`. */
+  readonly position: import("@angular/core").InputSignalWithTransform<PositionDeBadge, "" | PositionDeBadge>;
+  /** Texte lu du compte (« , 3 non lues »), deja traduit par l'appelant ; `null` : aucun. */
+  readonly etiquetteDuCompte: import("@angular/core").InputSignal<string | null>;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<StBadgeAncre, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<StBadgeAncre, "[stBadgeAncre]", never, {
+    "position": {
+      "alias": "stBadgeAncre";
+      "required": false;
+      "isSignal": true;
+    };
+    "etiquetteDuCompte": {
+      "alias": "etiquetteDuCompte";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export type TonDeBadge = TonSemantique;
+/**
+ * Pastille de comptage superposee a un autre element (planche 2 de Claude Design, lot 206) :
+ * disque de 20 px, gelule qui s'allonge sans changer de hauteur, « 99+ » au-dela du plafond,
+ * point de 10 px a lisere de surface.
+ *
+ * ⚠️ Le chiffre est TOUJOURS muet. Un « 5 » flottant, lu hors contexte,
+ * n'apprend rien. Le compte doit entrer dans le nom accessible de l'element
+ * porteur : « Notifications, 5 non lues », par `etiquetteDuCompte` de l'ancre
+ * (`[stBadgeAncre]`) ou compose par l'appelant.
+ *
+ * Pose dans un porteur `[stBadgeAncre]`, il s'y superpose ; seul, il reste dans le flux.
+ */
+export declare class StBadge {
+  protected readonly ancre: StBadgeAncre | null;
+  readonly valeur: import("@angular/core").InputSignal<string | number | null>;
+  readonly max: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly ton: import("@angular/core").InputSignal<TonSemantique>;
+  /** Point seul, sans chiffre : signale une nouveaute sans la quantifier. */
+  readonly point: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected readonly texte: import("@angular/core").Signal<string>;
+  /** Rien a montrer : ni chiffre, ni point. La place reste reservee, rien ne saute. */
+  protected readonly vide: import("@angular/core").Signal<boolean>;
+  protected readonly etiquetteDuCompte: import("@angular/core").Signal<string | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StBadge, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StBadge, "st-badge", never, {
+    "valeur": {
+      "alias": "valeur";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "ton": {
+      "alias": "ton";
+      "required": false;
+      "isSignal": true;
+    };
+    "point": {
+      "alias": "point";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** Le ton de l'etiquette : papier teinte du ton (`discrete`) ou aplat (`pleine`). */
+export type TonDEtiquette = Exclude<Ton, 'discret' | 'inverse'>;
+/**
+ * `md` (defaut) : 22 px, 4 x 10 de marge (planches 10 a 12) ; `sm` : 18 px, 2 x 8 (planches 2,
+ * 6 et 8), pour une puce de code ou une legende. Le retrait n'existe qu'en `md`.
+ */
+export type TailleDEtiquette = 'md' | 'sm';
+/**
+ * `discrete` : texte du ton sur son papier teinte ; `pleine` : texte clair sur l'aplat du ton ;
+ * `attenuee` : le papier attenue de la marque, plus soutenu que le discret (surtitre en pastille
+ * d'un en-tete, planche 2 ; ADR 0005 D44). Seul le ton `primaire` a un papier attenue : un autre
+ * ton garde son papier discret.
+ */
+export type VarianteDEtiquette = 'discrete' | 'pleine' | 'attenuee';
+/** `mono` : une puce de code ou de reference, en JetBrains Mono (planches 2, 3 et 9). */
+export type PoliceDEtiquette = 'texte' | 'mono';
+/**
+ * `phrase` (defaut) : la casse du texte (une reference de code ne se met pas en capitales), en
+ * 12/16 ; `capitales` : le micro-libelle de 11 px. 11 px est reserve aux capitales (ADR 0005 D18,
+ * D38 ; revue E8).
+ */
+export type CasseDEtiquette = 'phrase' | 'capitales';
+/**
+ * Etiquette : une puce non interactive (categorie, reference, legende), eventuellement
+ * retirable dans un formulaire. Un filtre actif est un `st-filter-chip`.
+ *
+ * Rendu de reference : les puces des planches 2 a 16 de Claude Design (lot 206) — libelle
+ * 11/600 au micro-interlettrage en capitales, 12/16 en casse de phrase (D18), coins de 4 px (la
+ * pilule de quelques planches est un ecart assume), point ou icone de tete, police mono.
+ *
+ * ⚠️ Le retrait DEPLACE LE FOCUS. Sans cela, le bouton disparait sous le doigt de
+ * l'utilisateur clavier, le focus retombe sur le corps du document, et la navigation repart du
+ * haut de la page. C'est l'un des defauts d'accessibilite les plus frequents des listes
+ * d'etiquettes. Le focus va au bouton de retrait de la prochaine etiquette RETIRABLE, puis de la
+ * precedente, jamais a un autre bouton de la page ; a defaut, au groupe, ou au premier ancetre
+ * focalisable par script. Seul le MOMENT change avec le groupe (D80) : la liste de
+ * `[stGroupeDEtiquettes]` le pose avant l'emission ; `st-tag-group`, dont l'application tient les
+ * elements, apres leur retrait reel.
+ *
+ * ⚠️ Le role `listitem` n'est pose que dans la liste de `[stGroupeDEtiquettes]`, et PARTAGE : hors
+ * groupe, le role que l'appelant a ecrit (`<st-tag role="listitem">` dans sa propre liste) reste
+ * (revue E8 ; une liaison d'hote l'effacait). Dans le `li` de `st-tag-group`, aucun.
+ */
+export declare class StTag {
+  private readonly element;
+  private readonly libelles;
+  private readonly groupe;
+  /** Le role du groupe, sauf role ecrit par l'appelant ; hors groupe, le sien. */
+  private readonly role;
+  readonly libelle: import("@angular/core").InputSignal<string>;
+  readonly supprimable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly ton: import("@angular/core").InputSignal<TonDEtiquette>;
+  readonly taille: import("@angular/core").InputSignal<TailleDEtiquette>;
+  readonly variante: import("@angular/core").InputSignal<VarianteDEtiquette>;
+  readonly police: import("@angular/core").InputSignal<PoliceDEtiquette>;
+  readonly casse: import("@angular/core").InputSignal<CasseDEtiquette>;
+  /** Un point de 6 px a l'encre du ton, devant le libelle (planches 2, 11 et 12). */
+  readonly point: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Une icone de tete, decorative : le libelle porte le sens. */
+  readonly iconeAvant: import("@angular/core").InputSignal<Icone | null>;
+  readonly supprime: import("@angular/core").OutputEmitterRef<void>;
+  constructor();
+  /** Le retrait n'existe qu'en `md` : a 18 px, sa cible tomberait sous 24 px. */
+  protected readonly retirable: import("@angular/core").Signal<boolean>;
+  /**
+   * Le nom du bouton de retrait : `LibellesUi.retirerLEtiquette(libelle)`, qui laisse la langue
+   * ordonner les mots (« Paris retire » contre « Remove Paris »).
+   */
+  protected readonly libelleDeSuppression: import("@angular/core").Signal<string>;
+  /**
+   * Le libelle est souvent une donnee (une ville, un courriel) : sans commande de direction, et
+   * isole (`<bdi>`), il ne reordonne ni l'etiquette ni ce qui l'entoure (audit du 2026-09-26, S-1).
+   */
+  protected readonly libelleAffiche: import("@angular/core").Signal<string>;
+  protected auRetrait(): void;
+  /**
+   * `Suppr` et `Retour arriere` sur le bouton retirent aussi l'etiquette (APG) : la touche que
+   * l'on presse naturellement pour effacer une valeur.
+   */
+  protected auClavier(evenement: Event): void;
+  /**
+   * Le bouton de retrait de la prochaine etiquette soeur RETIRABLE (une puce sans retrait, ou un
+   * autre element, est sautee), a defaut de la precedente. Seules les etiquettes soeurs comptent :
+   * un autre bouton voisin n'est pas la suite de la liste.
+   */
+  private voisineRetirable;
+  /** Hors groupe, a defaut de voisine : le premier ancetre focalisable par script. */
+  private ancetreFocalisable;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StTag, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StTag, "st-tag", never, {
+    "libelle": {
+      "alias": "libelle";
+      "required": true;
+      "isSignal": true;
+    };
+    "supprimable": {
+      "alias": "supprimable";
+      "required": false;
+      "isSignal": true;
+    };
+    "ton": {
+      "alias": "ton";
+      "required": false;
+      "isSignal": true;
+    };
+    "taille": {
+      "alias": "taille";
+      "required": false;
+      "isSignal": true;
+    };
+    "variante": {
+      "alias": "variante";
+      "required": false;
+      "isSignal": true;
+    };
+    "police": {
+      "alias": "police";
+      "required": false;
+      "isSignal": true;
+    };
+    "casse": {
+      "alias": "casse";
+      "required": false;
+      "isSignal": true;
+    };
+    "point": {
+      "alias": "point";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconeAvant": {
+      "alias": "iconeAvant";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "supprime": "supprime";
+  }, never, never, true, never>;
+}
+/**
+ * Groupe d'etiquettes retirables : une liste (`role="list"`, chaque `st-tag` en `listitem`) et
+ * UNE region polie qui dit ce qui vient d'etre retire (« Paris retire »).
+ *
+ * ```html
+ * <div stGroupeDEtiquettes etiquette="Villes choisies">
+ *   @for (ville of villes(); track ville) {
+ *     <st-tag [libelle]="ville" supprimable (supprime)="retirer(ville)" />
+ *   }
+ * </div>
+ * ```
+ *
+ * ⚠️ La region vit dans le GROUPE, et non dans l'etiquette : l'etiquette retiree quitte le
+ * document avant que son annonce n'arrive (`rythme.delai.annonce`), et une region detruite ne
+ * dit plus rien. Elle est hors de la liste : une liste ne contient que ses elements.
+ *
+ * ⚠️ La liste est focalisable par script (`tabindex="-1"`, hors de l'ordre de tabulation) : la
+ * DERNIERE etiquette retiree y pose le focus, qui sinon retombait sur le corps du document.
+ *
+ * Les etiquettes projetees recoivent ces crochets par un jeton (D80, partage avec `st-tag-group`) :
+ * chacune y est un `listitem`, et son retrait pose le focus et s'annonce AVANT son emission.
+ * Des etiquettes decrites en donnees, que l'application retire elle-meme, vont dans
+ * `st-tag-group`.
+ */
+export declare class StGroupeDEtiquettes {
+  private readonly libelles;
+  /** Nom de la liste, lu en y entrant (« Villes choisies ») ; `null` : aucun. */
+  readonly etiquette: import("@angular/core").InputSignal<string | null>;
+  protected readonly annonce: AnnonceLocale;
+  private readonly liste;
+  /** Appele par une etiquette du groupe au moment ou elle est retiree. */
+  annoncerLeRetrait(libelle: string): void;
+  /** Appele par une etiquette retiree qui n'a plus de voisine retirable ou poser le focus. */
+  recevoirLeFocus(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StGroupeDEtiquettes, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StGroupeDEtiquettes, "[stGroupeDEtiquettes]", never, {
+    "etiquette": {
+      "alias": "etiquette";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/** Une etiquette du groupe, decrite en donnees. */
+export interface EtiquetteDeGroupe {
+  /** Cle stable et unique dans le groupe : c'est elle que `supprime` emet. */
+  readonly valeur: string;
+  readonly libelle: string;
+  readonly ton?: TonDEtiquette;
+  /** Offre le bouton de retrait, nomme par `retirerLEtiquette` (« Retirer Paris »). */
+  readonly supprimable?: boolean;
+}
+/**
+ * Le champ qui contient un `st-tag-group` (`st-tag-input`) : le groupe annonce ses retraits dans
+ * la region du champ, la seule du champ (D81), et rend le focus au champ quand plus aucune
+ * etiquette retirable ne reste.
+ */
+export interface ChampAEtiquettes {
+  annoncer(message: string): void;
+  recevoirLeFocus(): void;
+}
+export declare const ST_CHAMP_A_ETIQUETTES: InjectionToken<ChampAEtiquettes>;
+/**
+ * Groupe d'etiquettes decrites en donnees : une liste nommee, `ul > li > st-tag` (lot 252, ADR
+ * 0005 D80).
+ *
+ * ```html
+ * <st-tag-group etiquette="Villes choisies" [elements]="villes()" (supprime)="retirer($event)" />
+ * ```
+ *
+ * La liste est nommee SANS compte : le lecteur d'ecran dit deja le nombre d'elements en y
+ * entrant. Des etiquettes projetees vont dans `[stGroupeDEtiquettes]`.
+ *
+ * ⚠️ **Le focus suit le retrait REEL.** `elements` appartient a l'application : le groupe emet
+ * `supprime(valeur)` et attend que la valeur ait quitte la liste (apres un aller-retour serveur
+ * compris) pour rendre le focus a l'etiquette retirable suivante, sinon a la precedente, sinon a
+ * la liste (focalisable par script) — ou au champ qui contient le groupe. Focaliser a la demande
+ * visait une etiquette encore presente, puis le document quand elle disparaissait (A1160). Un
+ * focus parti ailleurs pendant l'attente n'est jamais repris. L'annonce (« Paris retire ») part
+ * au meme moment : elle dit ce qui a quitte la liste, et non ce qui a ete demande.
+ */
+export declare class StTagGroup {
+  private readonly libelles;
+  private readonly document;
+  private readonly injecteur;
+  protected readonly champ: ChampAEtiquettes | null;
+  /** Nom de la liste, lu en y entrant (« Villes choisies »). */
+  readonly etiquette: import("@angular/core").InputSignal<string>;
+  /** Les etiquettes, dans l'ordre. */
+  readonly elements: import("@angular/core").InputSignal<readonly EtiquetteDeGroupe[]>;
+  /** La `valeur` de l'etiquette dont la personne demande le retrait. */
+  readonly supprime: import("@angular/core").OutputEmitterRef<string>;
+  protected readonly annonce: AnnonceLocale;
+  private readonly liste;
+  private enAttente;
+  constructor();
+  protected retirer(element: EtiquetteDeGroupe, indice: number): void;
+  private annoncer;
+  /**
+   * Seulement si le focus a ete perdu avec l'etiquette, ou s'il est encore sur ce qui a demande le
+   * retrait : la touche suivante (Espace, Entree) activerait sinon la voisine et retirerait une
+   * seconde etiquette.
+   */
+  private rendreLeFocus;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StTagGroup, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StTagGroup, "st-tag-group", never, {
+    "etiquette": {
+      "alias": "etiquette";
+      "required": true;
+      "isSignal": true;
+    };
+    "elements": {
+      "alias": "elements";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "supprime": "supprime";
+  }, never, never, true, never>;
+}
+
+export {};

package/types/starterlib-ui-listes.d.ts

@@ -1,7 +1,8 @@
 import { AnnonceLocale, CatalogueDuPointDEntree, Icone, LibellesUi, NiveauDeTitre, NomDIcone } from "@starterlib/ui";
 import * as i0 from "@angular/core";
 import { InjectionToken, Provider, Signal, TemplateRef } from "@angular/core";
-import { DateIso, EtatDeDocument, Ton, sansCommandesDeDirection } from "@starterlib/util";
+import { Ton, sansCommandesDeDirection } from "@starterlib/util";
+import { DateIso, EtatDeDocument } from "@starterlib/util/valeurs";
 /**
  * `pages` : page precedente et suivante, pour un tableau.
  * `suite` : « Afficher plus », pour une liste qui s'allonge.