@starterlib/ui 0.7.2 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starterlib/ui",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Bibliotheque de composants st-* du socle frontal starter, sur CDK et Aria.",
   "license": "UNLICENSED",
   "sideEffects": false,
@@ -25,8 +25,8 @@
     "@angular/forms": "^22.1.0",
     "@angular/cdk": "^22.1.0",
     "@angular/aria": "^22.1.0",
-    "@starterlib/tokens": "^0.7.0",
-    "@starterlib/util": "^0.7.0"
+    "@starterlib/tokens": "^0.8.0",
+    "@starterlib/util": "^0.8.0"
   },
   "peerDependenciesMeta": {
     "@angular/cdk": {
@@ -49,6 +49,14 @@
       "types": "./types/starterlib-ui.d.ts",
       "default": "./fesm2022/starterlib-ui.mjs"
     },
+    "./arbre": {
+      "types": "./types/starterlib-ui-arbre.d.ts",
+      "default": "./fesm2022/starterlib-ui-arbre.mjs"
+    },
+    "./donnees": {
+      "types": "./types/starterlib-ui-donnees.d.ts",
+      "default": "./fesm2022/starterlib-ui-donnees.mjs"
+    },
     "./formulaires": {
       "types": "./types/starterlib-ui-formulaires.d.ts",
       "default": "./fesm2022/starterlib-ui-formulaires.mjs"
@@ -57,6 +65,30 @@
       "types": "./types/starterlib-ui-interactions.d.ts",
       "default": "./fesm2022/starterlib-ui-interactions.mjs"
     },
+    "./libelles-en": {
+      "types": "./types/starterlib-ui-libelles-en.d.ts",
+      "default": "./fesm2022/starterlib-ui-libelles-en.mjs"
+    },
+    "./listes": {
+      "types": "./types/starterlib-ui-listes.d.ts",
+      "default": "./fesm2022/starterlib-ui-listes.mjs"
+    },
+    "./navigation": {
+      "types": "./types/starterlib-ui-navigation.d.ts",
+      "default": "./fesm2022/starterlib-ui-navigation.mjs"
+    },
+    "./onglets": {
+      "types": "./types/starterlib-ui-onglets.d.ts",
+      "default": "./fesm2022/starterlib-ui-onglets.mjs"
+    },
+    "./saisie": {
+      "types": "./types/starterlib-ui-saisie.d.ts",
+      "default": "./fesm2022/starterlib-ui-saisie.mjs"
+    },
+    "./selection": {
+      "types": "./types/starterlib-ui-selection.d.ts",
+      "default": "./fesm2022/starterlib-ui-selection.mjs"
+    },
     "./surfaces": {
       "types": "./types/starterlib-ui-surfaces.d.ts",
       "default": "./fesm2022/starterlib-ui-surfaces.mjs"

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

@@ -0,0 +1,51 @@
+import * as _angular_core from '@angular/core';
+
+/** Un noeud, decrit en donnees. */
+interface NoeudDArbre {
+    /** Identifiant stable : il porte la selection et le depliage. */
+    readonly valeur: string;
+    readonly libelle: string;
+    readonly enfants?: readonly NoeudDArbre[];
+    readonly desactive?: boolean;
+}
+/**
+ * Arbre de donnees hierarchiques, sur `@angular/aria/tree` : dossiers, plan
+ * comptable, organisation.
+ *
+ * ```html
+ * <st-tree etiquette="Plan comptable" [noeuds]="comptes" [(selection)]="compte" [(deplies)]="ouverts" />
+ * ```
+ *
+ * ⚠️ **Jamais pour la navigation du site** (UX-17) : une navigation est une liste
+ * de liens, que le lecteur d'ecran liste et parcourt comme telle. Un arbre se
+ * parcourt aux fleches, un element a la fois, et ses elements ne sont pas des
+ * liens. Le mode « navigation » de la primitive n'est donc pas expose.
+ *
+ * ⚠️ **Les noeuds sont rendus par le composant, a partir de donnees** (FE-6) : la
+ * primitive relie un element a son arbre par injection, et un contenu projete
+ * garde l'injecteur de l'endroit ou il est ecrit — lecon de `st-menu`.
+ *
+ * Clavier de la primitive : fleches haut et bas entre les elements visibles,
+ * droite pour deplier ou entrer, gauche pour replier ou remonter, Debut et Fin,
+ * recherche a la frappe ; Espace ou Entree choisit. Selection et depliage sont des
+ * listes de VALEURS, lisibles et restaurables par l'application.
+ */
+declare class StTree {
+    /** Nom de l'arbre, lu a l'entree. Obligatoire. */
+    readonly etiquette: _angular_core.InputSignal<string>;
+    readonly noeuds: _angular_core.InputSignal<readonly NoeudDArbre[]>;
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly selection: _angular_core.ModelSignal<readonly string[]>;
+    readonly deplies: _angular_core.ModelSignal<readonly string[]>;
+    /** La primitive attend un tableau modifiable ; le modele est en lecture seule. */
+    protected readonly valeursChoisies: _angular_core.Signal<string[]>;
+    private readonly ensembleDeplie;
+    protected estDeplie(noeud: NoeudDArbre): boolean;
+    protected surDepliage(noeud: NoeudDArbre, deplie: boolean): void;
+    protected surSelection(valeurs: readonly string[]): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StTree, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StTree, "st-tree", never, { "etiquette": { "alias": "etiquette"; "required": true; "isSignal": true; }; "noeuds": { "alias": "noeuds"; "required": true; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "deplies": { "alias": "deplies"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "deplies": "depliesChange"; }, never, never, true, never>;
+}
+
+export { StTree };
+export type { NoeudDArbre };

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

@@ -0,0 +1,228 @@
+import * as _angular_core from '@angular/core';
+import { AnnonceLocale } from '@starterlib/ui';
+import { Montant, TonSemantique } from '@starterlib/util';
+
+type TypeMasque = 'iban' | 'carte' | 'telephone';
+/**
+ * Identifiant sensible, masque par defaut.
+ *
+ * ⚠️ La valeur masquee porte un `aria-label` en toutes lettres (« IBAN se
+ * terminant par 2606 ») : plusieurs lecteurs d'ecran epellent une suite de
+ * puces caractere par caractere, ce qui est a la fois illisible et interminable.
+ *
+ * La revelation est un EVENEMENT METIER : elle se journalise cote appelant par
+ * la sortie `revelation`. La valeur revelee, elle, ne part jamais dans un
+ * journal.
+ */
+declare class StMasked {
+    private readonly libelles;
+    readonly valeur: _angular_core.InputSignal<string>;
+    readonly type: _angular_core.InputSignal<TypeMasque>;
+    readonly revele: _angular_core.ModelSignal<boolean>;
+    readonly revelationAutorisee: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly dureeDeRevelationEnSecondes: _angular_core.InputSignal<number>;
+    /** `null` : les textes viennent du dictionnaire de l'application. */
+    readonly libelleAfficher: _angular_core.InputSignal<string | null>;
+    readonly libelleMasquer: _angular_core.InputSignal<string | null>;
+    readonly revelation: _angular_core.OutputEmitterRef<{
+        type: TypeMasque;
+    }>;
+    /**
+     * ⚠️ Par `AnnonceLocale`, et non par un signal pose directement. La 0.2.0
+     * reposait « Valeur masquee a nouveau » a l'identique : aucune mutation, donc
+     * une seconde remise en masque jamais annoncee.
+     */
+    protected readonly annonce: AnnonceLocale;
+    private minuterie;
+    constructor();
+    protected readonly valeurMasquee: _angular_core.Signal<string>;
+    protected readonly valeurAffichee: _angular_core.Signal<string>;
+    /**
+     * La nature et la tournure viennent du dictionnaire : l'ordre des mots change
+     * d'une langue a l'autre, « IBAN se terminant par 2606 » contre « IBAN ending
+     * in 2606 ». Une chaine a trous ne suffirait pas.
+     */
+    protected readonly nomAccessible: _angular_core.Signal<string>;
+    protected readonly libelleDuBouton: _angular_core.Signal<string>;
+    private valeurLisible;
+    protected basculer(): void;
+    private masquer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StMasked, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StMasked, "st-masked", never, { "valeur": { "alias": "valeur"; "required": true; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "revele": { "alias": "revele"; "required": false; "isSignal": true; }; "revelationAutorisee": { "alias": "revelationAutorisee"; "required": false; "isSignal": true; }; "dureeDeRevelationEnSecondes": { "alias": "dureeDeRevelationEnSecondes"; "required": false; "isSignal": true; }; "libelleAfficher": { "alias": "libelleAfficher"; "required": false; "isSignal": true; }; "libelleMasquer": { "alias": "libelleMasquer"; "required": false; "isSignal": true; }; }, { "revele": "reveleChange"; "revelation": "revelation"; }, never, never, true, never>;
+}
+
+/**
+ * Somme d'argent.
+ *
+ * Le montant entre sous forme d'unites mineures entieres : un nombre a virgule
+ * flottante ne represente pas exactement 0,10 EUR, et les erreurs s'accumulent.
+ * La conversion n'a lieu qu'a l'instant du rendu.
+ *
+ * ⚠️ Le signe negatif est TOUJOURS rendu en texte. La couleur ne fait que le
+ * renforcer : un daltonien, une impression en noir et blanc ou un theme a fort
+ * contraste ne doivent jamais transformer un debit en credit.
+ */
+declare class StMoney {
+    private readonly locale;
+    readonly valeur: _angular_core.InputSignal<Montant>;
+    readonly signeExplicite: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly sansDevise: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly taille: _angular_core.InputSignal<"sm" | "md" | "lg" | "xl">;
+    protected readonly signe: _angular_core.Signal<"negatif" | "positif" | "nul">;
+    protected readonly texte: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StMoney, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StMoney, "st-money", never, { "valeur": { "alias": "valeur"; "required": true; "isSignal": true; }; "signeExplicite": { "alias": "signeExplicite"; "required": false; "isSignal": true; }; "sansDevise": { "alias": "sansDevise"; "required": false; "isSignal": true; }; "taille": { "alias": "taille"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type FormatDeDate = 'court' | 'long' | 'date-heure' | 'heure';
+/**
+ * Date rendue dans la locale et le fuseau de l'application.
+ *
+ * ⚠️ La locale et le fuseau sont EXPLICITES, jamais deduits de l'environnement
+ * d'execution. Un rendu serveur et un rendu navigateur qui ne s'accordent pas
+ * produisent deux textes differents, et l'hydratation casse. Le rendu serveur
+ * est ecarte en version 1, mais la compatibilite reste gardee a cout nul.
+ *
+ * Le format court garde un nom accessible en toutes lettres : « 12/09/26 » est
+ * ambigu a l'oral, et l'ordre jour-mois n'est pas universel.
+ */
+declare class StDate {
+    private readonly locale;
+    private readonly fuseauParDefaut;
+    readonly valeur: _angular_core.InputSignal<string | Date>;
+    readonly format: _angular_core.InputSignal<FormatDeDate>;
+    readonly fuseau: _angular_core.InputSignal<string | null>;
+    /**
+     * Une DATE DE CALENDRIER (`2026-09-12`) n'est pas un instant : une date de
+     * naissance, une echeance ou un jour de valeur n'ont pas d'heure, et ne
+     * doivent pas changer de jour selon le fuseau de qui les regarde.
+     *
+     * ⚠️ Le piege est dans la norme : `new Date('2026-09-12')` vaut minuit UTC,
+     * donc le 11 septembre partout a l'ouest de Greenwich. Une echeance affichee
+     * la veille est un defaut que personne ne voit depuis l'Europe.
+     */
+    private readonly estDateDeCalendrier;
+    private readonly date;
+    protected readonly estValide: _angular_core.Signal<boolean>;
+    /**
+     * Le fuseau de rendu. Pour une date de calendrier, c'est UTC : la valeur a
+     * ete construite a minuit UTC, la relire en UTC rend donc le jour ecrit.
+     */
+    private readonly fuseauDeRendu;
+    /**
+     * Une date de calendrier porte `2026-09-12`, sans heure ni decalage : c'est
+     * la forme que la norme HTML attend, et la seule qui ne mente pas.
+     */
+    protected readonly iso: _angular_core.Signal<string | null>;
+    /** Une date sans heure ne peut pas en afficher une. */
+    private readonly optionsDeFormat;
+    protected readonly texte: _angular_core.Signal<string>;
+    /** Forme longue, lue par les technologies d'assistance. */
+    protected readonly texteAccessible: _angular_core.Signal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StDate, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StDate, "st-date", never, { "valeur": { "alias": "valeur"; "required": true; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "fuseau": { "alias": "fuseau"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Temps ecoule, exprime relativement (« il y a 5 minutes »).
+ *
+ * ⚠️ Ce composant ne doit JAMAIS etre place dans une region vivante : son texte
+ * se reecrit tout seul, et une region vivante le ferait annoncer en boucle.
+ * Son nom accessible porte la date absolue, qui elle ne bouge pas.
+ *
+ * La cadence de rafraichissement s'adapte : rafraichir chaque seconde une date
+ * vieille de trois jours reveille l'onglet pour rien.
+ */
+declare class StRelativeTime {
+    private readonly locale;
+    private readonly libelles;
+    private readonly fuseau;
+    readonly valeur: _angular_core.InputSignal<string | Date>;
+    readonly rafraichir: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Au-dela de ce nombre de jours, la date absolue est plus parlante. */
+    readonly seuilAbsoluEnJours: _angular_core.InputSignal<number>;
+    private readonly destruction;
+    private readonly maintenant;
+    constructor();
+    private dateEnMillisecondes;
+    protected readonly estValide: _angular_core.Signal<boolean>;
+    protected readonly iso: _angular_core.Signal<string | null>;
+    protected readonly depasseLeSeuil: _angular_core.Signal<boolean>;
+    protected readonly texte: _angular_core.Signal<string>;
+    protected readonly texteAccessible: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StRelativeTime, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StRelativeTime, "st-relative-time", never, { "valeur": { "alias": "valeur"; "required": true; "isSignal": true; }; "rafraichir": { "alias": "rafraichir"; "required": false; "isSignal": true; }; "seuilAbsoluEnJours": { "alias": "seuilAbsoluEnJours"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Nombre dans le flux du texte.
+ *
+ * Distinct de `st-badge`, qui est une pastille superposee a un autre element.
+ *
+ * ⚠️ Quand la valeur est abregee (« 1,2 k »), le nom accessible porte le nombre
+ * COMPLET : l'abreviation est une commodite visuelle, pas une perte
+ * d'information pour qui ecoute la page.
+ */
+declare class StCount {
+    private readonly locale;
+    readonly valeur: _angular_core.InputSignal<number>;
+    readonly ton: _angular_core.InputSignal<"neutre" | "discret">;
+    /** `null` : jamais d'abreviation. */
+    readonly abregerAuDela: _angular_core.InputSignal<number | null>;
+    protected readonly estAbrege: _angular_core.Signal<boolean>;
+    protected readonly texteComplet: _angular_core.Signal<string>;
+    protected readonly texte: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StCount, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StCount, "st-count", never, { "valeur": { "alias": "valeur"; "required": true; "isSignal": true; }; "ton": { "alias": "ton"; "required": false; "isSignal": true; }; "abregerAuDela": { "alias": "abregerAuDela"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type SensDeTendance = 'hausse' | 'baisse' | 'stable';
+/** La tendance d'un indicateur, decrite par l'appelant. Le texte est deja traduit. */
+interface TendanceDeStat {
+    readonly sens: SensDeTendance;
+    /** Ce qui s'affiche a cote de la fleche : « +2,4 % sur un mois ». */
+    readonly texte: string;
+    /**
+     * ⚠️ Choisi par l'appelant, et non deduit du sens : une hausse des frais est
+     * un `danger`, une hausse de l'epargne un `succes`. Le socle ne sait pas
+     * lequel des deux il affiche.
+     */
+    readonly ton?: TonSemantique;
+}
+/**
+ * Indicateur chiffre : un libelle, une valeur, et sa tendance.
+ *
+ * ```html
+ * <st-stat libelle="Solde disponible" [tendance]="{ sens: 'hausse', texte: '+2,4 % sur un mois', ton: 'succes' }">
+ *   <st-money [valeur]="solde" />
+ * </st-stat>
+ * ```
+ *
+ * La valeur est PROJETEE : c'est `st-money`, `st-count` ou `st-date` qui la
+ * formate dans la langue courante, et le socle n'a pas a redire comment.
+ *
+ * ⚠️ **La tendance se lit par un texte ET une icone, jamais par la couleur
+ * seule.** Le texte de l'appelant porte deja le signe ; l'icone porte le sens ;
+ * et un mot lisible par lecteur seulement — « en hausse », « en baisse »,
+ * « stable » — precede le texte, parce qu'un lecteur d'ecran ne lit pas un
+ * chevron.
+ *
+ * Le libelle vient AVANT la valeur dans le document, comme dans une phrase :
+ * « Solde disponible, 1 234,50 € ». A l'ecran, il se pose au-dessus, en petit.
+ */
+declare class StStat {
+    private readonly libelles;
+    /** Texte visible, deja traduit. */
+    readonly libelle: _angular_core.InputSignal<string>;
+    readonly tendance: _angular_core.InputSignal<TendanceDeStat | null>;
+    /** Precision sous la valeur : la periode, la source. Jamais une information critique. */
+    readonly precision: _angular_core.InputSignal<string | null>;
+    protected readonly icone: _angular_core.Signal<"boite-vide" | "calendrier" | "cercle" | "cercle-coche" | "cercle-croix" | "cercle-info" | "chevron-bas" | "chevron-droite" | "chevron-gauche" | "chevron-haut" | "coche" | "copie" | "corbeille" | "croix" | "fichier" | "hors-ligne" | "lien-externe" | "menu" | "oeil" | "oeil-barre" | "plus" | "rafraichir" | "recherche" | "serveur" | "televerser" | "tri" | "triangle-alerte" | "utilisateur" | null>;
+    protected readonly tonDeTendance: _angular_core.Signal<TonSemantique>;
+    protected readonly sensLu: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StStat, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StStat, "st-stat", never, { "libelle": { "alias": "libelle"; "required": true; "isSignal": true; }; "tendance": { "alias": "tendance"; "required": false; "isSignal": true; }; "precision": { "alias": "precision"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { StCount, StDate, StMasked, StMoney, StRelativeTime, StStat };
+export type { FormatDeDate, SensDeTendance, TendanceDeStat, TypeMasque };

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

@@ -1,8 +1,9 @@
-import * as _starterlib_ui from '@starterlib/ui';
-import { ContratDeChamp, ErreurAffichable } from '@starterlib/ui';
+import * as _starterlib_ui_saisie from '@starterlib/ui/saisie';
+import { ContratDeChamp, ErreurAffichable } from '@starterlib/ui/saisie';
 import * as _angular_forms_signals from '@angular/forms/signals';
 import { FormValueControl } from '@angular/forms/signals';
 import * as _angular_core from '@angular/core';
+import * as _starterlib_ui from '@starterlib/ui';
 import { DateIso, PlageDeDates } from '@starterlib/util';
 
 /**
@@ -43,7 +44,7 @@ declare class StAmountField extends ContratDeChamp implements FormValueControl<b
      */
     protected readonly quitte: _angular_core.WritableSignal<boolean>;
     protected readonly saisie: _angular_forms_signals.TransformedValueSignal<string>;
-    protected readonly erreursAffichees: _angular_core.Signal<readonly _starterlib_ui.ErreurAffichable[]>;
+    protected readonly erreursAffichees: _angular_core.Signal<readonly _starterlib_ui_saisie.ErreurAffichable[]>;
     /** Symbole affiche a cote du champ ; le nom de la devise, lui, est lu. */
     protected readonly symbole: _angular_core.Signal<string>;
     protected readonly deviseLue: _angular_core.Signal<string>;
@@ -101,7 +102,7 @@ declare class StDateField extends ContratDeChamp implements FormValueControl<Dat
     protected readonly quitte: _angular_core.WritableSignal<boolean>;
     protected readonly saisie: _angular_forms_signals.TransformedValueSignal<string>;
     protected readonly aideLue: _angular_core.Signal<string>;
-    protected readonly erreursAffichees: _angular_core.Signal<readonly _starterlib_ui.ErreurAffichable[]>;
+    protected readonly erreursAffichees: _angular_core.Signal<readonly _starterlib_ui_saisie.ErreurAffichable[]>;
     protected surSaisie(evenement: Event): void;
     protected aLaSortieDuChamp(): void;
     protected basculer(): void;