@starterlib/ui 0.7.2 → 0.9.0

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

@@ -0,0 +1,212 @@
+import { Icone } from "@starterlib/ui";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/aria/tabs";
+/** Un onglet, decrit par l'appelant. */
+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;
+}
+export type ActivationDOnglet = 'manuelle' | 'automatique';
+export type OrientationDOnglets = 'horizontale' | 'verticale';
+/**
+ * Onglets, sur les primitives `@angular/aria/tabs`.
+ *
+ * ```html
+ * <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" contenuConserve>
+ *     <ng-template stTabContent><app-saisie-du-virement /></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`. 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
+ * 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.
+ *
+ * **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.
+ */
+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.
+ */
+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,
+ * 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. 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.
+ */
+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 {};