@starterlib/ui 0.10.12 → 0.10.14

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

@@ -3,7 +3,7 @@ import { AnneesDuCalendrier, ContratDeChamp, ContratDeChampABornes, ControleDeSa
 import * as i0 from "@angular/core";
 import { InjectionToken, Provider, Signal } from "@angular/core";
 import { AnnonceLocale, CatalogueDuPointDEntree, LibellesUi } from "@starterlib/ui";
-import { DateIso, FrequenceDeRecurrence, HeureIso, PlageDeDates, Recurrence } from "@starterlib/util/valeurs";
+import { DateIso, FrequenceDeRecurrence, HeureIso, MoisIso, PartieDeDate, PlageDeDates, Recurrence } from "@starterlib/util/valeurs";
 /**
  * L'envoi d'un formulaire valide. Il rend les refus du serveur, que Signal Forms place sous leur
  * champ (`fieldTree`) et au recapitulatif, puis efface des que la valeur du champ change ; rien
@@ -257,6 +257,14 @@ export interface LibellesFormulaires {
   readonly derniereEcheance: string;
   readonly nombreDEcheances: string;
   readonly recapitulatif: string;
+  /** Les cases de `st-memorable-date` (lot 267) ; l'annee est celle du tronc (`annee`). */
+  readonly jour: string;
+  readonly mois: string;
+  /** L'exemple dit AVANT la saisie, dans l'ordre de la langue (« 27 3 1990 »). */
+  readonly exempleDeDateMemorable: (exemple: string) => string;
+  /** Les parties qui manquent, dans l'ordre de la langue : jamais les trois (le champ est vide). */
+  readonly dateMemorableIncomplete: (manque: readonly PartieDeDate[]) => string;
+  readonly dateMemorableInexistante: (exemple: string) => string;
 }
 export declare const LIBELLES_FORMULAIRES_FR: LibellesFormulaires;
 export declare const LIBELLES_FORMULAIRES_EN: LibellesFormulaires;
@@ -828,6 +836,129 @@ export declare class StDateRange extends ContratDeChamp implements FormValueCont
     "value": "valueChange";
   }, never, never, true, never>;
 }
+/**
+ * Mois d'une annee : un champ texte, au format de la langue courante (`mm/aaaa`). Composant bonus du
+ * lot 267 : sa condition d'entree, son poids et ce qu'il n'est pas sont dans `README.md` a cote.
+ *
+ * ```html
+ * <st-month-field libelle="Periode du releve" [formField]="releve.periode" />
+ * ```
+ *
+ * Le modele est un mois ISO `AAAA-MM` ou `null`, jamais un objet `Date` : un releve de septembre n'a
+ * ni jour ni fuseau.
+ *
+ * ⚠️ **Un champ texte, jamais `type="month"`** (D7 de l'audit de la vague 3, comme les dates et les
+ * heures) : le champ natif n'existe ni dans Firefox ni dans Safari de bureau, et suit la langue du
+ * NAVIGATEUR. Le format attendu et un exemple sont dits en aide, AVANT la saisie.
+ *
+ * ⚠️ **Rien n'est devine** (`lireMois`) : l'annee s'ecrit en quatre chiffres ; « 092026 » se lit
+ * 09/2026 (le pave numerique d'un telephone n'a pas de barre). Une saisie illisible garde le texte,
+ * vide le modele et rend le formulaire invalide, comme `st-date-field`.
+ */
+export declare class StMonthField extends ContratDeChamp implements FormValueControl<MoisIso | null> {
+  protected readonly libelles: import("@angular/core").Signal<import("@starterlib/ui").LibellesUi>;
+  private readonly locale;
+  readonly value: import("@angular/core").ModelSignal<string | null>;
+  readonly autocomplete: import("@angular/core").InputSignal<string | null>;
+  /**
+   * Quitte au moins une fois. Relie a un formulaire, `touched` le dit ; employe seul, rien ne le
+   * dirait, et une saisie illisible ne s'afficherait jamais.
+   */
+  protected readonly quitte: import("@angular/core").WritableSignal<boolean>;
+  protected readonly saisie: import("@angular/forms/signals").TransformedValueSignal<string>;
+  /** La saisie est-elle illisible ? Le modele vaut alors `null`, comme un champ vide. */
+  readonly lectureInvalide: import("@angular/core").Signal<boolean>;
+  protected readonly aideLue: import("@angular/core").Signal<string>;
+  protected readonly erreursAffichees: import("@angular/core").Signal<readonly import("@starterlib/ui/saisie").ErreurAffichable[]>;
+  protected surSaisie(evenement: Event): void;
+  protected aLaSortieDuChamp(): void;
+  private formater;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StMonthField, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StMonthField, "st-month-field", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "autocomplete": {
+      "alias": "autocomplete";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+  }, never, never, true, never>;
+}
+/**
+ * Date memorable : jour, mois et annee en trois cases numeriques, dans l'ordre de la langue
+ * courante. Composant bonus du lot 267 : sa condition d'entree, son poids et ce qu'il n'est pas sont
+ * dans `README.md` a cote.
+ *
+ * ```html
+ * <st-memorable-date libelle="Date de naissance" naissance [formField]="identite.naissance" />
+ * ```
+ *
+ * Une date qu'une personne CONNAIT (sa naissance, la delivrance d'un document) se tape plus vite et
+ * plus surement qu'elle ne se cherche dans un calendrier, qui fait remonter decennie par decennie.
+ * Le modele est une date ISO `AAAA-MM-JJ` ou `null`, jamais un objet `Date`.
+ *
+ * - Trois cases etiquetees (« Jour », « Mois », « Annee ») dans un `fieldset` dont la legende est
+ *   la question ; l'exemple est dit AVANT la saisie, dans l'ordre de la langue (« 27 3 1990 »).
+ * - `naissance` pose `autocomplete="bday-day"`, `bday-month`, `bday-year` : le navigateur remplit.
+ * - Rien n'est devine : l'annee s'ecrit en quatre chiffres ; une date incomplete dit la partie qui
+ *   manque, une date qui n'existe pas (31/02) le dit, et le modele reste `null` dans les deux cas.
+ */
+export declare class StMemorableDate extends ContratDeChamp implements FormValueControl<DateIso | null> {
+  private readonly libellesDuTronc;
+  private readonly locale;
+  private readonly catalogue;
+  protected readonly libelles: import("@angular/core").Signal<import("@starterlib/ui/formulaires").LibellesFormulaires>;
+  readonly value: import("@angular/core").ModelSignal<string | null>;
+  /** Une date de naissance : le navigateur peut remplir les trois cases. */
+  readonly naissance: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  private readonly cases;
+  protected readonly identifiant: string;
+  /** Quitte au moins une fois (le groupe entier) : une date incomplete se dit alors. */
+  protected readonly quitte: import("@angular/core").WritableSignal<boolean>;
+  protected readonly saisie: import("@angular/forms/signals").TransformedValueSignal<string>;
+  protected readonly parties: import("@angular/core").Signal<Record<PartieDeDate, string>>;
+  /** Les trois cases, dans l'ordre de la langue. */
+  protected readonly ordre: import("@angular/core").Signal<{
+    partie: PartieDeDate;
+    libelle: string;
+    longueur: number;
+    autocomplete: string;
+  }[]>;
+  /** La saisie est-elle illisible ou incomplete ? Le modele vaut alors `null`. */
+  readonly lectureInvalide: import("@angular/core").Signal<boolean>;
+  protected readonly aideLue: import("@angular/core").Signal<string>;
+  protected readonly erreursAffichees: import("@angular/core").Signal<readonly import("@starterlib/ui/saisie").ErreurAffichable[]>;
+  protected readonly enErreur: import("@angular/core").Signal<boolean>;
+  /** Signal Forms amene le focus sur la premiere case, dans l'ordre de la langue. */
+  focus(options?: FocusOptions): void;
+  protected surSaisie(partie: PartieDeDate, evenement: Event): void;
+  /** Le groupe n'est quitte que si le focus en SORT : passer du jour au mois n'est pas partir. */
+  protected aLaSortie(evenement: FocusEvent): void;
+  private libelleDe;
+  private exemple;
+  private lire;
+  private formater;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StMemorableDate, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StMemorableDate, "st-memorable-date", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "naissance": {
+      "alias": "naissance";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+  }, never, never, true, never>;
+}
 /**
  * Heure d'horloge : un champ texte, au format de la langue courante.
  *

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

@@ -81,6 +81,8 @@ export declare function messageDErreur(erreur: ErreurAffichable, libelles: Libel
 export declare function libelleDePartie(libelles: LibellesUi, partie: string, nature?: string): string;
 /** Le motif a taper dans la langue courante : `jj/mm/aaaa`. */
 export declare function motifLocal(libelles: LibellesUi, locale: string): string;
+/** Le motif d'un mois dans la langue courante : `mm/aaaa` (`st-month-field`, lot 267). */
+export declare function motifDuMoisLocal(libelles: LibellesUi, locale: string): string;
 /** Le motif d'une heure dans la langue courante : `hh:mm`, `hh:mm AM/PM`. */
 export declare function motifDHeureLocal(libelles: LibellesUi, locale: string, secondes?: boolean): string;
 /**

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

@@ -0,0 +1,103 @@
+import * as i0 from "@angular/core";
+import { TemplateRef, TrackByFunction } from "@angular/core";
+/** Contexte du gabarit d'une ligne : l'element, et son rang dans la liste ENTIERE (a partir de 0). */
+export interface ContexteDeLigneVirtuelle<T> {
+  readonly $implicit: T;
+  readonly index: number;
+}
+/**
+ * Le gabarit d'une ligne de `st-virtual-list`.
+ *
+ * ```html
+ * <ng-template [stVirtualItem]="operations()" let-operation let-rang="index">
+ *   {{ operation.libelle }}
+ * </ng-template>
+ * ```
+ *
+ * Les elements lies a la directive ne servent qu'a TYPER le gabarit (comme `ngForOf`) : sans eux,
+ * l'element de la ligne est `unknown` pour le compilateur des gabarits stricts.
+ */
+export declare class StVirtualItem<T = unknown> {
+  readonly typage: import("@angular/core").InputSignal<"" | readonly T[]>;
+  readonly gabarit: TemplateRef<ContexteDeLigneVirtuelle<T>>;
+  static ngTemplateContextGuard<T>(_directive: StVirtualItem<T>, _contexte: unknown): _contexte is ContexteDeLigneVirtuelle<T>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StVirtualItem<any>, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<StVirtualItem<any>, "ng-template[stVirtualItem]", never, {
+    "typage": {
+      "alias": "stVirtualItem";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Liste virtuelle : plusieurs milliers de lignes AFFICHEES ensemble, dont seules celles de la fenetre
+ * (et une marge) existent dans le document. Bonus du lot 267, sous condition ecrite (`README.md`) :
+ * une liste paginee par curseur n'en a pas besoin.
+ *
+ * ```html
+ * <st-virtual-list libelle="Operations de septembre" [elements]="operations()" [suivi]="parId">
+ *   <ng-template [stVirtualItem]="operations()" let-operation>{{ operation.libelle }}</ng-template>
+ * </st-virtual-list>
+ * ```
+ *
+ * - **Le rang et le total sont dits** : chaque ligne porte `aria-posinset` et `aria-setsize`, un
+ *   lecteur d'ecran annonce « 37 sur 10 000 » alors que trente lignes seulement existent.
+ * - **La fenetre est atteignable au clavier** : elle prend le focus (`tabindex="0"`), porte le nom
+ *   de la liste, et defile aux fleches, a Page suivante et a Fin, sans contenu focalisable requis.
+ * - **Hauteur de ligne FIXE** (`hauteurDeLigne`, en pixels CSS) : c'est elle qui rend le calcul de
+ *   la fenetre exact sans mesurer le document a chaque defilement. Une ligne plus haute que prevu est
+ *   coupee ; le texte qui peut s'allonger (agrandi a 200 %) se tronque dans la ligne, et le gabarit
+ *   en dit l'integralite par son nom accessible ou une page de detail.
+ * - **Hauteur de la fenetre** : `hauteurDeFenetre`, une longueur CSS (`24rem` par defaut), posee sur
+ *   l'hote en variable interne (`--st-virtual-list-hauteur`, sans promesse : seule l'entree en est une).
+ */
+export declare class StVirtualList<T = unknown> {
+  readonly elements: import("@angular/core").InputSignal<readonly T[]>;
+  /** Le nom de la liste, dit a l'entree dans la fenetre : « Operations de septembre ». */
+  readonly libelle: import("@angular/core").InputSignal<string>;
+  readonly hauteurDeLigne: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Hauteur de la fenetre, longueur CSS : `24rem` par defaut, `12rem` pour un apercu. */
+  readonly hauteurDeFenetre: import("@angular/core").InputSignal<string>;
+  /** Le suivi des lignes ; par defaut le rang (une liste qui ne bouge pas). */
+  readonly suivi: import("@angular/core").InputSignal<TrackByFunction<T>>;
+  protected readonly ligne: import("@angular/core").Signal<StVirtualItem<T>>;
+  private readonly fenetre;
+  /** Hauteur valide : une hauteur nulle ou negative ferait rendre la liste entiere. */
+  protected readonly hauteur: import("@angular/core").Signal<number>;
+  /** Marges de rendu : cinq lignes au moins de part et d'autre, dix au plus. */
+  protected readonly margeMin: import("@angular/core").Signal<number>;
+  protected readonly margeMax: import("@angular/core").Signal<number>;
+  /** Amene une ligne dans la fenetre (« aller a la ligne 4 200 »). */
+  allerA(rang: number, comportement?: ScrollBehavior): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StVirtualList<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StVirtualList<any>, "st-virtual-list", never, {
+    "elements": {
+      "alias": "elements";
+      "required": true;
+      "isSignal": true;
+    };
+    "libelle": {
+      "alias": "libelle";
+      "required": true;
+      "isSignal": true;
+    };
+    "hauteurDeLigne": {
+      "alias": "hauteurDeLigne";
+      "required": false;
+      "isSignal": true;
+    };
+    "hauteurDeFenetre": {
+      "alias": "hauteurDeFenetre";
+      "required": false;
+      "isSignal": true;
+    };
+    "suivi": {
+      "alias": "suivi";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["ligne"], never, true, never>;
+}
+
+export {};

package/virtuel/README.md

@@ -0,0 +1,46 @@
+# `@starterlib/ui/virtuel` — `st-virtual-list`, bonus sous condition ecrite (lot 267)
+
+## Condition d'entree
+
+Une liste REELLE au-dela de la pagination par curseur : plusieurs milliers de lignes AFFICHEES
+ensemble par un ecran nomme (un journal d'operations a parcourir d'un trait, une liste de
+rapprochement). Construite le 2026-10-01 sur decision du proprietaire (vague 4) ; la condition
+reste la regle de son emploi : une liste paginee par curseur (`st-list`, `st-data-table` de
+`@starterlib/ui/listes`) n'en a pas besoin, et le backend ne rend pas de page plus longue que sa
+borne.
+
+Ce qu'elle n'est pas : une grille editable (`st-data-grid`) ni une liste de transfert
+(`st-transfer-list`), qui restent conditionnees ; ni un tableau (pas de colonnes ni de tri).
+
+## API
+
+```html
+<st-virtual-list libelle="Operations de septembre" [elements]="operations()" [suivi]="parId">
+  <ng-template [stVirtualItem]="operations()" let-operation let-rang="index">
+    {{ operation.libelle }}
+  </ng-template>
+</st-virtual-list>
+```
+
+- `elements` : le tableau entier ; seules les lignes de la fenetre (et cinq a dix de marge) existent
+  dans le document.
+- `libelle` : le nom de la fenetre (`role="region"`, focalisable : elle defile aux fleches, a Page
+  suivante et a Fin, sans contenu focalisable requis).
+- Chaque ligne porte `aria-posinset` et `aria-setsize` : « 37 sur 10 000 ».
+- `hauteurDeLigne` : en pixels CSS, FIXE (44 par defaut) ; une valeur nulle ou negative est refusee
+  (signalee en developpement, 44 retenus) : elle ferait rendre la liste entiere.
+- `suivi` : la fonction de suivi des lignes (le rang par defaut).
+- `allerA(rang)` : amene une ligne dans la fenetre.
+- Hauteur de la fenetre : l'entree `hauteurDeFenetre`, une longueur CSS (`24rem` par defaut).
+
+## Gardes et poids
+
+- Point d'entree a lui : il traine `@angular/cdk/scrolling` et RIEN d'autre (`pnpm paquets:check`,
+  au sous-chemin exact) ; il n'importe aucun autre point d'entree du socle, et aucun ne l'importe.
+  Partage separement en federation (`partageDuSocle`, vingt-huit specificateurs en 0.10.14).
+- Poids (gzip 9) : `starterlib-ui-virtuel.mjs`, 2 685 octets ; le pair `@angular/cdk/scrolling`
+  (22.2.0), 9 002 octets avant elagage, qu'une page paie a son premier emploi. Le tronc n'en recoit
+  rien.
+- Essais : `st-virtual-list.spec.ts` (fenetre seule rendue sur 10 000, rang et total, fenetre
+  nommee et focalisable, hauteur fixe et hauteur invalide refusee, total suivi, axe) ; banc en vrai
+  navigateur `banc/virtuel.navigateur.spec.ts` (defilement jusqu'a la derniere ligne).