@starterlib/ui 0.7.2 → 0.8.0

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

@@ -1,316 +1,4 @@
-import * as _angular_core from '@angular/core';
-import * as i1 from '@angular/aria/tabs';
-import * as _starterlib_ui from '@starterlib/ui';
-import { ControleDeSaisie, OptionDeListe, AnnonceLocale, ContratDeChamp } from '@starterlib/ui';
-import { FormValueControl } from '@angular/forms/signals';
-
-/** Un onglet, decrit par l'appelant. */
-interface Onglet {
-    /** Identifiant stable, qui relie l'onglet a son `st-tab-panel`. */
-    readonly valeur: string;
-    readonly libelle: string;
-    readonly desactive?: boolean;
-}
-type ActivationDOnglet = 'manuelle' | 'automatique';
-type OrientationDOnglets = 'horizontale' | 'verticale';
-/**
- * Onglets, sur les primitives `@angular/aria/tabs`.
- *
- * ```html
- * <st-tabs etiquette="Compte" [onglets]="onglets" [(selection)]="onglet">
- *   <st-tab-panel valeur="operations">
- *     <ng-template stTabContent><app-operations /></ng-template>
- *   </st-tab-panel>
- *   <st-tab-panel valeur="virements">
- *     <ng-template stTabContent><app-virements /></ng-template>
- *   </st-tab-panel>
- * </st-tabs>
- * ```
- *
- * ⚠️ **La liste d'onglets est rendue par le composant, a partir de donnees**, et
- * non projetee. Les primitives d'Aria relient un onglet a sa liste par
- * INJECTION, et un contenu projete garde l'injecteur de l'endroit ou il est
- * ecrit : c'est la lecon de `st-menu`, ou des elements projetes ne
- * s'enregistraient jamais. Rendue ici, la liste est a coup sur sous la bonne
- * primitive — et ses valeurs peuvent etre dites en francais.
- *
- * Les PANNEAUX, eux, sont projetes : ecrits directement sous `st-tabs`, leur
- * injecteur parent est celui de l'hote, qui porte la primitive `Tabs`.
- *
- * ⚠️ **Activation manuelle par defaut.** En activation automatique, chaque
- * fleche SELECTIONNE l'onglet atteint ; son contenu differe se rend, et charge
- * ses donnees. Parcourir cinq onglets au clavier lancerait cinq requetes pour en
- * lire un. En manuelle, les fleches deplacent le focus et Entree ou Espace
- * selectionne. `automatique` reste le bon choix quand les panneaux sont deja la
- * et s'affichent sans delai.
- */
-declare class StTabs {
-    readonly onglets: _angular_core.InputSignal<readonly Onglet[]>;
-    /** Nom accessible de la liste : sans lui, plusieurs listes d'onglets se confondent. */
-    readonly etiquette: _angular_core.InputSignal<string>;
-    readonly activation: _angular_core.InputSignal<ActivationDOnglet>;
-    readonly orientation: _angular_core.InputSignal<OrientationDOnglets>;
-    /** Valeur de l'onglet selectionne. `undefined` : le premier onglet disponible. */
-    readonly selection: _angular_core.ModelSignal<string | undefined>;
-    /**
-     * ⚠️ Toujours un onglet selectionne. Le motif ARIA l'exige : une liste sans
-     * selection n'affiche aucun panneau, et la page parait vide sans raison.
-     */
-    protected readonly selectionEffective: _angular_core.Signal<string | undefined>;
-    protected readonly modeAria: _angular_core.Signal<"follow" | "explicit">;
-    protected readonly orientationAria: _angular_core.Signal<"vertical" | "horizontal">;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StTabs, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StTabs, "st-tabs", never, { "onglets": { "alias": "onglets"; "required": true; "isSignal": true; }; "etiquette": { "alias": "etiquette"; "required": true; "isSignal": true; }; "activation": { "alias": "activation"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; }, never, ["*"], true, [{ directive: typeof i1.Tabs; inputs: {}; outputs: {}; }]>;
-}
-
-/**
- * Panneau d'un onglet, relie par sa `valeur`.
- *
- * ⚠️ La primitive d'Aria ne masque RIEN : elle pose `inert` sur le panneau
- * inactif, ce qui le retire de l'arbre d'accessibilite et du clavier, mais le
- * laisse a l'ecran. Sa documentation le dit en une ligne. Sans le style de ce
- * composant, tous les panneaux s'affichaient empiles, muets et intouchables.
- */
-declare class StTabPanel {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StTabPanel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StTabPanel, "st-tab-panel", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.TabPanel; inputs: { "value": "valeur"; }; outputs: {}; }]>;
-}
-
-/**
- * Contenu differe d'un panneau : rendu a la premiere selection de son onglet.
- *
- * Un ecran a cinq onglets ne charge ainsi que celui qu'on regarde. Voir
- * l'activation manuelle de `st-tabs` : c'est ce qui empeche qu'un simple
- * parcours au clavier les rende tous.
- */
-declare class StTabContent {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StTabContent, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StTabContent, "ng-template[stTabContent]", never, {}, {}, never, never, true, [{ directive: typeof i1.TabContent; inputs: {}; outputs: {}; }]>;
-}
-
-type ModeDeNavigation = 'auto' | 'persistant' | 'modal';
-/**
- * Navigation laterale : une region a cote du contenu sur grand ecran, un tiroir
- * sur petit ecran.
- *
- * ```html
- * <st-app-shell>
- *   <button entete stButton [stSidenavToggle]="navigation">Menu</button>
- *   <st-sidenav navigation #navigation etiquette="Navigation principale">
- *     <a routerLink="/comptes">Comptes</a>
- *   </st-sidenav>
- *   …
- * </st-app-shell>
- * ```
- *
- * ⚠️ **Deux modes, jamais confondus.** Persistante, c'est une REGION de la page :
- * aucun piege, rien a ouvrir. Modale, c'est un TIROIR, donc un `StDialog` — role,
- * piegeage du focus, Echap, retour du focus au bouton — et non une region
- * glissee par-dessus la page avec un peu de CSS, qui laisserait le clavier
- * parcourir la page cachee dessous.
- *
- * ⚠️ **Elle porte son propre `<nav>`, et un seul a la fois.** Sur petit ecran,
- * la region en ligne DISPARAIT quand le tiroir prend le relais : laissee en
- * place, elle resterait un repere de navigation vide, que le lecteur d'ecran
- * proposerait sans rien y trouver.
- *
- * Un lien suivi dans le tiroir le ferme : `StDialog` se ferme a toute navigation
- * du routeur.
- */
-declare class StSidenav {
-    private readonly dialogues;
-    private readonly libelles;
-    /**
-     * Nom du repere. `null` : « Navigation principale », du dictionnaire. A
-     * renseigner des qu'une page compte deux navigations, qui doivent se
-     * distinguer.
-     */
-    readonly etiquette: _angular_core.InputSignal<string | null>;
-    protected readonly etiquetteLue: _angular_core.Signal<string>;
-    /** `auto` : persistante sur grand ecran, tiroir en dessous. */
-    readonly mode: _angular_core.InputSignal<ModeDeNavigation>;
-    readonly identifiant: string;
-    private readonly ecranLarge;
-    /** Mode reellement applique. Lu par le bouton, qui ne s'affiche qu'en tiroir. */
-    readonly modeEffectif: _angular_core.Signal<"persistant" | "modal">;
-    private readonly ouvertInterne;
-    readonly ouvert: _angular_core.Signal<boolean>;
-    private readonly gabarit;
-    private reference;
-    constructor();
-    ouvrir(): void;
-    fermer(): void;
-    basculer(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StSidenav, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StSidenav, "st-sidenav", never, { "etiquette": { "alias": "etiquette"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
-/**
- * Bouton qui ouvre la navigation en tiroir.
- *
- * ⚠️ **Masque quand la navigation est persistante.** Un bouton « Menu » qui ne
- * fait rien, parce que la navigation est deja affichee a cote, est un arret de
- * tabulation inutile et une promesse non tenue.
- *
- * ⚠️ `aria-expanded` suit l'ouverture du tiroir : sans lui, rien ne dit a qui
- * n'en voit pas l'effet que le bouton a agi.
- */
-declare class StSidenavToggle {
-    readonly stSidenavToggle: _angular_core.InputSignal<StSidenav>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StSidenavToggle, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StSidenavToggle, "[stSidenavToggle]", never, { "stSidenavToggle": { "alias": "stSidenavToggle"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-/** `local` : le composant filtre `options`. `distant` : l'application filtre, sur `recherche`. */
-type FiltrageDeListe = 'local' | 'distant';
-/**
- * Liste de choix a filtrer en tapant, sur `@angular/aria/combobox` et
- * `@angular/aria/listbox`.
- *
- * ```html
- * <st-combobox libelle="Beneficiaire" [options]="beneficiaires" [formField]="virement.beneficiaire" />
- * <!-- liste servie par le serveur : -->
- * <st-combobox libelle="Commune" filtrage="distant" [options]="communes()"
- *   (recherche)="terme.set($event)" [formField]="adresse.commune" />
- * ```
- *
- * Le modele est la VALEUR de l'option choisie, `''` sans choix. Le texte tape ne
- * part jamais dans le modele : « Pari » n'est pas une commune.
- *
- * ⚠️ **Pour une longue liste seulement.** Sous une vingtaine d'options,
- * `st-select` — natif — est plus sur, et plus rapide sur mobile.
- *
- * - La liste s'ouvre a la frappe et a la fleche bas ; Entree choisit, Echap
- *   ferme. Le focus reste dans le champ (`aria-activedescendant`).
- * - Le nombre de resultats s'annonce apres la frappe, une fois : le lecteur
- *   d'ecran ne voit pas la liste se reduire.
- * - ⚠️ **Quitter le champ sans choisir rend le texte du choix precedent.** Un
- *   texte qui ne correspond a aucune option ne reste pas affiche comme s'il etait
- *   retenu ; un champ vide, lui, retire le choix.
- * - La liste est posee dans la couche superieure du navigateur (`popover`) par le
- *   CDK : un dialogue ou un tableau defilant ne la rogne pas.
- *
- * ⚠️ En `distant`, `recherche` est emis a chaque frappe : a l'application de
- * temporiser, et de ne pas mettre le terme dans l'adresse (SEC-6).
- */
-declare class StCombobox extends ControleDeSaisie {
-    protected readonly libelles: _angular_core.Signal<_starterlib_ui.LibellesUi>;
-    private readonly element;
-    private readonly injecteur;
-    readonly options: _angular_core.InputSignal<readonly OptionDeListe[]>;
-    readonly filtrage: _angular_core.InputSignal<FiltrageDeListe>;
-    /** Texte tape, a chaque frappe. Sert au filtrage `distant`. */
-    readonly recherche: _angular_core.OutputEmitterRef<string>;
-    protected readonly annonce: AnnonceLocale;
-    protected readonly ouvert: _angular_core.WritableSignal<boolean>;
-    /** Texte du champ : le libelle du choix, tant que la personne ne tape pas. */
-    protected readonly texte: _angular_core.WritableSignal<string>;
-    /** Ce qui filtre : vide a l'ouverture par la fleche, pour montrer toute la liste. */
-    private readonly filtre;
-    /** Option active dans la liste ; le choix n'est retenu qu'a la validation. */
-    protected readonly surlignee: _angular_core.WritableSignal<string[]>;
-    protected readonly visibles: _angular_core.Signal<readonly OptionDeListe[]>;
-    private readonly liste;
-    constructor();
-    protected surSaisie(evenement: Event): void;
-    protected basculer(): void;
-    protected valider(): void;
-    protected aLaSortie(evenement: FocusEvent): void;
-    private libelleDe;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StCombobox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StCombobox, "st-combobox", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "filtrage": { "alias": "filtrage"; "required": false; "isSignal": true; }; }, { "recherche": "recherche"; }, never, never, true, never>;
-}
-
-/**
- * Choix de plusieurs valeurs dans une liste, sur `@angular/aria/combobox` et
- * `@angular/aria/listbox`.
- *
- * ```html
- * <st-multiselect libelle="Comptes a inclure" [options]="comptes" [formField]="releve.comptes" />
- * ```
- *
- * Le modele est la liste des VALEURS choisies, dans l'ordre des options.
- *
- * - Fleche bas, Entree ou Espace ouvrent la liste ; Espace coche ou decoche
- *   l'option active sans fermer ; Echap ferme.
- * - ⚠️ **Chaque choix reste visible et retirable** sous le champ, par un bouton
- *   « Retirer … ». Un resume « 3 choix » dans le declencheur ne dit pas lesquels,
- *   et obligerait a rouvrir la liste pour en retirer un.
- * - Un choix retire rend le focus au retrait suivant, ou au champ : le focus ne
- *   tombe jamais sur le document.
- *
- * ⚠️ Sous une dizaine d'options, un groupe de cases a cocher (`st-fieldset` et
- * `st-checkbox`) est plus simple : tout est visible, rien a ouvrir.
- */
-declare class StMultiselect extends ContratDeChamp implements FormValueControl<readonly string[]> {
-    protected readonly libelles: _angular_core.Signal<_starterlib_ui.LibellesUi>;
-    private readonly element;
-    private readonly injecteur;
-    readonly value: _angular_core.ModelSignal<readonly string[]>;
-    readonly options: _angular_core.InputSignal<readonly OptionDeListe[]>;
-    protected readonly annonce: AnnonceLocale;
-    protected readonly ouvert: _angular_core.WritableSignal<boolean>;
-    private readonly liste;
-    /** La liste d'Aria attend un tableau modifiable ; le modele, lui, est en lecture seule. */
-    protected readonly valeursDeListe: _angular_core.Signal<string[]>;
-    protected readonly choisies: _angular_core.Signal<OptionDeListe[]>;
-    protected readonly resume: _angular_core.Signal<string>;
-    constructor();
-    /** Le declencheur n'est pas un champ natif : la base ne le trouve pas par `#champ`. */
-    focus(options?: FocusOptions): void;
-    protected surChoix(valeurs: readonly string[]): void;
-    protected retirer(valeur: string, indice: number): void;
-    protected aLaSortie(evenement: FocusEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StMultiselect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StMultiselect, "st-multiselect", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
-}
-
-/** 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 { StCombobox, StMultiselect, StSidenav, StSidenavToggle, StTabContent, StTabPanel, StTabs, StTree };
-export type { ActivationDOnglet, FiltrageDeListe, ModeDeNavigation, NoeudDArbre, Onglet, OrientationDOnglets };
+export * from '@starterlib/ui/onglets';
+export * from '@starterlib/ui/navigation';
+export * from '@starterlib/ui/selection';
+export * from '@starterlib/ui/arbre';

package/types/starterlib-ui-libelles-en.d.ts

@@ -0,0 +1,25 @@
+import { LibellesUi } from '@starterlib/ui';
+
+/**
+ * @starterlib/ui/libelles-en — le catalogue anglais des textes portes par les
+ * composants.
+ *
+ * ⚠️ Un point d'entree separe pour une raison de MOMENT, et non de dependance
+ * (ADR 0031, decision 2) : une application francaise n'affiche jamais ces
+ * textes, et laisses au tronc ils partaient dans le train de singletons de
+ * TOUTE application federee. Une langue se charge quand on en change.
+ *
+ * ```ts
+ * const { LIBELLES_EN } = await import('@starterlib/ui/libelles-en');
+ * ```
+ *
+ * ⚠️ Les textes AFFICHES portent leurs accents et leurs apostrophes
+ * typographiques, ecrits en sequence d'echappement pour garder la source en
+ * ASCII. La regle « sans accents » du depot vise la documentation, jamais ce
+ * que lit la personne devant l'ecran.
+ */
+
+/** Traduction anglaise du meme dictionnaire. La paire est obligatoire. */
+declare const LIBELLES_EN: LibellesUi;
+
+export { LIBELLES_EN };