@starterlib/ui 0.2.0 → 0.4.0

package/fesm2022/starterlib-ui-interactions.mjs

@@ -0,0 +1,536 @@
+import * as i0 from '@angular/core';
+import { input, model, computed, ChangeDetectionStrategy, Component, Directive, inject, signal, viewChild, effect, DestroyRef, ElementRef, Injector, output, linkedSignal, afterRenderEffect, afterNextRender } from '@angular/core';
+import * as i1 from '@angular/aria/tabs';
+import { TabList, Tab, Tabs, TabPanel, TabContent } from '@angular/aria/tabs';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { NgTemplateOutlet } from '@angular/common';
+import { ST_LIBELLES, ControleDeSaisie, AnnonceLocale, filtrerOptions, StFormField, StControleDeChamp, StIcon, ContratDeChamp, StIconButton } from '@starterlib/ui';
+import { StDialog } from '@starterlib/ui/surfaces';
+import { Combobox, ComboboxPopup, ComboboxWidget } from '@angular/aria/combobox';
+import { Listbox, Option } from '@angular/aria/listbox';
+import { CdkConnectedOverlay } from '@angular/cdk/overlay';
+
+/**
+ * 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.
+ */
+class StTabs {
+    onglets = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onglets" }] : /* istanbul ignore next */ []));
+    /** Nom accessible de la liste : sans lui, plusieurs listes d'onglets se confondent. */
+    etiquette = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
+    activation = input('manuelle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activation" }] : /* istanbul ignore next */ []));
+    orientation = input('horizontale', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Valeur de l'onglet selectionne. `undefined` : le premier onglet disponible. */
+    selection = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /**
+     * ⚠️ Toujours un onglet selectionne. Le motif ARIA l'exige : une liste sans
+     * selection n'affiche aucun panneau, et la page parait vide sans raison.
+     */
+    selectionEffective = computed(() => this.selection() ?? this.onglets().find((onglet) => onglet.desactive !== true)?.valeur, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionEffective" }] : /* istanbul ignore next */ []));
+    modeAria = computed(() => this.activation() === 'automatique' ? 'follow' : 'explicit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modeAria" }] : /* istanbul ignore next */ []));
+    orientationAria = computed(() => this.orientation() === 'verticale' ? 'vertical' : 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientationAria" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StTabs, isStandalone: true, selector: "st-tabs", inputs: { onglets: { classPropertyName: "onglets", publicName: "onglets", isSignal: true, isRequired: true, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, activation: { classPropertyName: "activation", publicName: "activation", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange" }, host: { properties: { "attr.data-orientation": "orientation()" }, classAttribute: "st-tabs" }, hostDirectives: [{ directive: i1.Tabs }], ngImport: i0, template: "<div\n  class=\"st-tabs__liste\"\n  ngTabList\n  [attr.aria-label]=\"etiquette()\"\n  [selectionMode]=\"modeAria()\"\n  [orientation]=\"orientationAria()\"\n  [selectedTab]=\"selectionEffective()\"\n  (selectedTabChange)=\"selection.set($event)\"\n>\n  @for (onglet of onglets(); track onglet.valeur) {\n    <button\n      class=\"st-tabs__onglet\"\n      type=\"button\"\n      ngTab\n      [value]=\"onglet.valeur\"\n      [disabled]=\"onglet.desactive === true\"\n    >\n      {{ onglet.libelle }}\n    </button>\n  }\n</div>\n\n<div class=\"st-tabs__panneaux\">\n  <ng-content />\n</div>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}:host([data-orientation=verticale]){display:flex;gap:var(--st-espacement-4)}.st-tabs__liste{display:flex;gap:var(--st-espacement-1);border-block-end:1px solid var(--st-couleur-bordure)}:host([data-orientation=verticale]) .st-tabs__liste{flex-direction:column;border-block-end:0;border-inline-end:1px solid var(--st-couleur-bordure)}.st-tabs__panneaux{flex:1 1 auto;min-inline-size:0}.st-tabs__onglet:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-tabs__onglet{min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-4);font:inherit;color:var(--st-couleur-texte-discret);cursor:pointer;background:none;border:0;border-block-end:3px solid transparent}.st-tabs__onglet:hover{color:var(--st-couleur-texte)}.st-tabs__onglet[aria-selected=true]{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte);border-block-end-color:var(--st-couleur-primaire)}.st-tabs__onglet[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}@media(forced-colors:active){.st-tabs__onglet[aria-selected=true]{border-block-end-color:Highlight}}\n"], dependencies: [{ kind: "directive", type: TabList, selector: "[ngTabList]", inputs: ["orientation", "wrap", "softDisabled", "focusMode", "selectionMode", "selectedTab", "disabled"], outputs: ["selectedTabChange"], exportAs: ["ngTabList"] }, { kind: "directive", type: Tab, selector: "[ngTab]", inputs: ["id", "disabled", "value"], exportAs: ["ngTab"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-tabs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TabList, Tab], hostDirectives: [Tabs], host: {
+                        class: 'st-tabs',
+                        '[attr.data-orientation]': 'orientation()',
+                    }, template: "<div\n  class=\"st-tabs__liste\"\n  ngTabList\n  [attr.aria-label]=\"etiquette()\"\n  [selectionMode]=\"modeAria()\"\n  [orientation]=\"orientationAria()\"\n  [selectedTab]=\"selectionEffective()\"\n  (selectedTabChange)=\"selection.set($event)\"\n>\n  @for (onglet of onglets(); track onglet.valeur) {\n    <button\n      class=\"st-tabs__onglet\"\n      type=\"button\"\n      ngTab\n      [value]=\"onglet.valeur\"\n      [disabled]=\"onglet.desactive === true\"\n    >\n      {{ onglet.libelle }}\n    </button>\n  }\n</div>\n\n<div class=\"st-tabs__panneaux\">\n  <ng-content />\n</div>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}:host([data-orientation=verticale]){display:flex;gap:var(--st-espacement-4)}.st-tabs__liste{display:flex;gap:var(--st-espacement-1);border-block-end:1px solid var(--st-couleur-bordure)}:host([data-orientation=verticale]) .st-tabs__liste{flex-direction:column;border-block-end:0;border-inline-end:1px solid var(--st-couleur-bordure)}.st-tabs__panneaux{flex:1 1 auto;min-inline-size:0}.st-tabs__onglet:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-tabs__onglet{min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-4);font:inherit;color:var(--st-couleur-texte-discret);cursor:pointer;background:none;border:0;border-block-end:3px solid transparent}.st-tabs__onglet:hover{color:var(--st-couleur-texte)}.st-tabs__onglet[aria-selected=true]{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte);border-block-end-color:var(--st-couleur-primaire)}.st-tabs__onglet[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}@media(forced-colors:active){.st-tabs__onglet[aria-selected=true]{border-block-end-color:Highlight}}\n"] }]
+        }], propDecorators: { onglets: [{ type: i0.Input, args: [{ isSignal: true, alias: "onglets", required: true }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: true }] }], activation: [{ type: i0.Input, args: [{ isSignal: true, alias: "activation", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }] } });
+
+/**
+ * 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.
+ */
+/* eslint-disable-next-line @typescript-eslint/no-extraneous-class --
+   Vide par construction : tout le comportement vient de la primitive d'Aria
+   composee en directive d'hote. La classe porte le selecteur et le style du
+   socle, rien d'autre ; y ajouter un membre pour satisfaire la regle serait
+   inventer de l'API. */
+class StTabPanel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StTabPanel, isStandalone: true, selector: "st-tab-panel", host: { classAttribute: "st-tab-panel" }, hostDirectives: [{ directive: i1.TabPanel, inputs: ["value", "valeur"] }], ngImport: i0, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:block;padding-block:var(--st-espacement-4)}:host([inert]){display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTabPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-tab-panel', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: TabPanel, inputs: ['value: valeur'] }], host: { class: 'st-tab-panel' }, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:block;padding-block:var(--st-espacement-4)}:host([inert]){display:none}\n"] }]
+        }] });
+
+/**
+ * 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.
+ */
+/* eslint-disable-next-line @typescript-eslint/no-extraneous-class --
+   Vide par construction : tout le comportement vient de la primitive d'Aria
+   composee en directive d'hote. La classe porte le selecteur et le style du
+   socle, rien d'autre ; y ajouter un membre pour satisfaire la regle serait
+   inventer de l'API. */
+class StTabContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: StTabContent, isStandalone: true, selector: "ng-template[stTabContent]", hostDirectives: [{ directive: i1.TabContent }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTabContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[stTabContent]',
+                    hostDirectives: [TabContent],
+                }]
+        }] });
+
+/** Au-dela, la navigation tient a cote du contenu. Meme seuil que `st-app-shell`. */
+const ECRAN_LARGE = '(min-width: 64rem)';
+let compteur = 0;
+/**
+ * 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.
+ */
+class StSidenav {
+    dialogues = inject(StDialog);
+    libelles = inject(ST_LIBELLES);
+    /**
+     * Nom du repere. `null` : « Navigation principale », du dictionnaire. A
+     * renseigner des qu'une page compte deux navigations, qui doivent se
+     * distinguer.
+     */
+    etiquette = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
+    etiquetteLue = computed(() => this.etiquette() ?? this.libelles().navigationPrincipale, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquetteLue" }] : /* istanbul ignore next */ []));
+    /** `auto` : persistante sur grand ecran, tiroir en dessous. */
+    mode = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    identifiant = `st-sidenav-${(compteur += 1).toString()}`;
+    ecranLarge = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ecranLarge" }] : /* istanbul ignore next */ []));
+    /** Mode reellement applique. Lu par le bouton, qui ne s'affiche qu'en tiroir. */
+    modeEffectif = computed(() => {
+        const mode = this.mode();
+        if (mode !== 'auto')
+            return mode;
+        return this.ecranLarge() ? 'persistant' : 'modal';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modeEffectif" }] : /* istanbul ignore next */ []));
+    ouvertInterne = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ouvertInterne" }] : /* istanbul ignore next */ []));
+    ouvert = this.ouvertInterne.asReadonly();
+    // Nomme autrement que la variable `#contenu` du gabarit, qui la masquerait.
+    gabarit = viewChild.required('contenu', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gabarit" }] : /* istanbul ignore next */ []));
+    reference = null;
+    constructor() {
+        const abonnement = inject(BreakpointObserver)
+            .observe(ECRAN_LARGE)
+            .subscribe((etat) => {
+            this.ecranLarge.set(etat.matches);
+        });
+        // Un ecran qui s'elargit pendant que le tiroir est ouvert : la navigation
+        // redevient une region, et le tiroir n'a plus de raison d'etre.
+        effect(() => {
+            if (this.modeEffectif() === 'persistant')
+                this.fermer();
+        });
+        inject(DestroyRef).onDestroy(() => {
+            abonnement.unsubscribe();
+            this.fermer();
+        });
+    }
+    ouvrir() {
+        if (this.modeEffectif() !== 'modal' || this.reference !== null)
+            return;
+        const reference = this.dialogues.ouvrir(this.gabarit(), {
+            cote: 'debut',
+            etiquette: this.etiquetteLue(),
+        });
+        this.reference = reference;
+        this.ouvertInterne.set(true);
+        void reference.ferme.then(() => {
+            if (this.reference !== reference)
+                return;
+            this.reference = null;
+            this.ouvertInterne.set(false);
+        });
+    }
+    fermer() {
+        const reference = this.reference;
+        if (reference === null)
+            return;
+        this.reference = null;
+        this.ouvertInterne.set(false);
+        reference.fermer();
+    }
+    basculer() {
+        if (this.ouvertInterne())
+            this.fermer();
+        else
+            this.ouvrir();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StSidenav, isStandalone: true, selector: "st-sidenav", inputs: { etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-mode": "modeEffectif()" }, classAttribute: "st-sidenav" }, viewQueries: [{ propertyName: "gabarit", first: true, predicate: ["contenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #contenu>\n  <nav class=\"st-sidenav__navigation\" [attr.id]=\"identifiant\" [attr.aria-label]=\"etiquetteLue()\">\n    <ng-content />\n  </nav>\n</ng-template>\n\n@if (modeEffectif() === 'persistant') {\n  <ng-container [ngTemplateOutlet]=\"contenu\" />\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}:host([data-mode=modal]){display:none}.st-sidenav__navigation{display:flex;flex-direction:column;gap:var(--st-espacement-1);padding:var(--st-espacement-4)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSidenav, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: {
+                        class: 'st-sidenav',
+                        '[attr.data-mode]': 'modeEffectif()',
+                    }, template: "<ng-template #contenu>\n  <nav class=\"st-sidenav__navigation\" [attr.id]=\"identifiant\" [attr.aria-label]=\"etiquetteLue()\">\n    <ng-content />\n  </nav>\n</ng-template>\n\n@if (modeEffectif() === 'persistant') {\n  <ng-container [ngTemplateOutlet]=\"contenu\" />\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}:host([data-mode=modal]){display:none}.st-sidenav__navigation{display:flex;flex-direction:column;gap:var(--st-espacement-1);padding:var(--st-espacement-4)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], gabarit: [{ type: i0.ViewChild, args: ['contenu', { isSignal: true }] }] } });
+
+/**
+ * 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.
+ */
+class StSidenavToggle {
+    stSidenavToggle = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stSidenavToggle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSidenavToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StSidenavToggle, isStandalone: true, selector: "[stSidenavToggle]", inputs: { stSidenavToggle: { classPropertyName: "stSidenavToggle", publicName: "stSidenavToggle", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "dialog" }, listeners: { "click": "stSidenavToggle().basculer()" }, properties: { "attr.aria-expanded": "stSidenavToggle().ouvert()", "attr.hidden": "stSidenavToggle().modeEffectif() === \"modal\" ? null : \"\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSidenavToggle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stSidenavToggle]',
+                    host: {
+                        'aria-haspopup': 'dialog',
+                        '[attr.aria-expanded]': 'stSidenavToggle().ouvert()',
+                        '[attr.hidden]': 'stSidenavToggle().modeEffectif() === "modal" ? null : ""',
+                        '(click)': 'stSidenavToggle().basculer()',
+                    },
+                }]
+        }], propDecorators: { stSidenavToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "stSidenavToggle", required: true }] }] } });
+
+/**
+ * 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).
+ */
+class StCombobox extends ControleDeSaisie {
+    libelles = inject(ST_LIBELLES);
+    element = inject(ElementRef);
+    injecteur = inject(Injector);
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    filtrage = input('local', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filtrage" }] : /* istanbul ignore next */ []));
+    /** Texte tape, a chaque frappe. Sert au filtrage `distant`. */
+    recherche = output();
+    annonce = new AnnonceLocale(inject(DestroyRef));
+    ouvert = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ouvert" }] : /* istanbul ignore next */ []));
+    /** Texte du champ : le libelle du choix, tant que la personne ne tape pas. */
+    texte = linkedSignal(() => this.libelleDe(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "texte" }] : /* istanbul ignore next */ []));
+    /** Ce qui filtre : vide a l'ouverture par la fleche, pour montrer toute la liste. */
+    filtre = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filtre" }] : /* istanbul ignore next */ []));
+    /** Option active dans la liste ; le choix n'est retenu qu'a la validation. */
+    surlignee = linkedSignal(() => this.value() === '' ? [] : [this.value()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surlignee" }] : /* istanbul ignore next */ []));
+    visibles = computed(() => this.filtrage() === 'local' ? filtrerOptions(this.options(), this.filtre()) : this.options(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibles" }] : /* istanbul ignore next */ []));
+    liste = viewChild(Listbox, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "liste" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        afterRenderEffect(() => {
+            if (this.ouvert())
+                this.liste()?.scrollActiveItemIntoView({ block: 'nearest' });
+        });
+    }
+    surSaisie(evenement) {
+        const saisie = this.texteSaisi(evenement);
+        this.filtre.set(saisie);
+        this.recherche.emit(saisie);
+        if (this.filtrage() === 'local') {
+            this.annonce.annoncer(this.libelles().nombreDeResultats(this.visibles().length));
+        }
+    }
+    basculer() {
+        if (this.disabled() || this.readonly())
+            return;
+        this.filtre.set('');
+        this.ouvert.update((ouvert) => !ouvert);
+        this.focus();
+    }
+    valider() {
+        const choisie = this.surlignee()[0];
+        if (choisie === undefined)
+            return;
+        this.value.set(choisie);
+        this.texte.set(this.libelleDe(choisie));
+        this.filtre.set('');
+        this.ouvert.set(false);
+        afterNextRender(() => {
+            this.focus();
+        }, { injector: this.injecteur });
+    }
+    aLaSortie(evenement) {
+        const suivant = evenement.relatedTarget;
+        if (suivant !== null && this.element.nativeElement.contains(suivant))
+            return;
+        if (this.texte().trim() === '')
+            this.value.set('');
+        this.texte.set(this.libelleDe(this.value()));
+        this.filtre.set('');
+        this.touch.emit();
+    }
+    libelleDe(valeur) {
+        if (valeur === '')
+            return '';
+        return this.options().find((option) => option.valeur === valeur)?.libelle ?? '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StCombobox, isStandalone: true, selector: "st-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, filtrage: { classPropertyName: "filtrage", publicName: "filtrage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recherche: "recherche" }, host: { listeners: { "focusout": "aLaSortie($event)" }, classAttribute: "st-combobox" }, viewQueries: [{ propertyName: "liste", first: true, predicate: Listbox, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <div #cadre class=\"st-combobox__cadre\">\n    <input\n      #champ\n      #combobox=\"ngCombobox\"\n      class=\"st-combobox__champ\"\n      stControleDeChamp\n      ngCombobox\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [(value)]=\"texte\"\n      [(expanded)]=\"ouvert\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"surSaisie($event)\"\n    />\n    <!-- Voie de la souris vers la liste. Hors tabulation et masque au lecteur\n         d'ecran : au clavier, la fleche bas ouvre la liste depuis le champ. -->\n    <span\n      class=\"st-combobox__ouvrir\"\n      aria-hidden=\"true\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"basculer()\"\n    >\n      <st-icon nom=\"chevron-bas\" taille=\"sm\" />\n    </span>\n  </div>\n\n  <!-- \u26A0\uFE0F La primitive de popup ENVELOPPE la surcouche, et non l'inverse (exemple\n       de la documentation d'Aria). Enfermee dans la surcouche, elle ne\n       s'enregistre qu'a l'ouverture : liste fermee, le champ annonce\n       aria-autocomplete=\"none\" et aucun aria-haspopup, et le lecteur d'ecran\n       ignore qu'une liste existe. -->\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\n    <ng-template\n      [cdkConnectedOverlay]=\"{ origin: cadre, usePopover: 'inline', matchWidth: true }\"\n      [cdkConnectedOverlayOpen]=\"ouvert()\"\n    >\n      <div class=\"st-combobox__popup\">\n        @if (visibles().length === 0) {\n          <p class=\"st-combobox__vide\">{{ libelles().aucunResultat }}</p>\n        }\n        <div\n          #liste=\"ngListbox\"\n          class=\"st-combobox__liste\"\n          ngListbox\n          ngComboboxWidget\n          focusMode=\"activedescendant\"\n          [tabindex]=\"-1\"\n          [attr.aria-label]=\"libelle()\"\n          [activeDescendant]=\"liste.activeDescendant()\"\n          [(value)]=\"surlignee\"\n          (click)=\"valider()\"\n          (keydown.enter)=\"valider()\"\n        >\n          @for (option of visibles(); track option.valeur) {\n            <div\n              class=\"st-combobox__option\"\n              ngOption\n              [value]=\"option.valeur\"\n              [label]=\"option.libelle\"\n              [disabled]=\"option.desactivee === true\"\n            >\n              <span>{{ option.libelle }}</span>\n              <st-icon class=\"st-combobox__coche\" nom=\"coche\" taille=\"sm\" />\n            </div>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</st-form-field>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}.st-combobox__cadre{position:relative}.st-combobox__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-combobox__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-combobox__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-combobox__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-combobox__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-combobox__champ{padding-inline-end:calc(var(--st-espacement-3) * 2 + 1rem)}.st-combobox__ouvrir{position:absolute;inset-block:0;inset-inline-end:0;display:flex;align-items:center;padding-inline:var(--st-espacement-3);color:var(--st-couleur-texte-discret);cursor:pointer}.st-combobox__popup{max-block-size:18rem;overflow-y:auto;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm);box-shadow:var(--st-ombre-md)}.st-combobox__vide{padding:var(--st-espacement-2) var(--st-espacement-3);margin:0;color:var(--st-couleur-texte-discret)}.st-combobox__option{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);cursor:pointer}.st-combobox__option[data-active=true]{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:-2px;background:var(--st-couleur-surface-enfoncee)}.st-combobox__option[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}.st-combobox__option[aria-selected=true]{font-weight:var(--st-graisse-semi)}.st-combobox__coche{visibility:hidden}[aria-selected=true]>.st-combobox__coche{visibility:visible}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "directive", type: Combobox, selector: "[ngCombobox]", inputs: ["disabled", "readonly", "softDisabled", "alwaysExpanded", "tabindex", "expanded", "value", "inlineSuggestion"], outputs: ["expandedChange", "valueChange"], exportAs: ["ngCombobox"] }, { kind: "directive", type: ComboboxPopup, selector: "ng-template[ngComboboxPopup]", inputs: ["combobox", "popupType"], exportAs: ["ngComboboxPopup"] }, { kind: "directive", type: ComboboxWidget, selector: "[ngComboboxWidget]", inputs: ["activeDescendant"], exportAs: ["ngComboboxWidget"] }, { kind: "directive", type: Listbox, selector: "[ngListbox]", inputs: ["id", "orientation", "multi", "wrap", "softDisabled", "focusMode", "selectionMode", "typeaheadDelay", "disabled", "readonly", "tabindex", "value"], outputs: ["valueChange"], exportAs: ["ngListbox"] }, { kind: "directive", type: Option, selector: "[ngOption]", inputs: ["id", "value", "disabled", "label"], exportAs: ["ngOption"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCombobox, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-combobox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        StFormField,
+                        StControleDeChamp,
+                        StIcon,
+                        Combobox,
+                        ComboboxPopup,
+                        ComboboxWidget,
+                        Listbox,
+                        Option,
+                        CdkConnectedOverlay,
+                    ], host: {
+                        class: 'st-combobox',
+                        '(focusout)': 'aLaSortie($event)',
+                    }, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <div #cadre class=\"st-combobox__cadre\">\n    <input\n      #champ\n      #combobox=\"ngCombobox\"\n      class=\"st-combobox__champ\"\n      stControleDeChamp\n      ngCombobox\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [(value)]=\"texte\"\n      [(expanded)]=\"ouvert\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"surSaisie($event)\"\n    />\n    <!-- Voie de la souris vers la liste. Hors tabulation et masque au lecteur\n         d'ecran : au clavier, la fleche bas ouvre la liste depuis le champ. -->\n    <span\n      class=\"st-combobox__ouvrir\"\n      aria-hidden=\"true\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"basculer()\"\n    >\n      <st-icon nom=\"chevron-bas\" taille=\"sm\" />\n    </span>\n  </div>\n\n  <!-- \u26A0\uFE0F La primitive de popup ENVELOPPE la surcouche, et non l'inverse (exemple\n       de la documentation d'Aria). Enfermee dans la surcouche, elle ne\n       s'enregistre qu'a l'ouverture : liste fermee, le champ annonce\n       aria-autocomplete=\"none\" et aucun aria-haspopup, et le lecteur d'ecran\n       ignore qu'une liste existe. -->\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\n    <ng-template\n      [cdkConnectedOverlay]=\"{ origin: cadre, usePopover: 'inline', matchWidth: true }\"\n      [cdkConnectedOverlayOpen]=\"ouvert()\"\n    >\n      <div class=\"st-combobox__popup\">\n        @if (visibles().length === 0) {\n          <p class=\"st-combobox__vide\">{{ libelles().aucunResultat }}</p>\n        }\n        <div\n          #liste=\"ngListbox\"\n          class=\"st-combobox__liste\"\n          ngListbox\n          ngComboboxWidget\n          focusMode=\"activedescendant\"\n          [tabindex]=\"-1\"\n          [attr.aria-label]=\"libelle()\"\n          [activeDescendant]=\"liste.activeDescendant()\"\n          [(value)]=\"surlignee\"\n          (click)=\"valider()\"\n          (keydown.enter)=\"valider()\"\n        >\n          @for (option of visibles(); track option.valeur) {\n            <div\n              class=\"st-combobox__option\"\n              ngOption\n              [value]=\"option.valeur\"\n              [label]=\"option.libelle\"\n              [disabled]=\"option.desactivee === true\"\n            >\n              <span>{{ option.libelle }}</span>\n              <st-icon class=\"st-combobox__coche\" nom=\"coche\" taille=\"sm\" />\n            </div>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</st-form-field>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}.st-combobox__cadre{position:relative}.st-combobox__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-combobox__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-combobox__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-combobox__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-combobox__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-combobox__champ{padding-inline-end:calc(var(--st-espacement-3) * 2 + 1rem)}.st-combobox__ouvrir{position:absolute;inset-block:0;inset-inline-end:0;display:flex;align-items:center;padding-inline:var(--st-espacement-3);color:var(--st-couleur-texte-discret);cursor:pointer}.st-combobox__popup{max-block-size:18rem;overflow-y:auto;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm);box-shadow:var(--st-ombre-md)}.st-combobox__vide{padding:var(--st-espacement-2) var(--st-espacement-3);margin:0;color:var(--st-couleur-texte-discret)}.st-combobox__option{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);cursor:pointer}.st-combobox__option[data-active=true]{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:-2px;background:var(--st-couleur-surface-enfoncee)}.st-combobox__option[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}.st-combobox__option[aria-selected=true]{font-weight:var(--st-graisse-semi)}.st-combobox__coche{visibility:hidden}[aria-selected=true]>.st-combobox__coche{visibility:visible}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], filtrage: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtrage", required: false }] }], recherche: [{ type: i0.Output, args: ["recherche"] }], liste: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Listbox), { isSignal: true }] }] } });
+
+/**
+ * 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.
+ */
+class StMultiselect extends ContratDeChamp {
+    libelles = inject(ST_LIBELLES);
+    element = inject(ElementRef);
+    injecteur = inject(Injector);
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    annonce = new AnnonceLocale(inject(DestroyRef));
+    ouvert = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ouvert" }] : /* istanbul ignore next */ []));
+    liste = viewChild(Listbox, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "liste" }] : /* istanbul ignore next */ []));
+    /** La liste d'Aria attend un tableau modifiable ; le modele, lui, est en lecture seule. */
+    valeursDeListe = computed(() => [...this.value()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valeursDeListe" }] : /* istanbul ignore next */ []));
+    choisies = computed(() => {
+        const valeurs = new Set(this.value());
+        return this.options().filter((option) => valeurs.has(option.valeur));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "choisies" }] : /* istanbul ignore next */ []));
+    resume = computed(() => {
+        const choisies = this.choisies();
+        return choisies.length === 0
+            ? this.libelles().choisir
+            : choisies.map((option) => option.libelle).join(', ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resume" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        afterRenderEffect(() => {
+            if (this.ouvert())
+                this.liste()?.scrollActiveItemIntoView({ block: 'nearest' });
+        });
+    }
+    /** Le declencheur n'est pas un champ natif : la base ne le trouve pas par `#champ`. */
+    focus(options) {
+        this.element.nativeElement.querySelector('[ngCombobox]')?.focus(options);
+    }
+    surChoix(valeurs) {
+        if (this.readonly())
+            return;
+        // Dans l'ordre des options, et non dans l'ordre des clics : un modele stable
+        // ne change pas de forme selon le chemin pris pour le remplir.
+        const retenues = new Set(valeurs);
+        this.value.set(this.options()
+            .filter((option) => retenues.has(option.valeur))
+            .map((option) => option.valeur));
+    }
+    retirer(valeur, indice) {
+        const restantes = this.value().filter((choisie) => choisie !== valeur);
+        this.value.set(restantes);
+        this.annonce.annoncer(this.libelles().nombreDeSelections(restantes.length));
+        afterNextRender(() => {
+            const boutons = this.element.nativeElement.querySelectorAll('.st-multiselect__retrait');
+            const suivant = boutons[Math.min(indice, boutons.length - 1)];
+            if (suivant !== undefined)
+                suivant.focus();
+            else
+                this.focus();
+        }, { injector: this.injecteur });
+    }
+    aLaSortie(evenement) {
+        const suivant = evenement.relatedTarget;
+        if (suivant !== null && this.element.nativeElement.contains(suivant))
+            return;
+        this.touch.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StMultiselect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StMultiselect, isStandalone: true, selector: "st-multiselect", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "aLaSortie($event)" }, classAttribute: "st-multiselect" }, viewQueries: [{ propertyName: "liste", first: true, predicate: Listbox, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <div\n    #combobox=\"ngCombobox\"\n    class=\"st-multiselect__declencheur\"\n    stControleDeChamp\n    ngCombobox\n    [attr.data-vide]=\"choisies().length === 0 ? '' : null\"\n    [(expanded)]=\"ouvert\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    <span class=\"st-multiselect__resume\">{{ resume() }}</span>\n    <st-icon class=\"st-multiselect__chevron\" nom=\"chevron-bas\" taille=\"sm\" />\n  </div>\n\n  <!-- \u26A0\uFE0F La primitive de popup ENVELOPPE la surcouche, et non l'inverse (exemple\n       de la documentation d'Aria). Enfermee dans la surcouche, elle ne\n       s'enregistre qu'a l'ouverture : liste fermee, le champ annonce\n       aria-autocomplete=\"none\" et aucun aria-haspopup, et le lecteur d'ecran\n       ignore qu'une liste existe. -->\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\n    <ng-template\n      [cdkConnectedOverlay]=\"{ origin: combobox.element, usePopover: 'inline', matchWidth: true }\"\n      [cdkConnectedOverlayOpen]=\"ouvert()\"\n    >\n      <div class=\"st-multiselect__popup\">\n        <div\n          #liste=\"ngListbox\"\n          class=\"st-multiselect__liste\"\n          ngListbox\n          ngComboboxWidget\n          focusMode=\"activedescendant\"\n          selectionMode=\"explicit\"\n          [multi]=\"true\"\n          [tabindex]=\"-1\"\n          [attr.aria-label]=\"libelle()\"\n          [activeDescendant]=\"liste.activeDescendant()\"\n          [value]=\"valeursDeListe()\"\n          (valueChange)=\"surChoix($event)\"\n        >\n          @for (option of options(); track option.valeur) {\n            <div\n              class=\"st-multiselect__option\"\n              ngOption\n              [value]=\"option.valeur\"\n              [label]=\"option.libelle\"\n              [disabled]=\"option.desactivee === true\"\n            >\n              <span>{{ option.libelle }}</span>\n              <st-icon class=\"st-multiselect__coche\" nom=\"coche\" taille=\"sm\" />\n            </div>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  @if (choisies().length > 0) {\n    <ul class=\"st-multiselect__choix\">\n      @for (option of choisies(); track option.valeur; let indice = $index) {\n        <li class=\"st-multiselect__puce\">\n          <span>{{ option.libelle }}</span>\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n               Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n          <button\n            class=\"st-multiselect__retrait\"\n            stIconButton\n            type=\"button\"\n            icone=\"croix\"\n            taille=\"sm\"\n            [etiquette]=\"libelles().retirerLeChoix(option.libelle)\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"retirer(option.valeur, indice)\"\n          ></button>\n        </li>\n      }\n    </ul>\n  }\n</st-form-field>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}.st-multiselect__declencheur:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-multiselect__declencheur{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-multiselect__declencheur[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-multiselect__declencheur:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-multiselect__declencheur:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-multiselect__declencheur{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;cursor:pointer}.st-multiselect__declencheur[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-multiselect__resume{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-vide]>.st-multiselect__resume{color:var(--st-couleur-texte-discret)}.st-multiselect__chevron{flex:none;color:var(--st-couleur-texte-discret)}.st-multiselect__popup{max-block-size:18rem;overflow-y:auto;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm);box-shadow:var(--st-ombre-md)}.st-multiselect__option{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);cursor:pointer}.st-multiselect__option[data-active=true]{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:-2px;background:var(--st-couleur-surface-enfoncee)}.st-multiselect__option[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}.st-multiselect__option[aria-selected=true]{font-weight:var(--st-graisse-semi)}.st-multiselect__coche{visibility:hidden}[aria-selected=true]>.st-multiselect__coche{visibility:visible}.st-multiselect__choix{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);padding:0;margin:var(--st-espacement-2) 0 0;list-style:none}.st-multiselect__puce{display:inline-flex;gap:var(--st-espacement-1);align-items:center;padding-inline-start:var(--st-espacement-3);background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-pleine)}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }, { kind: "directive", type: Combobox, selector: "[ngCombobox]", inputs: ["disabled", "readonly", "softDisabled", "alwaysExpanded", "tabindex", "expanded", "value", "inlineSuggestion"], outputs: ["expandedChange", "valueChange"], exportAs: ["ngCombobox"] }, { kind: "directive", type: ComboboxPopup, selector: "ng-template[ngComboboxPopup]", inputs: ["combobox", "popupType"], exportAs: ["ngComboboxPopup"] }, { kind: "directive", type: ComboboxWidget, selector: "[ngComboboxWidget]", inputs: ["activeDescendant"], exportAs: ["ngComboboxWidget"] }, { kind: "directive", type: Listbox, selector: "[ngListbox]", inputs: ["id", "orientation", "multi", "wrap", "softDisabled", "focusMode", "selectionMode", "typeaheadDelay", "disabled", "readonly", "tabindex", "value"], outputs: ["valueChange"], exportAs: ["ngListbox"] }, { kind: "directive", type: Option, selector: "[ngOption]", inputs: ["id", "value", "disabled", "label"], exportAs: ["ngOption"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StMultiselect, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        StFormField,
+                        StControleDeChamp,
+                        StIcon,
+                        StIconButton,
+                        Combobox,
+                        ComboboxPopup,
+                        ComboboxWidget,
+                        Listbox,
+                        Option,
+                        CdkConnectedOverlay,
+                    ], host: {
+                        class: 'st-multiselect',
+                        '(focusout)': 'aLaSortie($event)',
+                    }, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <div\n    #combobox=\"ngCombobox\"\n    class=\"st-multiselect__declencheur\"\n    stControleDeChamp\n    ngCombobox\n    [attr.data-vide]=\"choisies().length === 0 ? '' : null\"\n    [(expanded)]=\"ouvert\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    <span class=\"st-multiselect__resume\">{{ resume() }}</span>\n    <st-icon class=\"st-multiselect__chevron\" nom=\"chevron-bas\" taille=\"sm\" />\n  </div>\n\n  <!-- \u26A0\uFE0F La primitive de popup ENVELOPPE la surcouche, et non l'inverse (exemple\n       de la documentation d'Aria). Enfermee dans la surcouche, elle ne\n       s'enregistre qu'a l'ouverture : liste fermee, le champ annonce\n       aria-autocomplete=\"none\" et aucun aria-haspopup, et le lecteur d'ecran\n       ignore qu'une liste existe. -->\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\n    <ng-template\n      [cdkConnectedOverlay]=\"{ origin: combobox.element, usePopover: 'inline', matchWidth: true }\"\n      [cdkConnectedOverlayOpen]=\"ouvert()\"\n    >\n      <div class=\"st-multiselect__popup\">\n        <div\n          #liste=\"ngListbox\"\n          class=\"st-multiselect__liste\"\n          ngListbox\n          ngComboboxWidget\n          focusMode=\"activedescendant\"\n          selectionMode=\"explicit\"\n          [multi]=\"true\"\n          [tabindex]=\"-1\"\n          [attr.aria-label]=\"libelle()\"\n          [activeDescendant]=\"liste.activeDescendant()\"\n          [value]=\"valeursDeListe()\"\n          (valueChange)=\"surChoix($event)\"\n        >\n          @for (option of options(); track option.valeur) {\n            <div\n              class=\"st-multiselect__option\"\n              ngOption\n              [value]=\"option.valeur\"\n              [label]=\"option.libelle\"\n              [disabled]=\"option.desactivee === true\"\n            >\n              <span>{{ option.libelle }}</span>\n              <st-icon class=\"st-multiselect__coche\" nom=\"coche\" taille=\"sm\" />\n            </div>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  @if (choisies().length > 0) {\n    <ul class=\"st-multiselect__choix\">\n      @for (option of choisies(); track option.valeur; let indice = $index) {\n        <li class=\"st-multiselect__puce\">\n          <span>{{ option.libelle }}</span>\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n               Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n          <button\n            class=\"st-multiselect__retrait\"\n            stIconButton\n            type=\"button\"\n            icone=\"croix\"\n            taille=\"sm\"\n            [etiquette]=\"libelles().retirerLeChoix(option.libelle)\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"retirer(option.valeur, indice)\"\n          ></button>\n        </li>\n      }\n    </ul>\n  }\n</st-form-field>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}.st-multiselect__declencheur:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-multiselect__declencheur{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-multiselect__declencheur[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-multiselect__declencheur:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-multiselect__declencheur:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-multiselect__declencheur{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;cursor:pointer}.st-multiselect__declencheur[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-multiselect__resume{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-vide]>.st-multiselect__resume{color:var(--st-couleur-texte-discret)}.st-multiselect__chevron{flex:none;color:var(--st-couleur-texte-discret)}.st-multiselect__popup{max-block-size:18rem;overflow-y:auto;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm);box-shadow:var(--st-ombre-md)}.st-multiselect__option{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);cursor:pointer}.st-multiselect__option[data-active=true]{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:-2px;background:var(--st-couleur-surface-enfoncee)}.st-multiselect__option[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}.st-multiselect__option[aria-selected=true]{font-weight:var(--st-graisse-semi)}.st-multiselect__coche{visibility:hidden}[aria-selected=true]>.st-multiselect__coche{visibility:visible}.st-multiselect__choix{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);padding:0;margin:var(--st-espacement-2) 0 0;list-style:none}.st-multiselect__puce{display:inline-flex;gap:var(--st-espacement-1);align-items:center;padding-inline-start:var(--st-espacement-3);background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-pleine)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], liste: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Listbox), { isSignal: true }] }] } });
+
+/**
+ * @starterlib/ui/interactions — les composants montes sur Angular Aria qui ne
+ * se posent pas au-dessus de la page.
+ *
+ * ⚠️ Un point d'entree separe pour la meme raison que `ui/surfaces` : ce qui vit
+ * ici traine `@angular/aria`, pair optionnel. Laisse dans le tronc, il entrerait
+ * dans le train de singletons de chaque application. Mais ce n'est pas une
+ * surface : des onglets font partie de la page. Le ranger sous `ui/surfaces`
+ * aurait fait mentir le nom, et l'ADR 0003 aurait perdu sa lisibilite (audit de
+ * la vague 2, decision 5.1).
+ *
+ * ⚠️ En federation, ce point d'entree se partage SEPAREMENT : c'est un
+ * specificateur de module distinct.
+ *
+ * ```ts
+ * import { StTabs, StTabPanel, StTabContent } from '@starterlib/ui/interactions';
+ * ```
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StCombobox, StMultiselect, StSidenav, StSidenavToggle, StTabContent, StTabPanel, StTabs };
+//# sourceMappingURL=starterlib-ui-interactions.mjs.map