@starterlib/ui 0.8.0 → 0.9.0

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

@@ -1,25 +1,40 @@
-import * as _angular_core from '@angular/core';
-import * as i1 from '@angular/aria/tabs';
-
+import { Icone } from "@starterlib/ui";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/aria/tabs";
 /** 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;
+export interface Onglet {
+  /**
+   * Identifiant stable, qui relie l'onglet a son `st-tab-panel`. Sans espace : il entre dans l'id
+   * de l'onglet (`<identifiant>-onglet-<valeur>`).
+   */
+  readonly valeur: string;
+  readonly libelle: string;
+  readonly desactive?: boolean;
+  /** Icone de 18 px devant le libelle, decorative : le libelle dit deja la vue. */
+  readonly icone?: Icone;
+  /**
+   * Nombre d'elements de la vue, en pastille apres le libelle. Formate par `Intl` dans la langue
+   * de la page, et repete dans le nom de l'onglet (« Operations, 42 ») : la pastille est muette.
+   */
+  readonly compte?: number;
+  /**
+   * Complement de fin de ligne (code devise d'un compte). Lu apres le libelle, comme le compte
+   * (« Portefeuille titres, CHF ») ; le complement visible est muet.
+   */
+  readonly complement?: string;
 }
-type ActivationDOnglet = 'manuelle' | 'automatique';
-type OrientationDOnglets = 'horizontale' | 'verticale';
+export type ActivationDOnglet = 'manuelle' | 'automatique';
+export type OrientationDOnglets = 'horizontale' | 'verticale';
 /**
  * Onglets, sur les primitives `@angular/aria/tabs`.
  *
  * ```html
- * <st-tabs etiquette="Compte" [onglets]="onglets" [(selection)]="onglet">
+ * <st-tabs etiquette="Compte" identifiant="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 valeur="virements" contenuConserve>
+ *     <ng-template stTabContent><app-saisie-du-virement /></ng-template>
  *   </st-tab-panel>
  * </st-tabs>
  * ```
@@ -32,7 +47,9 @@ type OrientationDOnglets = 'horizontale' | 'verticale';
  * 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`.
+ * injecteur parent est celui de l'hote, qui porte la primitive `Tabs`. Un panneau
+ * ecrit ailleurs (un composant intermediaire) ne trouve pas `Tabs` : la creation
+ * echoue, avec l'erreur d'injection d'Angular.
  *
  * ⚠️ **Activation manuelle par defaut.** En activation automatique, chaque
  * fleche SELECTIONNE l'onglet atteint ; son contenu differe se rend, et charge
@@ -40,50 +57,156 @@ type OrientationDOnglets = 'horizontale' | 'verticale';
  * 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.
+ *
+ * **Une ligne, qui defile** (EA-22) : un libelle ne passe jamais a la ligne et
+ * n'est jamais tronque ; la liste defile, une ombre dit de quel cote il reste des
+ * onglets, et l'onglet choisi est amene en vue. Le chargement d'un panneau est
+ * dit par un `st-state` DANS son gabarit (`aria-busy` compris), jamais par
+ * l'onglet.
  */
-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: {}; }]>;
+export declare class StTabs {
+  private readonly hote;
+  private readonly locale;
+  private readonly baseParDefaut;
+  readonly onglets: import("@angular/core").InputSignal<readonly Onglet[]>;
+  /** Nom accessible de la liste : sans lui, plusieurs listes d'onglets se confondent. */
+  readonly etiquette: import("@angular/core").InputSignal<string>;
+  readonly activation: import("@angular/core").InputSignal<ActivationDOnglet>;
+  readonly orientation: import("@angular/core").InputSignal<OrientationDOnglets>;
+  /**
+   * Base des ids des onglets, `<identifiant>-onglet-<valeur>` : l'application synchronise
+   * `selection` avec l'adresse, et une ancre ou un essai designe l'onglet sans deviner. Absent :
+   * une base unique dans le document. Les panneaux gardent l'id de la primitive, que leur onglet
+   * suit dans `aria-controls`.
+   */
+  readonly identifiant: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Valeur de l'onglet selectionne, ecrite par le composant des le rendu : absente, inconnue ou
+   * desactivee, elle recoit le premier onglet disponible (une valeur fournie est signalee en
+   * developpement). Elle ne vaut `undefined` que si aucun onglet n'est selectionnable.
+   */
+  readonly selection: import("@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: import("@angular/core").Signal<string | undefined>;
+  protected readonly modeAria: import("@angular/core").Signal<"follow" | "explicit">;
+  protected readonly orientationAria: import("@angular/core").Signal<"vertical" | "horizontal">;
+  private readonly formatDesComptes;
+  constructor();
+  /** Id d'un onglet : stable avec `identifiant`, unique dans le document sans lui. */
+  protected idDOnglet(valeur: string): string;
+  protected compteDe(compte: number): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StTabs, never>;
+  static ɵcmp: i0.ɵɵ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;
+    };
+    "identifiant": {
+      "alias": "identifiant";
+      "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`.
  *
+ * ```html
+ * <st-tab-panel valeur="virement" contenuConserve>
+ *   <ng-template stTabContent><app-saisie-du-virement /></ng-template>
+ * </st-tab-panel>
+ * ```
+ *
  * ⚠️ 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.
+ *
+ * Transparent, sans padding en ligne : la premiere ligne du contenu affleure le
+ * premier onglet ; 16 px le separent de la liste horizontale. Un panneau qui
+ * CHARGE le dit par un `st-state` dans son gabarit (`aria-busy` compris) : le
+ * panneau lui-meme ne montre rien.
  */
-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: {}; }]>;
+export declare class StTabPanel {
+  /**
+   * Garde le contenu differe (`stTabContent`) quand l'onglet est quitte : masque et inerte, mais
+   * vivant. Une saisie commencee dans l'onglet survit au retour. Recommande pour tout panneau qui
+   * contient un formulaire. Sans lui, le contenu est detruit a la deselection et recree au retour.
+   *
+   * ⚠️ La primitive expose aussi, par sa propre composition, son entree anglaise `preserveContent`
+   * sur cet element ; le socle ne peut pas la masquer sans quitter `TabPanel`. Elle est ecrasee par
+   * celle-ci : n'employer que `contenuConserve`.
+   */
+  readonly contenuConserve: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /**
+   * Le `st-tabs` du panneau, par injection et non par un ancetre du DOM : en colonne, l'ecart de
+   * l'hote separe deja la liste du panneau, et un jeu d'onglets imbrique dans un panneau ne doit
+   * pas prendre l'orientation d'un ancetre.
+   */
+  protected readonly onglets: StTabs | null;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<StTabPanel, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StTabPanel, "st-tab-panel", never, {
+    "contenuConserve": {
+      "alias": "contenuConserve";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, [{
+    directive: typeof i1.TabPanel;
+    inputs: {
+      "value": "valeur";
+    };
+    outputs: {};
+  }]>;
 }
-
 /**
- * Contenu differe d'un panneau : rendu a la premiere selection de son onglet.
+ * Contenu differe d'un panneau : rendu a la premiere selection de son onglet,
+ * detruit a la deselection, sauf `contenuConserve` sur le `st-tab-panel`.
  *
  * 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.
+ * parcours au clavier les rende tous. Un contenu qui charge des donnees pose son
+ * `st-state` DANS ce gabarit : l'attente (200 ms, puis 400 ms tenues) se regle
+ * la, pas ici.
  */
-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: {}; }]>;
+export declare class StTabContent {
+  static ɵfac: i0.ɵɵFactoryDeclaration<StTabContent, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<StTabContent, "ng-template[stTabContent]", never, {}, {}, never, never, true, [{
+    directive: typeof i1.TabContent;
+    inputs: {};
+    outputs: {};
+  }]>;
 }
 
-export { StTabContent, StTabPanel, StTabs };
-export type { ActivationDOnglet, Onglet, OrientationDOnglets };
+export {};