@starterlib/ui 0.7.2 → 0.8.0

package/fesm2022/starterlib-ui-listes.mjs

@@ -0,0 +1,671 @@
+import * as i0 from '@angular/core';
+import { inject, Injector, input, booleanAttribute, model, output, DestroyRef, computed, effect, afterNextRender, ChangeDetectionStrategy, Component, TemplateRef, Directive, contentChildren, ElementRef, contentChild, viewChild, signal } from '@angular/core';
+import { ST_LIBELLES, AnnonceLocale, StButton, StIcon } from '@starterlib/ui';
+import { NgTemplateOutlet } from '@angular/common';
+
+/** Plafond du backend : au-dela, la requete est refusee (SEC-7 de la vague 4). */
+const TAILLE_MAXIMALE = 100;
+/**
+ * Pagination d'une liste par curseur.
+ *
+ * ```html
+ * <st-data-table #tableau … />
+ * <st-pagination
+ *   [numero]="navigation.numeroDePage()"
+ *   [precedenteDisponible]="navigation.precedenteDisponible()"
+ *   [suivanteDisponible]="page.value()?.hasMore ?? false"
+ *   [chargement]="page.isLoading()"
+ *   [cible]="tableau"
+ *   (precedente)="navigation.precedente()"
+ *   (suivante)="navigation.suivante(page.value())"
+ * />
+ * ```
+ *
+ * ⚠️ **Ni total, ni numeros cliquables** : le backend ne compte pas et ne va que
+ * vers l'avant (audit de la vague 4, V4-2). « Page 3 » se dit ; « page 3 sur 12 »
+ * serait invente.
+ *
+ * ⚠️ **Boutons indisponibles, jamais desactives** : sur la derniere page, « Page
+ * suivante » garde le focus qu'il avait. Desactive, il le perdrait, et le lecteur
+ * d'ecran retomberait sur le debut du document.
+ *
+ * ⚠️ **Apres un changement de page, le focus va a la `cible`** — la legende du
+ * tableau — et « Page 2 » s'annonce (UX-13). Sans cela, la personne au clavier
+ * reste en bas, sur « Page suivante », sans savoir que le contenu au-dessus a
+ * change.
+ */
+class StPagination {
+    libelles = inject(ST_LIBELLES);
+    injecteur = inject(Injector);
+    mode = input('pages', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** A partir de 1. */
+    numero = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numero" }] : /* istanbul ignore next */ []));
+    precedenteDisponible = input(false, { ...(ngDevMode ? { debugName: "precedenteDisponible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    suivanteDisponible = input(false, { ...(ngDevMode ? { debugName: "suivanteDisponible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    chargement = input(false, { ...(ngDevMode ? { debugName: "chargement" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Nom de la navigation, quand une page en porte plusieurs. */
+    etiquette = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
+    /** Tailles proposees ; vide, pas de choix. Plafonnees a 100. */
+    taillesDePage = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "taillesDePage" }] : /* istanbul ignore next */ []));
+    taille = model(20, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "taille" }] : /* istanbul ignore next */ []));
+    /** Recoit le focus apres un changement de page. */
+    cible = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cible" }] : /* istanbul ignore next */ []));
+    precedente = output();
+    suivante = output();
+    annonce = new AnnonceLocale(inject(DestroyRef));
+    tailles = computed(() => this.taillesDePage().filter((taille) => taille >= 1 && taille <= TAILLE_MAXIMALE), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tailles" }] : /* istanbul ignore next */ []));
+    etiquetteLue = computed(() => this.etiquette() ?? this.libelles().pagination, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquetteLue" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Le focus attend la FIN du chargement : amene sur la cible pendant que les
+        // anciennes lignes sont encore la, il ferait relire la page quittee.
+        let dernier = null;
+        let enAttente = false;
+        effect(() => {
+            const numero = this.numero();
+            const chargement = this.chargement();
+            if (dernier === null) {
+                dernier = numero;
+                return;
+            }
+            if (numero !== dernier) {
+                dernier = numero;
+                enAttente = true;
+                if (this.mode() === 'pages')
+                    this.annonce.annoncer(this.libelles().pageNumero(numero));
+            }
+            if (!enAttente || chargement)
+                return;
+            enAttente = false;
+            afterNextRender(() => {
+                const cible = this.cible();
+                const element = typeof cible === 'function' ? cible() : cible;
+                element?.focus();
+            }, { injector: this.injecteur });
+        });
+    }
+    surTaille(evenement) {
+        this.taille.set(Number(evenement.target.value));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StPagination, isStandalone: true, selector: "st-pagination", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, numero: { classPropertyName: "numero", publicName: "numero", isSignal: true, isRequired: false, transformFunction: null }, precedenteDisponible: { classPropertyName: "precedenteDisponible", publicName: "precedenteDisponible", isSignal: true, isRequired: false, transformFunction: null }, suivanteDisponible: { classPropertyName: "suivanteDisponible", publicName: "suivanteDisponible", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, taillesDePage: { classPropertyName: "taillesDePage", publicName: "taillesDePage", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, cible: { classPropertyName: "cible", publicName: "cible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { taille: "tailleChange", precedente: "precedente", suivante: "suivante" }, host: { classAttribute: "st-pagination" }, ngImport: i0, template: "<nav class=\"st-pagination__navigation\" [attr.aria-label]=\"etiquetteLue()\">\n  @if (mode() === 'pages') {\n    <button\n      stButton\n      type=\"button\"\n      iconeAvant=\"chevron-gauche\"\n      [indisponible]=\"!precedenteDisponible() || chargement()\"\n      (click)=\"precedente.emit()\"\n    >\n      {{ libelles().pagePrecedente }}\n    </button>\n    <span class=\"st-pagination__numero\" aria-current=\"page\">\n      {{ libelles().pageNumero(numero()) }}\n    </span>\n    <button\n      stButton\n      type=\"button\"\n      iconeApres=\"chevron-droite\"\n      [indisponible]=\"!suivanteDisponible()\"\n      [chargement]=\"chargement()\"\n      (click)=\"suivante.emit()\"\n    >\n      {{ libelles().pageSuivante }}\n    </button>\n  } @else if (suivanteDisponible()) {\n    <button stButton type=\"button\" [chargement]=\"chargement()\" (click)=\"suivante.emit()\">\n      {{ libelles().afficherPlus }}\n    </button>\n  }\n\n  @if (tailles().length > 0) {\n    <label class=\"st-pagination__taille\">\n      <span>{{ libelles().lignesParPage }}</span>\n      <select class=\"st-pagination__choix\" (change)=\"surTaille($event)\">\n        @for (proposee of tailles(); track proposee) {\n          <option [value]=\"proposee\" [selected]=\"proposee === taille()\">{{ proposee }}</option>\n        }\n      </select>\n    </label>\n  }\n</nav>\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-pagination__navigation{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-3);align-items:center}.st-pagination__numero{font-variant-numeric:tabular-nums;font-weight:var(--st-graisse-semi)}.st-pagination__taille{display:inline-flex;gap:var(--st-espacement-2);align-items:center;margin-inline-start:auto}.st-pagination__choix:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-pagination__choix{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-pagination__choix[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-pagination__choix:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-pagination__choix:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-pagination__choix{inline-size:auto}\n"], dependencies: [{ kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement", "indisponible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPagination, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StButton], host: { class: 'st-pagination' }, template: "<nav class=\"st-pagination__navigation\" [attr.aria-label]=\"etiquetteLue()\">\n  @if (mode() === 'pages') {\n    <button\n      stButton\n      type=\"button\"\n      iconeAvant=\"chevron-gauche\"\n      [indisponible]=\"!precedenteDisponible() || chargement()\"\n      (click)=\"precedente.emit()\"\n    >\n      {{ libelles().pagePrecedente }}\n    </button>\n    <span class=\"st-pagination__numero\" aria-current=\"page\">\n      {{ libelles().pageNumero(numero()) }}\n    </span>\n    <button\n      stButton\n      type=\"button\"\n      iconeApres=\"chevron-droite\"\n      [indisponible]=\"!suivanteDisponible()\"\n      [chargement]=\"chargement()\"\n      (click)=\"suivante.emit()\"\n    >\n      {{ libelles().pageSuivante }}\n    </button>\n  } @else if (suivanteDisponible()) {\n    <button stButton type=\"button\" [chargement]=\"chargement()\" (click)=\"suivante.emit()\">\n      {{ libelles().afficherPlus }}\n    </button>\n  }\n\n  @if (tailles().length > 0) {\n    <label class=\"st-pagination__taille\">\n      <span>{{ libelles().lignesParPage }}</span>\n      <select class=\"st-pagination__choix\" (change)=\"surTaille($event)\">\n        @for (proposee of tailles(); track proposee) {\n          <option [value]=\"proposee\" [selected]=\"proposee === taille()\">{{ proposee }}</option>\n        }\n      </select>\n    </label>\n  }\n</nav>\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-pagination__navigation{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-3);align-items:center}.st-pagination__numero{font-variant-numeric:tabular-nums;font-weight:var(--st-graisse-semi)}.st-pagination__taille{display:inline-flex;gap:var(--st-espacement-2);align-items:center;margin-inline-start:auto}.st-pagination__choix:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-pagination__choix{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-pagination__choix[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-pagination__choix:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-pagination__choix:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-pagination__choix{inline-size:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], numero: [{ type: i0.Input, args: [{ isSignal: true, alias: "numero", required: false }] }], precedenteDisponible: [{ type: i0.Input, args: [{ isSignal: true, alias: "precedenteDisponible", required: false }] }], suivanteDisponible: [{ type: i0.Input, args: [{ isSignal: true, alias: "suivanteDisponible", required: false }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], taillesDePage: [{ type: i0.Input, args: [{ isSignal: true, alias: "taillesDePage", required: false }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }, { type: i0.Output, args: ["tailleChange"] }], cible: [{ type: i0.Input, args: [{ isSignal: true, alias: "cible", required: false }] }], precedente: [{ type: i0.Output, args: ["precedente"] }], suivante: [{ type: i0.Output, args: ["suivante"] }] } });
+
+/**
+ * Valeur riche d'un element : montant, date, valeur masquee.
+ *
+ * ```html
+ * <ng-template stDescription="iban" let-element>
+ *   <st-masked nature="iban" [valeur]="compte().iban" />
+ * </ng-template>
+ * ```
+ */
+class StDescription {
+    cle = input.required({ ...(ngDevMode ? { debugName: "cle" } : /* istanbul ignore next */ {}), alias: 'stDescription' });
+    gabarit = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, _contexte) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StDescription, isStandalone: true, selector: "ng-template[stDescription]", inputs: { cle: { classPropertyName: "cle", publicName: "stDescription", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDescription, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[stDescription]' }]
+        }], propDecorators: { cle: [{ type: i0.Input, args: [{ isSignal: true, alias: "stDescription", required: true }] }] } });
+/**
+ * Liste de descriptions : les proprietes d'un objet, sur une page de detail.
+ *
+ * ```html
+ * <st-description-list [elements]="[
+ *   { terme: 'Reference', description: commande().reference },
+ *   { cle: 'montant', terme: 'Montant', description: null },
+ * ]">
+ *   <ng-template stDescription="montant"><st-money [valeur]="commande().montant" /></ng-template>
+ * </st-description-list>
+ * ```
+ *
+ * ⚠️ **Un vrai `dl`, rendu par le composant.** Le lecteur d'ecran annonce « liste de
+ * descriptions, 4 elements » et lit chaque terme avec sa valeur. Ecrits par
+ * l'application et projetes, `dt` et `dd` echapperaient aux styles du composant,
+ * et un `div` mal place rendrait la liste invalide.
+ *
+ * ⚠️ **Une valeur absente se dit** : « — » a l'ecran, « Non renseigne » au lecteur
+ * d'ecran. Une cellule vide ne distingue pas « aucun » de « pas encore charge ».
+ *
+ * En colonnes quand la place le permet, empile en dessous : la largeur est celle
+ * du CONTENEUR, pas de l'ecran — la meme liste dans une carte etroite s'empile
+ * aussi sur un grand ecran (UX-18).
+ */
+class StDescriptionList {
+    libelles = inject(ST_LIBELLES);
+    elements = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
+    gabarits = contentChildren(StDescription, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gabarits" }] : /* istanbul ignore next */ []));
+    lignes = computed(() => {
+        const gabarits = new Map(this.gabarits().map((gabarit) => [gabarit.cle(), gabarit.gabarit]));
+        return this.elements().map((element) => ({
+            element,
+            gabarit: gabarits.get(element.cle ?? element.terme) ?? null,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDescriptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StDescriptionList, isStandalone: true, selector: "st-description-list", inputs: { elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "st-description-list" }, queries: [{ propertyName: "gabarits", predicate: StDescription, isSignal: true }], ngImport: i0, template: "<dl class=\"st-description-list__liste\">\n  @for (ligne of lignes(); track ligne.element.cle ?? ligne.element.terme) {\n    <div class=\"st-description-list__groupe\">\n      <dt class=\"st-description-list__terme\">{{ ligne.element.terme }}</dt>\n      <dd class=\"st-description-list__valeur\">\n        @if (ligne.gabarit; as gabarit) {\n          <ng-container *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne.element }\" />\n        } @else if (ligne.element.description === null) {\n          <span aria-hidden=\"true\">&#8212;</span>\n          <span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n        } @else {\n          {{ ligne.element.description }}\n        }\n      </dd>\n    </div>\n  }\n</dl>\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;container-type:inline-size}.st-description-list__liste{margin:0}.st-description-list__groupe{display:grid;gap:var(--st-espacement-1);padding-block:var(--st-espacement-2);border-block-end:1px solid var(--st-couleur-bordure)}.st-description-list__terme{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret)}.st-description-list__valeur{margin:0;overflow-wrap:anywhere}@container (min-width: st.$rupture-sm){.st-description-list__groupe{grid-template-columns:minmax(10rem,1fr) 2fr;gap: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: StDescriptionList, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-description-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: 'st-description-list' }, template: "<dl class=\"st-description-list__liste\">\n  @for (ligne of lignes(); track ligne.element.cle ?? ligne.element.terme) {\n    <div class=\"st-description-list__groupe\">\n      <dt class=\"st-description-list__terme\">{{ ligne.element.terme }}</dt>\n      <dd class=\"st-description-list__valeur\">\n        @if (ligne.gabarit; as gabarit) {\n          <ng-container *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne.element }\" />\n        } @else if (ligne.element.description === null) {\n          <span aria-hidden=\"true\">&#8212;</span>\n          <span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n        } @else {\n          {{ ligne.element.description }}\n        }\n      </dd>\n    </div>\n  }\n</dl>\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;container-type:inline-size}.st-description-list__liste{margin:0}.st-description-list__groupe{display:grid;gap:var(--st-espacement-1);padding-block:var(--st-espacement-2);border-block-end:1px solid var(--st-couleur-bordure)}.st-description-list__terme{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret)}.st-description-list__valeur{margin:0;overflow-wrap:anywhere}@container (min-width: st.$rupture-sm){.st-description-list__groupe{grid-template-columns:minmax(10rem,1fr) 2fr;gap:var(--st-espacement-4)}}\n"] }]
+        }], propDecorators: { elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: true }] }], gabarits: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StDescription), { isSignal: true }] }] } });
+
+/**
+ * Rendu d'un element, type par `[stElementDeListeDe]` :
+ *
+ * ```html
+ * <ng-template stElementDeListe [stElementDeListeDe]="expeditions()" let-expedition>
+ *   <a [routerLink]="['/expeditions', expedition.id]">{{ expedition.reference }}</a>
+ * </ng-template>
+ * ```
+ */
+class StElementDeListe {
+    /** Sert seulement au typage du contexte ; nom de l'attribut, d'ou l'absence d'alias. */
+    stElementDeListeDe = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stElementDeListeDe" }] : /* istanbul ignore next */ []));
+    gabarit = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, _contexte) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StElementDeListe, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StElementDeListe, isStandalone: true, selector: "ng-template[stElementDeListe]", inputs: { stElementDeListeDe: { classPropertyName: "stElementDeListeDe", publicName: "stElementDeListeDe", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StElementDeListe, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[stElementDeListe]' }]
+        }], propDecorators: { stElementDeListeDe: [{ type: i0.Input, args: [{ isSignal: true, alias: "stElementDeListeDe", required: false }] }] } });
+/**
+ * Liste d'objets : expeditions, notifications, documents. La forme mobile d'un
+ * tableau (UX-5).
+ *
+ * ```html
+ * <st-list #liste etiquette="Mes expeditions" [elements]="expeditions()" cle="id">
+ *   <ng-template stElementDeListe [stElementDeListeDe]="expeditions()" let-expedition>…</ng-template>
+ * </st-list>
+ * <st-pagination mode="suite" [cible]="liste" … />
+ * ```
+ *
+ * ⚠️ **Un lien DANS l'element, jamais un element cliquable** (UX-3) : le lien a un
+ * nom, s'ouvre dans un onglet, et laisse les autres boutons de l'element
+ * atteignables.
+ *
+ * ⚠️ **`focus()` va au premier element AJOUTE** depuis le dernier affichage : apres
+ * « Afficher plus », la lecture reprend la ou la liste s'est allongee, et non en
+ * tete. Apres un filtre, la liste raccourcit, et le focus va au premier element.
+ *
+ * `track` par la cle : un rafraichissement garde le focus sur le bon element.
+ */
+class StList {
+    element = inject(ElementRef);
+    elements = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
+    /** Propriete qui identifie un element. */
+    cle = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cle" }] : /* istanbul ignore next */ []));
+    /** Nom de la liste, lu a l'entree. */
+    etiquette = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
+    /** `ol` quand l'ordre a un sens : etapes, classement. */
+    ordonnee = input(false, { ...(ngDevMode ? { debugName: "ordonnee" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Contenu en cours de remplacement : `aria-busy`. */
+    chargement = input(false, { ...(ngDevMode ? { debugName: "chargement" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    gabarit = contentChild(StElementDeListe, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gabarit" }] : /* istanbul ignore next */ []));
+    indiceDuPremierAjout = 0;
+    lignes = computed(() => {
+        const cle = this.cle();
+        return this.elements().map((valeur, indice) => ({
+            valeur,
+            indice,
+            identifiant: String(valeur[cle]),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        let longueur = 0;
+        effect(() => {
+            const nouvelle = this.elements().length;
+            this.indiceDuPremierAjout = nouvelle > longueur && longueur > 0 ? longueur : 0;
+            longueur = nouvelle;
+        });
+    }
+    /** Focus sur le premier element ajoute, ou sur le premier. */
+    focus(options) {
+        const elements = this.element.nativeElement.querySelectorAll('.st-list__element');
+        (elements[this.indiceDuPremierAjout] ?? elements[0])?.focus(options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StList, isStandalone: true, selector: "st-list", inputs: { elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: true, transformFunction: null }, cle: { classPropertyName: "cle", publicName: "cle", isSignal: true, isRequired: true, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, ordonnee: { classPropertyName: "ordonnee", publicName: "ordonnee", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-list" }, queries: [{ propertyName: "gabarit", first: true, predicate: StElementDeListe, descendants: true, isSignal: true }], ngImport: i0, template: "@if (ordonnee()) {\n  <ol\n    class=\"st-list__liste\"\n    [attr.aria-label]=\"etiquette()\"\n    [attr.aria-busy]=\"chargement() ? 'true' : null\"\n  >\n    <ng-container *ngTemplateOutlet=\"contenu\" />\n  </ol>\n} @else {\n  <ul\n    class=\"st-list__liste\"\n    [attr.aria-label]=\"etiquette()\"\n    [attr.aria-busy]=\"chargement() ? 'true' : null\"\n  >\n    <ng-container *ngTemplateOutlet=\"contenu\" />\n  </ul>\n}\n\n<ng-template #contenu>\n  @for (ligne of lignes(); track ligne.identifiant) {\n    <!-- tabindex -1 : cible du focus apres \u00AB Afficher plus \u00BB, hors tabulation. -->\n    <li class=\"st-list__element\" tabindex=\"-1\">\n      @if (gabarit(); as gabarit) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            gabarit.gabarit;\n            context: { $implicit: ligne.valeur, indice: ligne.indice }\n          \"\n        />\n      } @else {\n        {{ ligne.valeur }}\n      }\n    </li>\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-list__liste{padding:0;margin:0;list-style:none}.st-list__liste[aria-busy=true]{cursor:progress}.st-list__element{padding-block:var(--st-espacement-3);border-block-end:1px solid var(--st-couleur-bordure)}.st-list__element:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}\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: StList, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: 'st-list' }, template: "@if (ordonnee()) {\n  <ol\n    class=\"st-list__liste\"\n    [attr.aria-label]=\"etiquette()\"\n    [attr.aria-busy]=\"chargement() ? 'true' : null\"\n  >\n    <ng-container *ngTemplateOutlet=\"contenu\" />\n  </ol>\n} @else {\n  <ul\n    class=\"st-list__liste\"\n    [attr.aria-label]=\"etiquette()\"\n    [attr.aria-busy]=\"chargement() ? 'true' : null\"\n  >\n    <ng-container *ngTemplateOutlet=\"contenu\" />\n  </ul>\n}\n\n<ng-template #contenu>\n  @for (ligne of lignes(); track ligne.identifiant) {\n    <!-- tabindex -1 : cible du focus apres \u00AB Afficher plus \u00BB, hors tabulation. -->\n    <li class=\"st-list__element\" tabindex=\"-1\">\n      @if (gabarit(); as gabarit) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            gabarit.gabarit;\n            context: { $implicit: ligne.valeur, indice: ligne.indice }\n          \"\n        />\n      } @else {\n        {{ ligne.valeur }}\n      }\n    </li>\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-list__liste{padding:0;margin:0;list-style:none}.st-list__liste[aria-busy=true]{cursor:progress}.st-list__element{padding-block:var(--st-espacement-3);border-block-end:1px solid var(--st-couleur-bordure)}.st-list__element:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: true }] }], cle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cle", required: true }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], ordonnee: [{ type: i0.Input, args: [{ isSignal: true, alias: "ordonnee", required: false }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }], gabarit: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StElementDeListe), { isSignal: true }] }] } });
+
+/**
+ * Bouton de tri d'une colonne, pose DANS l'en-tete : `<th><button stSortHeader>`.
+ *
+ * ⚠️ **Le bouton, pas l'en-tete cliquable** : un `th` n'est ni focalisable ni
+ * annonce comme actionnable. Et l'etat se porte par `aria-sort` sur le `th`, que
+ * `st-data-table` pose sur la SEULE colonne triee (FE-3).
+ *
+ * ⚠️ **Ne trie rien.** Il dit l'intention ; c'est le serveur qui trie, et le
+ * contrat actuel ne le fait pas (audit de la vague 4, V4-3). Trier la page
+ * affichee ferait croire a un tri de toute la liste.
+ *
+ * Une colonne non triee montre deux chevrons, pour se signaler triable sans
+ * attendre le survol ; l'icone est decorative, l'etat est lu par `aria-sort`.
+ */
+class StSortHeader {
+    sens = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sens" }] : /* istanbul ignore next */ []));
+    icone = computed(() => {
+        const sens = this.sens();
+        if (sens === 'croissant')
+            return 'chevron-haut';
+        if (sens === 'decroissant')
+            return 'chevron-bas';
+        return 'tri';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icone" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StSortHeader, isStandalone: true, selector: "button[stSortHeader]", inputs: { sens: { classPropertyName: "sens", publicName: "sens", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.data-sens": "sens()" }, classAttribute: "st-sort-header" }, ngImport: i0, template: "<span class=\"st-sort-header__libelle\"><ng-content /></span>\n<st-icon class=\"st-sort-header__icone\" taille=\"sm\" [nom]=\"icone()\" />\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:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-min);padding:0;font:inherit;font-weight:inherit;color:inherit;text-align:inherit;cursor:pointer;background:none;border:0}.st-sort-header__icone{flex:none;color:var(--st-couleur-texte-discret)}:host([data-sens]) .st-sort-header__icone{color:inherit}\n"], dependencies: [{ 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: StSortHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[stSortHeader]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon], host: {
+                        class: 'st-sort-header',
+                        type: 'button',
+                        '[attr.data-sens]': 'sens()',
+                    }, template: "<span class=\"st-sort-header__libelle\"><ng-content /></span>\n<st-icon class=\"st-sort-header__icone\" taille=\"sm\" [nom]=\"icone()\" />\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:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-min);padding:0;font:inherit;font-weight:inherit;color:inherit;text-align:inherit;cursor:pointer;background:none;border:0}.st-sort-header__icone{flex:none;color:var(--st-couleur-texte-discret)}:host([data-sens]) .st-sort-header__icone{color:inherit}\n"] }]
+        }], propDecorators: { sens: [{ type: i0.Input, args: [{ isSignal: true, alias: "sens", required: false }] }] } });
+
+let compteur$1 = 0;
+/**
+ * Rendu d'une cellule, type par `[stCelluleDe]` :
+ *
+ * ```html
+ * <ng-template stCellule="montant" [stCelluleDe]="lignes()" let-ligne>
+ *   <st-money [valeur]="ligne.montant" />
+ * </ng-template>
+ * ```
+ */
+class StCellule {
+    cle = input.required({ ...(ngDevMode ? { debugName: "cle" } : /* istanbul ignore next */ {}), alias: 'stCellule' });
+    /** Sert seulement au typage du contexte ; nom de l'attribut, d'ou l'absence d'alias. */
+    stCelluleDe = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stCelluleDe" }] : /* istanbul ignore next */ []));
+    gabarit = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, _contexte) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCellule, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StCellule, isStandalone: true, selector: "ng-template[stCellule]", inputs: { cle: { classPropertyName: "cle", publicName: "stCellule", isSignal: true, isRequired: true, transformFunction: null }, stCelluleDe: { classPropertyName: "stCelluleDe", publicName: "stCelluleDe", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCellule, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[stCellule]' }]
+        }], propDecorators: { cle: [{ type: i0.Input, args: [{ isSignal: true, alias: "stCellule", required: true }] }], stCelluleDe: [{ type: i0.Input, args: [{ isSignal: true, alias: "stCelluleDe", required: false }] }] } });
+/** Contenu du tableau vide : un `st-empty`, avec son action. */
+class StTableauVide {
+    gabarit = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTableauVide, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: StTableauVide, isStandalone: true, selector: "ng-template[stTableauVide]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTableauVide, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[stTableauVide]' }]
+        }] });
+/** Lignes de squelette au premier chargement. */
+const LIGNES_DE_SQUELETTE = 5;
+/**
+ * Tableau de donnees, sur un `<table>` NATIF.
+ *
+ * ```html
+ * <st-data-table #tableau legende="Expeditions" [colonnes]="colonnes" [lignes]="lignes()"
+ *   cle="id" selectionnable [(selection)]="choisies" [chargement]="page.isLoading()">
+ *   <ng-template stCellule="reference" [stCelluleDe]="lignes()" let-ligne>
+ *     <a [routerLink]="['/expeditions', ligne.id]">{{ ligne.reference }}</a>
+ *   </ng-template>
+ *   <button stButton stActionsDeTableau (click)="exporter()">Exporter</button>
+ * </st-data-table>
+ * ```
+ *
+ * ⚠️ **Un tableau, pas une grille** (audit de la vague 4, V4-1). Le lecteur d'ecran
+ * sait parcourir un `<table>` de cellule en cellule ; une grille ARIA remplacerait
+ * ce parcours par les fleches, et rendrait les liens des cellules plus durs a
+ * atteindre. Ni Material, ni `CdkTable` : pas de pair dans le tronc.
+ *
+ * - **Legende obligatoire** (UX-1), et une colonne d'en-tete de ligne — la premiere
+ *   par defaut — pour que chaque cellule se lise avec sa ligne (UX-2).
+ * - **Zone de defilement nommee** : focalisable quand le tableau deborde (UX-6),
+ *   colonne figee sans masquer le focus (UX-7), en-tete fige seulement avec
+ *   `hauteurMax` (UX-8).
+ * - **Selection de la PAGE, par cle** (V4-4) : elle ne garde que les lignes encore
+ *   affichees, et se vide donc au changement de page.
+ * - **Tri PILOTE** : le tableau dit la demande et l'annonce, il ne reordonne
+ *   jamais les lignes (V4-3).
+ * - **Chargement** : squelette au premier, lignes gardees et `aria-busy` ensuite
+ *   (UX-11).
+ * - Export, actions de masse : zone `stActionsDeTableau`, et le SERVEUR fait le
+ *   travail (V4-5, SEC-4, SEC-5).
+ */
+class StDataTable {
+    libelles = inject(ST_LIBELLES);
+    legende = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legende" }] : /* istanbul ignore next */ []));
+    /** Lue mais non affichee, quand un titre visible nomme deja le tableau. */
+    legendeMasquee = input(false, { ...(ngDevMode ? { debugName: "legendeMasquee" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    colonnes = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colonnes" }] : /* istanbul ignore next */ []));
+    lignes = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
+    /** Propriete qui identifie une ligne. Jamais l'indice (FE-1). */
+    cle = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cle" }] : /* istanbul ignore next */ []));
+    /** Colonne lue comme en-tete de chaque ligne. Par defaut : la premiere. */
+    enTeteDeLigne = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enTeteDeLigne" }] : /* istanbul ignore next */ []));
+    premiereColonneFigee = input(false, { ...(ngDevMode ? { debugName: "premiereColonneFigee" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Hauteur maximale, `32rem` : l'en-tete se fige, le corps defile. */
+    hauteurMax = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hauteurMax" }] : /* istanbul ignore next */ []));
+    densite = input('confortable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "densite" }] : /* istanbul ignore next */ []));
+    chargement = input(false, { ...(ngDevMode ? { debugName: "chargement" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    selectionnable = input(false, { ...(ngDevMode ? { debugName: "selectionnable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    selection = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    tri = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tri" }] : /* istanbul ignore next */ []));
+    /** Texte du tableau vide, sans gabarit `stTableauVide`. */
+    texteVide = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "texteVide" }] : /* istanbul ignore next */ []));
+    gabarits = contentChildren(StCellule, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gabarits" }] : /* istanbul ignore next */ []));
+    gabaritVide = contentChild(StTableauVide, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gabaritVide" }] : /* istanbul ignore next */ []));
+    zone = viewChild.required('zone', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zone" }] : /* istanbul ignore next */ []));
+    annonce = new AnnonceLocale(inject(DestroyRef));
+    deborde = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deborde" }] : /* istanbul ignore next */ []));
+    largeurFigee = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "largeurFigee" }] : /* istanbul ignore next */ []));
+    identifiants = (() => {
+        const base = `st-tableau-${(compteur$1 += 1).toString()}`;
+        return { legende: `${base}-legende`, selection: `${base}-selection` };
+    })();
+    cleDEnTete = computed(() => this.enTeteDeLigne() ?? this.colonnes()[0]?.cle ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cleDEnTete" }] : /* istanbul ignore next */ []));
+    cellules = computed(() => {
+        const gabarits = new Map(this.gabarits().map((gabarit) => [gabarit.cle(), gabarit.gabarit]));
+        return this.colonnes().map((colonne) => ({
+            colonne,
+            gabarit: gabarits.get(colonne.cle) ?? null,
+            enTete: colonne.cle === this.cleDEnTete(),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellules" }] : /* istanbul ignore next */ []));
+    rangees = computed(() => {
+        const cle = this.cle();
+        const entete = this.cleDEnTete();
+        const choisies = new Set(this.selection());
+        return this.lignes().map((valeur) => {
+            const identifiant = String(valeur[cle]);
+            return {
+                valeur,
+                identifiant,
+                nom: texteDe(valeur[entete]),
+                choisie: choisies.has(identifiant),
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangees" }] : /* istanbul ignore next */ []));
+    squelette = computed(() => this.chargement() && this.lignes().length === 0
+        ? Array.from({ length: LIGNES_DE_SQUELETTE }, (_, indice) => indice)
+        : [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "squelette" }] : /* istanbul ignore next */ []));
+    nombreDeColonnes = computed(() => this.colonnes().length + (this.selectionnable() ? 1 : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nombreDeColonnes" }] : /* istanbul ignore next */ []));
+    colonnesDeSquelette = computed(() => Array.from({ length: this.nombreDeColonnes() }, (_, indice) => indice), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colonnesDeSquelette" }] : /* istanbul ignore next */ []));
+    toutesChoisies = computed(() => {
+        const rangees = this.rangees();
+        return rangees.length > 0 && rangees.every((rangee) => rangee.choisie);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toutesChoisies" }] : /* istanbul ignore next */ []));
+    quelquesChoisies = computed(() => !this.toutesChoisies() && this.rangees().some((rangee) => rangee.choisie), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "quelquesChoisies" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // V4-4 : une selection ne vise que ce qui est affiche. Nouvelle page, nouvelles
+        // cles : les anciennes tombent.
+        effect(() => {
+            const presentes = new Set(this.rangees().map((rangee) => rangee.identifiant));
+            const selection = this.selection();
+            const gardees = selection.filter((identifiant) => presentes.has(identifiant));
+            if (gardees.length !== selection.length)
+                this.selection.set(gardees);
+        });
+        // Mesures du rendu, jamais sur le serveur (FE-5).
+        const destruction = inject(DestroyRef);
+        afterNextRender(() => {
+            const zone = this.zone().nativeElement;
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const observateur = new ResizeObserver(() => {
+                this.deborde.set(zone.scrollWidth > zone.clientWidth + 1 || zone.scrollHeight > zone.clientHeight + 1);
+                // UX-7 : la largeur des colonnes figees devient la marge de defilement,
+                // pour que la cellule focalisee s'arrete A COTE d'elles et non dessous.
+                const figees = zone.querySelectorAll('tr:first-child > [data-figee]');
+                let largeur = 0;
+                figees.forEach((cellule) => (largeur += cellule.getBoundingClientRect().width));
+                this.largeurFigee.set(Math.ceil(largeur));
+            });
+            observateur.observe(zone);
+            const tableau = zone.querySelector('table');
+            if (tableau !== null)
+                observateur.observe(tableau);
+            destruction.onDestroy(() => {
+                observateur.disconnect();
+            });
+        });
+    }
+    /** Amene le focus sur le tableau : sa legende est lue (UX-13). */
+    focus(options) {
+        this.zone().nativeElement.focus(options);
+    }
+    sensDe(colonne) {
+        const tri = this.tri();
+        return tri?.cle === colonne.cle ? tri.sens : null;
+    }
+    ariaSort(colonne) {
+        const sens = this.sensDe(colonne);
+        if (sens === null)
+            return null;
+        return sens === 'croissant' ? 'ascending' : 'descending';
+    }
+    trier(colonne) {
+        const sens = this.sensDe(colonne) === 'croissant' ? 'decroissant' : 'croissant';
+        this.tri.set({ cle: colonne.cle, sens });
+        const libelles = this.libelles();
+        this.annonce.annoncer(sens === 'croissant'
+            ? libelles.trieCroissant(colonne.libelle)
+            : libelles.trieDecroissant(colonne.libelle));
+    }
+    basculerTout() {
+        this.selection.set(this.toutesChoisies() ? [] : this.rangees().map((rangee) => rangee.identifiant));
+    }
+    basculer(identifiant) {
+        const selection = this.selection();
+        this.selection.set(selection.includes(identifiant)
+            ? selection.filter((choisie) => choisie !== identifiant)
+            : [...selection, identifiant]);
+    }
+    texteDe(ligne, colonne) {
+        return texteDe(ligne[colonne.cle]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StDataTable, isStandalone: true, selector: "st-data-table", inputs: { legende: { classPropertyName: "legende", publicName: "legende", isSignal: true, isRequired: true, transformFunction: null }, legendeMasquee: { classPropertyName: "legendeMasquee", publicName: "legendeMasquee", isSignal: true, isRequired: false, transformFunction: null }, colonnes: { classPropertyName: "colonnes", publicName: "colonnes", isSignal: true, isRequired: true, transformFunction: null }, lignes: { classPropertyName: "lignes", publicName: "lignes", isSignal: true, isRequired: true, transformFunction: null }, cle: { classPropertyName: "cle", publicName: "cle", isSignal: true, isRequired: true, transformFunction: null }, enTeteDeLigne: { classPropertyName: "enTeteDeLigne", publicName: "enTeteDeLigne", isSignal: true, isRequired: false, transformFunction: null }, premiereColonneFigee: { classPropertyName: "premiereColonneFigee", publicName: "premiereColonneFigee", isSignal: true, isRequired: false, transformFunction: null }, hauteurMax: { classPropertyName: "hauteurMax", publicName: "hauteurMax", isSignal: true, isRequired: false, transformFunction: null }, densite: { classPropertyName: "densite", publicName: "densite", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null }, selectionnable: { classPropertyName: "selectionnable", publicName: "selectionnable", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, tri: { classPropertyName: "tri", publicName: "tri", isSignal: true, isRequired: false, transformFunction: null }, texteVide: { classPropertyName: "texteVide", publicName: "texteVide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", tri: "triChange" }, host: { properties: { "attr.data-densite": "densite()", "attr.data-figee": "premiereColonneFigee() ? \"\" : null" }, classAttribute: "st-data-table" }, queries: [{ propertyName: "gabarits", predicate: StCellule, isSignal: true }, { propertyName: "gabaritVide", first: true, predicate: StTableauVide, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "zone", first: true, predicate: ["zone"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- UN seul ng-content : la projection se decide a la compilation, et un second\n     emplacement de meme selecteur, dans une autre branche, ne recevrait jamais\n     rien. -->\n<div class=\"st-data-table__barre\">\n  @if (selectionnable()) {\n    <p class=\"st-data-table__selection\" role=\"status\" [id]=\"identifiants.selection\">\n      {{ selection().length > 0 ? libelles().lignesSelectionnees(selection().length) : '' }}\n    </p>\n  }\n  <div class=\"st-data-table__actions\">\n    <ng-content select=\"[stActionsDeTableau]\" />\n  </div>\n</div>\n\n<!-- UX-6 : zone nommee par la legende ; focalisable quand elle deborde, et par\n     programme toujours, pour recevoir le focus apres un changement de page. -->\n<div\n  #zone\n  class=\"st-data-table__zone\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"identifiants.legende\"\n  [attr.tabindex]=\"deborde() ? 0 : -1\"\n  [attr.data-deborde]=\"deborde() ? '' : null\"\n  [style.max-block-size]=\"hauteurMax()\"\n  [style.scroll-padding-inline-start.px]=\"largeurFigee()\"\n>\n  <table class=\"st-data-table__tableau\" [attr.aria-busy]=\"chargement() ? 'true' : null\">\n    <caption\n      class=\"st-data-table__legende\"\n      [id]=\"identifiants.legende\"\n      [class.st-vh]=\"legendeMasquee()\"\n    >\n      {{\n        legende()\n      }}\n    </caption>\n    <thead>\n      <tr>\n        @if (selectionnable()) {\n          <th class=\"st-data-table__case\" scope=\"col\" data-figee>\n            <input\n              class=\"st-data-table__cocher\"\n              type=\"checkbox\"\n              [checked]=\"toutesChoisies()\"\n              [indeterminate]=\"quelquesChoisies()\"\n              [disabled]=\"rangees().length === 0\"\n              [attr.aria-label]=\"libelles().selectionnerLaPage(rangees().length)\"\n              (change)=\"basculerTout()\"\n            />\n          </th>\n        }\n        @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n          <th\n            scope=\"col\"\n            [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n            [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n            [attr.aria-sort]=\"ariaSort(cellule.colonne)\"\n          >\n            @if (cellule.colonne.triable) {\n              <button\n                stSortHeader\n                type=\"button\"\n                [sens]=\"sensDe(cellule.colonne)\"\n                (click)=\"trier(cellule.colonne)\"\n              >\n                {{ cellule.colonne.libelle }}\n              </button>\n            } @else if (cellule.colonne.libelleMasque) {\n              <span class=\"st-vh\">{{ cellule.colonne.libelle }}</span>\n            } @else {\n              {{ cellule.colonne.libelle }}\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (rang of squelette(); track rang) {\n        <tr class=\"st-data-table__squelette\" aria-hidden=\"true\">\n          @for (colonne of colonnesDeSquelette(); track colonne) {\n            <td><span class=\"st-data-table__barre-de-squelette\"></span></td>\n          }\n        </tr>\n      }\n      @for (rangee of rangees(); track rangee.identifiant) {\n        <tr [attr.data-choisie]=\"rangee.choisie ? '' : null\">\n          @if (selectionnable()) {\n            <td class=\"st-data-table__case\" data-figee>\n              <input\n                class=\"st-data-table__cocher\"\n                type=\"checkbox\"\n                [checked]=\"rangee.choisie\"\n                [attr.aria-label]=\"libelles().selectionnerLaLigne(rangee.nom ?? rangee.identifiant)\"\n                (change)=\"basculer(rangee.identifiant)\"\n              />\n            </td>\n          }\n          @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n            @if (cellule.enTete) {\n              <th\n                scope=\"row\"\n                [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n                [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valeur;\n                    context: { $implicit: rangee.valeur, cellule: cellule }\n                  \"\n                />\n              </th>\n            } @else {\n              <td\n                [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n                [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valeur;\n                    context: { $implicit: rangee.valeur, cellule: cellule }\n                  \"\n                />\n              </td>\n            }\n          }\n        </tr>\n      } @empty {\n        @if (!chargement()) {\n          <tr>\n            <td class=\"st-data-table__vide\" [attr.colspan]=\"nombreDeColonnes()\">\n              @if (gabaritVide(); as vide) {\n                <ng-container *ngTemplateOutlet=\"vide.gabarit\" />\n              } @else {\n                {{ texteVide() ?? libelles().tableauVide }}\n              }\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n\n<ng-template #valeur let-ligne let-cellule=\"cellule\">\n  @if (cellule.gabarit; as gabarit) {\n    <ng-container\n      *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne, colonne: cellule.colonne }\"\n    />\n  } @else if (texteDe(ligne, cellule.colonne); as texte) {\n    {{ texte }}\n  } @else {\n    <span aria-hidden=\"true\">&#8212;</span><span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\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{--st-tableau-plan-figee: 1;--st-tableau-plan-entete: 2;--st-tableau-plan-coin: 3;display:block}.st-data-table__barre,.st-data-table__actions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-data-table__barre{justify-content:space-between}.st-data-table__barre:has(.st-data-table__selection,.st-data-table__actions:not(:empty)){min-block-size:var(--st-cible-tactile-min);margin-block-end:var(--st-espacement-2)}.st-data-table__actions{margin-inline-start:auto}.st-data-table__actions:empty{display:none}.st-data-table__selection{margin:0;font-weight:var(--st-graisse-semi)}.st-data-table__zone:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__zone{position:relative;overflow:auto;border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);background:linear-gradient(to right,var(--st-couleur-surface) 30%,transparent) left/2rem 100% no-repeat local,linear-gradient(to left,var(--st-couleur-surface) 30%,transparent) right/2rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.2),transparent) left/.75rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),transparent) right/.75rem 100% no-repeat scroll,var(--st-couleur-surface)}.st-data-table__tableau{inline-size:100%;font-variant-numeric:tabular-nums;border-collapse:separate;border-spacing:0}.st-data-table__legende{padding:var(--st-espacement-3);font-weight:var(--st-graisse-semi);text-align:start}th,td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-3));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-3));text-align:start;vertical-align:top;overflow-wrap:anywhere;border-block-end:1px solid var(--st-couleur-bordure)}thead th{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);white-space:nowrap;background:var(--st-couleur-surface-enfoncee)}thead th{position:sticky;inset-block-start:0;z-index:var(--st-tableau-plan-entete)}tbody th{font-weight:var(--st-graisse-semi)}tbody tr:last-child>*{border-block-end:0}@media(hover:hover){tbody tr:hover>*{background:var(--st-couleur-surface-survol)}}tbody tr[data-choisie]>*{background:var(--st-couleur-primaire-discret)}tbody tr[data-choisie]>:first-child{box-shadow:inset 3px 0 0 var(--st-couleur-primaire)}:host-context([dir=rtl]) tbody tr[data-choisie]>:first-child{box-shadow:inset -3px 0 0 var(--st-couleur-primaire)}[data-alignement=fin]{text-align:end}.st-data-table__case{inline-size:var(--st-tableau-largeur-case, 3rem);min-inline-size:var(--st-tableau-largeur-case, 3rem);text-align:center;vertical-align:middle}:host([data-densite=compacte]) th,:host([data-densite=compacte]) td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-1));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-2))}.st-data-table__cocher:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__cocher{inline-size:var(--st-cible-min);block-size:var(--st-cible-min);margin:0;accent-color:var(--st-couleur-primaire);cursor:pointer}:host([data-figee]) [data-figee]{position:sticky;inset-inline-start:0;z-index:var(--st-tableau-plan-figee);background:var(--st-couleur-surface)}:host([data-figee]) .st-data-table__case+[data-figee]{inset-inline-start:var(--st-tableau-largeur-case, 3rem)}:host([data-figee]) thead [data-figee]{z-index:var(--st-tableau-plan-coin);background:var(--st-couleur-surface-enfoncee)}.st-data-table__vide{padding:var(--st-espacement-5);color:var(--st-couleur-texte-discret);text-align:center}.st-data-table__barre-de-squelette{display:block;block-size:1em;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}@media(prefers-reduced-motion:no-preference){.st-data-table__barre-de-squelette{animation:st-tableau-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}@keyframes st-tableau-pulsation{50%{opacity:.5}}.st-data-table__tableau[aria-busy=true]{cursor:progress}@media(forced-colors:active){tbody tr[data-choisie]>:first-child{box-shadow:none;border-inline-start:3px solid Highlight}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StSortHeader, selector: "button[stSortHeader]", inputs: ["sens"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDataTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-data-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, StSortHeader], host: {
+                        class: 'st-data-table',
+                        '[attr.data-densite]': 'densite()',
+                        '[attr.data-figee]': 'premiereColonneFigee() ? "" : null',
+                    }, template: "<!-- UN seul ng-content : la projection se decide a la compilation, et un second\n     emplacement de meme selecteur, dans une autre branche, ne recevrait jamais\n     rien. -->\n<div class=\"st-data-table__barre\">\n  @if (selectionnable()) {\n    <p class=\"st-data-table__selection\" role=\"status\" [id]=\"identifiants.selection\">\n      {{ selection().length > 0 ? libelles().lignesSelectionnees(selection().length) : '' }}\n    </p>\n  }\n  <div class=\"st-data-table__actions\">\n    <ng-content select=\"[stActionsDeTableau]\" />\n  </div>\n</div>\n\n<!-- UX-6 : zone nommee par la legende ; focalisable quand elle deborde, et par\n     programme toujours, pour recevoir le focus apres un changement de page. -->\n<div\n  #zone\n  class=\"st-data-table__zone\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"identifiants.legende\"\n  [attr.tabindex]=\"deborde() ? 0 : -1\"\n  [attr.data-deborde]=\"deborde() ? '' : null\"\n  [style.max-block-size]=\"hauteurMax()\"\n  [style.scroll-padding-inline-start.px]=\"largeurFigee()\"\n>\n  <table class=\"st-data-table__tableau\" [attr.aria-busy]=\"chargement() ? 'true' : null\">\n    <caption\n      class=\"st-data-table__legende\"\n      [id]=\"identifiants.legende\"\n      [class.st-vh]=\"legendeMasquee()\"\n    >\n      {{\n        legende()\n      }}\n    </caption>\n    <thead>\n      <tr>\n        @if (selectionnable()) {\n          <th class=\"st-data-table__case\" scope=\"col\" data-figee>\n            <input\n              class=\"st-data-table__cocher\"\n              type=\"checkbox\"\n              [checked]=\"toutesChoisies()\"\n              [indeterminate]=\"quelquesChoisies()\"\n              [disabled]=\"rangees().length === 0\"\n              [attr.aria-label]=\"libelles().selectionnerLaPage(rangees().length)\"\n              (change)=\"basculerTout()\"\n            />\n          </th>\n        }\n        @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n          <th\n            scope=\"col\"\n            [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n            [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n            [attr.aria-sort]=\"ariaSort(cellule.colonne)\"\n          >\n            @if (cellule.colonne.triable) {\n              <button\n                stSortHeader\n                type=\"button\"\n                [sens]=\"sensDe(cellule.colonne)\"\n                (click)=\"trier(cellule.colonne)\"\n              >\n                {{ cellule.colonne.libelle }}\n              </button>\n            } @else if (cellule.colonne.libelleMasque) {\n              <span class=\"st-vh\">{{ cellule.colonne.libelle }}</span>\n            } @else {\n              {{ cellule.colonne.libelle }}\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (rang of squelette(); track rang) {\n        <tr class=\"st-data-table__squelette\" aria-hidden=\"true\">\n          @for (colonne of colonnesDeSquelette(); track colonne) {\n            <td><span class=\"st-data-table__barre-de-squelette\"></span></td>\n          }\n        </tr>\n      }\n      @for (rangee of rangees(); track rangee.identifiant) {\n        <tr [attr.data-choisie]=\"rangee.choisie ? '' : null\">\n          @if (selectionnable()) {\n            <td class=\"st-data-table__case\" data-figee>\n              <input\n                class=\"st-data-table__cocher\"\n                type=\"checkbox\"\n                [checked]=\"rangee.choisie\"\n                [attr.aria-label]=\"libelles().selectionnerLaLigne(rangee.nom ?? rangee.identifiant)\"\n                (change)=\"basculer(rangee.identifiant)\"\n              />\n            </td>\n          }\n          @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n            @if (cellule.enTete) {\n              <th\n                scope=\"row\"\n                [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n                [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valeur;\n                    context: { $implicit: rangee.valeur, cellule: cellule }\n                  \"\n                />\n              </th>\n            } @else {\n              <td\n                [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n                [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valeur;\n                    context: { $implicit: rangee.valeur, cellule: cellule }\n                  \"\n                />\n              </td>\n            }\n          }\n        </tr>\n      } @empty {\n        @if (!chargement()) {\n          <tr>\n            <td class=\"st-data-table__vide\" [attr.colspan]=\"nombreDeColonnes()\">\n              @if (gabaritVide(); as vide) {\n                <ng-container *ngTemplateOutlet=\"vide.gabarit\" />\n              } @else {\n                {{ texteVide() ?? libelles().tableauVide }}\n              }\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n\n<ng-template #valeur let-ligne let-cellule=\"cellule\">\n  @if (cellule.gabarit; as gabarit) {\n    <ng-container\n      *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne, colonne: cellule.colonne }\"\n    />\n  } @else if (texteDe(ligne, cellule.colonne); as texte) {\n    {{ texte }}\n  } @else {\n    <span aria-hidden=\"true\">&#8212;</span><span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\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{--st-tableau-plan-figee: 1;--st-tableau-plan-entete: 2;--st-tableau-plan-coin: 3;display:block}.st-data-table__barre,.st-data-table__actions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-data-table__barre{justify-content:space-between}.st-data-table__barre:has(.st-data-table__selection,.st-data-table__actions:not(:empty)){min-block-size:var(--st-cible-tactile-min);margin-block-end:var(--st-espacement-2)}.st-data-table__actions{margin-inline-start:auto}.st-data-table__actions:empty{display:none}.st-data-table__selection{margin:0;font-weight:var(--st-graisse-semi)}.st-data-table__zone:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__zone{position:relative;overflow:auto;border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);background:linear-gradient(to right,var(--st-couleur-surface) 30%,transparent) left/2rem 100% no-repeat local,linear-gradient(to left,var(--st-couleur-surface) 30%,transparent) right/2rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.2),transparent) left/.75rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),transparent) right/.75rem 100% no-repeat scroll,var(--st-couleur-surface)}.st-data-table__tableau{inline-size:100%;font-variant-numeric:tabular-nums;border-collapse:separate;border-spacing:0}.st-data-table__legende{padding:var(--st-espacement-3);font-weight:var(--st-graisse-semi);text-align:start}th,td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-3));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-3));text-align:start;vertical-align:top;overflow-wrap:anywhere;border-block-end:1px solid var(--st-couleur-bordure)}thead th{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);white-space:nowrap;background:var(--st-couleur-surface-enfoncee)}thead th{position:sticky;inset-block-start:0;z-index:var(--st-tableau-plan-entete)}tbody th{font-weight:var(--st-graisse-semi)}tbody tr:last-child>*{border-block-end:0}@media(hover:hover){tbody tr:hover>*{background:var(--st-couleur-surface-survol)}}tbody tr[data-choisie]>*{background:var(--st-couleur-primaire-discret)}tbody tr[data-choisie]>:first-child{box-shadow:inset 3px 0 0 var(--st-couleur-primaire)}:host-context([dir=rtl]) tbody tr[data-choisie]>:first-child{box-shadow:inset -3px 0 0 var(--st-couleur-primaire)}[data-alignement=fin]{text-align:end}.st-data-table__case{inline-size:var(--st-tableau-largeur-case, 3rem);min-inline-size:var(--st-tableau-largeur-case, 3rem);text-align:center;vertical-align:middle}:host([data-densite=compacte]) th,:host([data-densite=compacte]) td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-1));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-2))}.st-data-table__cocher:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__cocher{inline-size:var(--st-cible-min);block-size:var(--st-cible-min);margin:0;accent-color:var(--st-couleur-primaire);cursor:pointer}:host([data-figee]) [data-figee]{position:sticky;inset-inline-start:0;z-index:var(--st-tableau-plan-figee);background:var(--st-couleur-surface)}:host([data-figee]) .st-data-table__case+[data-figee]{inset-inline-start:var(--st-tableau-largeur-case, 3rem)}:host([data-figee]) thead [data-figee]{z-index:var(--st-tableau-plan-coin);background:var(--st-couleur-surface-enfoncee)}.st-data-table__vide{padding:var(--st-espacement-5);color:var(--st-couleur-texte-discret);text-align:center}.st-data-table__barre-de-squelette{display:block;block-size:1em;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}@media(prefers-reduced-motion:no-preference){.st-data-table__barre-de-squelette{animation:st-tableau-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}@keyframes st-tableau-pulsation{50%{opacity:.5}}.st-data-table__tableau[aria-busy=true]{cursor:progress}@media(forced-colors:active){tbody tr[data-choisie]>:first-child{box-shadow:none;border-inline-start:3px solid Highlight}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { legende: [{ type: i0.Input, args: [{ isSignal: true, alias: "legende", required: true }] }], legendeMasquee: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendeMasquee", required: false }] }], colonnes: [{ type: i0.Input, args: [{ isSignal: true, alias: "colonnes", required: true }] }], lignes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lignes", required: true }] }], cle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cle", required: true }] }], enTeteDeLigne: [{ type: i0.Input, args: [{ isSignal: true, alias: "enTeteDeLigne", required: false }] }], premiereColonneFigee: [{ type: i0.Input, args: [{ isSignal: true, alias: "premiereColonneFigee", required: false }] }], hauteurMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "hauteurMax", required: false }] }], densite: [{ type: i0.Input, args: [{ isSignal: true, alias: "densite", required: false }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }], selectionnable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionnable", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], tri: [{ type: i0.Input, args: [{ isSignal: true, alias: "tri", required: false }] }, { type: i0.Output, args: ["triChange"] }], texteVide: [{ type: i0.Input, args: [{ isSignal: true, alias: "texteVide", required: false }] }], gabarits: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StCellule), { isSignal: true }] }], gabaritVide: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StTableauVide), { isSignal: true }] }], zone: [{ type: i0.ViewChild, args: ['zone', { isSignal: true }] }] } });
+/** Texte d'une valeur ; `null` quand elle est absente, pour le dire (UX de la vague 4). */
+function texteDe(valeur) {
+    if (valeur === null || valeur === undefined || valeur === '')
+        return null;
+    if (typeof valeur === 'string')
+        return valeur;
+    if (typeof valeur === 'number' || typeof valeur === 'boolean' || typeof valeur === 'bigint') {
+        return String(valeur);
+    }
+    return null;
+}
+
+/**
+ * Filtre actif, retirable : « Statut : Expediee ✕ ».
+ *
+ * ```html
+ * <button stFilterChip libelle="Statut : Expediee" (click)="retirer('statut')"></button>
+ * ```
+ *
+ * ⚠️ **Toute la puce est le bouton**, et son nom CONTIENT le texte visible —
+ * « Retirer le filtre Statut : Expediee » (WCAG 2.5.3) : une commande vocale
+ * « cliquer Statut » l'atteint. Une croix seule, a cote d'un texte inerte, serait
+ * une cible de quelques pixels sans nom.
+ */
+class StFilterChip {
+    libelles = inject(ST_LIBELLES);
+    libelle = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelle" }] : /* istanbul ignore next */ []));
+    nom = computed(() => this.libelles().retirerLeFiltre(this.libelle()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nom" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFilterChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StFilterChip, isStandalone: true, selector: "button[stFilterChip]", inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.aria-label": "nom()" }, classAttribute: "st-filter-chip" }, ngImport: i0, template: "<span class=\"st-filter-chip__libelle\">{{ libelle() }}</span>\n<st-icon class=\"st-filter-chip__croix\" nom=\"croix\" taille=\"sm\" />\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:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:calc(var(--st-cible-min) + var(--st-espacement-2));padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3) var(--st-espacement-2);font:inherit;color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine)}@media(hover:hover){:host:hover{background:var(--st-couleur-surface-survol)}}.st-filter-chip__croix{flex:none}\n"], dependencies: [{ 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: StFilterChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[stFilterChip]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon], host: {
+                        class: 'st-filter-chip',
+                        type: 'button',
+                        '[attr.aria-label]': 'nom()',
+                    }, template: "<span class=\"st-filter-chip__libelle\">{{ libelle() }}</span>\n<st-icon class=\"st-filter-chip__croix\" nom=\"croix\" taille=\"sm\" />\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:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:calc(var(--st-cible-min) + var(--st-espacement-2));padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3) var(--st-espacement-2);font:inherit;color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine)}@media(hover:hover){:host:hover{background:var(--st-couleur-surface-survol)}}.st-filter-chip__croix{flex:none}\n"] }]
+        }], propDecorators: { libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: true }] }] } });
+
+let compteur = 0;
+/**
+ * Barre de filtres : les champs, puis les filtres en vigueur, retirables.
+ *
+ * ```html
+ * <st-filter-bar [filtresActifs]="actifs()" (retrait)="retirer($event)" (effacement)="effacer()">
+ *   <st-select libelle="Statut" [options]="statuts" [(value)]="statut" />
+ * </st-filter-bar>
+ * ```
+ *
+ * Un formulaire NOMME : repere « Filtres » dans la liste des reperes du lecteur
+ * d'ecran. Pas un repere `search` : un `st-search-field` pose dedans en porte deja
+ * un, et deux reperes imbriques se liraient en double.
+ *
+ * ⚠️ **Les filtres s'appliquent au changement**, par l'application : Entree dans
+ * un champ n'envoie rien, et ne recharge pas la page.
+ *
+ * ⚠️ **Retirer un filtre rend le focus a la puce suivante**, sinon a la
+ * precedente, sinon au formulaire ; « Effacer les filtres » le rend au formulaire
+ * (UX-14). Le focus ne tombe jamais sur le document, et le retrait s'annonce.
+ *
+ * ⚠️ **Dans l'adresse, des valeurs d'enumeration seulement** (SEC-2) : un texte
+ * cherche, un nom, un IBAN n'y vont pas. Le composant ne touche pas a l'adresse ;
+ * la regle est pour l'application qui le ferait.
+ */
+class StFilterBar {
+    libelles = inject(ST_LIBELLES);
+    element = inject(ElementRef);
+    injecteur = inject(Injector);
+    /** Nom du formulaire. Par defaut : « Filtres ». */
+    etiquette = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
+    filtresActifs = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filtresActifs" }] : /* istanbul ignore next */ []));
+    retrait = output();
+    effacement = output();
+    annonce = new AnnonceLocale(inject(DestroyRef));
+    identifiantActifs = `st-filtres-${(compteur += 1).toString()}-actifs`;
+    etiquetteLue = computed(() => this.etiquette() ?? this.libelles().filtres, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquetteLue" }] : /* istanbul ignore next */ []));
+    retirer(filtre, indice) {
+        this.retrait.emit(filtre.cle);
+        this.annonce.annoncer(this.libelles().filtreRetire(filtre.libelle));
+        this.apresLeRendu(() => {
+            const puces = this.element.nativeElement.querySelectorAll('.st-filter-chip');
+            return puces[Math.min(indice, puces.length - 1)] ?? null;
+        });
+    }
+    effacer() {
+        this.effacement.emit();
+        this.annonce.annoncer(this.libelles().filtresEffaces);
+        this.apresLeRendu(() => null);
+    }
+    apresLeRendu(cible) {
+        afterNextRender(() => {
+            const formulaire = this.element.nativeElement.querySelector('form');
+            (cible() ?? formulaire)?.focus();
+        }, { injector: this.injecteur });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StFilterBar, isStandalone: true, selector: "st-filter-bar", inputs: { etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, filtresActifs: { classPropertyName: "filtresActifs", publicName: "filtresActifs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retrait: "retrait", effacement: "effacement" }, host: { classAttribute: "st-filter-bar" }, ngImport: i0, template: "<!-- tabindex -1 : cible du focus quand la derniere puce disparait. -->\n<form\n  class=\"st-filter-bar__formulaire\"\n  tabindex=\"-1\"\n  [attr.aria-label]=\"etiquetteLue()\"\n  (submit)=\"$event.preventDefault()\"\n>\n  <div class=\"st-filter-bar__champs\">\n    <ng-content />\n  </div>\n\n  @if (filtresActifs().length > 0) {\n    <div class=\"st-filter-bar__actifs\">\n      <p class=\"st-filter-bar__titre\" [id]=\"identifiantActifs\">{{ libelles().filtresActifs }}</p>\n      <ul class=\"st-filter-bar__puces\" [attr.aria-labelledby]=\"identifiantActifs\">\n        @for (filtre of filtresActifs(); track filtre.cle; let indice = $index) {\n          <li>\n            <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n                 Le contenu vient du gabarit de stFilterChip, et le libelle est requis. -->\n            <button\n              stFilterChip\n              type=\"button\"\n              [libelle]=\"filtre.libelle\"\n              (click)=\"retirer(filtre, indice)\"\n            ></button>\n          </li>\n        }\n      </ul>\n      <button stButton type=\"button\" variante=\"discret\" (click)=\"effacer()\">\n        {{ libelles().effacerLesFiltres }}\n      </button>\n    </div>\n  }\n</form>\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-filter-bar__formulaire:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-filter-bar__formulaire{display:grid;gap:var(--st-espacement-3)}.st-filter-bar__champs{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3) var(--st-espacement-4);align-items:flex-end}.st-filter-bar__actifs{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-filter-bar__titre{margin:0;font-weight:var(--st-graisse-semi)}.st-filter-bar__puces{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);padding:0;margin:0;list-style:none}\n"], dependencies: [{ kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement", "indisponible"] }, { kind: "component", type: StFilterChip, selector: "button[stFilterChip]", inputs: ["libelle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFilterBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-filter-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StButton, StFilterChip], host: { class: 'st-filter-bar' }, template: "<!-- tabindex -1 : cible du focus quand la derniere puce disparait. -->\n<form\n  class=\"st-filter-bar__formulaire\"\n  tabindex=\"-1\"\n  [attr.aria-label]=\"etiquetteLue()\"\n  (submit)=\"$event.preventDefault()\"\n>\n  <div class=\"st-filter-bar__champs\">\n    <ng-content />\n  </div>\n\n  @if (filtresActifs().length > 0) {\n    <div class=\"st-filter-bar__actifs\">\n      <p class=\"st-filter-bar__titre\" [id]=\"identifiantActifs\">{{ libelles().filtresActifs }}</p>\n      <ul class=\"st-filter-bar__puces\" [attr.aria-labelledby]=\"identifiantActifs\">\n        @for (filtre of filtresActifs(); track filtre.cle; let indice = $index) {\n          <li>\n            <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n                 Le contenu vient du gabarit de stFilterChip, et le libelle est requis. -->\n            <button\n              stFilterChip\n              type=\"button\"\n              [libelle]=\"filtre.libelle\"\n              (click)=\"retirer(filtre, indice)\"\n            ></button>\n          </li>\n        }\n      </ul>\n      <button stButton type=\"button\" variante=\"discret\" (click)=\"effacer()\">\n        {{ libelles().effacerLesFiltres }}\n      </button>\n    </div>\n  }\n</form>\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-filter-bar__formulaire:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-filter-bar__formulaire{display:grid;gap:var(--st-espacement-3)}.st-filter-bar__champs{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3) var(--st-espacement-4);align-items:flex-end}.st-filter-bar__actifs{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-filter-bar__titre{margin:0;font-weight:var(--st-graisse-semi)}.st-filter-bar__puces{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);padding:0;margin:0;list-style:none}\n"] }]
+        }], propDecorators: { etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], filtresActifs: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtresActifs", required: false }] }], retrait: [{ type: i0.Output, args: ["retrait"] }], effacement: [{ type: i0.Output, args: ["effacement"] }] } });
+
+/**
+ * @starterlib/ui/listes — ce qui affiche une COLLECTION : liste, liste de
+ * description, table de donnees, pagination, tri, filtres.
+ *
+ * ⚠️ Un point d'entree separe pour une raison de MOMENT, et non de dependance
+ * (ADR 0031, decision 2). `st-data-table` est le module le plus lourd du
+ * paquet ; la coquille de l'hote n'affiche aucune collection, et le payait
+ * pourtant en entier a chaque premier ecran, parce qu'un paquet partage en
+ * singleton part ENTIER.
+ *
+ * ⚠️ En federation, ce point d'entree se partage SEPAREMENT de
+ * `@starterlib/ui` : c'est un specificateur de module distinct.
+ *
+ * ```ts
+ * import { StDataTable, StPagination } from '@starterlib/ui/listes';
+ * ```
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StCellule, StDataTable, StDescription, StDescriptionList, StElementDeListe, StFilterBar, StFilterChip, StList, StPagination, StSortHeader, StTableauVide };
+//# sourceMappingURL=starterlib-ui-listes.mjs.map