@starterlib/ui 0.7.2 → 0.8.0

package/fesm2022/starterlib-ui-interactions.mjs

@@ -1,598 +1,43 @@
-import * as i0 from '@angular/core';
-import { input, model, computed, ChangeDetectionStrategy, Component, Directive, inject, signal, viewChild, effect, DestroyRef, ElementRef, Injector, output, linkedSignal, afterRenderEffect, afterNextRender, booleanAttribute } 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 { RUPTURES } from '@starterlib/tokens';
-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';
-import { Tree, TreeItem, TreeItemGroup } from '@angular/aria/tree';
-
-/**
- * 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}@media(hover:hover){.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}@media(hover:hover){.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`,
- * lu dans les jetons : ecrit en dur ici, il avait deja diverge une fois de la
- * feuille (F7 du plan de la coquille).
- */
-const ECRAN_LARGE = RUPTURES.lg.requete;
-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-commande-hauteur, 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-commande-rayon, var(--st-rayon-md))}.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", "sprite", "nomMetier", "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-commande-hauteur, 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-commande-rayon, var(--st-rayon-md))}.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-commande-hauteur, 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-commande-rayon, var(--st-rayon-md))}.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", "sprite", "nomMetier", "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-commande-hauteur, 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-commande-rayon, var(--st-rayon-md))}.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 }] }] } });
-
-/**
- * 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.
- */
-class StTree {
-    /** Nom de l'arbre, lu a l'entree. Obligatoire. */
-    etiquette = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
-    noeuds = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "noeuds" }] : /* istanbul ignore next */ []));
-    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    selection = model([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-    deplies = model([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "deplies" }] : /* istanbul ignore next */ []));
-    /** La primitive attend un tableau modifiable ; le modele est en lecture seule. */
-    valeursChoisies = computed(() => [...this.selection()], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valeursChoisies" }] : /* istanbul ignore next */ []));
-    ensembleDeplie = computed(() => new Set(this.deplies()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ensembleDeplie" }] : /* istanbul ignore next */ []));
-    estDeplie(noeud) {
-        return this.ensembleDeplie().has(noeud.valeur);
-    }
-    surDepliage(noeud, deplie) {
-        const deplies = this.deplies().filter((valeur) => valeur !== noeud.valeur);
-        this.deplies.set(deplie ? [...deplies, noeud.valeur] : deplies);
-    }
-    surSelection(valeurs) {
-        this.selection.set([...valeurs]);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StTree, isStandalone: true, selector: "st-tree", inputs: { etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, noeuds: { classPropertyName: "noeuds", publicName: "noeuds", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, deplies: { classPropertyName: "deplies", publicName: "deplies", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", deplies: "depliesChange" }, host: { classAttribute: "st-tree" }, ngImport: i0, template: "<ul\n  #arbre=\"ngTree\"\n  class=\"st-tree__racine\"\n  ngTree\n  selectionMode=\"explicit\"\n  [attr.aria-label]=\"etiquette()\"\n  [multi]=\"multiple()\"\n  [value]=\"valeursChoisies()\"\n  (valueChange)=\"surSelection($event)\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"niveau; context: { noeuds: noeuds(), parent: arbre, niveau: 1 }\"\n  />\n</ul>\n\n<ng-template #niveau let-noeuds=\"noeuds\" let-parent=\"parent\" let-profondeur=\"niveau\">\n  @for (noeud of noeuds; track noeud.valeur) {\n    <li\n      #element=\"ngTreeItem\"\n      class=\"st-tree__element\"\n      ngTreeItem\n      [parent]=\"parent\"\n      [value]=\"noeud.valeur\"\n      [label]=\"noeud.libelle\"\n      [disabled]=\"noeud.desactive === true\"\n      [expanded]=\"estDeplie(noeud)\"\n      [style.--st-arbre-niveau]=\"profondeur\"\n      (expandedChange)=\"surDepliage(noeud, $event)\"\n    >\n      @if (noeud.enfants?.length) {\n        <st-icon\n          class=\"st-tree__chevron\"\n          taille=\"sm\"\n          [nom]=\"estDeplie(noeud) ? 'chevron-bas' : 'chevron-droite'\"\n        />\n      } @else {\n        <span class=\"st-tree__espace\"></span>\n      }\n      <span class=\"st-tree__libelle\">{{ noeud.libelle }}</span>\n      <st-icon class=\"st-tree__coche\" nom=\"coche\" taille=\"sm\" />\n    </li>\n    @if (noeud.enfants?.length) {\n      <ul class=\"st-tree__groupe\" role=\"group\">\n        <ng-template ngTreeItemGroup [ownedBy]=\"element\" #groupe=\"ngTreeItemGroup\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              niveau;\n              context: { noeuds: noeud.enfants, parent: groupe, niveau: profondeur + 1 }\n            \"\n          />\n        </ng-template>\n      </ul>\n    }\n  }\n</ng-template>\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-tree__racine,.st-tree__groupe{padding:0;margin:0;list-style:none}.st-tree__element{display:flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);padding-inline:calc((var(--st-arbre-niveau, 1) - 1) * 1.5rem + var(--st-espacement-2)) var(--st-espacement-2);cursor:pointer;border-radius:var(--st-rayon-sm)}@media(hover:hover){.st-tree__element:hover{background:var(--st-couleur-surface-survol)}}.st-tree__element:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:-2px}.st-tree__element[aria-selected=true]{font-weight:var(--st-graisse-semi);background:var(--st-couleur-primaire-discret)}.st-tree__element[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}.st-tree__chevron,.st-tree__espace{flex:none;inline-size:1rem}.st-tree__coche{margin-inline-start:auto;visibility:hidden}[aria-selected=true]>.st-tree__coche{visibility:visible}.st-tree__groupe:empty{display:none}\n"], dependencies: [{ kind: "directive", type: Tree, selector: "[ngTree]", inputs: ["id", "orientation", "multi", "disabled", "selectionMode", "focusMode", "wrap", "softDisabled", "typeaheadDelay", "tabindex", "value", "nav", "currentType"], outputs: ["valueChange"], exportAs: ["ngTree"] }, { kind: "directive", type: TreeItem, selector: "[ngTreeItem]", inputs: ["id", "value", "parent", "disabled", "selectable", "expanded", "label"], outputs: ["expandedChange"], exportAs: ["ngTreeItem"] }, { kind: "directive", type: TreeItemGroup, selector: "ng-template[ngTreeItemGroup]", inputs: ["ownedBy"], exportAs: ["ngTreeItemGroup"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "sprite", "nomMetier", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTree, decorators: [{
-            type: Component,
-            args: [{ selector: 'st-tree', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Tree, TreeItem, TreeItemGroup, NgTemplateOutlet, StIcon], host: { class: 'st-tree' }, template: "<ul\n  #arbre=\"ngTree\"\n  class=\"st-tree__racine\"\n  ngTree\n  selectionMode=\"explicit\"\n  [attr.aria-label]=\"etiquette()\"\n  [multi]=\"multiple()\"\n  [value]=\"valeursChoisies()\"\n  (valueChange)=\"surSelection($event)\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"niveau; context: { noeuds: noeuds(), parent: arbre, niveau: 1 }\"\n  />\n</ul>\n\n<ng-template #niveau let-noeuds=\"noeuds\" let-parent=\"parent\" let-profondeur=\"niveau\">\n  @for (noeud of noeuds; track noeud.valeur) {\n    <li\n      #element=\"ngTreeItem\"\n      class=\"st-tree__element\"\n      ngTreeItem\n      [parent]=\"parent\"\n      [value]=\"noeud.valeur\"\n      [label]=\"noeud.libelle\"\n      [disabled]=\"noeud.desactive === true\"\n      [expanded]=\"estDeplie(noeud)\"\n      [style.--st-arbre-niveau]=\"profondeur\"\n      (expandedChange)=\"surDepliage(noeud, $event)\"\n    >\n      @if (noeud.enfants?.length) {\n        <st-icon\n          class=\"st-tree__chevron\"\n          taille=\"sm\"\n          [nom]=\"estDeplie(noeud) ? 'chevron-bas' : 'chevron-droite'\"\n        />\n      } @else {\n        <span class=\"st-tree__espace\"></span>\n      }\n      <span class=\"st-tree__libelle\">{{ noeud.libelle }}</span>\n      <st-icon class=\"st-tree__coche\" nom=\"coche\" taille=\"sm\" />\n    </li>\n    @if (noeud.enfants?.length) {\n      <ul class=\"st-tree__groupe\" role=\"group\">\n        <ng-template ngTreeItemGroup [ownedBy]=\"element\" #groupe=\"ngTreeItemGroup\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              niveau;\n              context: { noeuds: noeud.enfants, parent: groupe, niveau: profondeur + 1 }\n            \"\n          />\n        </ng-template>\n      </ul>\n    }\n  }\n</ng-template>\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-tree__racine,.st-tree__groupe{padding:0;margin:0;list-style:none}.st-tree__element{display:flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);padding-inline:calc((var(--st-arbre-niveau, 1) - 1) * 1.5rem + var(--st-espacement-2)) var(--st-espacement-2);cursor:pointer;border-radius:var(--st-rayon-sm)}@media(hover:hover){.st-tree__element:hover{background:var(--st-couleur-surface-survol)}}.st-tree__element:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:-2px}.st-tree__element[aria-selected=true]{font-weight:var(--st-graisse-semi);background:var(--st-couleur-primaire-discret)}.st-tree__element[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}.st-tree__chevron,.st-tree__espace{flex:none;inline-size:1rem}.st-tree__coche{margin-inline-start:auto;visibility:hidden}[aria-selected=true]>.st-tree__coche{visibility:visible}.st-tree__groupe:empty{display:none}\n"] }]
-        }], propDecorators: { etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: true }] }], noeuds: [{ type: i0.Input, args: [{ isSignal: true, alias: "noeuds", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], deplies: [{ type: i0.Input, args: [{ isSignal: true, alias: "deplies", required: false }] }, { type: i0.Output, args: ["depliesChange"] }] } });
-
-/**
- * @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.
+export * from '@starterlib/ui/onglets';
+export * from '@starterlib/ui/navigation';
+export * from '@starterlib/ui/selection';
+export * from '@starterlib/ui/arbre';
+
+/**
+ * @starterlib/ui/interactions — **DEPRECIE depuis la 0.8.0**. Baril de
+ * compatibilite : il ne contient plus une ligne de code, il re-exporte les
+ * quatre points d'entree qui l'ont remplace.
+ *
+ * | Ce qu'on importait ici | Ou il vit desormais |
+ * |---|---|
+ * | `StSidenav`, `StSidenavToggle` | `@starterlib/ui/navigation` |
+ * | `StTabs`, `StTabPanel`, `StTabContent` | `@starterlib/ui/onglets` |
+ * | `StCombobox`, `StMultiselect` | `@starterlib/ui/selection` |
+ * | `StTree` | `@starterlib/ui/arbre` |
+ *
+ * ⚠️ **Ce qui s'importe d'ici pese les QUATRE familles.** Le baril agrege
+ * `@angular/aria/tabs`, `/combobox`, `/listbox`, `/tree`, `@angular/cdk/overlay`
+ * et `@angular/cdk/layout` : une page qui ne veut qu'un panneau lateral paie
+ * tout le reste (ADR 0031, decision 2). C'est exactement le defaut mesure sur
+ * la coquille — 15,2 Ko d'`@angular/aria` pour un seul `StSidenav`.
+ *
+ * Il survit pour que la migration soit PROGRESSIVE : un remote reste en
+ * 0.7.x qui importe `StTabs` d'ici recoit la MEME CLASSE que l'hote qui
+ * l'importe de `@starterlib/ui/onglets`, puisque les deux specificateurs sont
+ * partages en singleton et que le baril ne fait que re-exporter. A retirer
+ * quand plus aucun consommateur ne l'importe.
  *
  * ```ts
- * import { StTabs, StTabPanel, StTabContent } from '@starterlib/ui/interactions';
+ * // Ne plus ecrire :
+ * import { StSidenav } from '@starterlib/ui/interactions';
+ * // Ecrire :
+ * import { StSidenav } from '@starterlib/ui/navigation';
  * ```
+ *
+ * @deprecated Importer le point d'entree etroit correspondant.
  */
 
 /**
  * Generated bundle index. Do not edit.
  */
-
-export { StCombobox, StMultiselect, StSidenav, StSidenavToggle, StTabContent, StTabPanel, StTabs, StTree };
 //# sourceMappingURL=starterlib-ui-interactions.mjs.map