@starterlib/ui 0.3.0 → 0.4.0

package/fesm2022/starterlib-ui.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, LOCALE_ID, signal, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, ElementRef, DestroyRef, output, model, afterNextRender, effect, TemplateRef, Directive, contentChild, linkedSignal, isDevMode } from '@angular/core';
-import { masquerIban, masquerTelephone, masquerCarte, quatreDerniers, formaterIban, formaterMontant, CHOIX_DE_THEME, LANGUES } from '@starterlib/util';
+import { InjectionToken, inject, LOCALE_ID, signal, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, ElementRef, DestroyRef, output, model, afterNextRender, viewChild, Directive, effect, Injector, linkedSignal, TemplateRef, contentChild, isDevMode } from '@angular/core';
+import { masquerIban, masquerTelephone, masquerCarte, quatreDerniers, formaterIban, formaterMontant, formaterTaille, formaterDateLongue, montant, decimalesDe, motifDeDate, formaterDateSaisie, ibanEstValide, normaliserTelephone, typeDeFichierAccepte, normaliserIban, bornerDate, premierJourDeLaSemaine, ajouterJours, semainesDuMois, ajouterMois, jourDeLaSemaine, CHOIX_DE_THEME, LANGUES } from '@starterlib/util';
 export { ETATS_DE_BLOC } from '@starterlib/util';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { RouterLink } from '@angular/router';
@@ -56,7 +56,66 @@ const LIBELLES_FR = {
     sessionExpireDans: (duree) => `Sans activit\u00e9 de votre part, la session sera ferm\u00e9e dans ${duree}.`,
     resterConnecte: 'Rester connect\u00e9',
     seDeconnecter: 'Se d\u00e9connecter',
+    obligatoire: '(obligatoire)',
+    champObligatoire: 'Ce champ est obligatoire.',
+    valeurInvalide: 'Cette valeur n\u2019est pas valide.',
+    adresseInvalide: 'Saisissez une adresse \u00e9lectronique, par exemple nom@exemple.fr.',
+    formatInvalide: 'Le format n\u2019est pas valide.',
+    longueurMinimale: (minimum) => `Saisissez au moins ${String(minimum)} caract\u00e8res.`,
+    longueurMaximale: (maximum) => `Saisissez au plus ${String(maximum)} caract\u00e8res.`,
+    valeurMinimale: (minimum) => `La valeur doit \u00eatre au moins ${minimum}.`,
+    valeurMaximale: (maximum) => `La valeur doit \u00eatre au plus ${maximum}.`,
+    caracteresRestants: (restants) => restants <= 1
+        ? `${String(restants)} caract\u00e8re restant`
+        : `${String(restants)} caract\u00e8res restants`,
+    caracteresEnTrop: (enTrop) => enTrop === 1 ? '1 caract\u00e8re en trop' : `${String(enTrop)} caract\u00e8res en trop`,
+    erreursACorriger: (nombre) => nombre === 1 ? 'Une erreur \u00e0 corriger' : `${String(nombre)} erreurs \u00e0 corriger`,
+    afficherLeMotDePasse: 'Afficher le mot de passe',
+    codeAChiffres: (longueur) => `Code \u00e0 ${String(longueur)} chiffres.`,
+    ibanInvalide: 'Saisissez un IBAN valide.',
+    telephoneInvalide: 'Saisissez un num\u00e9ro de t\u00e9l\u00e9phone en chiffres, avec l\u2019indicatif du pays pour un num\u00e9ro \u00e9tranger.',
+    exempleDIban: 'Par exemple FR76 3000 6000 0112 3456 7890 189.',
+    rechercher: 'Rechercher',
     fermerLeMessage: 'Fermer le message',
+    montantIllisible: (exemple) => `Saisissez un montant en chiffres, par exemple ${exemple}.`,
+    tropDeDecimales: (decimales) => decimales === 0
+        ? 'Saisissez un montant sans d\u00e9cimales.'
+        : `Saisissez au plus ${String(decimales)} d\u00e9cimale${decimales > 1 ? 's' : ''}.`,
+    deviseDuMontant: (devise) => `Devise\u00a0: ${devise}.`,
+    lettreDuJour: 'jj',
+    lettreDuMois: 'mm',
+    lettreDeLAnnee: 'aaaa',
+    formatDeDate: (motif, exemple) => `Au format ${motif}, par exemple ${exemple}.`,
+    dateIllisible: (motif, exemple) => `Saisissez une date qui existe, au format ${motif}, par exemple ${exemple}.`,
+    dateTropTot: (date) => `Saisissez une date \u00e0 partir du ${date}.`,
+    dateTropTard: (date) => `Saisissez une date jusqu\u2019au ${date}.`,
+    finAvantDebut: 'La date de fin ne peut pas pr\u00e9c\u00e9der la date de d\u00e9but.',
+    dateDeDebut: 'Date de d\u00e9but',
+    dateDeFin: 'Date de fin',
+    choisirDansLeCalendrier: (champ) => `${champ}\u00a0: choisir dans le calendrier`,
+    moisPrecedent: 'Mois pr\u00e9c\u00e9dent',
+    moisSuivant: 'Mois suivant',
+    aideDuCalendrier: 'Fl\u00e8ches pour changer de jour, Page pr\u00e9c\u00e9dente et Page suivante pour changer de mois, \u00c9chap pour fermer.',
+    choisir: 'Choisir\u2026',
+    nombreDeResultats: (nombre) => nombre === 0
+        ? 'Aucun r\u00e9sultat'
+        : `${String(nombre)} r\u00e9sultat${nombre > 1 ? 's' : ''}`,
+    nombreDeSelections: (nombre) => (nombre === 0 ? 'Aucun choix' : `${String(nombre)} choix`),
+    retirerLeChoix: (choix) => `Retirer ${choix}`,
+    afficherLesChoix: (champ) => `${champ}\u00a0: afficher les choix`,
+    choisirDesFichiers: 'Choisir des fichiers',
+    choisirUnFichier: 'Choisir un fichier',
+    ouDeposerIci: 'ou d\u00e9posez-les ici',
+    aucunFichier: 'Aucun fichier choisi.',
+    nombreDeFichiers: (nombre) => nombre === 0
+        ? 'Aucun fichier choisi.'
+        : `${String(nombre)} fichier${nombre > 1 ? 's' : ''} choisi${nombre > 1 ? 's' : ''}.`,
+    retirerLeFichier: (fichier) => `Retirer ${fichier}`,
+    fichierTropVolumineux: (fichier, taille) => `${fichier} d\u00e9passe ${taille}.`,
+    typeDeFichierRefuse: (fichier) => `${fichier} n\u2019est pas d\u2019un type accept\u00e9.`,
+    tropDeFichiers: (nombre) => `Choisissez au plus ${String(nombre)} fichier${nombre > 1 ? 's' : ''}.`,
+    typesAcceptes: (types) => `Types accept\u00e9s\u00a0: ${types}.`,
+    tailleMaximale: (taille) => `${taille} au plus par fichier.`,
     confirmer: 'Confirmer',
     annuler: 'Annuler',
     recopierPourConfirmer: (texte) => `Pour confirmer, recopiez \u00ab\u202f${texte}\u202f\u00bb`,
@@ -97,7 +156,60 @@ const LIBELLES_EN = {
     sessionExpireDans: (duree) => `Without any activity, you will be signed out in ${duree}.`,
     resterConnecte: 'Stay signed in',
     seDeconnecter: 'Sign out',
+    obligatoire: '(required)',
+    champObligatoire: 'This field is required.',
+    valeurInvalide: 'This value is not valid.',
+    adresseInvalide: 'Enter an email address, like name@example.com.',
+    formatInvalide: 'The format is not valid.',
+    longueurMinimale: (minimum) => `Enter at least ${String(minimum)} characters.`,
+    longueurMaximale: (maximum) => `Enter no more than ${String(maximum)} characters.`,
+    valeurMinimale: (minimum) => `The value must be at least ${minimum}.`,
+    valeurMaximale: (maximum) => `The value must be at most ${maximum}.`,
+    caracteresRestants: (restants) => restants === 1 ? '1 character remaining' : `${String(restants)} characters remaining`,
+    caracteresEnTrop: (enTrop) => enTrop === 1 ? '1 character too many' : `${String(enTrop)} characters too many`,
+    erreursACorriger: (nombre) => nombre === 1 ? 'There is 1 problem to fix' : `There are ${String(nombre)} problems to fix`,
+    afficherLeMotDePasse: 'Show password',
+    codeAChiffres: (longueur) => `${String(longueur)}-digit code.`,
+    ibanInvalide: 'Enter a valid IBAN.',
+    telephoneInvalide: 'Enter a phone number using digits, with the country code for a number abroad.',
+    exempleDIban: 'For example FR76 3000 6000 0112 3456 7890 189.',
+    rechercher: 'Search',
     fermerLeMessage: 'Dismiss message',
+    montantIllisible: (exemple) => `Enter an amount in figures, like ${exemple}.`,
+    tropDeDecimales: (decimales) => decimales === 0
+        ? 'Enter an amount without decimals.'
+        : `Enter no more than ${String(decimales)} decimal place${decimales > 1 ? 's' : ''}.`,
+    deviseDuMontant: (devise) => `Currency: ${devise}.`,
+    lettreDuJour: 'dd',
+    lettreDuMois: 'mm',
+    lettreDeLAnnee: 'yyyy',
+    formatDeDate: (motif, exemple) => `Use the format ${motif}, like ${exemple}.`,
+    dateIllisible: (motif, exemple) => `Enter a real date in the format ${motif}, like ${exemple}.`,
+    dateTropTot: (date) => `Enter a date on or after ${date}.`,
+    dateTropTard: (date) => `Enter a date on or before ${date}.`,
+    finAvantDebut: 'The end date cannot be before the start date.',
+    dateDeDebut: 'Start date',
+    dateDeFin: 'End date',
+    choisirDansLeCalendrier: (champ) => `${champ}: choose from calendar`,
+    moisPrecedent: 'Previous month',
+    moisSuivant: 'Next month',
+    aideDuCalendrier: 'Arrow keys to change day, Page Up and Page Down to change month, Escape to close.',
+    choisir: 'Choose\u2026',
+    nombreDeResultats: (nombre) => nombre === 0 ? 'No results' : `${String(nombre)} result${nombre > 1 ? 's' : ''}`,
+    nombreDeSelections: (nombre) => nombre === 0 ? 'Nothing selected' : `${String(nombre)} selected`,
+    retirerLeChoix: (choix) => `Remove ${choix}`,
+    afficherLesChoix: (champ) => `${champ}: show options`,
+    choisirDesFichiers: 'Choose files',
+    choisirUnFichier: 'Choose a file',
+    ouDeposerIci: 'or drop them here',
+    aucunFichier: 'No file chosen.',
+    nombreDeFichiers: (nombre) => nombre === 0 ? 'No file chosen.' : `${String(nombre)} file${nombre > 1 ? 's' : ''} chosen.`,
+    retirerLeFichier: (fichier) => `Remove ${fichier}`,
+    fichierTropVolumineux: (fichier, taille) => `${fichier} is larger than ${taille}.`,
+    typeDeFichierRefuse: (fichier) => `${fichier} is not an accepted file type.`,
+    tropDeFichiers: (nombre) => `Choose no more than ${String(nombre)} file${nombre > 1 ? 's' : ''}.`,
+    typesAcceptes: (types) => `Accepted types: ${types}.`,
+    tailleMaximale: (taille) => `${taille} maximum per file.`,
     confirmer: 'Confirm',
     annuler: 'Cancel',
     recopierPourConfirmer: (texte) => `To confirm, type \u201c${texte}\u201d`,
@@ -371,6 +483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  */
 const NOMS_DICONE = [
     'boite-vide',
+    'calendrier',
     'cercle',
     'cercle-coche',
     'cercle-croix',
@@ -383,6 +496,7 @@ const NOMS_DICONE = [
     'copie',
     'corbeille',
     'croix',
+    'fichier',
     'hors-ligne',
     'lien-externe',
     'menu',
@@ -392,6 +506,7 @@ const NOMS_DICONE = [
     'rafraichir',
     'recherche',
     'serveur',
+    'televerser',
     'triangle-alerte',
     'utilisateur',
 ];
@@ -2094,6 +2209,1578 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     }, template: "<st-icon [nom]=\"icone()\" taille=\"xs\" />\n<span class=\"st-inline-message__texte\"><ng-content /></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:flex;gap:var(--st-espacement-2);align-items:flex-start;font-size:var(--st-taille-sm);line-height:var(--st-interligne-normal)}:host([data-ton=neutre]){color:var(--st-couleur-texte-discret)}:host([data-ton=primaire]){color:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-avertissement)}:host([data-ton=danger]){color:var(--st-couleur-danger)}\n"] }]
         }], propDecorators: { ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], identifiant: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifiant", required: false }] }] } });
 
+/**
+ * Le texte d'une erreur, dans la langue courante.
+ *
+ * ⚠️ **Un `message` fourni l'emporte toujours.** Un validateur metier, ou une
+ * erreur du serveur deja traduite, en sait plus que le genre : « IBAN d'un pays
+ * non pris en charge » vaut mieux que « Le format n'est pas valide ».
+ *
+ * ⚠️ **Un genre inconnu rend un message generique, jamais le genre brut.**
+ * Afficher `ibanChecksum` a une personne qui saisit un IBAN, c'est lui montrer le
+ * code source.
+ *
+ * La locale sert aux messages qui citent un format, une date ou une taille : « au
+ * format jj/mm/aaaa » n'est pas « mm/dd/yyyy ».
+ */
+function messageDErreur(erreur, libelles, locale = 'fr-FR') {
+    const fourni = erreur.message?.trim();
+    if (fourni !== undefined && fourni !== '')
+        return fourni;
+    const propriete = (nom) => erreur[nom];
+    const nombre = (nom) => {
+        const valeur = propriete(nom);
+        return typeof valeur === 'number' ? valeur : undefined;
+    };
+    const texte = (nom) => {
+        const valeur = propriete(nom);
+        return typeof valeur === 'string' ? valeur : undefined;
+    };
+    switch (erreur.kind) {
+        case 'required':
+            return libelles.champObligatoire;
+        case 'email':
+            return libelles.adresseInvalide;
+        case 'pattern':
+            return libelles.formatInvalide;
+        case 'iban':
+            return libelles.ibanInvalide;
+        case 'telephone':
+            return libelles.telephoneInvalide;
+        case 'minLength': {
+            const minimum = nombre('minLength');
+            return minimum === undefined ? libelles.valeurInvalide : libelles.longueurMinimale(minimum);
+        }
+        case 'maxLength': {
+            const maximum = nombre('maxLength');
+            return maximum === undefined ? libelles.valeurInvalide : libelles.longueurMaximale(maximum);
+        }
+        case 'min': {
+            const minimum = nombre('min');
+            return minimum === undefined
+                ? libelles.valeurInvalide
+                : libelles.valeurMinimale(String(minimum));
+        }
+        case 'max': {
+            const maximum = nombre('max');
+            return maximum === undefined
+                ? libelles.valeurInvalide
+                : libelles.valeurMaximale(String(maximum));
+        }
+        case 'montant': {
+            const devise = texte('devise') ?? 'EUR';
+            const exemple = formaterMontant(montant((123456n * 10n ** BigInt(decimalesDe(devise))) / 100n, devise), {
+                locale,
+                sansDevise: true,
+            });
+            return libelles.montantIllisible(exemple);
+        }
+        case 'decimales': {
+            const decimales = nombre('decimales');
+            return decimales === undefined
+                ? libelles.valeurInvalide
+                : libelles.tropDeDecimales(decimales);
+        }
+        case 'date':
+            return libelles.dateIllisible(motifLocal(libelles, locale), exempleDeDate(locale));
+        case 'dateMin': {
+            const minimum = texte('min');
+            return minimum === undefined
+                ? libelles.valeurInvalide
+                : libelles.dateTropTot(formaterDateLongue(minimum, locale));
+        }
+        case 'dateMax': {
+            const maximum = texte('max');
+            return maximum === undefined
+                ? libelles.valeurInvalide
+                : libelles.dateTropTard(formaterDateLongue(maximum, locale));
+        }
+        case 'plageDeDates':
+            return libelles.finAvantDebut;
+        case 'fichierTaille': {
+            const fichier = texte('fichier');
+            const maximum = nombre('max');
+            return fichier === undefined || maximum === undefined
+                ? libelles.valeurInvalide
+                : libelles.fichierTropVolumineux(fichier, formaterTaille(maximum, locale));
+        }
+        case 'fichierType': {
+            const fichier = texte('fichier');
+            return fichier === undefined
+                ? libelles.valeurInvalide
+                : libelles.typeDeFichierRefuse(fichier);
+        }
+        case 'fichiersNombre': {
+            const maximum = nombre('max');
+            return maximum === undefined ? libelles.valeurInvalide : libelles.tropDeFichiers(maximum);
+        }
+        default:
+            return libelles.valeurInvalide;
+    }
+}
+/** Le motif a taper dans la langue courante : `jj/mm/aaaa`. */
+function motifLocal(libelles, locale) {
+    return motifDeDate(locale, {
+        jour: libelles.lettreDuJour,
+        mois: libelles.lettreDuMois,
+        annee: libelles.lettreDeLAnnee,
+    });
+}
+/**
+ * Un jour superieur a 12 : « 31/03/2026 » montre sans ambiguite ou va le jour,
+ * ce que « 01/02/2026 » ne dit pas.
+ */
+function exempleDeDate(locale) {
+    return formaterDateSaisie('2026-03-31', locale);
+}
+/**
+ * Erreur d'IBAN, a brancher sur un schema :
+ *
+ * ```ts
+ * validate(chemin.iban, ({ value }) => erreurIban(value()));
+ * ```
+ *
+ * Une fonction pure plutot qu'une regle toute faite : fournir la regle
+ * importerait `validate` d'`@angular/forms` A L'EXECUTION, et le socle ne
+ * l'importe que pour ses types (audit de la vague 3, V3-1).
+ *
+ * ⚠️ Confort de saisie, jamais controle (SEC-5) : le serveur revalide. Un champ
+ * vide n'est pas « invalide » ici — c'est `required` qui le dit, avec le bon
+ * message.
+ */
+function erreurIban(valeur) {
+    if (valeur.trim() === '')
+        return null;
+    return ibanEstValide(valeur) ? null : { kind: 'iban' };
+}
+/**
+ * Erreur de FORME d'un numero de telephone : chiffres, `+` de tete facultatif,
+ * de 4 a 15 chiffres — la longueur maximale d'un numero international (E.164).
+ *
+ * ```ts
+ * validate(chemin.telephone, ({ value }) => erreurTelephone(value()));
+ * ```
+ *
+ * ⚠️ Une forme valide ne dit pas que le numero existe : seul le serveur le sait.
+ * Un champ vide n'est pas une erreur de forme : l'obligation est une autre regle.
+ */
+function erreurTelephone(valeur) {
+    const numero = normaliserTelephone(valeur);
+    if (numero === '')
+        return null;
+    return /^\+?[0-9]{4,15}$/.test(numero) ? null : { kind: 'telephone' };
+}
+/**
+ * Erreur de bornes d'une date, a brancher sur un schema :
+ *
+ * ```ts
+ * validate(chemin.naissance, ({ value }) => erreurDate(value(), { max: aujourdHui }));
+ * ```
+ *
+ * Les bornes du schema et celles passees au calendrier doivent etre les memes :
+ * le calendrier grise, le schema refuse une date tapee a la main.
+ */
+function erreurDate(valeur, bornes) {
+    if (valeur === null || valeur === '')
+        return null;
+    const { min, max } = bornes;
+    if (min !== undefined && min !== null && valeur < min) {
+        return { kind: 'dateMin', min };
+    }
+    if (max !== undefined && max !== null && valeur > max) {
+        return { kind: 'dateMax', max };
+    }
+    return null;
+}
+/** Une fin anterieure au debut. Une borne manquante n'est pas une erreur de plage. */
+function erreurPlageDeDates(plage) {
+    const { debut, fin } = plage;
+    if (debut === null || fin === null)
+        return null;
+    return fin < debut ? { kind: 'plageDeDates' } : null;
+}
+/**
+ * Erreurs d'une liste de fichiers, une par fichier refuse, pour dire LEQUEL :
+ *
+ * ```ts
+ * validate(chemin.pieces, ({ value }) => erreursDeFichiers(value(), regles));
+ * ```
+ *
+ * ⚠️ Confort, jamais securite (SEC-5) : le type se deduit de l'extension, et le
+ * serveur relit le contenu.
+ */
+function erreursDeFichiers(fichiers, regles) {
+    const erreurs = [];
+    const { accept = '', tailleMax, nombreMax } = regles;
+    if (nombreMax !== undefined && fichiers.length > nombreMax) {
+        erreurs.push({ kind: 'fichiersNombre', max: nombreMax });
+    }
+    for (const fichier of fichiers) {
+        if (!typeDeFichierAccepte(fichier, accept)) {
+            erreurs.push({ kind: 'fichierType', fichier: fichier.name });
+        }
+        else if (tailleMax !== undefined && fichier.size > tailleMax) {
+            erreurs.push({
+                kind: 'fichierTaille',
+                fichier: fichier.name,
+                max: tailleMax,
+            });
+        }
+    }
+    return erreurs;
+}
+/**
+ * Erreurs a afficher par un champ qui LIT sa saisie (`transformedValue`) : celles
+ * du formulaire, plus les erreurs de lecture qu'il ne connait pas encore.
+ *
+ * ⚠️ Relie a un formulaire, un champ recoit ses erreurs de lecture DANS `errors`,
+ * par Signal Forms. Employe seul, par `[(value)]`, il ne les recoit nulle part :
+ * sans cette fusion, « 12,5,3 » s'afficherait sans le moindre message. Une erreur
+ * deja presente — meme genre, meme partie — n'est pas repetee.
+ */
+function fusionnerErreurs(formulaire, lecture) {
+    const cle = (erreur) => `${erreur.kind}|${erreur.partie ?? ''}`;
+    const connues = new Set(formulaire.map(cle));
+    return [...formulaire, ...lecture.filter((erreur) => !connues.has(cle(erreur)))];
+}
+
+/**
+ * Base des champs du socle : le contrat Signal Forms, ecrit une fois — tout sauf
+ * `value`, dont le type depend du champ (texte, montant, date).
+ *
+ * ⚠️ **Une base, et non une copie par champ.** Neuf membres de contrat recopies
+ * dans six composants, c'est six occasions d'en oublier un — et l'oubli ne se
+ * voit pas : un champ sans `touched` n'affiche jamais ses erreurs, un champ sans
+ * reflet de `hidden` ne se masque pas, et rien n'echoue.
+ *
+ * Les noms restent anglais : voir le glossaire, § 8.
+ *
+ * Le gabarit du champ doit nommer son element natif `#champ`, et le brancher sur
+ * `touch` a la perte du focus.
+ */
+class ContratDeChamp {
+    libelle = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelle" }] : /* istanbul ignore next */ []));
+    aide = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aide" }] : /* istanbul ignore next */ []));
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    touch = output();
+    champ = viewChild('champ', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "champ" }] : /* istanbul ignore next */ []));
+    /** Appele par Signal Forms pour amener le focus sur un champ en erreur. */
+    focus(options) {
+        this.champ()?.nativeElement.focus(options);
+    }
+    texteSaisi(evenement) {
+        return evenement.target.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContratDeChamp, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.6", type: ContratDeChamp, isStandalone: true, inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null }, aide: { classPropertyName: "aide", publicName: "aide", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch" }, host: { properties: { "attr.hidden": "hidden() ? \"\" : null" } }, viewQueries: [{ propertyName: "champ", first: true, predicate: ["champ"], descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContratDeChamp, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        // L'entree `hidden` du contrat n'ecrit pas l'attribut : on le reflete, sans
+                        // quoi la regle `:host([hidden])` du socle ne s'applique pas.
+                        '[attr.hidden]': 'hidden() ? "" : null',
+                    },
+                }]
+        }], propDecorators: { libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: true }] }], aide: [{ type: i0.Input, args: [{ isSignal: true, alias: "aide", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], champ: [{ type: i0.ViewChild, args: ['champ', { isSignal: true }] }] } });
+/** Base des champs dont la valeur est le texte saisi. */
+class ControleDeSaisie extends ContratDeChamp {
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ControleDeSaisie, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ControleDeSaisie, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ControleDeSaisie, decorators: [{
+            type: Directive
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+let compteur$6 = 0;
+/** Elements qu'un `label for` etiquette. */
+const ELEMENTS_ETIQUETABLES = new Set([
+    'INPUT',
+    'SELECT',
+    'TEXTAREA',
+    'BUTTON',
+    'METER',
+    'OUTPUT',
+    'PROGRESS',
+]);
+/**
+ * Etiquette, aide, erreur et controle d'un champ de saisie — et le cablage qui
+ * les relie.
+ *
+ * ⚠️ **Le SEUL endroit ou ce cablage existe** (audit de la vague 3, V3-2). Chaque
+ * champ du socle l'emploie au lieu de refaire identifiants, `aria-describedby` et
+ * `aria-invalid` : c'est precisement le code que l'on croit fini et qui se perd,
+ * un champ specialise a la fois.
+ *
+ * L'ordre visuel suit celui de la lecture : etiquette, aide, erreur, controle.
+ * L'erreur est AU-DESSUS du controle, pour etre vue avant de retaper.
+ *
+ * ⚠️ **L'erreur n'est pas une region vivante.** Annoncee a la perte du focus, elle
+ * couperait la lecture du champ suivant, ou la personne est deja passee. Elle est
+ * reliee au controle, donc lue quand on y revient ; a l'envoi, c'est le
+ * recapitulatif d'erreurs qui prend le focus et les enumere.
+ */
+class StFormField {
+    libelles = inject(ST_LIBELLES);
+    locale = inject(ST_LOCALE);
+    element = inject(ElementRef);
+    /**
+     * ⚠️ OBLIGATOIRE et toujours visible (UX-1). Un texte indicatif ne le remplace
+     * jamais : il disparait a la premiere frappe.
+     */
+    libelle = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelle" }] : /* istanbul ignore next */ []));
+    /** Aide permanente : format attendu, exemple. Lue apres l'etiquette. */
+    aide = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aide" }] : /* istanbul ignore next */ []));
+    /** Texte complementaire tenu a jour par le controle, comme un compteur. */
+    complement = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "complement" }] : /* istanbul ignore next */ []));
+    erreurs = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "erreurs" }] : /* istanbul ignore next */ []));
+    /**
+     * ⚠️ Faux tant que la personne n'a pas quitte le champ ou tente l'envoi (UX-3) :
+     * un formulaire vierge couvert d'erreurs accuse avant qu'on ait rien fait.
+     */
+    afficherErreurs = input(false, { ...(ngDevMode ? { debugName: "afficherErreurs" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    obligatoire = input(false, { ...(ngDevMode ? { debugName: "obligatoire" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * ⚠️ Change l'ordre VISUEL, jamais celui du document : l'etiquette reste
+     * reliee par `for`, et l'ordre de tabulation ne passe que par le controle.
+     */
+    disposition = input('empilee', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disposition" }] : /* istanbul ignore next */ []));
+    /**
+     * Etiquette lue mais non affichee.
+     *
+     * ⚠️ Reservee a la RECHERCHE, ou l'icone, le bouton et la position en tete de
+     * page disent deja le but du champ. Partout ailleurs, une etiquette masquee est
+     * l'etiquette qui manque au moment ou l'on tape (UX-1).
+     */
+    libelleMasque = input(false, { ...(ngDevMode ? { debugName: "libelleMasque" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Identifiants du champ, lus par `stControleDeChamp` et par le gabarit. */
+    identifiants = (() => {
+        const base = `st-champ-${(compteur$6 += 1).toString()}`;
+        return {
+            controle: base,
+            libelle: `${base}-libelle`,
+            aide: `${base}-aide`,
+            complement: `${base}-complement`,
+            erreur: `${base}-erreur`,
+        };
+    })();
+    libelleObligatoire = computed(() => this.libelles().obligatoire, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleObligatoire" }] : /* istanbul ignore next */ []));
+    /** Messages a afficher, dans la langue courante. Vide tant qu'ils ne doivent pas l'etre. */
+    messages = computed(() => {
+        if (!this.afficherErreurs())
+            return [];
+        const libelles = this.libelles();
+        const locale = this.locale();
+        return this.erreurs().map((erreur) => messageDErreur(erreur, libelles, locale));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /**
+     * Un clic sur l'etiquette d'un controle non natif n'y mene pas de lui-meme :
+     * on y amene le focus, comme le navigateur le fait pour un champ natif.
+     */
+    focaliserLeControle() {
+        const controle = this.element.nativeElement.querySelector(`#${this.identifiants.controle}`);
+        if (controle !== null && !ELEMENTS_ETIQUETABLES.has(controle.tagName))
+            controle.focus();
+    }
+    /** Lu par le controle pour `aria-invalid`. */
+    enErreur = computed(() => this.messages().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enErreur" }] : /* istanbul ignore next */ []));
+    /**
+     * ⚠️ Seuls les elements PRESENTS sont references : un `aria-describedby` qui
+     * vise un identifiant absent est ignore par certains lecteurs d'ecran — tout
+     * entier, y compris les references valides qui l'accompagnent.
+     */
+    descriptions = computed(() => {
+        const ids = [];
+        if (this.aide() !== null)
+            ids.push(this.identifiants.aide);
+        if (this.complement() !== null)
+            ids.push(this.identifiants.complement);
+        if (this.enErreur())
+            ids.push(this.identifiants.erreur);
+        return ids.length === 0 ? null : ids.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "descriptions" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StFormField, isStandalone: true, selector: "st-form-field", inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null }, aide: { classPropertyName: "aide", publicName: "aide", isSignal: true, isRequired: false, transformFunction: null }, complement: { classPropertyName: "complement", publicName: "complement", isSignal: true, isRequired: false, transformFunction: null }, erreurs: { classPropertyName: "erreurs", publicName: "erreurs", isSignal: true, isRequired: false, transformFunction: null }, afficherErreurs: { classPropertyName: "afficherErreurs", publicName: "afficherErreurs", isSignal: true, isRequired: false, transformFunction: null }, obligatoire: { classPropertyName: "obligatoire", publicName: "obligatoire", isSignal: true, isRequired: false, transformFunction: null }, disposition: { classPropertyName: "disposition", publicName: "disposition", isSignal: true, isRequired: false, transformFunction: null }, libelleMasque: { classPropertyName: "libelleMasque", publicName: "libelleMasque", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-en-erreur": "enErreur() ? \"\" : null", "attr.data-disposition": "disposition()" }, classAttribute: "st-form-field" }, ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus --\n     Le clic sur une etiquette est une commodite de souris, comme pour tout\n     champ natif : au clavier, le controle se rejoint par tabulation, et\n     l'etiquette n'a pas a recevoir le focus. -->\n<label\n  class=\"st-form-field__libelle\"\n  [class.st-vh]=\"libelleMasque()\"\n  [id]=\"identifiants.libelle\"\n  [for]=\"identifiants.controle\"\n  [attr.data-libelle]=\"libelle()\"\n  (click)=\"focaliserLeControle()\"\n>\n  {{ libelle() }}\n  @if (obligatoire()) {\n    <span class=\"st-form-field__obligatoire\">{{ libelleObligatoire() }}</span>\n  }\n</label>\n\n@if (aide(); as texte) {\n  <p class=\"st-form-field__aide\" [id]=\"identifiants.aide\">{{ texte }}</p>\n}\n\n@if (enErreur()) {\n  <div class=\"st-form-field__erreurs\" [id]=\"identifiants.erreur\">\n    @for (message of messages(); track $index) {\n      <st-inline-message ton=\"danger\">{{ message }}</st-inline-message>\n    }\n  </div>\n}\n\n<div class=\"st-form-field__controle\">\n  <ng-content />\n</div>\n\n@if (complement(); as texte) {\n  <p class=\"st-form-field__complement\" [id]=\"identifiants.complement\">{{ texte }}</p>\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:grid;grid-template-areas:\"libelle\" \"aide\" \"erreur\" \"controle\" \"complement\";grid-template-columns:minmax(0,1fr);gap:var(--st-espacement-1);margin-block-end:var(--st-espacement-5)}:host([data-disposition=case]){grid-template-areas:\"erreur erreur\" \"controle libelle\" \". aide\" \". complement\";grid-template-columns:auto minmax(0,1fr);column-gap:var(--st-espacement-2);align-items:center}.st-form-field__libelle{grid-area:libelle}.st-form-field__aide{grid-area:aide}.st-form-field__erreurs{grid-area:erreur}.st-form-field__controle{grid-area:controle}.st-form-field__complement{grid-area:complement}:host([data-disposition=case]) .st-form-field__libelle{font-weight:var(--st-graisse-normale)}.st-form-field__libelle{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte)}.st-form-field__obligatoire{margin-inline-start:var(--st-espacement-1);font-weight:var(--st-graisse-normale);color:var(--st-couleur-texte-discret)}.st-form-field__aide,.st-form-field__complement{margin:0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}:host([data-en-erreur]){padding-inline-start:var(--st-espacement-3);border-inline-start:3px solid var(--st-couleur-danger)}\n"], dependencies: [{ kind: "component", type: StInlineMessage, selector: "st-inline-message", inputs: ["ton", "identifiant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-form-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StInlineMessage], host: {
+                        class: 'st-form-field',
+                        '[attr.data-en-erreur]': 'enErreur() ? "" : null',
+                        '[attr.data-disposition]': 'disposition()',
+                    }, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus --\n     Le clic sur une etiquette est une commodite de souris, comme pour tout\n     champ natif : au clavier, le controle se rejoint par tabulation, et\n     l'etiquette n'a pas a recevoir le focus. -->\n<label\n  class=\"st-form-field__libelle\"\n  [class.st-vh]=\"libelleMasque()\"\n  [id]=\"identifiants.libelle\"\n  [for]=\"identifiants.controle\"\n  [attr.data-libelle]=\"libelle()\"\n  (click)=\"focaliserLeControle()\"\n>\n  {{ libelle() }}\n  @if (obligatoire()) {\n    <span class=\"st-form-field__obligatoire\">{{ libelleObligatoire() }}</span>\n  }\n</label>\n\n@if (aide(); as texte) {\n  <p class=\"st-form-field__aide\" [id]=\"identifiants.aide\">{{ texte }}</p>\n}\n\n@if (enErreur()) {\n  <div class=\"st-form-field__erreurs\" [id]=\"identifiants.erreur\">\n    @for (message of messages(); track $index) {\n      <st-inline-message ton=\"danger\">{{ message }}</st-inline-message>\n    }\n  </div>\n}\n\n<div class=\"st-form-field__controle\">\n  <ng-content />\n</div>\n\n@if (complement(); as texte) {\n  <p class=\"st-form-field__complement\" [id]=\"identifiants.complement\">{{ texte }}</p>\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:grid;grid-template-areas:\"libelle\" \"aide\" \"erreur\" \"controle\" \"complement\";grid-template-columns:minmax(0,1fr);gap:var(--st-espacement-1);margin-block-end:var(--st-espacement-5)}:host([data-disposition=case]){grid-template-areas:\"erreur erreur\" \"controle libelle\" \". aide\" \". complement\";grid-template-columns:auto minmax(0,1fr);column-gap:var(--st-espacement-2);align-items:center}.st-form-field__libelle{grid-area:libelle}.st-form-field__aide{grid-area:aide}.st-form-field__erreurs{grid-area:erreur}.st-form-field__controle{grid-area:controle}.st-form-field__complement{grid-area:complement}:host([data-disposition=case]) .st-form-field__libelle{font-weight:var(--st-graisse-normale)}.st-form-field__libelle{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte)}.st-form-field__obligatoire{margin-inline-start:var(--st-espacement-1);font-weight:var(--st-graisse-normale);color:var(--st-couleur-texte-discret)}.st-form-field__aide,.st-form-field__complement{margin:0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}:host([data-en-erreur]){padding-inline-start:var(--st-espacement-3);border-inline-start:3px solid var(--st-couleur-danger)}\n"] }]
+        }], propDecorators: { libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: true }] }], aide: [{ type: i0.Input, args: [{ isSignal: true, alias: "aide", required: false }] }], complement: [{ type: i0.Input, args: [{ isSignal: true, alias: "complement", required: false }] }], erreurs: [{ type: i0.Input, args: [{ isSignal: true, alias: "erreurs", required: false }] }], afficherErreurs: [{ type: i0.Input, args: [{ isSignal: true, alias: "afficherErreurs", required: false }] }], obligatoire: [{ type: i0.Input, args: [{ isSignal: true, alias: "obligatoire", required: false }] }], disposition: [{ type: i0.Input, args: [{ isSignal: true, alias: "disposition", required: false }] }], libelleMasque: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelleMasque", required: false }] }] } });
+/**
+ * Pose sur l'element natif d'un champ le cablage de son `st-form-field` :
+ * identifiant, description, invalidite, obligation.
+ *
+ * ⚠️ `aria-required` et NON l'attribut `required` natif. Le natif declenche la
+ * validation du navigateur a l'envoi : une bulle « Veuillez renseigner ce champ »
+ * dans la langue du NAVIGATEUR, pas dans celle de l'application, et qui double
+ * le message du socle.
+ */
+class StControleDeChamp {
+    champ = inject(StFormField);
+    /**
+     * ⚠️ `label for` n'etiquette que les elements natifs de formulaire. Le
+     * declencheur d'une selection multiple est un `div` de role `combobox` : sans
+     * `aria-labelledby`, il n'aurait aucun nom, et l'etiquette visible ne dirait
+     * rien au lecteur d'ecran.
+     */
+    etiquetable = ELEMENTS_ETIQUETABLES.has(inject(ElementRef).nativeElement.tagName);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StControleDeChamp, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: StControleDeChamp, isStandalone: true, selector: "[stControleDeChamp]", host: { properties: { "id": "champ.identifiants.controle", "attr.aria-labelledby": "etiquetable ? null : champ.identifiants.libelle", "attr.aria-describedby": "champ.descriptions()", "attr.aria-invalid": "champ.enErreur() ? \"true\" : null", "attr.aria-required": "champ.obligatoire() ? \"true\" : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StControleDeChamp, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stControleDeChamp]',
+                    host: {
+                        '[id]': 'champ.identifiants.controle',
+                        '[attr.aria-labelledby]': 'etiquetable ? null : champ.identifiants.libelle',
+                        '[attr.aria-describedby]': 'champ.descriptions()',
+                        '[attr.aria-invalid]': 'champ.enErreur() ? "true" : null',
+                        '[attr.aria-required]': 'champ.obligatoire() ? "true" : null',
+                    },
+                }]
+        }] });
+
+/**
+ * Champ de saisie d'une ligne, integre a Signal Forms.
+ *
+ * ```html
+ * <st-input libelle="Nom du beneficiaire" autocomplete="name" [formField]="virement.beneficiaire" />
+ * <!-- ou, sans formulaire : -->
+ * <st-input libelle="Reference" [(value)]="reference" />
+ * ```
+ *
+ * ⚠️ **Contrat Signal Forms, noms anglais.** `value`, `errors`, `touched`,
+ * `disabled`… sont cherches PAR LEUR NOM par la directive `[formField]` : les
+ * traduire romprait l'integration sans la moindre erreur (audit de la vague 3,
+ * V3-1). L'import d'`@angular/forms` est un import de TYPE : aucun code n'entre
+ * dans le paquet.
+ *
+ * ⚠️ **Pas d'attribut `maxlength` natif.** Il TRONQUE en silence un texte colle
+ * trop long : la personne croit avoir saisi sa reference entiere, et n'en envoie
+ * que le debut. La limite passe par la validation, qui DIT le depassement.
+ */
+class StInput extends ControleDeSaisie {
+    type = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * WCAG 1.3.5 : identifie le but du champ, pour le remplissage automatique et les
+     * aides techniques. `null` : laisse le navigateur decider.
+     */
+    autocomplete = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    /** Clavier virtuel adapte : `numeric`, `decimal`, `email`… */
+    inputmode = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []));
+    surSaisie(evenement) {
+        this.value.set(this.texteSaisi(evenement));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StInput, isStandalone: true, selector: "st-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-input" }, 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  <input\n    #champ\n    class=\"st-input__champ\"\n    stControleDeChamp\n    [type]=\"type()\"\n    [value]=\"value()\"\n    [attr.name]=\"name() || null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.inputmode]=\"inputmode()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (input)=\"surSaisie($event)\"\n    (blur)=\"touch.emit()\"\n  />\n</st-form-field>\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-input__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-input__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-input__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-input__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-input__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}\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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-input' }, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <input\n    #champ\n    class=\"st-input__champ\"\n    stControleDeChamp\n    [type]=\"type()\"\n    [value]=\"value()\"\n    [attr.name]=\"name() || null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.inputmode]=\"inputmode()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (input)=\"surSaisie($event)\"\n    (blur)=\"touch.emit()\"\n  />\n</st-form-field>\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-input__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-input__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-input__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-input__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-input__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }] } });
+
+/** Restant a partir duquel le compteur se signale. */
+const SEUILS_D_ANNONCE = [20, 10, 0];
+/**
+ * Zone de texte, integree a Signal Forms, avec compteur quand une longueur
+ * maximale est fixee.
+ *
+ * ⚠️ **Le compteur n'est pas annonce a chaque frappe** : une region vivante qui
+ * change a chaque caractere recouvre ce que la personne tape. Il est RELIE a la
+ * zone — donc lu quand on y revient — et seuls les seuils (20, 10, 0 restants)
+ * et le depassement s'annoncent (UX-11).
+ *
+ * ⚠️ **Pas de `maxlength` natif**, meme raison que `st-input` : un texte colle
+ * serait tronque en silence. Le compteur affiche le depassement, la validation
+ * le refuse.
+ */
+class StTextarea extends ControleDeSaisie {
+    libelles = inject(ST_LIBELLES);
+    lignes = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
+    /** Contrat Signal Forms : la longueur maximale fixee par le schema. */
+    maxLength = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    annonce = new AnnonceLocale(inject(DestroyRef));
+    restants = computed(() => {
+        const maximum = this.maxLength();
+        return maximum === undefined ? null : maximum - this.value().length;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "restants" }] : /* istanbul ignore next */ []));
+    compteur = computed(() => {
+        const restants = this.restants();
+        if (restants === null)
+            return null;
+        const libelles = this.libelles();
+        return restants >= 0
+            ? libelles.caracteresRestants(restants)
+            : libelles.caracteresEnTrop(-restants);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compteur" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        let precedent = null;
+        effect(() => {
+            const restants = this.restants();
+            if (restants === null)
+                return;
+            const avant = precedent;
+            precedent = restants;
+            if (avant === null)
+                return;
+            const franchi = SEUILS_D_ANNONCE.some((seuil) => avant > seuil && restants <= seuil) ||
+                (avant >= 0 && restants < 0);
+            const texte = this.compteur();
+            if (franchi && texte !== null)
+                this.annonce.annoncer(texte);
+        });
+    }
+    surSaisie(evenement) {
+        this.value.set(this.texteSaisi(evenement));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StTextarea, isStandalone: true, selector: "st-textarea", inputs: { lignes: { classPropertyName: "lignes", publicName: "lignes", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-textarea" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [complement]=\"compteur()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <textarea\n    #champ\n    class=\"st-textarea__champ\"\n    stControleDeChamp\n    [rows]=\"lignes()\"\n    [value]=\"value()\"\n    [attr.name]=\"name() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (input)=\"surSaisie($event)\"\n    (blur)=\"touch.emit()\"\n  ></textarea>\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-textarea__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-textarea__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-textarea__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-textarea__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-textarea__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-textarea__champ{resize:vertical}\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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTextarea, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-textarea' }, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [complement]=\"compteur()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <textarea\n    #champ\n    class=\"st-textarea__champ\"\n    stControleDeChamp\n    [rows]=\"lignes()\"\n    [value]=\"value()\"\n    [attr.name]=\"name() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (input)=\"surSaisie($event)\"\n    (blur)=\"touch.emit()\"\n  ></textarea>\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-textarea__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-textarea__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-textarea__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-textarea__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-textarea__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-textarea__champ{resize:vertical}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { lignes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lignes", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }] } });
+
+let compteur$5 = 0;
+/**
+ * Groupe de controles, nomme par sa QUESTION.
+ *
+ * ⚠️ `fieldset` et `legend` natifs (UX-7). Sans legende, un lecteur d'ecran
+ * annonce « Oui, bouton radio » et « Non, bouton radio » : la reponse, jamais la
+ * question. La legende est lue a l'entree dans le groupe.
+ *
+ * C'est le pendant de `st-form-field` pour un GROUPE : l'aide et l'erreur sont
+ * reliees au `fieldset` par `aria-describedby`, et l'erreur porte sur le groupe
+ * entier — « Choisissez un mode de reglement » — et non sur chaque option.
+ *
+ * ⚠️ L'obligation se dit dans la legende, en texte : `aria-required` n'est pas
+ * valide sur un groupe, et `required` natif ferait parler le navigateur dans sa
+ * propre langue.
+ */
+class StFieldset {
+    libelles = inject(ST_LIBELLES);
+    locale = inject(ST_LOCALE);
+    /** La question posee par le groupe. Obligatoire. */
+    legende = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legende" }] : /* istanbul ignore next */ []));
+    aide = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aide" }] : /* istanbul ignore next */ []));
+    erreurs = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "erreurs" }] : /* istanbul ignore next */ []));
+    afficherErreurs = input(false, { ...(ngDevMode ? { debugName: "afficherErreurs" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    obligatoire = input(false, { ...(ngDevMode ? { debugName: "obligatoire" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    base = `st-groupe-${(compteur$5 += 1).toString()}`;
+    identifiantAide = `${this.base}-aide`;
+    identifiantErreur = `${this.base}-erreur`;
+    libelleObligatoire = computed(() => this.libelles().obligatoire, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleObligatoire" }] : /* istanbul ignore next */ []));
+    messages = computed(() => {
+        if (!this.afficherErreurs())
+            return [];
+        const libelles = this.libelles();
+        const locale = this.locale();
+        return this.erreurs().map((erreur) => messageDErreur(erreur, libelles, locale));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    enErreur = computed(() => this.messages().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enErreur" }] : /* istanbul ignore next */ []));
+    descriptions = computed(() => {
+        const ids = [];
+        if (this.aide() !== null)
+            ids.push(this.identifiantAide);
+        if (this.enErreur())
+            ids.push(this.identifiantErreur);
+        return ids.length === 0 ? null : ids.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "descriptions" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFieldset, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StFieldset, isStandalone: true, selector: "st-fieldset", inputs: { legende: { classPropertyName: "legende", publicName: "legende", isSignal: true, isRequired: true, transformFunction: null }, aide: { classPropertyName: "aide", publicName: "aide", isSignal: true, isRequired: false, transformFunction: null }, erreurs: { classPropertyName: "erreurs", publicName: "erreurs", isSignal: true, isRequired: false, transformFunction: null }, afficherErreurs: { classPropertyName: "afficherErreurs", publicName: "afficherErreurs", isSignal: true, isRequired: false, transformFunction: null }, obligatoire: { classPropertyName: "obligatoire", publicName: "obligatoire", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-en-erreur": "enErreur() ? \"\" : null" }, classAttribute: "st-fieldset" }, ngImport: i0, template: "<fieldset class=\"st-fieldset__groupe\" [attr.aria-describedby]=\"descriptions()\">\n  <legend class=\"st-fieldset__legende\" [attr.data-libelle]=\"legende()\">\n    {{ legende() }}\n    @if (obligatoire()) {\n      <span class=\"st-fieldset__obligatoire\">{{ libelleObligatoire() }}</span>\n    }\n  </legend>\n\n  @if (aide(); as texte) {\n    <p class=\"st-fieldset__aide\" [id]=\"identifiantAide\">{{ texte }}</p>\n  }\n\n  @if (enErreur()) {\n    <div class=\"st-fieldset__erreurs\" [id]=\"identifiantErreur\">\n      @for (message of messages(); track $index) {\n        <st-inline-message ton=\"danger\">{{ message }}</st-inline-message>\n      }\n    </div>\n  }\n\n  <div class=\"st-fieldset__controles\">\n    <ng-content />\n  </div>\n</fieldset>\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;margin-block-end:var(--st-espacement-5)}.st-fieldset__groupe{min-inline-size:0;padding:0;margin:0;border:0}.st-fieldset__legende{padding:0;margin-block-end:var(--st-espacement-2);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte)}.st-fieldset__obligatoire{margin-inline-start:var(--st-espacement-1);font-weight:var(--st-graisse-normale);color:var(--st-couleur-texte-discret)}.st-fieldset__aide{margin:0 0 var(--st-espacement-2);font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}.st-fieldset__erreurs{margin-block-end:var(--st-espacement-2)}.st-fieldset__controles{display:flex;flex-direction:column;gap:var(--st-espacement-2)}:host([data-en-erreur]) .st-fieldset__groupe{padding-inline-start:var(--st-espacement-3);border-inline-start:3px solid var(--st-couleur-danger)}\n"], dependencies: [{ kind: "component", type: StInlineMessage, selector: "st-inline-message", inputs: ["ton", "identifiant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFieldset, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-fieldset', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StInlineMessage], host: {
+                        class: 'st-fieldset',
+                        '[attr.data-en-erreur]': 'enErreur() ? "" : null',
+                    }, template: "<fieldset class=\"st-fieldset__groupe\" [attr.aria-describedby]=\"descriptions()\">\n  <legend class=\"st-fieldset__legende\" [attr.data-libelle]=\"legende()\">\n    {{ legende() }}\n    @if (obligatoire()) {\n      <span class=\"st-fieldset__obligatoire\">{{ libelleObligatoire() }}</span>\n    }\n  </legend>\n\n  @if (aide(); as texte) {\n    <p class=\"st-fieldset__aide\" [id]=\"identifiantAide\">{{ texte }}</p>\n  }\n\n  @if (enErreur()) {\n    <div class=\"st-fieldset__erreurs\" [id]=\"identifiantErreur\">\n      @for (message of messages(); track $index) {\n        <st-inline-message ton=\"danger\">{{ message }}</st-inline-message>\n      }\n    </div>\n  }\n\n  <div class=\"st-fieldset__controles\">\n    <ng-content />\n  </div>\n</fieldset>\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;margin-block-end:var(--st-espacement-5)}.st-fieldset__groupe{min-inline-size:0;padding:0;margin:0;border:0}.st-fieldset__legende{padding:0;margin-block-end:var(--st-espacement-2);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte)}.st-fieldset__obligatoire{margin-inline-start:var(--st-espacement-1);font-weight:var(--st-graisse-normale);color:var(--st-couleur-texte-discret)}.st-fieldset__aide{margin:0 0 var(--st-espacement-2);font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}.st-fieldset__erreurs{margin-block-end:var(--st-espacement-2)}.st-fieldset__controles{display:flex;flex-direction:column;gap:var(--st-espacement-2)}:host([data-en-erreur]) .st-fieldset__groupe{padding-inline-start:var(--st-espacement-3);border-inline-start:3px solid var(--st-couleur-danger)}\n"] }]
+        }], propDecorators: { legende: [{ type: i0.Input, args: [{ isSignal: true, alias: "legende", required: true }] }], aide: [{ type: i0.Input, args: [{ isSignal: true, alias: "aide", required: false }] }], erreurs: [{ type: i0.Input, args: [{ isSignal: true, alias: "erreurs", required: false }] }], afficherErreurs: [{ type: i0.Input, args: [{ isSignal: true, alias: "afficherErreurs", required: false }] }], obligatoire: [{ type: i0.Input, args: [{ isSignal: true, alias: "obligatoire", required: false }] }] } });
+
+/**
+ * Case a cocher, integree a Signal Forms.
+ *
+ * ```html
+ * <st-checkbox libelle="J'accepte les conditions generales" [formField]="inscription.conditions" />
+ * ```
+ *
+ * Un element `input type="checkbox"` natif : Espace coche, l'etat est annonce,
+ * et la case suit le reglage de contraste du systeme sans rien ecrire.
+ *
+ * ⚠️ **Pour un choix a envoyer avec un formulaire.** Un reglage qui s'applique
+ * IMMEDIATEMENT est un `st-switch` : la case promet un effet a l'envoi, et
+ * l'interrupteur un effet tout de suite (UX-8).
+ */
+class StCheckbox {
+    libelle = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelle" }] : /* istanbul ignore next */ []));
+    aide = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aide" }] : /* istanbul ignore next */ []));
+    /** Contrat Signal Forms. */
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    touch = output();
+    champ = viewChild.required('champ', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "champ" }] : /* istanbul ignore next */ []));
+    focus(options) {
+        this.champ().nativeElement.focus(options);
+    }
+    surChangement(evenement) {
+        this.checked.set(evenement.target.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: StCheckbox, isStandalone: true, selector: "st-checkbox", inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null }, aide: { classPropertyName: "aide", publicName: "aide", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touch: "touch" }, host: { properties: { "attr.hidden": "hidden() ? \"\" : null" }, classAttribute: "st-checkbox" }, viewQueries: [{ propertyName: "champ", first: true, predicate: ["champ"], descendants: true, isSignal: true }], ngImport: i0, template: "<st-form-field\n  disposition=\"case\"\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <input\n    #champ\n    class=\"st-checkbox__case\"\n    type=\"checkbox\"\n    stControleDeChamp\n    [checked]=\"checked()\"\n    [attr.name]=\"name() || null\"\n    [disabled]=\"disabled()\"\n    (change)=\"surChangement($event)\"\n    (blur)=\"touch.emit()\"\n  />\n</st-form-field>\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-checkbox__case:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-checkbox__case{inline-size:1.5rem;block-size:1.5rem;margin:0;cursor:pointer;accent-color:var(--st-couleur-primaire)}.st-checkbox__case:disabled{cursor:not-allowed}\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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: {
+                        class: 'st-checkbox',
+                        '[attr.hidden]': 'hidden() ? "" : null',
+                    }, template: "<st-form-field\n  disposition=\"case\"\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <input\n    #champ\n    class=\"st-checkbox__case\"\n    type=\"checkbox\"\n    stControleDeChamp\n    [checked]=\"checked()\"\n    [attr.name]=\"name() || null\"\n    [disabled]=\"disabled()\"\n    (change)=\"surChangement($event)\"\n    (blur)=\"touch.emit()\"\n  />\n</st-form-field>\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-checkbox__case:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-checkbox__case{inline-size:1.5rem;block-size:1.5rem;margin:0;cursor:pointer;accent-color:var(--st-couleur-primaire)}.st-checkbox__case:disabled{cursor:not-allowed}\n"] }]
+        }], propDecorators: { libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: true }] }], aide: [{ type: i0.Input, args: [{ isSignal: true, alias: "aide", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], champ: [{ type: i0.ViewChild, args: ['champ', { isSignal: true }] }] } });
+
+let compteur$4 = 0;
+/**
+ * Groupe de boutons radio, integre a Signal Forms.
+ *
+ * ```html
+ * <st-radio-group legende="Mode de reglement" [options]="modes" [formField]="commande.mode" />
+ * ```
+ *
+ * ⚠️ **De vrais boutons radio natifs** : un seul arret de tabulation pour le
+ * groupe, deplacement aux fleches, « 2 sur 3 » annonce. Les recrire en ARIA,
+ * c'est cent lignes pour obtenir moins bien — meme raison que `st-theme-toggle`.
+ *
+ * ⚠️ **L'erreur porte sur le groupe**, par `st-fieldset`, et non sur chaque option :
+ * « Choisissez un mode de reglement », une fois.
+ *
+ * `touch` n'est emis que lorsque le focus QUITTE le groupe : passer d'une option a
+ * l'autre aux fleches n'est pas une fin de saisie, et l'erreur n'a pas a surgir
+ * pendant qu'on choisit.
+ */
+class StRadioGroup {
+    element = inject(ElementRef);
+    legende = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legende" }] : /* istanbul ignore next */ []));
+    aide = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aide" }] : /* istanbul ignore next */ []));
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Contrat Signal Forms. */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    touch = output();
+    /** Nom partage par les options : sans lui, chaque radio forme son propre groupe. */
+    nomParDefaut = `st-radio-${(compteur$4 += 1).toString()}`;
+    nomDuGroupe() {
+        return this.name() === '' ? this.nomParDefaut : this.name();
+    }
+    identifiantAide(indice) {
+        return `${this.nomParDefaut}-aide-${indice.toString()}`;
+    }
+    /** Focus sur l'option cochee, sinon la premiere disponible : c'est l'arret du groupe. */
+    focus(options) {
+        const hote = this.element.nativeElement;
+        const cible = hote.querySelector('input:checked') ??
+            hote.querySelector('input:not(:disabled)');
+        cible?.focus(options);
+    }
+    choisir(valeur) {
+        this.value.set(valeur);
+    }
+    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: StRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StRadioGroup, isStandalone: true, selector: "st-radio-group", inputs: { legende: { classPropertyName: "legende", publicName: "legende", isSignal: true, isRequired: true, transformFunction: null }, aide: { classPropertyName: "aide", publicName: "aide", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { listeners: { "focusout": "aLaSortie($event)" }, properties: { "attr.hidden": "hidden() ? \"\" : null" }, classAttribute: "st-radio-group" }, ngImport: i0, template: "<st-fieldset\n  [legende]=\"legende()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  @for (option of options(); track option.valeur; let indice = $index) {\n    <div class=\"st-radio-group__option\">\n      <input\n        class=\"st-radio-group__radio\"\n        type=\"radio\"\n        [id]=\"nomDuGroupe() + '-' + indice\"\n        [name]=\"nomDuGroupe()\"\n        [value]=\"option.valeur\"\n        [checked]=\"option.valeur === value()\"\n        [disabled]=\"disabled() || option.desactivee === true\"\n        [attr.aria-describedby]=\"option.aide ? identifiantAide(indice) : null\"\n        (change)=\"choisir(option.valeur)\"\n      />\n      <label class=\"st-radio-group__libelle\" [for]=\"nomDuGroupe() + '-' + indice\">\n        {{ option.libelle }}\n      </label>\n      @if (option.aide; as aide) {\n        <p class=\"st-radio-group__aide\" [id]=\"identifiantAide(indice)\">{{ aide }}</p>\n      }\n    </div>\n  }\n</st-fieldset>\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-radio-group__option{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--st-espacement-2);align-items:center}.st-radio-group__radio:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-radio-group__radio{inline-size:1.5rem;block-size:1.5rem;margin:0;cursor:pointer;accent-color:var(--st-couleur-primaire)}.st-radio-group__radio:disabled{cursor:not-allowed}.st-radio-group__libelle{cursor:pointer}.st-radio-group__aide{grid-column:2;margin:0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}\n"], dependencies: [{ kind: "component", type: StFieldset, selector: "st-fieldset", inputs: ["legende", "aide", "erreurs", "afficherErreurs", "obligatoire"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StRadioGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFieldset], host: {
+                        class: 'st-radio-group',
+                        '[attr.hidden]': 'hidden() ? "" : null',
+                        '(focusout)': 'aLaSortie($event)',
+                    }, template: "<st-fieldset\n  [legende]=\"legende()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  @for (option of options(); track option.valeur; let indice = $index) {\n    <div class=\"st-radio-group__option\">\n      <input\n        class=\"st-radio-group__radio\"\n        type=\"radio\"\n        [id]=\"nomDuGroupe() + '-' + indice\"\n        [name]=\"nomDuGroupe()\"\n        [value]=\"option.valeur\"\n        [checked]=\"option.valeur === value()\"\n        [disabled]=\"disabled() || option.desactivee === true\"\n        [attr.aria-describedby]=\"option.aide ? identifiantAide(indice) : null\"\n        (change)=\"choisir(option.valeur)\"\n      />\n      <label class=\"st-radio-group__libelle\" [for]=\"nomDuGroupe() + '-' + indice\">\n        {{ option.libelle }}\n      </label>\n      @if (option.aide; as aide) {\n        <p class=\"st-radio-group__aide\" [id]=\"identifiantAide(indice)\">{{ aide }}</p>\n      }\n    </div>\n  }\n</st-fieldset>\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-radio-group__option{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--st-espacement-2);align-items:center}.st-radio-group__radio:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-radio-group__radio{inline-size:1.5rem;block-size:1.5rem;margin:0;cursor:pointer;accent-color:var(--st-couleur-primaire)}.st-radio-group__radio:disabled{cursor:not-allowed}.st-radio-group__libelle{cursor:pointer}.st-radio-group__aide{grid-column:2;margin:0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}\n"] }]
+        }], propDecorators: { legende: [{ type: i0.Input, args: [{ isSignal: true, alias: "legende", required: true }] }], aide: [{ type: i0.Input, args: [{ isSignal: true, alias: "aide", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
+
+/**
+ * Interrupteur : un reglage qui s'applique IMMEDIATEMENT.
+ *
+ * ```html
+ * <st-switch libelle="Notifications par SMS" [(checked)]="sms" (checkedChange)="enregistrer($event)" />
+ * ```
+ *
+ * ⚠️ **Jamais dans un formulaire a envoyer** (UX-8). Un interrupteur promet que
+ * l'effet a lieu au basculement ; pose au-dessus d'un bouton « Enregistrer », il
+ * ment — la personne croit le reglage applique, quitte la page, et le perd. Pour
+ * un choix envoye plus tard, c'est `st-checkbox`.
+ *
+ * C'est pourquoi il n'affiche aucune erreur de validation : un reglage immediat
+ * ne se valide pas a l'envoi. Un refus du serveur se dit par un message, et
+ * l'interrupteur revient a son etat precedent.
+ *
+ * ⚠️ Une case a cocher native avec `role="switch"` : Espace bascule, l'etiquette
+ * est reliee par `for`, et le lecteur d'ecran annonce « active » ou
+ * « desactive » — mieux qu'un `div` qui imiterait tout cela.
+ */
+class StSwitch {
+    libelle = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelle" }] : /* istanbul ignore next */ []));
+    aide = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aide" }] : /* istanbul ignore next */ []));
+    /** Contrat Signal Forms. */
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    touch = output();
+    champ = viewChild.required('champ', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "champ" }] : /* istanbul ignore next */ []));
+    focus(options) {
+        this.champ().nativeElement.focus(options);
+    }
+    surChangement(evenement) {
+        this.checked.set(evenement.target.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: StSwitch, isStandalone: true, selector: "st-switch", inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null }, aide: { classPropertyName: "aide", publicName: "aide", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touch: "touch" }, host: { properties: { "attr.hidden": "hidden() ? \"\" : null" }, classAttribute: "st-switch" }, viewQueries: [{ propertyName: "champ", first: true, predicate: ["champ"], descendants: true, isSignal: true }], ngImport: i0, template: "<st-form-field disposition=\"case\" [libelle]=\"libelle()\" [aide]=\"aide()\">\n  <input\n    #champ\n    class=\"st-switch__interrupteur\"\n    type=\"checkbox\"\n    role=\"switch\"\n    stControleDeChamp\n    [checked]=\"checked()\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.name]=\"name() || null\"\n    [disabled]=\"disabled()\"\n    (change)=\"surChangement($event)\"\n    (blur)=\"touch.emit()\"\n  />\n</st-form-field>\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-switch__interrupteur:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-switch__interrupteur{position:relative;inline-size:2.75rem;block-size:1.5rem;margin:0;cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine);appearance:none}.st-switch__interrupteur:after{position:absolute;inset-block-start:50%;inset-inline-start:.125rem;inline-size:1.125rem;block-size:1.125rem;content:\"\";background:var(--st-couleur-texte-discret);border-radius:var(--st-rayon-pleine);transition:inset-inline-start var(--st-duree-rapide) ease;transform:translateY(-50%)}.st-switch__interrupteur:checked{background:var(--st-couleur-primaire);border-color:var(--st-couleur-primaire)}.st-switch__interrupteur:checked:after{inset-inline-start:calc(100% - 1.25rem);background:var(--st-couleur-sur-primaire)}.st-switch__interrupteur:disabled{cursor:not-allowed;opacity:.6}@media(forced-colors:active){.st-switch__interrupteur{border-color:CanvasText}.st-switch__interrupteur:after{background:CanvasText}.st-switch__interrupteur:checked:after{background:Highlight}}\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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSwitch, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-switch', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: {
+                        class: 'st-switch',
+                        '[attr.hidden]': 'hidden() ? "" : null',
+                    }, template: "<st-form-field disposition=\"case\" [libelle]=\"libelle()\" [aide]=\"aide()\">\n  <input\n    #champ\n    class=\"st-switch__interrupteur\"\n    type=\"checkbox\"\n    role=\"switch\"\n    stControleDeChamp\n    [checked]=\"checked()\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.name]=\"name() || null\"\n    [disabled]=\"disabled()\"\n    (change)=\"surChangement($event)\"\n    (blur)=\"touch.emit()\"\n  />\n</st-form-field>\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-switch__interrupteur:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-switch__interrupteur{position:relative;inline-size:2.75rem;block-size:1.5rem;margin:0;cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine);appearance:none}.st-switch__interrupteur:after{position:absolute;inset-block-start:50%;inset-inline-start:.125rem;inline-size:1.125rem;block-size:1.125rem;content:\"\";background:var(--st-couleur-texte-discret);border-radius:var(--st-rayon-pleine);transition:inset-inline-start var(--st-duree-rapide) ease;transform:translateY(-50%)}.st-switch__interrupteur:checked{background:var(--st-couleur-primaire);border-color:var(--st-couleur-primaire)}.st-switch__interrupteur:checked:after{inset-inline-start:calc(100% - 1.25rem);background:var(--st-couleur-sur-primaire)}.st-switch__interrupteur:disabled{cursor:not-allowed;opacity:.6}@media(forced-colors:active){.st-switch__interrupteur{border-color:CanvasText}.st-switch__interrupteur:after{background:CanvasText}.st-switch__interrupteur:checked:after{background:Highlight}}\n"] }]
+        }], propDecorators: { libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: true }] }], aide: [{ type: i0.Input, args: [{ isSignal: true, alias: "aide", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], champ: [{ type: i0.ViewChild, args: ['champ', { isSignal: true }] }] } });
+
+let compteur$3 = 0;
+/**
+ * Recapitulatif des erreurs d'un formulaire, a l'envoi.
+ *
+ * ```html
+ * <st-error-summary [erreurs]="tentative() ? virement().errorSummary() : []" />
+ * ```
+ *
+ * ⚠️ **Il prend le focus en apparaissant** (UX-5). Sans lui, une personne au
+ * clavier ou au lecteur d'ecran appuie sur « Envoyer », et rien ne se passe : le
+ * champ refuse est en haut de la page, hors de sa vue, et personne ne le lui dit.
+ *
+ * ⚠️ **Chaque ligne nomme son champ.** « Ce champ est obligatoire. » repete cinq
+ * fois n'apprend rien ; « Nom du beneficiaire : ce champ est obligatoire. », si.
+ * Le libelle est lu sur l'element lie au champ, par Signal Forms — sans registre,
+ * et quel que soit le composant.
+ *
+ * ⚠️ **Une ligne par champ**, la premiere erreur seulement : trois erreurs sur le
+ * meme IBAN font trois lignes pour une seule correction.
+ *
+ * ⚠️ **Une region nommee par son titre.** Un `div` sans role ne PEUT pas porter
+ * `aria-labelledby` : le nom serait ignore, et le focus n'annoncerait rien. En
+ * region, il annonce « 2 erreurs a corriger » a l'arrivee du focus, et se
+ * retrouve dans la liste des reperes.
+ *
+ * Chaque ligne amene le focus sur son champ : c'est le champ, et non la ligne,
+ * qu'il faut corriger. Une erreur rattachee au formulaire entier — un refus du
+ * serveur sur un champ inconnu — s'affiche sans lien.
+ */
+class StErrorSummary {
+    libelles = inject(ST_LIBELLES);
+    locale = inject(ST_LOCALE);
+    element = inject(ElementRef);
+    injecteur = inject(Injector);
+    erreurs = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "erreurs" }] : /* istanbul ignore next */ []));
+    /** `null` : « N erreurs a corriger », du dictionnaire. */
+    titre = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titre" }] : /* istanbul ignore next */ []));
+    /** Unique par instance : deux recapitulatifs sur une page partageraient leur titre. */
+    identifiantDuTitre = `st-recapitulatif-${(compteur$3 += 1).toString()}`;
+    lignes = computed(() => {
+        const libelles = this.libelles();
+        const locale = this.locale();
+        const vus = new Set();
+        const lignes = [];
+        for (const erreur of this.erreurs()) {
+            const champ = erreur.fieldTree;
+            if (champ !== undefined) {
+                if (vus.has(champ))
+                    continue;
+                vus.add(champ);
+            }
+            const etat = champ?.();
+            const liaison = etat?.formFieldBindings()[0];
+            lignes.push({
+                libelle: liaison === undefined ? null : libelleDe(liaison.element),
+                message: messageDErreur(erreur, libelles, locale),
+                aller: () => {
+                    etat?.focusBoundControl();
+                },
+            });
+        }
+        return lignes;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
+    titreLu = computed(() => this.titre() ?? this.libelles().erreursACorriger(this.lignes().length), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titreLu" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Le focus a l'APPARITION seulement : le reprendre a chaque correction
+        // arracherait la personne au champ qu'elle est en train de corriger.
+        let visible = false;
+        effect(() => {
+            const maintenant = this.lignes().length > 0;
+            if (maintenant && !visible) {
+                afterNextRender(() => {
+                    this.focus();
+                }, { injector: this.injecteur });
+            }
+            visible = maintenant;
+        });
+    }
+    /** A appeler apres un envoi refuse, quand le recapitulatif etait deja visible. */
+    focus() {
+        this.element.nativeElement.querySelector('.st-error-summary__cadre')?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StErrorSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StErrorSummary, isStandalone: true, selector: "st-error-summary", inputs: { erreurs: { classPropertyName: "erreurs", publicName: "erreurs", isSignal: true, isRequired: true, transformFunction: null }, titre: { classPropertyName: "titre", publicName: "titre", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.hidden": "lignes().length === 0 ? \"\" : null" }, classAttribute: "st-error-summary" }, ngImport: i0, template: "@if (lignes().length > 0) {\n  <div\n    class=\"st-error-summary__cadre\"\n    role=\"region\"\n    tabindex=\"-1\"\n    [attr.aria-labelledby]=\"identifiantDuTitre\"\n  >\n    <h2 class=\"st-error-summary__titre\" [id]=\"identifiantDuTitre\">\n      <st-icon nom=\"cercle-croix\" taille=\"sm\" />\n      {{ titreLu() }}\n    </h2>\n    <ul class=\"st-error-summary__liste\">\n      @for (ligne of lignes(); track $index) {\n        <li>\n          @if (ligne.libelle !== null) {\n            <button type=\"button\" class=\"st-error-summary__lien\" (click)=\"ligne.aller()\">\n              {{ ligne.libelle }} : {{ ligne.message }}\n            </button>\n          } @else {\n            {{ ligne.message }}\n          }\n        </li>\n      }\n    </ul>\n  </div>\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;margin-block-end:var(--st-espacement-5)}.st-error-summary__cadre:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-error-summary__cadre{padding:var(--st-espacement-4);color:var(--st-couleur-sur-danger-discret);background:var(--st-couleur-danger-discret);border:2px solid var(--st-couleur-danger);border-radius:var(--st-rayon-md)}.st-error-summary__titre{display:flex;gap:var(--st-espacement-2);align-items:center;margin:0 0 var(--st-espacement-2);font-size:var(--st-taille-lg)}.st-error-summary__liste{padding-inline-start:var(--st-espacement-5);margin:0}.st-error-summary__lien:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-error-summary__lien{padding:0;font:inherit;color:inherit;text-align:start;text-decoration:underline;cursor:pointer;background:none;border:0}@media(forced-colors:active){.st-error-summary__cadre{border-color:CanvasText}}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StErrorSummary, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-error-summary', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon], host: {
+                        class: 'st-error-summary',
+                        '[attr.hidden]': 'lignes().length === 0 ? "" : null',
+                    }, template: "@if (lignes().length > 0) {\n  <div\n    class=\"st-error-summary__cadre\"\n    role=\"region\"\n    tabindex=\"-1\"\n    [attr.aria-labelledby]=\"identifiantDuTitre\"\n  >\n    <h2 class=\"st-error-summary__titre\" [id]=\"identifiantDuTitre\">\n      <st-icon nom=\"cercle-croix\" taille=\"sm\" />\n      {{ titreLu() }}\n    </h2>\n    <ul class=\"st-error-summary__liste\">\n      @for (ligne of lignes(); track $index) {\n        <li>\n          @if (ligne.libelle !== null) {\n            <button type=\"button\" class=\"st-error-summary__lien\" (click)=\"ligne.aller()\">\n              {{ ligne.libelle }} : {{ ligne.message }}\n            </button>\n          } @else {\n            {{ ligne.message }}\n          }\n        </li>\n      }\n    </ul>\n  </div>\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;margin-block-end:var(--st-espacement-5)}.st-error-summary__cadre:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-error-summary__cadre{padding:var(--st-espacement-4);color:var(--st-couleur-sur-danger-discret);background:var(--st-couleur-danger-discret);border:2px solid var(--st-couleur-danger);border-radius:var(--st-rayon-md)}.st-error-summary__titre{display:flex;gap:var(--st-espacement-2);align-items:center;margin:0 0 var(--st-espacement-2);font-size:var(--st-taille-lg)}.st-error-summary__liste{padding-inline-start:var(--st-espacement-5);margin:0}.st-error-summary__lien:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-error-summary__lien{padding:0;font:inherit;color:inherit;text-align:start;text-decoration:underline;cursor:pointer;background:none;border:0}@media(forced-colors:active){.st-error-summary__cadre{border-color:CanvasText}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { erreurs: [{ type: i0.Input, args: [{ isSignal: true, alias: "erreurs", required: true }] }], titre: [{ type: i0.Input, args: [{ isSignal: true, alias: "titre", required: false }] }] } });
+/**
+ * Libelle d'un champ, lu sur l'element lie : l'attribut pose par le socle, sinon
+ * l'etiquette native, sinon `aria-label`.
+ */
+function libelleDe(element) {
+    const socle = element.querySelector('[data-libelle]')?.getAttribute('data-libelle');
+    if (socle !== null && socle !== undefined)
+        return socle;
+    const etiquette = element.labels?.[0]?.textContent.trim();
+    if (etiquette !== undefined && etiquette !== '')
+        return etiquette;
+    return element.getAttribute('aria-label');
+}
+
+/**
+ * Mot de passe, avec revelation.
+ *
+ * ```html
+ * <st-password-field libelle="Mot de passe" usage="creation" [regles]="regles" [formField]="compte.motDePasse" />
+ * ```
+ *
+ * ⚠️ **`autocomplete` selon l'usage** (SEC-2) : `current-password` a la connexion,
+ * `new-password` a la creation — c'est ce qui fait proposer par le gestionnaire
+ * un mot de passe FORT au bon endroit, et non l'ancien.
+ *
+ * ⚠️ **Le collage n'est jamais bloque** (SEC-1, NIST SP 800-63B) : l'interdire
+ * pousse vers des mots de passe courts, retenus de tete, et casse les
+ * gestionnaires de mots de passe.
+ *
+ * ⚠️ **Revele, il se remasque des que le focus quitte le champ, et a l'envoi du
+ * formulaire** (SEC-4) : un mot de passe laisse en clair reste lisible par-dessus
+ * l'epaule, sur l'ecran suivant comme sur celui-ci. L'envoi par Entree ne fait
+ * pas quitter le champ : d'ou l'ecoute de `submit`, qui remonte jusqu'au document.
+ *
+ * Le bouton de revelation est un bouton bascule : `aria-pressed` porte l'etat, et
+ * l'etiquette ne change PAS — « Masquer le mot de passe, enfonce » se lirait
+ * comme une double negation.
+ *
+ * ⚠️ **Aucun indicateur de « force »**, et c'est un refus. Une estimation faite
+ * dans le navigateur donne « fort » a `Motdepasse1!` : elle rassure a tort. Les
+ * regles sont affichees AVANT la saisie (UX-10), et c'est le serveur qui verifie —
+ * y compris contre les mots de passe deja divulgues, qu'aucune regle locale ne
+ * voit.
+ */
+class StPasswordField extends ControleDeSaisie {
+    libelles = inject(ST_LIBELLES);
+    element = inject(ElementRef);
+    usage = input('connexion', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "usage" }] : /* istanbul ignore next */ []));
+    /** Regles affichees avant la saisie, comme aide du champ. */
+    regles = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "regles" }] : /* istanbul ignore next */ []));
+    revele = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revele" }] : /* istanbul ignore next */ []));
+    autocomplete = computed(() => this.usage() === 'creation' ? 'new-password' : 'current-password', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    aideLue = computed(() => {
+        const regles = this.regles();
+        const aide = this.aide();
+        if (regles.length === 0)
+            return aide;
+        return [aide, ...regles].filter((texte) => texte !== null).join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aideLue" }] : /* istanbul ignore next */ []));
+    basculer() {
+        this.revele.update((revele) => !revele);
+        // Revele alors que le focus est ailleurs — clic direct sur le bouton, champ
+        // rempli par le gestionnaire —, il ne pourrait plus quitter le champ : rien ne
+        // le remasquerait. Au clavier, le focus est deja sur le bouton, et y reste.
+        const hote = this.element.nativeElement;
+        if (this.revele() && !hote.contains(hote.ownerDocument.activeElement))
+            this.focus();
+    }
+    surSaisie(evenement) {
+        this.value.set(this.texteSaisi(evenement));
+    }
+    aLEnvoi(evenement) {
+        const formulaire = evenement.target;
+        if (formulaire?.contains(this.element.nativeElement) === true)
+            this.revele.set(false);
+    }
+    aLaSortie(evenement) {
+        const suivant = evenement.relatedTarget;
+        if (suivant !== null && this.element.nativeElement.contains(suivant))
+            return;
+        this.revele.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPasswordField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StPasswordField, isStandalone: true, selector: "st-password-field", inputs: { usage: { classPropertyName: "usage", publicName: "usage", isSignal: true, isRequired: false, transformFunction: null }, regles: { classPropertyName: "regles", publicName: "regles", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "aLaSortie($event)", "document:submit": "aLEnvoi($event)" }, classAttribute: "st-password-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aideLue()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <div class=\"st-password-field__ligne\">\n    <input\n      #champ\n      class=\"st-password-field__champ\"\n      stControleDeChamp\n      spellcheck=\"false\"\n      autocapitalize=\"none\"\n      autocorrect=\"off\"\n      [type]=\"revele() ? 'text' : 'password'\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      (input)=\"surSaisie($event)\"\n      (blur)=\"touch.emit()\"\n    />\n    <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n         Le contenu vient du gabarit de stIconButton. Le nom accessible est\n         impose par le type (`etiquette` est requis) et verifie par axe.\n         `mousedown` sans effet par defaut : le focus reste dans le champ. Safari\n         ne donne pas le focus a un bouton clique, et la sortie du champ\n         remasquerait juste avant que le clic ne revele a nouveau. -->\n    <button\n      stIconButton\n      type=\"button\"\n      [icone]=\"revele() ? 'oeil-barre' : 'oeil'\"\n      [etiquette]=\"libelles().afficherLeMotDePasse\"\n      [enfonce]=\"revele()\"\n      [disabled]=\"disabled()\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"basculer()\"\n    ></button>\n  </div>\n</st-form-field>\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-password-field__ligne{display:flex;gap:var(--st-espacement-1);align-items:center}.st-password-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-password-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-password-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-password-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-password-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-password-field__champ{flex:1 1 auto}\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: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPasswordField, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-password-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp, StIconButton], host: {
+                        class: 'st-password-field',
+                        '(focusout)': 'aLaSortie($event)',
+                        '(document:submit)': 'aLEnvoi($event)',
+                    }, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aideLue()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <div class=\"st-password-field__ligne\">\n    <input\n      #champ\n      class=\"st-password-field__champ\"\n      stControleDeChamp\n      spellcheck=\"false\"\n      autocapitalize=\"none\"\n      autocorrect=\"off\"\n      [type]=\"revele() ? 'text' : 'password'\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      (input)=\"surSaisie($event)\"\n      (blur)=\"touch.emit()\"\n    />\n    <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n         Le contenu vient du gabarit de stIconButton. Le nom accessible est\n         impose par le type (`etiquette` est requis) et verifie par axe.\n         `mousedown` sans effet par defaut : le focus reste dans le champ. Safari\n         ne donne pas le focus a un bouton clique, et la sortie du champ\n         remasquerait juste avant que le clic ne revele a nouveau. -->\n    <button\n      stIconButton\n      type=\"button\"\n      [icone]=\"revele() ? 'oeil-barre' : 'oeil'\"\n      [etiquette]=\"libelles().afficherLeMotDePasse\"\n      [enfonce]=\"revele()\"\n      [disabled]=\"disabled()\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"basculer()\"\n    ></button>\n  </div>\n</st-form-field>\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-password-field__ligne{display:flex;gap:var(--st-espacement-1);align-items:center}.st-password-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-password-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-password-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-password-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-password-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-password-field__champ{flex:1 1 auto}\n"] }]
+        }], propDecorators: { usage: [{ type: i0.Input, args: [{ isSignal: true, alias: "usage", required: false }] }], regles: [{ type: i0.Input, args: [{ isSignal: true, alias: "regles", required: false }] }] } });
+
+/**
+ * Code a usage unique : second facteur, code recu par SMS ou par courriel.
+ *
+ * ⚠️ **UN seul champ, pas six cases** (UX-9). Six champs cassent le collage, le
+ * remplissage automatique du code recu par SMS, et la lecture au lecteur d'ecran,
+ * qui annonce six champs sans nom au lieu d'un seul.
+ *
+ * ⚠️ `autocomplete="one-time-code"` : iOS et Android proposent alors le code recu,
+ * d'un toucher. Clavier numerique par `inputmode`, et NON par `type="number"`,
+ * qui retire les zeros de tete et accepte « 1e5 ».
+ *
+ * ⚠️ **Aucun envoi automatique** a la sixieme saisie : un formulaire qui part de
+ * lui-meme surprend (WCAG 3.2.2), et part aussi avec un code mal colle. Le code
+ * colle est nettoye de ses espaces et tirets — « 123 456 » —, jamais tronque.
+ */
+class StOtpField extends ControleDeSaisie {
+    libelles = inject(ST_LIBELLES);
+    longueur = input(6, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "longueur" }] : /* istanbul ignore next */ []));
+    aideLue = computed(() => this.aide() ?? this.libelles().codeAChiffres(this.longueur()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aideLue" }] : /* istanbul ignore next */ []));
+    surSaisie(evenement) {
+        this.value.set(this.texteSaisi(evenement).replace(/[\s-]/g, ''));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StOtpField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StOtpField, isStandalone: true, selector: "st-otp-field", inputs: { longueur: { classPropertyName: "longueur", publicName: "longueur", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-otp-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aideLue()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <input\n    #champ\n    class=\"st-otp-field__champ\"\n    stControleDeChamp\n    type=\"text\"\n    inputmode=\"numeric\"\n    autocomplete=\"one-time-code\"\n    spellcheck=\"false\"\n    autocapitalize=\"none\"\n    [value]=\"value()\"\n    [attr.name]=\"name() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (input)=\"surSaisie($event)\"\n    (blur)=\"touch.emit()\"\n  />\n</st-form-field>\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-otp-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-otp-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-otp-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-otp-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-otp-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-otp-field__champ{max-inline-size:12rem;font-family:var(--st-police-mono);font-variant-numeric:tabular-nums;letter-spacing:.3em}\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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StOtpField, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-otp-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-otp-field' }, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aideLue()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <input\n    #champ\n    class=\"st-otp-field__champ\"\n    stControleDeChamp\n    type=\"text\"\n    inputmode=\"numeric\"\n    autocomplete=\"one-time-code\"\n    spellcheck=\"false\"\n    autocapitalize=\"none\"\n    [value]=\"value()\"\n    [attr.name]=\"name() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (input)=\"surSaisie($event)\"\n    (blur)=\"touch.emit()\"\n  />\n</st-form-field>\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-otp-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-otp-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-otp-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-otp-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-otp-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-otp-field__champ{max-inline-size:12rem;font-family:var(--st-police-mono);font-variant-numeric:tabular-nums;letter-spacing:.3em}\n"] }]
+        }], propDecorators: { longueur: [{ type: i0.Input, args: [{ isSignal: true, alias: "longueur", required: false }] }] } });
+
+/**
+ * Champ de recherche : un repere, un champ, un bouton.
+ *
+ * ```html
+ * <st-search-field libelle="Rechercher un beneficiaire" (recherche)="filtrer($event)" />
+ * ```
+ *
+ * ⚠️ **Un repere `search`** : la recherche se retrouve dans la liste des reperes du
+ * lecteur d'ecran, a cote de la navigation et du contenu.
+ *
+ * L'etiquette est lue sans etre affichee — seule exception au socle (UX-1) : la
+ * loupe, le bouton et la position disent deja le but du champ.
+ *
+ * ⚠️ **Jamais dans l'adresse quand le terme est personnel** (SEC-6). Chercher un
+ * nom, un IBAN ou un numero en `?q=` inscrit la donnee dans l'historique, dans les
+ * journaux des intermediaires, et dans l'en-tete `Referer` des pages suivantes.
+ * `recherche` emet le terme : c'est a l'appelant de ne pas le mettre dans l'URL.
+ */
+class StSearchField extends ControleDeSaisie {
+    libelles = inject(ST_LIBELLES);
+    /** Emis a la validation — Entree ou bouton —, et non a chaque frappe. */
+    recherche = output();
+    surSaisie(evenement) {
+        this.value.set(this.texteSaisi(evenement));
+    }
+    lancer(evenement) {
+        evenement?.preventDefault();
+        this.recherche.emit(this.value().trim());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSearchField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StSearchField, isStandalone: true, selector: "st-search-field", outputs: { recherche: "recherche" }, host: { attributes: { "role": "search" }, classAttribute: "st-search-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n  libelleMasque\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n>\n  <div class=\"st-search-field__ligne\">\n    <st-icon class=\"st-search-field__loupe\" nom=\"recherche\" taille=\"sm\" />\n    <input\n      #champ\n      class=\"st-search-field__champ\"\n      stControleDeChamp\n      type=\"search\"\n      enterkeyhint=\"search\"\n      [value]=\"value()\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled()\"\n      (input)=\"surSaisie($event)\"\n      (keydown.enter)=\"lancer($event)\"\n      (blur)=\"touch.emit()\"\n    />\n    <button stButton type=\"button\" [disabled]=\"disabled()\" (click)=\"lancer()\">\n      {{ libelles().rechercher }}\n    </button>\n  </div>\n</st-form-field>\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-search-field__ligne{position:relative;display:flex;gap:var(--st-espacement-2);align-items:center}.st-search-field__loupe{position:absolute;inset-inline-start:var(--st-espacement-3);color:var(--st-couleur-texte-discret);pointer-events:none}.st-search-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-search-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-search-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-search-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-search-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-search-field__champ{flex:1 1 auto;padding-inline-start:calc(var(--st-espacement-3) * 2 + 1rem)}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: 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: StSearchField, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-search-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp, StIcon, StButton], host: { class: 'st-search-field', role: 'search' }, template: "<st-form-field\n  libelleMasque\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n>\n  <div class=\"st-search-field__ligne\">\n    <st-icon class=\"st-search-field__loupe\" nom=\"recherche\" taille=\"sm\" />\n    <input\n      #champ\n      class=\"st-search-field__champ\"\n      stControleDeChamp\n      type=\"search\"\n      enterkeyhint=\"search\"\n      [value]=\"value()\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled()\"\n      (input)=\"surSaisie($event)\"\n      (keydown.enter)=\"lancer($event)\"\n      (blur)=\"touch.emit()\"\n    />\n    <button stButton type=\"button\" [disabled]=\"disabled()\" (click)=\"lancer()\">\n      {{ libelles().rechercher }}\n    </button>\n  </div>\n</st-form-field>\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-search-field__ligne{position:relative;display:flex;gap:var(--st-espacement-2);align-items:center}.st-search-field__loupe{position:absolute;inset-inline-start:var(--st-espacement-3);color:var(--st-couleur-texte-discret);pointer-events:none}.st-search-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-search-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-search-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-search-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-search-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-search-field__champ{flex:1 1 auto;padding-inline-start:calc(var(--st-espacement-3) * 2 + 1rem)}\n"] }]
+        }], propDecorators: { recherche: [{ type: i0.Output, args: ["recherche"] }] } });
+
+/**
+ * IBAN. La valeur du modele est NORMALISEE — sans espaces, en majuscules —, et
+ * l'affichage groupe par quatre.
+ *
+ * ```html
+ * <st-iban-field libelle="IBAN du beneficiaire" [formField]="virement.iban" />
+ * <!-- schema : validate(chemin.iban, ({ value }) => erreurIban(value())) -->
+ * ```
+ *
+ * ⚠️ **Le groupement se fait a la sortie du champ, jamais pendant la frappe.**
+ * Reformater a chaque caractere deplace le curseur a la fin : corriger une
+ * erreur au milieu de 27 caracteres devient impossible, chaque frappe renvoyant a
+ * la fin de la ligne.
+ *
+ * ⚠️ **Aucune verification de validite ici** : elle appartient au schema, par
+ * `erreurIban`, pour s'afficher au bon moment et par le bon canal. Et elle reste un
+ * confort (SEC-5) : le serveur revalide.
+ *
+ * `autocapitalize="characters"` et correction orthographique coupee : un IBAN
+ * n'est pas un mot, et une correction automatique le fausserait.
+ */
+class StIbanField extends ControleDeSaisie {
+    libelles = inject(ST_LIBELLES);
+    enSaisie = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enSaisie" }] : /* istanbul ignore next */ []));
+    brut = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brut" }] : /* istanbul ignore next */ []));
+    aideLue = computed(() => this.aide() ?? this.libelles().exempleDIban, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aideLue" }] : /* istanbul ignore next */ []));
+    /**
+     * Brut pendant la saisie ; groupe par quatre au repos. Une valeur changee de
+     * l'exterieur pendant la saisie — remise a zero du formulaire — l'emporte sur
+     * le brut, qui ne la represente plus.
+     */
+    affichage = computed(() => {
+        const valeur = this.value();
+        const brut = this.brut();
+        return this.enSaisie() && normaliserIban(brut) === valeur ? brut : formaterIban(valeur);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "affichage" }] : /* istanbul ignore next */ []));
+    auFocus() {
+        this.brut.set(formaterIban(this.value()));
+        this.enSaisie.set(true);
+    }
+    surSaisie(evenement) {
+        const saisie = this.texteSaisi(evenement);
+        this.brut.set(saisie);
+        this.value.set(normaliserIban(saisie));
+    }
+    aLaSortie() {
+        this.enSaisie.set(false);
+        this.touch.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIbanField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StIbanField, isStandalone: true, selector: "st-iban-field", host: { classAttribute: "st-iban-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aideLue()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <input\n    #champ\n    class=\"st-iban-field__champ\"\n    stControleDeChamp\n    type=\"text\"\n    autocomplete=\"off\"\n    autocapitalize=\"characters\"\n    autocorrect=\"off\"\n    spellcheck=\"false\"\n    [value]=\"affichage()\"\n    [attr.name]=\"name() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (focus)=\"auFocus()\"\n    (input)=\"surSaisie($event)\"\n    (blur)=\"aLaSortie()\"\n  />\n</st-form-field>\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-iban-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-iban-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-iban-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-iban-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-iban-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-iban-field__champ{font-family:var(--st-police-mono);font-variant-numeric:tabular-nums}\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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIbanField, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-iban-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-iban-field' }, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aideLue()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <input\n    #champ\n    class=\"st-iban-field__champ\"\n    stControleDeChamp\n    type=\"text\"\n    autocomplete=\"off\"\n    autocapitalize=\"characters\"\n    autocorrect=\"off\"\n    spellcheck=\"false\"\n    [value]=\"affichage()\"\n    [attr.name]=\"name() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (focus)=\"auFocus()\"\n    (input)=\"surSaisie($event)\"\n    (blur)=\"aLaSortie()\"\n  />\n</st-form-field>\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-iban-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-iban-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-iban-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-iban-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-iban-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-iban-field__champ{font-family:var(--st-police-mono);font-variant-numeric:tabular-nums}\n"] }]
+        }] });
+
+/**
+ * Numero de telephone. La valeur du modele ne garde que les chiffres et le `+` de
+ * tete ; la saisie s'affiche telle qu'elle a ete tapee.
+ *
+ * ```html
+ * <st-phone-field libelle="Telephone portable" [formField]="contact.telephone" />
+ * <!-- schema : validate(chemin.telephone, ({ value }) => erreurTelephone(value())) -->
+ * ```
+ *
+ * ⚠️ **Aucun formatage automatique.** Le groupement des chiffres depend du pays,
+ * et reformater pendant la frappe renvoie le curseur en fin de ligne. La saisie
+ * reste celle de la personne, espaces et points compris.
+ *
+ * ⚠️ **Pas de selecteur de pays, pas de verification par pays.** Il faudrait une
+ * table des plans de numerotation, lourde et souvent perimee : c'est au serveur
+ * de dire si le numero existe (SEC-5). `erreurTelephone` ne verifie que la forme.
+ *
+ * `type="tel"`, et jamais `type="number"` : un numero n'est pas une quantite, et le
+ * champ numerique retire le zero de tete et le `+`.
+ */
+class StPhoneField extends ControleDeSaisie {
+    autocomplete = input('tel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    brut = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brut" }] : /* istanbul ignore next */ []));
+    /**
+     * La saisie telle que tapee, tant qu'elle represente encore la valeur ; une
+     * valeur changee de l'exterieur — remise a zero, pre-remplissage — l'emporte.
+     */
+    affichage = computed(() => {
+        const valeur = this.value();
+        const brut = this.brut();
+        return brut !== null && normaliserTelephone(brut) === valeur ? brut : valeur;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "affichage" }] : /* istanbul ignore next */ []));
+    surSaisie(evenement) {
+        const saisie = this.texteSaisi(evenement);
+        this.brut.set(saisie);
+        this.value.set(normaliserTelephone(saisie));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPhoneField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StPhoneField, isStandalone: true, selector: "st-phone-field", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-phone-field" }, 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  <input\n    #champ\n    class=\"st-phone-field__champ\"\n    stControleDeChamp\n    type=\"tel\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [value]=\"affichage()\"\n    [attr.name]=\"name() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (input)=\"surSaisie($event)\"\n    (blur)=\"touch.emit()\"\n  />\n</st-form-field>\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-phone-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-phone-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-phone-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-phone-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-phone-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-phone-field__champ{font-variant-numeric:tabular-nums}\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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPhoneField, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-phone-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-phone-field' }, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <input\n    #champ\n    class=\"st-phone-field__champ\"\n    stControleDeChamp\n    type=\"tel\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [value]=\"affichage()\"\n    [attr.name]=\"name() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (input)=\"surSaisie($event)\"\n    (blur)=\"touch.emit()\"\n  />\n</st-form-field>\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-phone-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-phone-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-phone-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-phone-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-phone-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-phone-field__champ{font-variant-numeric:tabular-nums}\n"] }]
+        }], propDecorators: { autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
+
+/** Sans accents ni casse : « eleve » trouve « Élève ». */
+function normaliserPourRecherche(texte) {
+    return texte
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLocaleLowerCase()
+        .trim();
+}
+/** Options dont le libelle CONTIENT le texte cherche, sans accents ni casse. */
+function filtrerOptions(options, recherche) {
+    const cherche = normaliserPourRecherche(recherche);
+    if (cherche === '')
+        return options;
+    return options.filter((option) => normaliserPourRecherche(option.libelle).includes(cherche));
+}
+
+/**
+ * Liste deroulante, sur un `select` NATIF.
+ *
+ * ```html
+ * <st-select libelle="Pays" [options]="pays" autocomplete="country" [formField]="adresse.pays" />
+ * ```
+ *
+ * ⚠️ **Natif, et non une liste ARIA** (FE-4). Le `select` natif ouvre le selecteur
+ * du systeme sur mobile, se remplit automatiquement, se parcourt a la lettre, et
+ * se lit partout. Une liste recomposee en ARIA ne fait jamais mieux sur ces
+ * points ; elle ne se justifie que pour filtrer une longue liste — c'est
+ * `st-combobox` — ou choisir plusieurs valeurs — `st-multiselect`.
+ *
+ * La premiere option, vide, dit « Choisir… » : sans elle, la premiere vraie
+ * option paraitrait choisie alors que personne ne l'a fait. Le modele vaut
+ * alors `''`, que `required` refuse.
+ *
+ * `readonly` n'existe pas sur un `select` : le champ annonce `aria-readonly` et
+ * ignore le changement, plutot que d'etre desactive — un champ desactive sort de
+ * l'ordre de tabulation, et sa valeur ne se lit plus.
+ */
+class StSelect extends ControleDeSaisie {
+    libelles = inject(ST_LIBELLES);
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Texte de l'option vide. Par defaut : « Choisir… ». */
+    texteVide = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "texteVide" }] : /* istanbul ignore next */ []));
+    /** WCAG 1.3.5 : `country`, `sex`, `honorific-prefix`… */
+    autocomplete = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    /** Options consecutives d'un meme groupe, dans l'ordre fourni. */
+    blocs = computed(() => {
+        const blocs = [];
+        for (const option of this.options()) {
+            const groupe = option.groupe ?? null;
+            const dernier = blocs.at(-1);
+            if (dernier?.groupe === groupe)
+                dernier.options.push(option);
+            else
+                blocs.push({ groupe, options: [option] });
+        }
+        return blocs;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blocs" }] : /* istanbul ignore next */ []));
+    surChoix(evenement) {
+        const element = evenement.target;
+        if (this.readonly()) {
+            element.value = this.value();
+            return;
+        }
+        this.value.set(element.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StSelect, isStandalone: true, selector: "st-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, texteVide: { classPropertyName: "texteVide", publicName: "texteVide", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-select" }, 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 class=\"st-select__cadre\">\n    <select\n      #champ\n      class=\"st-select__champ\"\n      stControleDeChamp\n      [attr.name]=\"name() || null\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n      [disabled]=\"disabled()\"\n      (change)=\"surChoix($event)\"\n      (blur)=\"touch.emit()\"\n    >\n      <option value=\"\" [selected]=\"value() === ''\">{{ texteVide() ?? libelles().choisir }}</option>\n      @for (bloc of blocs(); track $index) {\n        @if (bloc.groupe === null) {\n          @for (option of bloc.options; track option.valeur) {\n            <option\n              [value]=\"option.valeur\"\n              [selected]=\"option.valeur === value()\"\n              [disabled]=\"option.desactivee === true\"\n            >\n              {{ option.libelle }}\n            </option>\n          }\n        } @else {\n          <optgroup [label]=\"bloc.groupe\">\n            @for (option of bloc.options; track option.valeur) {\n              <option\n                [value]=\"option.valeur\"\n                [selected]=\"option.valeur === value()\"\n                [disabled]=\"option.desactivee === true\"\n              >\n                {{ option.libelle }}\n              </option>\n            }\n          </optgroup>\n        }\n      }\n    </select>\n    <st-icon class=\"st-select__chevron\" nom=\"chevron-bas\" taille=\"sm\" />\n  </div>\n</st-form-field>\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-select__cadre{position:relative}.st-select__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-select__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-select__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-select__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-select__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-select__champ{padding-inline-end:calc(var(--st-espacement-3) * 2 + 1rem);cursor:pointer;appearance:none}.st-select__chevron{position:absolute;inset-block-start:50%;inset-inline-end:var(--st-espacement-3);color:var(--st-couleur-texte-discret);pointer-events:none;transform:translateY(-50%)}@media(forced-colors:active){.st-select__chevron{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp, StIcon], host: { class: 'st-select' }, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <div class=\"st-select__cadre\">\n    <select\n      #champ\n      class=\"st-select__champ\"\n      stControleDeChamp\n      [attr.name]=\"name() || null\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n      [disabled]=\"disabled()\"\n      (change)=\"surChoix($event)\"\n      (blur)=\"touch.emit()\"\n    >\n      <option value=\"\" [selected]=\"value() === ''\">{{ texteVide() ?? libelles().choisir }}</option>\n      @for (bloc of blocs(); track $index) {\n        @if (bloc.groupe === null) {\n          @for (option of bloc.options; track option.valeur) {\n            <option\n              [value]=\"option.valeur\"\n              [selected]=\"option.valeur === value()\"\n              [disabled]=\"option.desactivee === true\"\n            >\n              {{ option.libelle }}\n            </option>\n          }\n        } @else {\n          <optgroup [label]=\"bloc.groupe\">\n            @for (option of bloc.options; track option.valeur) {\n              <option\n                [value]=\"option.valeur\"\n                [selected]=\"option.valeur === value()\"\n                [disabled]=\"option.desactivee === true\"\n              >\n                {{ option.libelle }}\n              </option>\n            }\n          </optgroup>\n        }\n      }\n    </select>\n    <st-icon class=\"st-select__chevron\" nom=\"chevron-bas\" taille=\"sm\" />\n  </div>\n</st-form-field>\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-select__cadre{position:relative}.st-select__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-select__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-select__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-select__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-select__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-select__champ{padding-inline-end:calc(var(--st-espacement-3) * 2 + 1rem);cursor:pointer;appearance:none}.st-select__chevron{position:absolute;inset-block-start:50%;inset-inline-end:var(--st-espacement-3);color:var(--st-couleur-texte-discret);pointer-events:none;transform:translateY(-50%)}@media(forced-colors:active){.st-select__chevron{color:CanvasText}}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], texteVide: [{ type: i0.Input, args: [{ isSignal: true, alias: "texteVide", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
+
+let compteur$2 = 0;
+/** Un lundi connu, pour nommer les jours de la semaine sans horloge. */
+const LUNDI_DE_REFERENCE = '2006-01-02';
+/** « Aujourd'hui » dans un fuseau : la date du poste n'est pas celle de la personne. */
+function dateDuJour(fuseau) {
+    const parties = new Intl.DateTimeFormat('en-CA', {
+        timeZone: fuseau,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+    }).formatToParts(new Date());
+    const partie = (type) => parties.find((p) => p.type === type)?.value ?? '';
+    return `${partie('year')}-${partie('month')}-${partie('day')}`;
+}
+/**
+ * Calendrier d'un mois, pour choisir une date.
+ *
+ * ```html
+ * <st-calendar [selection]="depart()" dateMin="2026-09-17" (choix)="depart.set($event)" />
+ * ```
+ *
+ * ⚠️ **Une aide, jamais la seule voie.** Dans `st-date-field`, le calendrier
+ * complete un champ texte : une date de naissance se tape plus vite qu'elle ne se
+ * cherche mois par mois, et un calendrier reste penible au lecteur d'ecran.
+ *
+ * ⚠️ **Le clavier navigue de DATE en date, pas de cellule en cellule** (decision
+ * D7 de l'audit de la vague 3). Fleche droite le 30 septembre mene au 1er
+ * octobre ; Page suivante change de mois, Maj + Page d'annee ; Debut et Fin vont
+ * aux bords de la semaine de la LOCALE. La grille d'Angular Aria deplace un focus
+ * entre cellules affichees : il aurait fallu la contourner sur chaque touche qui
+ * compte, et elle aurait fait entrer le CDK dans les formulaires.
+ *
+ * Semaine commencant au jour de la locale, noms de jours et de mois dans la
+ * langue courante, « aujourd'hui » dans le fuseau de la personne
+ * (`FUSEAU_PAR_DEFAUT`) et non celui du poste.
+ */
+class StCalendar {
+    libelles = inject(ST_LIBELLES);
+    locale = inject(ST_LOCALE);
+    element = inject(ElementRef);
+    injecteur = inject(Injector);
+    aujourdHui = dateDuJour(inject(FUSEAU_PAR_DEFAUT));
+    selection = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    dateMin = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateMin" }] : /* istanbul ignore next */ []));
+    dateMax = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateMax" }] : /* istanbul ignore next */ []));
+    /** Periode a faire ressortir, pour un choix de plage. */
+    plage = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "plage" }] : /* istanbul ignore next */ []));
+    choix = output();
+    /** Echap : le conteneur decide de fermer, et ou rendre le focus. */
+    fermeture = output();
+    identifiants = (() => {
+        const base = `st-calendrier-${(compteur$2 += 1).toString()}`;
+        return { titre: `${base}-titre`, aide: `${base}-aide` };
+    })();
+    /** La date qui porte le focus. Suit la selection, bornee. */
+    active = linkedSignal(() => bornerDate(this.selection() ?? this.aujourdHui, this.dateMin(), this.dateMax()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    premierJour = computed(() => premierJourDeLaSemaine(this.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "premierJour" }] : /* istanbul ignore next */ []));
+    titre = computed(() => {
+        const [annee, mois] = this.active().split('-').map(Number);
+        return new Intl.DateTimeFormat(this.locale(), {
+            month: 'long',
+            year: 'numeric',
+            timeZone: 'UTC',
+        }).format(Date.UTC(annee ?? 2000, (mois ?? 1) - 1, 1));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titre" }] : /* istanbul ignore next */ []));
+    joursDeLaSemaine = computed(() => {
+        const locale = this.locale();
+        const court = new Intl.DateTimeFormat(locale, { weekday: 'short', timeZone: 'UTC' });
+        const long = new Intl.DateTimeFormat(locale, { weekday: 'long', timeZone: 'UTC' });
+        return Array.from({ length: 7 }, (_, index) => {
+            const date = ajouterJours(LUNDI_DE_REFERENCE, (this.premierJour() - 1 + index) % 7);
+            const instant = Date.parse(`${date}T00:00:00Z`);
+            return { court: court.format(instant), long: long.format(instant) };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "joursDeLaSemaine" }] : /* istanbul ignore next */ []));
+    semaines = computed(() => {
+        const active = this.active();
+        const [annee, mois] = active.split('-').map(Number);
+        const locale = this.locale();
+        const lecture = new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeZone: 'UTC' });
+        const numero = new Intl.NumberFormat(locale);
+        const selection = this.selection();
+        const debut = this.plage()?.debut ?? null;
+        const fin = this.plage()?.fin ?? null;
+        const min = this.dateMin();
+        const max = this.dateMax();
+        const prefixe = active.slice(0, 7);
+        return semainesDuMois(annee ?? 2000, mois ?? 1, this.premierJour()).map((semaine) => semaine.map((date) => ({
+            date,
+            horsDuMois: !date.startsWith(prefixe),
+            numero: numero.format(Number(date.slice(8))),
+            nom: lecture.format(Date.parse(`${date}T00:00:00Z`)),
+            horsBornes: (min !== null && date < min) || (max !== null && date > max),
+            choisi: date === selection || date === debut || date === fin,
+            dansLaPlage: debut !== null && fin !== null && date > debut && date < fin,
+            aujourdHui: date === this.aujourdHui,
+        })));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "semaines" }] : /* istanbul ignore next */ []));
+    moisPrecedentPossible = computed(() => {
+        const min = this.dateMin();
+        return min === null || this.active().slice(0, 7) > min.slice(0, 7);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moisPrecedentPossible" }] : /* istanbul ignore next */ []));
+    moisSuivantPossible = computed(() => {
+        const max = this.dateMax();
+        return max === null || this.active().slice(0, 7) < max.slice(0, 7);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moisSuivantPossible" }] : /* istanbul ignore next */ []));
+    estActive(date) {
+        return date === this.active();
+    }
+    /** Amene le focus sur la date active. */
+    focus() {
+        this.element.nativeElement
+            .querySelector('button[data-date][tabindex="0"]')
+            ?.focus();
+    }
+    changerDeMois(ecart) {
+        this.active.set(bornerDate(ajouterMois(this.active(), ecart), this.dateMin(), this.dateMax()));
+    }
+    choisir(jour) {
+        if (jour.horsBornes)
+            return;
+        this.active.set(jour.date);
+        this.choix.emit(jour.date);
+    }
+    surTouche(evenement) {
+        const active = this.active();
+        const droiteAGauche = getComputedStyle(this.element.nativeElement).direction === 'rtl';
+        const recul = (jourDeLaSemaine(active) - this.premierJour() + 7) % 7;
+        const mois = evenement.shiftKey ? 12 : 1;
+        const cibles = {
+            ArrowRight: () => ajouterJours(active, droiteAGauche ? -1 : 1),
+            ArrowLeft: () => ajouterJours(active, droiteAGauche ? 1 : -1),
+            ArrowDown: () => ajouterJours(active, 7),
+            ArrowUp: () => ajouterJours(active, -7),
+            Home: () => ajouterJours(active, -recul),
+            End: () => ajouterJours(active, 6 - recul),
+            PageDown: () => ajouterMois(active, mois),
+            PageUp: () => ajouterMois(active, -mois),
+        };
+        if (evenement.key === 'Escape') {
+            evenement.preventDefault();
+            this.fermeture.emit();
+            return;
+        }
+        // Les fleches ne deplacent la date que depuis la grille : sur les boutons de
+        // mois, elles gardent leur sens pour le navigateur et le lecteur d'ecran.
+        const depuisLaGrille = evenement.target.hasAttribute('data-date');
+        const cible = cibles[evenement.key];
+        if (cible === undefined || !depuisLaGrille)
+            return;
+        evenement.preventDefault();
+        this.active.set(bornerDate(cible(), this.dateMin(), this.dateMax()));
+        afterNextRender(() => {
+            this.focus();
+        }, { injector: this.injecteur });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StCalendar, isStandalone: true, selector: "st-calendar", inputs: { selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dateMin: { classPropertyName: "dateMin", publicName: "dateMin", isSignal: true, isRequired: false, transformFunction: null }, dateMax: { classPropertyName: "dateMax", publicName: "dateMax", isSignal: true, isRequired: false, transformFunction: null }, plage: { classPropertyName: "plage", publicName: "plage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { choix: "choix", fermeture: "fermeture" }, host: { listeners: { "keydown": "surTouche($event)" }, classAttribute: "st-calendar" }, ngImport: i0, template: "<div class=\"st-calendar__entete\">\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    stIconButton\n    type=\"button\"\n    icone=\"chevron-gauche\"\n    [etiquette]=\"libelles().moisPrecedent\"\n    [disabled]=\"!moisPrecedentPossible()\"\n    (click)=\"changerDeMois(-1)\"\n  ></button>\n  <!-- Region vivante : changer de mois a la souris ne deplace pas le focus, et le\n       nouveau mois doit se dire. -->\n  <p class=\"st-calendar__titre\" aria-live=\"polite\" [id]=\"identifiants.titre\">{{ titre() }}</p>\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    stIconButton\n    type=\"button\"\n    icone=\"chevron-droite\"\n    [etiquette]=\"libelles().moisSuivant\"\n    [disabled]=\"!moisSuivantPossible()\"\n    (click)=\"changerDeMois(1)\"\n  ></button>\n</div>\n\n<table\n  class=\"st-calendar__grille\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"identifiants.titre\"\n  [attr.aria-describedby]=\"identifiants.aide\"\n>\n  <thead>\n    <tr>\n      @for (jour of joursDeLaSemaine(); track $index) {\n        <th class=\"st-calendar__jour-de-semaine\" scope=\"col\" [attr.abbr]=\"jour.long\">\n          {{ jour.court }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (semaine of semaines(); track semaine[0]?.date) {\n      <tr>\n        @for (jour of semaine; track jour.date) {\n          @if (jour.horsDuMois) {\n            <td class=\"st-calendar__vide\"></td>\n          } @else {\n            <td [attr.aria-selected]=\"jour.choisi ? 'true' : null\">\n              <button\n                class=\"st-calendar__jour\"\n                type=\"button\"\n                [attr.data-date]=\"jour.date\"\n                [attr.data-plage]=\"jour.dansLaPlage ? '' : null\"\n                [attr.tabindex]=\"estActive(jour.date) ? 0 : -1\"\n                [attr.aria-label]=\"jour.nom\"\n                [attr.aria-current]=\"jour.aujourdHui ? 'date' : null\"\n                [attr.aria-disabled]=\"jour.horsBornes ? 'true' : null\"\n                (click)=\"choisir(jour)\"\n              >\n                {{ jour.numero }}\n              </button>\n            </td>\n          }\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n\n<p class=\"st-calendar__aide\" [id]=\"identifiants.aide\">{{ libelles().aideDuCalendrier }}</p>\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:inline-block;padding:var(--st-espacement-3);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-calendar__entete{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;margin-block-end:var(--st-espacement-2)}.st-calendar__titre{margin:0;font-weight:var(--st-graisse-semi);text-transform:capitalize}.st-calendar__grille{border-collapse:collapse}.st-calendar__jour-de-semaine{padding-block-end:var(--st-espacement-1);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);text-align:center}.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-calendar__jour{inline-size:var(--st-cible-tactile-min);block-size:var(--st-cible-tactile-min);font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-sm)}.st-calendar__jour:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-current=date]{font-weight:var(--st-graisse-semi);border-color:var(--st-couleur-bordure-forte)}.st-calendar__jour[data-plage]{background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-disabled=true]{color:var(--st-couleur-texte-desactive);text-decoration:line-through;cursor:not-allowed}[aria-selected=true]>.st-calendar__jour{font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire)}.st-calendar__aide{max-inline-size:20rem;margin:var(--st-espacement-2) 0 0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}@media(forced-colors:active){[aria-selected=true]>.st-calendar__jour{forced-color-adjust:none;color:HighlightText;background:Highlight}}\n"], dependencies: [{ kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCalendar, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-calendar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIconButton], host: {
+                        class: 'st-calendar',
+                        '(keydown)': 'surTouche($event)',
+                    }, template: "<div class=\"st-calendar__entete\">\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    stIconButton\n    type=\"button\"\n    icone=\"chevron-gauche\"\n    [etiquette]=\"libelles().moisPrecedent\"\n    [disabled]=\"!moisPrecedentPossible()\"\n    (click)=\"changerDeMois(-1)\"\n  ></button>\n  <!-- Region vivante : changer de mois a la souris ne deplace pas le focus, et le\n       nouveau mois doit se dire. -->\n  <p class=\"st-calendar__titre\" aria-live=\"polite\" [id]=\"identifiants.titre\">{{ titre() }}</p>\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    stIconButton\n    type=\"button\"\n    icone=\"chevron-droite\"\n    [etiquette]=\"libelles().moisSuivant\"\n    [disabled]=\"!moisSuivantPossible()\"\n    (click)=\"changerDeMois(1)\"\n  ></button>\n</div>\n\n<table\n  class=\"st-calendar__grille\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"identifiants.titre\"\n  [attr.aria-describedby]=\"identifiants.aide\"\n>\n  <thead>\n    <tr>\n      @for (jour of joursDeLaSemaine(); track $index) {\n        <th class=\"st-calendar__jour-de-semaine\" scope=\"col\" [attr.abbr]=\"jour.long\">\n          {{ jour.court }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (semaine of semaines(); track semaine[0]?.date) {\n      <tr>\n        @for (jour of semaine; track jour.date) {\n          @if (jour.horsDuMois) {\n            <td class=\"st-calendar__vide\"></td>\n          } @else {\n            <td [attr.aria-selected]=\"jour.choisi ? 'true' : null\">\n              <button\n                class=\"st-calendar__jour\"\n                type=\"button\"\n                [attr.data-date]=\"jour.date\"\n                [attr.data-plage]=\"jour.dansLaPlage ? '' : null\"\n                [attr.tabindex]=\"estActive(jour.date) ? 0 : -1\"\n                [attr.aria-label]=\"jour.nom\"\n                [attr.aria-current]=\"jour.aujourdHui ? 'date' : null\"\n                [attr.aria-disabled]=\"jour.horsBornes ? 'true' : null\"\n                (click)=\"choisir(jour)\"\n              >\n                {{ jour.numero }}\n              </button>\n            </td>\n          }\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n\n<p class=\"st-calendar__aide\" [id]=\"identifiants.aide\">{{ libelles().aideDuCalendrier }}</p>\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:inline-block;padding:var(--st-espacement-3);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-calendar__entete{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;margin-block-end:var(--st-espacement-2)}.st-calendar__titre{margin:0;font-weight:var(--st-graisse-semi);text-transform:capitalize}.st-calendar__grille{border-collapse:collapse}.st-calendar__jour-de-semaine{padding-block-end:var(--st-espacement-1);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);text-align:center}.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-calendar__jour{inline-size:var(--st-cible-tactile-min);block-size:var(--st-cible-tactile-min);font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-sm)}.st-calendar__jour:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-current=date]{font-weight:var(--st-graisse-semi);border-color:var(--st-couleur-bordure-forte)}.st-calendar__jour[data-plage]{background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-disabled=true]{color:var(--st-couleur-texte-desactive);text-decoration:line-through;cursor:not-allowed}[aria-selected=true]>.st-calendar__jour{font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire)}.st-calendar__aide{max-inline-size:20rem;margin:var(--st-espacement-2) 0 0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}@media(forced-colors:active){[aria-selected=true]>.st-calendar__jour{forced-color-adjust:none;color:HighlightText;background:Highlight}}\n"] }]
+        }], propDecorators: { selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], dateMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateMin", required: false }] }], dateMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateMax", required: false }] }], plage: [{ type: i0.Input, args: [{ isSignal: true, alias: "plage", required: false }] }], choix: [{ type: i0.Output, args: ["choix"] }], fermeture: [{ type: i0.Output, args: ["fermeture"] }] } });
+
+/** Deux choix du meme fichier ne l'ajoutent pas deux fois. */
+function empreinte(fichier) {
+    return `${fichier.name}|${fichier.size.toString()}|${fichier.lastModified.toString()}`;
+}
+/**
+ * Choix de fichiers, sur un `input type="file"` natif.
+ *
+ * ```html
+ * <st-file-upload libelle="Justificatifs" accept=".pdf, image/*" [tailleMax]="5_000_000" multiple
+ *   [formField]="dossier.pieces" />
+ * <!-- schema : validate(chemin.pieces, ({ value }) => erreursDeFichiers(value(), regles)) -->
+ * ```
+ *
+ * Le modele est la liste des `File` choisis. L'envoi appartient a l'application,
+ * par `@starterlib/core` : le composant choisit, il ne televerse pas.
+ *
+ * ⚠️ **L'element natif reste la voie principale** (FE-4) : il ouvre le selecteur
+ * du systeme, l'appareil photo sur mobile, et se commande au clavier. Il est
+ * masque visuellement, pas retire : le bouton affiche est son etiquette. Le
+ * depot par glisser est un complement a la souris, jamais la seule voie.
+ *
+ * ⚠️ **Aucun apercu d'image** (SEC-7). Un apercu passe par une adresse `blob:`
+ * que la politique de securite du contenu doit autoriser, et un SVG affiche peut
+ * porter du script. Le nom et la taille suffisent a reconnaitre un fichier.
+ *
+ * ⚠️ **`accept`, `tailleMax` et `nombreMax` sont un confort** (SEC-5) : ils
+ * s'affichent en aide et filtrent le selecteur du systeme, mais la verification
+ * est dans le schema — `erreursDeFichiers` —, et le serveur relit le contenu.
+ *
+ * Chaque changement de la liste s'annonce : « 2 fichiers choisis ». Un fichier
+ * retire rend le focus au bouton de retrait suivant, ou au choix de fichiers : le
+ * focus ne tombe jamais sur le document.
+ */
+class StFileUpload extends ContratDeChamp {
+    libelles = inject(ST_LIBELLES);
+    locale = inject(ST_LOCALE);
+    element = inject(ElementRef);
+    injecteur = inject(Injector);
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Attribut `accept` natif : `.pdf, image/*`. */
+    accept = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** En octets. Affiche en aide ; la verification est dans le schema. */
+    tailleMax = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tailleMax" }] : /* istanbul ignore next */ []));
+    annonce = new AnnonceLocale(inject(DestroyRef));
+    survol = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "survol" }] : /* istanbul ignore next */ []));
+    aideLue = computed(() => {
+        const libelles = this.libelles();
+        const textes = [this.aide()];
+        if (this.accept().trim() !== '')
+            textes.push(libelles.typesAcceptes(this.accept()));
+        const taille = this.tailleMax();
+        if (taille !== null)
+            textes.push(libelles.tailleMaximale(formaterTaille(taille, this.locale())));
+        const aide = textes.filter((texte) => texte !== null).join(' ');
+        return aide === '' ? null : aide;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aideLue" }] : /* istanbul ignore next */ []));
+    lignes = computed(() => {
+        const locale = this.locale();
+        return this.value().map((fichier) => ({
+            fichier,
+            cle: empreinte(fichier),
+            taille: formaterTaille(fichier.size, locale),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
+    surChoix(evenement) {
+        const element = evenement.target;
+        this.ajouter(Array.from(element.files ?? []));
+        // Vide, pour qu'un second choix du meme fichier declenche encore `change`.
+        element.value = '';
+    }
+    surSurvol(evenement) {
+        if (this.disabled() || this.readonly())
+            return;
+        evenement.preventDefault();
+        this.survol.set(true);
+    }
+    surDepot(evenement) {
+        evenement.preventDefault();
+        this.survol.set(false);
+        if (this.disabled() || this.readonly())
+            return;
+        this.ajouter(Array.from(evenement.dataTransfer?.files ?? []));
+    }
+    retirer(indice) {
+        const restants = this.value().filter((_, position) => position !== indice);
+        this.value.set(restants);
+        this.annonce.annoncer(this.libelles().nombreDeFichiers(restants.length));
+        afterNextRender(() => {
+            const boutons = this.element.nativeElement.querySelectorAll('.st-file-upload__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();
+    }
+    ajouter(fichiers) {
+        if (fichiers.length === 0 || this.disabled() || this.readonly())
+            return;
+        let liste;
+        if (this.multiple()) {
+            const connus = new Set(this.value().map(empreinte));
+            liste = [...this.value(), ...fichiers.filter((fichier) => !connus.has(empreinte(fichier)))];
+        }
+        else {
+            liste = fichiers.slice(0, 1);
+        }
+        this.value.set(liste);
+        // Le choix est complet : ses erreurs — taille, type — se montrent tout de suite.
+        this.touch.emit();
+        this.annonce.annoncer(this.libelles().nombreDeFichiers(liste.length));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFileUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StFileUpload, isStandalone: true, selector: "st-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, tailleMax: { classPropertyName: "tailleMax", publicName: "tailleMax", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "aLaSortie($event)" }, classAttribute: "st-file-upload" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aideLue()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <div\n    class=\"st-file-upload__zone\"\n    [attr.data-survol]=\"survol() ? '' : null\"\n    [attr.data-desactive]=\"disabled() ? '' : null\"\n    (dragover)=\"surSurvol($event)\"\n    (dragleave)=\"survol.set(false)\"\n    (drop)=\"surDepot($event)\"\n  >\n    <input\n      #champ\n      class=\"st-file-upload__natif\"\n      stControleDeChamp\n      type=\"file\"\n      [accept]=\"accept()\"\n      [multiple]=\"multiple()\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled() || readonly()\"\n      (change)=\"surChoix($event)\"\n    />\n    <!-- Voie de la souris vers le champ natif. Masque au lecteur d'ecran et hors\n         tabulation : le clavier et le lecteur d'ecran passent par le champ natif,\n         deja nomme par l'etiquette du champ. -->\n    <span class=\"st-file-upload__bouton\" aria-hidden=\"true\" (click)=\"champ.click()\">\n      <st-icon nom=\"televerser\" taille=\"sm\" />\n      {{ multiple() ? libelles().choisirDesFichiers : libelles().choisirUnFichier }}\n    </span>\n    @if (multiple()) {\n      <span class=\"st-file-upload__depot\" aria-hidden=\"true\">{{ libelles().ouDeposerIci }}</span>\n    }\n  </div>\n\n  @if (lignes().length > 0) {\n    <ul class=\"st-file-upload__liste\">\n      @for (ligne of lignes(); track ligne.cle; let indice = $index) {\n        <li class=\"st-file-upload__fichier\">\n          <st-icon nom=\"fichier\" taille=\"sm\" />\n          <span class=\"st-file-upload__nom\">{{ ligne.fichier.name }}</span>\n          <span class=\"st-file-upload__taille\">{{ ligne.taille }}</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-file-upload__retrait\"\n            stIconButton\n            type=\"button\"\n            icone=\"corbeille\"\n            taille=\"sm\"\n            [etiquette]=\"libelles().retirerLeFichier(ligne.fichier.name)\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"retirer(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-file-upload__zone{position:relative;display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-3);align-items:center;padding:var(--st-espacement-3);border:1px dashed var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-file-upload__zone[data-survol]{background:var(--st-couleur-surface-enfoncee);border-style:solid}.st-file-upload__natif{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.st-file-upload__bouton{display:inline-flex;gap:var(--st-espacement-2);align-items:center;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-4);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-file-upload__natif:focus-visible+.st-file-upload__bouton{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}[aria-invalid=true]+.st-file-upload__bouton{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-file-upload__natif:disabled+.st-file-upload__bouton{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-file-upload__depot{color:var(--st-couleur-texte-discret)}.st-file-upload__liste{display:grid;gap:var(--st-espacement-1);padding:0;margin:var(--st-espacement-2) 0 0;list-style:none}.st-file-upload__fichier{display:flex;gap:var(--st-espacement-2);align-items:center}.st-file-upload__nom{min-inline-size:0;overflow-wrap:anywhere}.st-file-upload__taille{flex:none;color:var(--st-couleur-texte-discret);font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFileUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp, StIcon, StIconButton], host: {
+                        class: 'st-file-upload',
+                        '(focusout)': 'aLaSortie($event)',
+                    }, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aideLue()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <div\n    class=\"st-file-upload__zone\"\n    [attr.data-survol]=\"survol() ? '' : null\"\n    [attr.data-desactive]=\"disabled() ? '' : null\"\n    (dragover)=\"surSurvol($event)\"\n    (dragleave)=\"survol.set(false)\"\n    (drop)=\"surDepot($event)\"\n  >\n    <input\n      #champ\n      class=\"st-file-upload__natif\"\n      stControleDeChamp\n      type=\"file\"\n      [accept]=\"accept()\"\n      [multiple]=\"multiple()\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled() || readonly()\"\n      (change)=\"surChoix($event)\"\n    />\n    <!-- Voie de la souris vers le champ natif. Masque au lecteur d'ecran et hors\n         tabulation : le clavier et le lecteur d'ecran passent par le champ natif,\n         deja nomme par l'etiquette du champ. -->\n    <span class=\"st-file-upload__bouton\" aria-hidden=\"true\" (click)=\"champ.click()\">\n      <st-icon nom=\"televerser\" taille=\"sm\" />\n      {{ multiple() ? libelles().choisirDesFichiers : libelles().choisirUnFichier }}\n    </span>\n    @if (multiple()) {\n      <span class=\"st-file-upload__depot\" aria-hidden=\"true\">{{ libelles().ouDeposerIci }}</span>\n    }\n  </div>\n\n  @if (lignes().length > 0) {\n    <ul class=\"st-file-upload__liste\">\n      @for (ligne of lignes(); track ligne.cle; let indice = $index) {\n        <li class=\"st-file-upload__fichier\">\n          <st-icon nom=\"fichier\" taille=\"sm\" />\n          <span class=\"st-file-upload__nom\">{{ ligne.fichier.name }}</span>\n          <span class=\"st-file-upload__taille\">{{ ligne.taille }}</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-file-upload__retrait\"\n            stIconButton\n            type=\"button\"\n            icone=\"corbeille\"\n            taille=\"sm\"\n            [etiquette]=\"libelles().retirerLeFichier(ligne.fichier.name)\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"retirer(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-file-upload__zone{position:relative;display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-3);align-items:center;padding:var(--st-espacement-3);border:1px dashed var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-file-upload__zone[data-survol]{background:var(--st-couleur-surface-enfoncee);border-style:solid}.st-file-upload__natif{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.st-file-upload__bouton{display:inline-flex;gap:var(--st-espacement-2);align-items:center;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-4);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-file-upload__natif:focus-visible+.st-file-upload__bouton{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}[aria-invalid=true]+.st-file-upload__bouton{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-file-upload__natif:disabled+.st-file-upload__bouton{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-file-upload__depot{color:var(--st-couleur-texte-discret)}.st-file-upload__liste{display:grid;gap:var(--st-espacement-1);padding:0;margin:var(--st-espacement-2) 0 0;list-style:none}.st-file-upload__fichier{display:flex;gap:var(--st-espacement-2);align-items:center}.st-file-upload__nom{min-inline-size:0;overflow-wrap:anywhere}.st-file-upload__taille{flex:none;color:var(--st-couleur-texte-discret);font-variant-numeric:tabular-nums}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], tailleMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "tailleMax", required: false }] }] } });
+
 let compteur$1 = 0;
 /**
  * Choix du theme : systeme, clair, sombre.
@@ -2731,5 +4418,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AnnonceLocale, CHEMIN_DU_SPRITE, FUSEAU_PAR_DEFAUT, GABARITS_D_ETAT, IDENTIFIANT_DU_CONTENU_PRINCIPAL, LIBELLES_EN, LIBELLES_FR, NOMS_DICONE, REGION_VIVANTE_PARENTE, ST_LIBELLES, ST_LOCALE, StAppShell, StAvatar, StBadge, StBanner, StBreadcrumb, StButton, StButtonGroup, StCard, StChargement, StCode, StCopyButton, StCount, StDate, StDivider, StEmpty, StErreur, StError, StHeader, StHeading, StHorsLigne, StIcon, StIconButton, StInlineMessage, StLangSwitch, StLink, StLogo, StMasked, StMoney, StOfflineBanner, StPageTitle, StProgress, StRelativeTime, StSection, StSkeleton, StSkipLink, StSpinner, StState, StStatusPill, StSucces, StTag, StText, StThemeToggle, StTimer, StVide, copierDansLePressePapiers, formaterDuree, fournirCheminDuSprite, pressePapiersDisponible, provideStarterUi };
+export { AnnonceLocale, CHEMIN_DU_SPRITE, ContratDeChamp, ControleDeSaisie, FUSEAU_PAR_DEFAUT, GABARITS_D_ETAT, IDENTIFIANT_DU_CONTENU_PRINCIPAL, LIBELLES_EN, LIBELLES_FR, NOMS_DICONE, REGION_VIVANTE_PARENTE, ST_LIBELLES, ST_LOCALE, StAppShell, StAvatar, StBadge, StBanner, StBreadcrumb, StButton, StButtonGroup, StCalendar, StCard, StChargement, StCheckbox, StCode, StControleDeChamp, StCopyButton, StCount, StDate, StDivider, StEmpty, StErreur, StError, StErrorSummary, StFieldset, StFileUpload, StFormField, StHeader, StHeading, StHorsLigne, StIbanField, StIcon, StIconButton, StInlineMessage, StInput, StLangSwitch, StLink, StLogo, StMasked, StMoney, StOfflineBanner, StOtpField, StPageTitle, StPasswordField, StPhoneField, StProgress, StRadioGroup, StRelativeTime, StSearchField, StSection, StSelect, StSkeleton, StSkipLink, StSpinner, StState, StStatusPill, StSucces, StSwitch, StTag, StText, StTextarea, StThemeToggle, StTimer, StVide, copierDansLePressePapiers, erreurDate, erreurIban, erreurPlageDeDates, erreurTelephone, erreursDeFichiers, exempleDeDate, filtrerOptions, formaterDuree, fournirCheminDuSprite, fusionnerErreurs, messageDErreur, motifLocal, normaliserPourRecherche, pressePapiersDisponible, provideStarterUi };
 //# sourceMappingURL=starterlib-ui.mjs.map