@starterlib/ui 0.12.0 → 0.13.0

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

@@ -1861,6 +1861,123 @@ export declare class StFreshness {
     "perimee": "perimee";
   }, never, never, true, never>;
 }
+/** Une image a inspecter : son contenu, charge par l'application, et ce qu'elle montre, deja traduit. */
+export interface ImageAInspecter {
+  /** Le contenu (`Blob`), charge par l'application par `@starterlib/core`, sans cache. */
+  readonly contenu: Blob;
+  /** Ce que montre l'image (« Recto de la piece »), son nom au lecteur d'ecran et sa legende. */
+  readonly libelle: string;
+}
+/** Les bornes et les pas du zoom (1 : l'image ajustee a la largeur du panneau) et du contraste. */
+export declare const BORNES_DE_LA_VISIONNEUSE: {
+  readonly zoom: {
+    readonly min: 0.5;
+    readonly max: 4;
+    readonly pas: 0.25;
+  };
+  readonly contraste: {
+    readonly min: 0.5;
+    readonly max: 2;
+    readonly pas: 0.25;
+  };
+};
+type EtatDuPanneau = 'chargement' | 'prete' | 'illisible';
+/**
+ * Visionneuse de pieces (P08-17 d'Aplomb, DEC-090) : une image, ou deux cote a cote (recto et verso,
+ * piece et selfie), a inspecter a l'ecran SANS la telecharger.
+ *
+ * ```html
+ * <st-image-viewer libelle="Piece d'identite" [images]="pieces()" filigrane="M. Operateur, 14/10/2026" />
+ * ```
+ *
+ * - **Aucune adresse vers l'image** : le contenu (`Blob`, charge par l'application par
+ *   `@starterlib/core`, la piece etant servie sans cache par le serveur) est decode une fois en
+ *   `ImageBitmap`, dessine dans un canevas, puis le bitmap est ferme : une seule image decodee par
+ *   panneau, aucune `ObjectURL` (ni lien, ni `blob:` a autoriser dans la politique de securite du
+ *   contenu), aucun bouton de telechargement, aucun menu contextuel « Enregistrer l'image ». Les
+ *   canevas sont vides a la destruction, et a chaque changement d'images.
+ * - **Zoom, rotation, contraste** a la barre d'outils et au clavier, communs aux deux panneaux ; le
+ *   defilement de l'un suit celui de l'autre. Raccourcis : `+` et `-` (zoom), `r` et `Maj+r`
+ *   (rotation a droite et a gauche), `c` et `Maj+c` (contraste), `0` (vue d'origine) ; les fleches
+ *   font defiler le panneau qui a le focus. Chaque changement s'annonce poliment.
+ * - **Filigrane** (`filigrane` : identite de l'operateur et date, texte fourni) par-dessus chaque
+ *   panneau, a l'ecran comme a l'impression ; les images, elles, ne s'impriment pas.
+ * - Rien n'est stocke dans le navigateur.
+ */
+export declare class StImageViewer {
+  /** Une ou deux images ; au-dela de deux, les suivantes sont ignorees. */
+  readonly images: import("@angular/core").InputSignal<readonly ImageAInspecter[]>;
+  /** Le nom du groupe (« Piece d'identite de la demande 42 »). */
+  readonly libelle: import("@angular/core").InputSignal<string>;
+  /** Le texte du filigrane (identite de l'operateur, date), deja traduit ; `null` : aucun. */
+  readonly filigrane: import("@angular/core").InputSignal<string | null>;
+  protected readonly libelles: import("@angular/core").Signal<import("@starterlib/ui/donnees").LibellesDonnees>;
+  protected readonly bornes: {
+    readonly zoom: {
+      readonly min: 0.5;
+      readonly max: 4;
+      readonly pas: 0.25;
+    };
+    readonly contraste: {
+      readonly min: 0.5;
+      readonly max: 2;
+      readonly pas: 0.25;
+    };
+  };
+  protected readonly zoom: import("@angular/core").WritableSignal<number>;
+  protected readonly rotation: import("@angular/core").WritableSignal<number>;
+  protected readonly contraste: import("@angular/core").WritableSignal<number>;
+  protected readonly etats: import("@angular/core").WritableSignal<readonly EtatDuPanneau[]>;
+  private readonly dimensions;
+  private readonly ajustements;
+  private readonly toiles;
+  private readonly defilements;
+  protected readonly annonce: AnnonceLocale;
+  protected readonly identifiantDeLAide: string;
+  /** Une generation par jeu d'images : un decodage en retard ne dessine jamais dans un canevas reutilise. */
+  private generation;
+  private synchronisationEnCours;
+  protected readonly affichees: import("@angular/core").Signal<ImageAInspecter[]>;
+  protected readonly transformation: import("@angular/core").Signal<string>;
+  protected readonly filtre: import("@angular/core").Signal<string>;
+  /** Taille affichee du canevas et de sa boite (la boite echange ses cotes a 90 et 270 degres). */
+  protected readonly mesures: import("@angular/core").Signal<({
+    largeur: number;
+    hauteur: number;
+    boiteLargeur: number;
+    boiteHauteur: number;
+  } | null)[]>;
+  constructor();
+  private dessiner;
+  protected zoomer(sens: 1 | -1): void;
+  protected tourner(degres: 90 | -90): void;
+  protected contraster(sens: 1 | -1): void;
+  protected reinitialiser(): void;
+  protected pourcentage(valeur: number): number;
+  private annoncerLaVue;
+  protected auClavier(evenement: KeyboardEvent): void;
+  /** Le defilement d'un panneau, reporte en proportion sur l'autre (une seule fois, sans rebond). */
+  protected synchroniser(indice: number): void;
+  protected interdireLeMenu(evenement: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StImageViewer, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StImageViewer, "st-image-viewer", never, {
+    "images": {
+      "alias": "images";
+      "required": true;
+      "isSignal": true;
+    };
+    "libelle": {
+      "alias": "libelle";
+      "required": true;
+      "isSignal": true;
+    };
+    "filigrane": {
+      "alias": "filigrane";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /**
  * Les libelles de `@starterlib/ui/donnees` (P08-08) : le catalogue par point d'entree (AD-10, D154),
  * comme ceux de la navigation et des formulaires. La langue suit celle du dictionnaire du tronc.
@@ -1874,6 +1991,20 @@ export interface LibellesDonnees {
   readonly perimeeDepuis: (duree: string) => string;
   /** Le nom de la donnee devant son etat, espace finale comprise (« Positions : »). */
   readonly libelleDeLaDonnee: (libelle: string) => string;
+  /** `st-image-viewer` (P08-17) : le nom de sa barre d'outils. */
+  readonly outilsDeLaVisionneuse: string;
+  readonly reduire: string;
+  readonly agrandir: string;
+  readonly tournerAGauche: string;
+  readonly tournerADroite: string;
+  readonly moinsDeContraste: string;
+  readonly plusDeContraste: string;
+  readonly vueDOrigine: string;
+  /** Les raccourcis de la visionneuse, en aide visible sous la barre. */
+  readonly raccourcisDeLaVisionneuse: string;
+  /** L'annonce de la vue : zoom et contraste en pour cent, rotation en degres. */
+  readonly etatDeLaVue: (zoom: number, rotation: number, contraste: number) => string;
+  readonly imageIllisible: string;
 }
 export declare const LIBELLES_DONNEES_FR: LibellesDonnees;
 export declare const LIBELLES_DONNEES_EN: LibellesDonnees;

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

@@ -3470,6 +3470,19 @@ export declare class StFileUpload extends ContratDeChamp implements FormValueCon
   readonly nombreMax: import("@angular/core").InputSignal<number | null>;
   /** Texte du bouton de choix. `null` : « Choisir un fichier » ou « Choisir des fichiers ». */
   readonly libelleDuChoix: import("@angular/core").InputSignal<string | null>;
+  /**
+   * Appareil photo natif (P08-17 d'Aplomb) : l'attribut `capture` du champ natif, `environment`
+   * (camera arriere : une piece, un document) ou `user` (camera avant). `null` (defaut) : aucun
+   * attribut, et le selecteur du systeme d'un telephone propose deja l'appareil photo des que
+   * `accept` admet des images.
+   *
+   * ⚠️ Le televersement reste toujours possible (SPEC-ONBOARDING 28) : les navigateurs de bureau
+   * ignorent l'attribut et ouvrent le selecteur de fichiers ; Safari sur iOS propose la photo, la
+   * phototheque et les fichiers ; Chrome sur Android ouvre directement l'appareil photo. Une page
+   * qui veut garder les fichiers sur Android offre un second champ sans `capture`. Aucune capture
+   * en direct ni detection de presence : la photo prise est un fichier comme un autre.
+   */
+  readonly capture: import("@angular/core").InputSignal<"environment" | "user" | null>;
   /**
    * Ou en est chaque fichier, par `cleDeFichier`. Le composant AFFICHE ce trajet,
    * il ne le fait pas : `StTeleversement` de `@starterlib/core` s'en charge.
@@ -3580,6 +3593,11 @@ export declare class StFileUpload extends ContratDeChamp implements FormValueCon
       "required": false;
       "isSignal": true;
     };
+    "capture": {
+      "alias": "capture";
+      "required": false;
+      "isSignal": true;
+    };
     "etats": {
       "alias": "etats";
       "required": false;

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

@@ -99,5 +99,216 @@ export declare class StVirtualList<T = unknown> {
     };
   }, {}, ["ligne"], never, true, never>;
 }
+/**
+ * Une colonne de `st-virtual-table`, decrite en donnees : la forme de `ColonneDeTableau` de
+ * `st-data-table` (`@starterlib/ui/listes`), qu'une application passe telle quelle. Ce point
+ * d'entree n'importe aucun autre point d'entree du socle : la forme est redite, pas importee.
+ */
+export interface ColonneVirtuelle {
+  readonly cle: string;
+  readonly libelle: string;
+  /** `fin` pour les nombres et les montants. */
+  readonly alignement?: 'debut' | 'fin';
+  /** Seulement si le SERVEUR trie sur cette colonne : le tableau emet `tri`, il ne reordonne rien. */
+  readonly triable?: boolean;
+  /** Libelle lu mais non affiche : colonne d'actions. Jamais vide. */
+  readonly libelleMasque?: boolean;
+}
+export type SensDeTriVirtuel = 'croissant' | 'decroissant';
+export interface TriVirtuel {
+  readonly cle: string;
+  readonly sens: SensDeTriVirtuel;
+}
+/** Contexte d'un gabarit de cellule : la ligne, sa colonne et son rang dans le tableau ENTIER. */
+export interface ContexteDeCelluleVirtuelle<T> {
+  readonly $implicit: T;
+  readonly colonne: ColonneVirtuelle;
+  readonly index: number;
+}
+/**
+ * Rendu d'une cellule de `st-virtual-table` : la meme ecriture que pour `st-data-table`, type par
+ * `[stCelluleDe]` :
+ *
+ * ```html
+ * <ng-template stCellule="montant" [stCelluleDe]="lignes()" let-ligne>
+ *   {{ ligne.montant }}
+ * </ng-template>
+ * ```
+ */
+export declare class StCelluleVirtuelle<T> {
+  readonly cle: import("@angular/core").InputSignal<string>;
+  /** Sert seulement au typage du contexte ; nom de l'attribut, d'ou l'absence d'alias. */
+  readonly stCelluleDe: import("@angular/core").InputSignal<readonly T[] | null | undefined>;
+  readonly gabarit: TemplateRef<ContexteDeCelluleVirtuelle<T>>;
+  static ngTemplateContextGuard<T>(_directive: StCelluleVirtuelle<T>, _contexte: unknown): _contexte is ContexteDeCelluleVirtuelle<T>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StCelluleVirtuelle<any>, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<StCelluleVirtuelle<any>, "ng-template[stCellule]", never, {
+    "cle": {
+      "alias": "stCellule";
+      "required": true;
+      "isSignal": true;
+    };
+    "stCelluleDe": {
+      "alias": "stCelluleDe";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** Le prochain sens d'un tri : non trie, croissant, decroissant, puis non trie (ou croissant). */
+export declare function prochainSensVirtuel(actuel: SensDeTriVirtuel | null, ternaire?: boolean): SensDeTriVirtuel | null;
+/**
+ * Tableau virtualise (P08-19 d'Aplomb ; lot 267, sous la condition ecrite de `README.md`) : des
+ * centaines de milliers de lignes AFFICHEES ensemble, dont seules celles de la fenetre (et une
+ * marge) existent dans le document, sur un `<table>` NATIF. A l'echelle seulement : au MVP,
+ * `st-data-table` et la pagination par curseur suffisent.
+ *
+ * ```html
+ * <st-virtual-table legende="Journal technique" [colonnes]="colonnes" [lignes]="lignes()" cle="id"
+ *   [(tri)]="tri">
+ *   <ng-template stCellule="niveau" [stCelluleDe]="lignes()" let-ligne>{{ ligne.niveau }}</ng-template>
+ * </st-virtual-table>
+ * ```
+ *
+ * - **Un tableau, pas une grille** : le lecteur d'ecran le parcourt de cellule en cellule. La
+ *   table porte `aria-rowcount` (lignes de donnees et ligne d'en-tete), chaque ligne rendue son
+ *   `aria-rowindex` dans le tableau ENTIER : « ligne 4 201 sur 100 001 » alors que trente lignes
+ *   seulement existent. Legende obligatoire (`caption`), colonne d'en-tete de ligne (la premiere
+ *   par defaut, `enTeteDeLigne`), en-tete fige en haut de la fenetre.
+ * - **Tri PILOTE** : un clic sur une colonne `triable` emet `tri` (croissant, decroissant, puis non
+ *   trie ; `triTernaire` a faux revient a croissant), porte par `aria-sort` ; le tableau ne
+ *   reordonne JAMAIS les lignes, le serveur le fait.
+ * - **Selection par cle** (`selectionnable`, `[(selection)]`, `cle`) : une case par ligne, nommee
+ *   par l'en-tete de sa ligne ; la colonne porte `libelleDeSelection`. Aucune selection globale :
+ *   sur cent mille lignes, elle appartient au serveur. Une SEULE case dans l'ordre de tabulation
+ *   (tabindex itinerant) : fleches haut et bas, Debut et Fin passent de case en case et amenent la
+ *   ligne dans la fenetre ; sans cela, Tab parcourait cent mille cases et ne sortait jamais du
+ *   tableau.
+ * - **Hauteur de ligne FIXE** (`hauteurDeLigne`, pixels CSS) : le calcul de la fenetre en depend ;
+ *   le texte qui deborde se tronque dans sa cellule. Fenetre focalisable et nommee par la legende,
+ *   qui defile aux fleches et a Page suivante ; hauteur `hauteurDeFenetre` (`24rem` par defaut).
+ */
+export declare class StVirtualTable<T = unknown> {
+  readonly legende: import("@angular/core").InputSignal<string>;
+  readonly colonnes: import("@angular/core").InputSignal<readonly ColonneVirtuelle[]>;
+  readonly lignes: import("@angular/core").InputSignal<readonly T[]>;
+  /** La propriete qui identifie une ligne : suivi du rendu et selection. */
+  readonly cle: import("@angular/core").InputSignal<keyof T & string>;
+  /** La colonne d'en-tete de ligne (`th scope="row"`) ; la premiere par defaut. */
+  readonly enTeteDeLigne: import("@angular/core").InputSignal<string | null>;
+  readonly hauteurDeLigne: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Hauteur de la fenetre, longueur CSS : `24rem` par defaut. */
+  readonly hauteurDeFenetre: import("@angular/core").InputSignal<string>;
+  readonly tri: import("@angular/core").ModelSignal<TriVirtuel | null>;
+  readonly triTernaire: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly selectionnable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly selection: import("@angular/core").ModelSignal<readonly string[]>;
+  /** Le nom, lu, de la colonne des cases (« Selection »), deja traduit. */
+  readonly libelleDeSelection: import("@angular/core").InputSignal<string>;
+  private readonly cellules;
+  private readonly fenetre;
+  protected readonly identifiant: string;
+  /** Decalage de l'en-tete fige : la fenetre deplace son contenu, l'en-tete revient en haut. */
+  protected readonly decalageDeLEnTete: import("@angular/core").WritableSignal<number>;
+  protected readonly hauteur: import("@angular/core").Signal<number>;
+  /** Marges de rendu : cinq lignes au moins de part et d'autre, dix au plus (60 lignes au plus). */
+  protected readonly margeMin: import("@angular/core").Signal<number>;
+  protected readonly margeMax: import("@angular/core").Signal<number>;
+  protected readonly colonneEnTete: import("@angular/core").Signal<string | null>;
+  protected readonly gabarits: import("@angular/core").Signal<Map<string, TemplateRef<ContexteDeCelluleVirtuelle<T>>>>;
+  private readonly choisies;
+  private readonly hote;
+  private readonly document;
+  /** La case active (tabindex itinerant) et la plage des lignes rendues. */
+  private readonly rangActif;
+  private readonly plageRendue;
+  /** La case dans l'ordre de tabulation : l'active si elle est rendue, sinon la premiere rendue. */
+  protected readonly rangTabulable: import("@angular/core").Signal<number>;
+  protected readonly suivi: (_rang: number, ligne: T) => unknown;
+  constructor();
+  protected cleDe(ligne: T): string;
+  /** La valeur brute d'une cellule sans gabarit : un texte, un nombre ou un booleen ; rien d'autre. */
+  protected valeur(ligne: T, colonne: ColonneVirtuelle): string;
+  protected identifiantDeLigne(rang: number): string;
+  protected triDe(colonne: ColonneVirtuelle): 'ascending' | 'descending' | 'none' | null;
+  protected trier(colonne: ColonneVirtuelle): void;
+  protected estChoisie(ligne: T): boolean;
+  protected basculer(ligne: T): void;
+  /** La case devient l'active quand elle recoit le focus (clic, Tab). */
+  protected activer(rang: number): void;
+  /** Fleches haut et bas, Debut et Fin : la case voisine, ou la premiere et la derniere. */
+  protected naviguer(evenement: KeyboardEvent, rang: number): void;
+  private caseDu;
+  /** Focalise la case d'un rang des qu'elle est rendue (quelques images apres un defilement). */
+  private focaliser;
+  /** Amene une ligne dans la fenetre (« aller a la ligne 42 000 »). */
+  allerA(rang: number, comportement?: ScrollBehavior): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StVirtualTable<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StVirtualTable<any>, "st-virtual-table", never, {
+    "legende": {
+      "alias": "legende";
+      "required": true;
+      "isSignal": true;
+    };
+    "colonnes": {
+      "alias": "colonnes";
+      "required": true;
+      "isSignal": true;
+    };
+    "lignes": {
+      "alias": "lignes";
+      "required": true;
+      "isSignal": true;
+    };
+    "cle": {
+      "alias": "cle";
+      "required": true;
+      "isSignal": true;
+    };
+    "enTeteDeLigne": {
+      "alias": "enTeteDeLigne";
+      "required": false;
+      "isSignal": true;
+    };
+    "hauteurDeLigne": {
+      "alias": "hauteurDeLigne";
+      "required": false;
+      "isSignal": true;
+    };
+    "hauteurDeFenetre": {
+      "alias": "hauteurDeFenetre";
+      "required": false;
+      "isSignal": true;
+    };
+    "tri": {
+      "alias": "tri";
+      "required": false;
+      "isSignal": true;
+    };
+    "triTernaire": {
+      "alias": "triTernaire";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectionnable": {
+      "alias": "selectionnable";
+      "required": false;
+      "isSignal": true;
+    };
+    "selection": {
+      "alias": "selection";
+      "required": false;
+      "isSignal": true;
+    };
+    "libelleDeSelection": {
+      "alias": "libelleDeSelection";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "tri": "triChange";
+    "selection": "selectionChange";
+  }, ["cellules"], never, true, never>;
+}
 
 export {};

package/virtuel/README.md

@@ -33,6 +33,45 @@ Ce qu'elle n'est pas : une grille editable (`st-data-grid`) ni une liste de tran
 - `allerA(rang)` : amene une ligne dans la fenetre.
 - Hauteur de la fenetre : l'entree `hauteurDeFenetre`, une longueur CSS (`24rem` par defaut).
 
+## `st-virtual-table` (P08-19 d'Aplomb)
+
+Meme condition d'entree, aux volumes de l'echelle : des centaines de milliers de lignes d'un
+journal technique ou d'un audit, affichees ensemble (au MVP, `st-data-table` et la pagination par
+curseur suffisent ; ecran nomme : P13-11).
+
+```html
+<st-virtual-table
+  legende="Journal technique"
+  [colonnes]="colonnes"
+  [lignes]="lignes()"
+  cle="id"
+  [(tri)]="tri"
+  selectionnable
+  libelleDeSelection="Selection"
+  [(selection)]="choisies"
+>
+  <ng-template stCellule="niveau" [stCelluleDe]="lignes()" let-ligne
+    >{{ ligne.niveau }}</ng-template
+  >
+</st-virtual-table>
+```
+
+- Un `<table>` NATIF, pas une grille : `caption` (la `legende`, qui nomme aussi la fenetre),
+  `aria-rowcount` sur la table (lignes et ligne d'en-tete), `aria-rowindex` sur chaque ligne rendue
+  (rang dans le tableau ENTIER), en-tete de ligne `th scope="row"` (la premiere colonne par defaut,
+  `enTeteDeLigne`), en-tete fige en haut de la fenetre.
+- Colonnes : la forme de `ColonneDeTableau` de `st-data-table` (`ColonneVirtuelle` : `cle`,
+  `libelle`, `alignement`, `triable`, `libelleMasque`), redite et non importee : ce point d'entree
+  n'en importe aucun autre. Cellules : `ng-template [stCellule]`, la meme ecriture.
+- Tri PILOTE (`[(tri)]`, `triTernaire`) : un clic emet la demande, `aria-sort` la porte ; les lignes
+  ne sont jamais reordonnees, le serveur le fait.
+- Selection par cle (`selectionnable`, `[(selection)]`, `cle`, `libelleDeSelection`) : une case par
+  ligne, nommee par l'en-tete de sa ligne ; aucune selection globale (elle appartient au serveur).
+- `hauteurDeLigne` FIXE (44 par defaut ; nulle ou negative refusee), `hauteurDeFenetre` (`24rem`),
+  `allerA(rang)`. Au plus soixante lignes dans le document (marges de cinq a dix lignes).
+- Essais : `st-virtual-table.spec.ts` (cent mille lignes, au plus soixante rendues, rang et total,
+  tri pilote, selection par cle, accessibilite) ; banc : cent mille lignes fictives.
+
 ## Gardes et poids
 
 - Point d'entree a lui : il traine `@angular/cdk/scrolling` et RIEN d'autre (`pnpm paquets:check`,