@starterlib/ui 0.3.0 → 0.4.0

package/README.md

@@ -14,22 +14,24 @@ des dependances de pair : c'est l'application qui les installe, et elles doivent
 etre **identiques dans l'hote et dans chaque remote**. Deux versions du socle
 dans le meme navigateur, ce sont deux jeux de jetons d'injection.
 
-## Trois points d'entree
+## Quatre points d'entree
 
 Un composant sort du tronc quand il traine un pair lourd, et seulement alors ;
 le point d'entree secondaire ou il va se choisit ensuite par ce qu'il EST pour
 qui l'emploie.
 
-| Point d'entree                | Contenu                                                                                    | Ce qu'il traine                                    | Gzippe  |
-| ----------------------------- | ------------------------------------------------------------------------------------------ | -------------------------------------------------- | ------- |
-| `@starterlib/ui`              | le tronc : etats, texte, actions, structure, transverses                                   | `@angular/router`, deja exige par `core`           | 22,4 Ko |
-| `@starterlib/ui/surfaces`     | ce qui se pose AU-DESSUS de la page : menu, dialogues, tiroirs, messages ephemeres         | `@angular/cdk`, `@angular/aria/menu`               | 7,1 Ko  |
-| `@starterlib/ui/interactions` | ce qui fait PARTIE de la page et traine Aria ou une surface : onglets, navigation laterale | `@angular/aria`, qui exige lui-meme `@angular/cdk` | 2,0 Ko  |
+| Point d'entree                | Contenu                                                                                              | Ce qu'il traine a l'execution                      | Gzippe  |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------- |
+| `@starterlib/ui`              | le tronc : etats, texte, actions, structure, transverses, saisie native, calendrier                  | `@angular/router`, deja exige par `core`           | 40,6 Ko |
+| `@starterlib/ui/surfaces`     | ce qui se pose AU-DESSUS de la page : menu, dialogues, tiroirs, messages ephemeres                   | `@angular/cdk`, `@angular/aria/menu`               | 9,7 Ko  |
+| `@starterlib/ui/interactions` | ce qui fait PARTIE de la page et traine Aria ou une surface : onglets, navigation laterale, combobox | `@angular/aria`, qui exige lui-meme `@angular/cdk` | 6,9 Ko  |
+| `@starterlib/ui/formulaires`  | les champs qui LISENT leur saisie : montant, date, plage de dates                                    | le code d'`@angular/forms` (`transformedValue`)    | 4,5 Ko  |
 
 ```ts
-import { StButton, StAppShell } from '@starterlib/ui';
+import { StButton, StInput, StSelect } from '@starterlib/ui';
 import { StDialog, StToast } from '@starterlib/ui/surfaces';
-import { StTabs, StTabPanel, StTabContent } from '@starterlib/ui/interactions';
+import { StTabs, StCombobox, StMultiselect } from '@starterlib/ui/interactions';
+import { StAmountField, StDateField } from '@starterlib/ui/formulaires';
 ```
 
 ⚠️ Un paquet partage en federation **ne s'elague pas** : declare singleton, il
@@ -38,17 +40,21 @@ pour but le poids, mais le **train de singletons** : une application qui
 n'affiche ni menu, ni dialogue, ni onglets ne charge ni le CDK ni Aria, et n'a
 pas a se redeployer quand ils montent de version.
 
-`@angular/cdk` et `@angular/aria` sont des pairs **optionnels** : le tronc ne les
-importe pas. Ils deviennent obligatoires des le premier import d'un point
-d'entree secondaire, et leur absence se voit alors a la resolution, pas a
-l'execution. ⚠️ `@angular/aria` exige `@angular/cdk` a la version EXACTE : les
-deux montent ensemble.
+`@angular/cdk`, `@angular/aria` et `@angular/forms` sont des pairs
+**optionnels** : le tronc n'en importe que des TYPES. Ils deviennent obligatoires
+des le premier import d'un point d'entree secondaire qui les emploie, et leur
+absence se voit alors a la resolution, pas a l'execution. ⚠️ `@angular/aria`
+exige `@angular/cdk` a la version EXACTE : les deux montent ensemble.
 
-⚠️ **En federation, chaque point d'entree se partage SEPAREMENT.** Ce sont trois
-specificateurs de module distincts : partager `@starterlib/ui` ne couvre ni
-`surfaces` ni `interactions`. Omis de la configuration, chaque remote en embarque
-sa propre copie — et la regle `singleton: true, strictVersion: true` qui protege
-le tronc ne protege plus rien au-dessus.
+Ce que chaque point d'entree importe a l'execution est verifie sur le paquet
+construit (`pnpm paquets:check`) : un import de trop dans le tronc echoue avant
+la publication.
+
+⚠️ **En federation, chaque point d'entree se partage SEPAREMENT.** Ce sont quatre
+specificateurs de module distincts : partager `@starterlib/ui` ne couvre aucun
+des trois autres. Omis de la configuration, chaque remote en embarque sa propre
+copie — et la regle `singleton: true, strictVersion: true` qui protege le tronc
+ne protege plus rien au-dessus.
 
 ```js
 // federation.config.mjs de l'hote ET de chaque remote
@@ -56,6 +62,7 @@ shared: {
   '@starterlib/ui': { singleton: true, strictVersion: true },
   '@starterlib/ui/surfaces': { singleton: true, strictVersion: true },
   '@starterlib/ui/interactions': { singleton: true, strictVersion: true },
+  '@starterlib/ui/formulaires': { singleton: true, strictVersion: true },
   // ...
 }
 ```
@@ -148,8 +155,32 @@ Vague 2 :
 - **`ui/interactions`** — `st-tabs`, `st-tab-panel`, `stTabContent`, `st-sidenav`,
   `stSidenavToggle`.
 
-Inventaire et regles de la suite : `docs/plan-librairie.md` et
-`docs/audit-vague-2-2026-09-17.md` du depot.
+Vague 3 — la saisie, sur Signal Forms :
+
+- **Tronc** — `st-form-field`, `st-input`, `st-textarea`, `st-fieldset`,
+  `st-checkbox`, `st-radio-group`, `st-switch`, `st-error-summary`,
+  `st-password-field`, `st-otp-field`, `st-search-field`, `st-iban-field`,
+  `st-phone-field`, `st-select` (natif), `st-file-upload`, `st-calendar` ;
+  messages d'erreur traduits et fonctions de schema (`erreurIban`,
+  `erreurTelephone`, `erreurDate`, `erreurPlageDeDates`, `erreursDeFichiers`).
+- **`ui/interactions`** — `st-combobox`, `st-multiselect`.
+- **`ui/formulaires`** — `st-amount-field`, `st-date-field`, `st-date-range`.
+
+Un champ s'emploie avec un formulaire, par `[formField]`, ou seul, par
+`[(value)]`. Les regles d'un schema sont des fonctions PURES du socle, a brancher
+par `validate` : les fournir toutes faites importerait `@angular/forms` a
+l'execution dans le tronc.
+
+```ts
+readonly virement = form(this.modele, (chemin) => {
+  required(chemin.beneficiaire);
+  validate(chemin.iban, ({ value }) => erreurIban(value()));
+  validate(chemin.execution, ({ value }) => erreurDate(value(), { min: aujourdHui }));
+});
+```
+
+Inventaire et regles de la suite : `docs/plan-librairie.md`,
+`docs/audit-vague-2-2026-09-17.md` et `docs/audit-vague-3-2026-09-17.md` du depot.
 
 ## Regles tenues par les composants
 

package/assets/icones/sprite.svg

@@ -6,6 +6,7 @@
      color, jamais par un attribut de gabarit. -->
 <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
   <symbol id="boite-vide" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></symbol>
+  <symbol id="calendrier" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></symbol>
   <symbol id="cercle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/></symbol>
   <symbol id="cercle-coche" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></symbol>
   <symbol id="cercle-croix" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></symbol>
@@ -18,6 +19,7 @@
   <symbol id="copie" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></symbol>
   <symbol id="corbeille" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></symbol>
   <symbol id="croix" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></symbol>
+  <symbol id="fichier" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></symbol>
   <symbol id="hors-ligne" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="1" y1="1" x2="23" y2="23"/><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/><path d="M10.71 5.05A16 16 0 0 1 22.58 9"/><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></symbol>
   <symbol id="lien-externe" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></symbol>
   <symbol id="menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></symbol>
@@ -27,6 +29,7 @@
   <symbol id="rafraichir" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></symbol>
   <symbol id="recherche" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></symbol>
   <symbol id="serveur" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></symbol>
+  <symbol id="televerser" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></symbol>
   <symbol id="triangle-alerte" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></symbol>
   <symbol id="utilisateur" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
 </svg>

package/fesm2022/starterlib-ui-formulaires.mjs

@@ -0,0 +1,446 @@
+import * as i0 from '@angular/core';
+import { inject, model, input, signal, computed, ChangeDetectionStrategy, Component, ElementRef, Injector, viewChild, afterNextRender } from '@angular/core';
+import { transformedValue } from '@angular/forms/signals';
+import { ContratDeChamp, ST_LIBELLES, ST_LOCALE, fusionnerErreurs, StFormField, StControleDeChamp, StCalendar, motifLocal, exempleDeDate, StIconButton, messageDErreur, StFieldset } from '@starterlib/ui';
+import { lireMontant, decimalesDe, formaterMontant, montant, lireDate, formaterDateSaisie } from '@starterlib/util';
+
+/**
+ * Montant, en UNITES MINEURES : `123456n` pour 1 234,56 EUR.
+ *
+ * ```html
+ * <st-amount-field libelle="Montant du virement" devise="EUR" [formField]="virement.montant" />
+ * ```
+ *
+ * ⚠️ **Jamais un nombre a virgule flottante** (SEC-8) : le modele est un `bigint`,
+ * lu chiffre par chiffre par `lireMontant`. `0,1 + 0,2` ne fait pas `0,3`, et
+ * 1 234,56 EUR ne doit pas devenir 1 234,5599999.
+ *
+ * ⚠️ **Un texte ambigu est refuse, jamais devine.** « 1.250 » en francais serait
+ * mille deux cent cinquante ou un virgule vingt-cinq : le champ dit l'erreur et
+ * garde le texte, plutot que d'envoyer un montant mille fois trop grand. Une
+ * saisie illisible laisse le MODELE inchange et rend le formulaire invalide, par
+ * `transformedValue` : il ne part pas avec l'ancien montant.
+ *
+ * Le groupement « 1 234,56 » s'applique a la sortie du champ, jamais pendant la
+ * frappe. `type="text"` et `inputmode="decimal"` : `type="number"` accepte
+ * « 1e5 », change la valeur a la molette, et ignore la virgule selon le navigateur.
+ *
+ * Les bornes — montant minimal, plafond — sont des regles du schema, en unites
+ * mineures ; le serveur les revalide (SEC-5).
+ */
+class StAmountField extends ContratDeChamp {
+    libelles = inject(ST_LIBELLES);
+    locale = inject(ST_LOCALE);
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Code ISO 4217. Fixe l'echelle : 2 decimales en euros, 0 en yens. */
+    devise = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "devise" }] : /* istanbul ignore next */ []));
+    /** `transaction-amount` pour un paiement. */
+    autocomplete = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    /**
+     * Quitte au moins une fois. Relie a un formulaire, `touched` le dit ; employe
+     * seul, rien ne le dirait, et une saisie illisible ne s'afficherait jamais.
+     */
+    quitte = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "quitte" }] : /* istanbul ignore next */ []));
+    saisie = transformedValue(this.value, {
+        parse: (texte) => {
+            if (texte.trim() === '')
+                return { value: null };
+            const devise = this.devise();
+            const lecture = lireMontant(texte, devise, this.locale());
+            if (lecture.lu)
+                return { value: lecture.unitesMineures };
+            return {
+                error: lecture.raison === 'decimales'
+                    ? { kind: 'decimales', decimales: decimalesDe(devise) }
+                    : { kind: 'montant', devise },
+            };
+        },
+        format: (valeur) => this.formater(valeur),
+    });
+    erreursAffichees = computed(() => fusionnerErreurs(this.errors(), this.saisie.parseErrors()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "erreursAffichees" }] : /* istanbul ignore next */ []));
+    /** Symbole affiche a cote du champ ; le nom de la devise, lui, est lu. */
+    symbole = computed(() => new Intl.NumberFormat(this.locale(), { style: 'currency', currency: this.devise() })
+        .formatToParts(0)
+        .find((partie) => partie.type === 'currency')?.value ?? this.devise(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "symbole" }] : /* istanbul ignore next */ []));
+    deviseLue = computed(() => {
+        const nom = new Intl.DisplayNames(this.locale(), { type: 'currency' }).of(this.devise()) ?? this.devise();
+        return this.libelles().deviseDuMontant(nom);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deviseLue" }] : /* istanbul ignore next */ []));
+    surSaisie(evenement) {
+        this.saisie.set(this.texteSaisi(evenement));
+    }
+    aLaSortie() {
+        // Regroupe « 1234,5 » en « 1 234,50 » ; un texte illisible reste tel quel,
+        // pour etre corrige et non retape.
+        if (this.saisie.parseErrors().length === 0)
+            this.saisie.set(this.formater(this.value()));
+        this.quitte.set(true);
+        this.touch.emit();
+    }
+    formater(valeur) {
+        if (valeur === null)
+            return '';
+        return formaterMontant(montant(valeur, this.devise()), {
+            locale: this.locale(),
+            sansDevise: true,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StAmountField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StAmountField, isStandalone: true, selector: "st-amount-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, devise: { classPropertyName: "devise", publicName: "devise", isSignal: true, isRequired: true, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "st-amount-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [complement]=\"deviseLue()\"\n  [erreurs]=\"erreursAffichees()\"\n  [afficherErreurs]=\"touched() || quitte()\"\n  [obligatoire]=\"required()\"\n>\n  <div class=\"st-amount-field__ligne\">\n    <input\n      #champ\n      class=\"st-amount-field__champ\"\n      stControleDeChamp\n      type=\"text\"\n      inputmode=\"decimal\"\n      spellcheck=\"false\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [value]=\"saisie()\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      (input)=\"surSaisie($event)\"\n      (blur)=\"aLaSortie()\"\n    />\n    <span class=\"st-amount-field__devise\" aria-hidden=\"true\">{{ symbole() }}</span>\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-amount-field__ligne{display:flex;gap:var(--st-espacement-2);align-items:center}.st-amount-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-amount-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-amount-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-amount-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-amount-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-amount-field__champ{max-inline-size:16rem;font-variant-numeric:tabular-nums;text-align:end}.st-amount-field__devise{color:var(--st-couleur-texte-discret)}\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: StAmountField, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-amount-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-amount-field' }, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [complement]=\"deviseLue()\"\n  [erreurs]=\"erreursAffichees()\"\n  [afficherErreurs]=\"touched() || quitte()\"\n  [obligatoire]=\"required()\"\n>\n  <div class=\"st-amount-field__ligne\">\n    <input\n      #champ\n      class=\"st-amount-field__champ\"\n      stControleDeChamp\n      type=\"text\"\n      inputmode=\"decimal\"\n      spellcheck=\"false\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [value]=\"saisie()\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      (input)=\"surSaisie($event)\"\n      (blur)=\"aLaSortie()\"\n    />\n    <span class=\"st-amount-field__devise\" aria-hidden=\"true\">{{ symbole() }}</span>\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-amount-field__ligne{display:flex;gap:var(--st-espacement-2);align-items:center}.st-amount-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-amount-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-amount-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-amount-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-amount-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-amount-field__champ{max-inline-size:16rem;font-variant-numeric:tabular-nums;text-align:end}.st-amount-field__devise{color:var(--st-couleur-texte-discret)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], devise: [{ type: i0.Input, args: [{ isSignal: true, alias: "devise", required: true }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
+
+let compteur$1 = 0;
+/**
+ * Date calendaire : un champ texte, et un calendrier pour qui prefere choisir.
+ *
+ * ```html
+ * <st-date-field libelle="Date de naissance" autocomplete="bday" [dateMax]="aujourdHui"
+ *   [formField]="profil.naissance" />
+ * <!-- schema : validate(chemin.naissance, ({ value }) => erreurDate(value(), { max: aujourdHui })) -->
+ * ```
+ *
+ * Le modele est une date ISO — `2026-09-17` — ou `null`, jamais un objet `Date` :
+ * une date calendaire n'a ni heure ni fuseau.
+ *
+ * ⚠️ **Un champ texte d'abord** (decision D7 de l'audit de la vague 3). Le champ
+ * natif `type="date"` affiche son format dans la langue du NAVIGATEUR : il ne
+ * bascule pas quand l'application change de langue. Ici, le format attendu —
+ * `jj/mm/aaaa` ou `mm/dd/yyyy` — suit la langue courante, et il est dit en aide.
+ *
+ * ⚠️ **Le calendrier est une aide, pas la seule voie** : une date de naissance
+ * se tape plus vite qu'elle ne se cherche mois par mois. Il s'ouvre sous le champ,
+ * dans le flux de la page : pas de surcouche a positionner, rien de rogne dans
+ * un dialogue, et le CDK n'entre pas dans les formulaires.
+ *
+ * Une date illisible ou inexistante — « 31/02/2026 » — garde le texte, laisse le
+ * modele inchange et rend le formulaire invalide.
+ */
+class StDateField extends ContratDeChamp {
+    libelles = inject(ST_LIBELLES);
+    locale = inject(ST_LOCALE);
+    element = inject(ElementRef);
+    injecteur = inject(Injector);
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Bornes du calendrier. Les memes que celles du schema : voir `erreurDate`. */
+    dateMin = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateMin" }] : /* istanbul ignore next */ []));
+    dateMax = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateMax" }] : /* istanbul ignore next */ []));
+    /** `bday` pour une date de naissance. */
+    autocomplete = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    ouvert = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ouvert" }] : /* istanbul ignore next */ []));
+    identifiantCalendrier = `st-date-${(compteur$1 += 1).toString()}-calendrier`;
+    calendrier = viewChild(StCalendar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendrier" }] : /* istanbul ignore next */ []));
+    // `read` : sur un bouton qui porte le composant `stIconButton`, la reference
+    // rendrait le composant, et non l'element a focaliser.
+    bouton = viewChild('bouton', { ...(ngDevMode ? { debugName: "bouton" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /**
+     * Quitte au moins une fois. Relie a un formulaire, `touched` le dit ; employe
+     * seul, rien ne le dirait, et une saisie illisible ne s'afficherait jamais.
+     */
+    quitte = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "quitte" }] : /* istanbul ignore next */ []));
+    saisie = transformedValue(this.value, {
+        parse: (texte) => {
+            if (texte.trim() === '')
+                return { value: null };
+            const date = lireDate(texte, this.locale());
+            return date === null ? { error: { kind: 'date' } } : { value: date };
+        },
+        format: (valeur) => this.formater(valeur),
+    });
+    aideLue = computed(() => {
+        const libelles = this.libelles();
+        const locale = this.locale();
+        const format = libelles.formatDeDate(motifLocal(libelles, locale), exempleDeDate(locale));
+        const aide = this.aide();
+        return aide === null ? format : `${aide} ${format}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aideLue" }] : /* istanbul ignore next */ []));
+    erreursAffichees = computed(() => fusionnerErreurs(this.errors(), this.saisie.parseErrors()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "erreursAffichees" }] : /* istanbul ignore next */ []));
+    surSaisie(evenement) {
+        this.saisie.set(this.texteSaisi(evenement));
+    }
+    aLaSortieDuChamp() {
+        // « 7/9/2026 » devient « 07/09/2026 » ; un texte illisible reste a corriger.
+        if (this.saisie.parseErrors().length === 0)
+            this.saisie.set(this.formater(this.value()));
+    }
+    basculer() {
+        if (this.ouvert()) {
+            this.fermer(false);
+            return;
+        }
+        this.ouvert.set(true);
+        afterNextRender(() => {
+            this.calendrier()?.focus();
+        }, { injector: this.injecteur });
+    }
+    choisir(date) {
+        this.value.set(date);
+        this.fermer(false);
+        // Retour au champ : la date choisie s'y relit, et se corrige au clavier.
+        afterNextRender(() => {
+            this.focus();
+        }, { injector: this.injecteur });
+    }
+    /** Echap rend le focus au bouton qui a ouvert le calendrier. */
+    fermer(rendreLeFocus) {
+        this.ouvert.set(false);
+        if (!rendreLeFocus)
+            return;
+        afterNextRender(() => {
+            this.bouton()?.nativeElement.focus();
+        }, { injector: this.injecteur });
+    }
+    aLaSortieDuComposant(evenement) {
+        const suivant = evenement.relatedTarget;
+        if (suivant !== null && this.element.nativeElement.contains(suivant))
+            return;
+        this.ouvert.set(false);
+        this.quitte.set(true);
+        this.touch.emit();
+    }
+    formater(valeur) {
+        return valeur === null ? '' : formaterDateSaisie(valeur, this.locale());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDateField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StDateField, isStandalone: true, selector: "st-date-field", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "aLaSortieDuComposant($event)" }, classAttribute: "st-date-field" }, viewQueries: [{ propertyName: "calendrier", first: true, predicate: StCalendar, descendants: true, isSignal: true }, { propertyName: "bouton", first: true, predicate: ["bouton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aideLue()\"\n  [erreurs]=\"erreursAffichees()\"\n  [afficherErreurs]=\"touched() || quitte()\"\n  [obligatoire]=\"required()\"\n>\n  <div class=\"st-date-field__ligne\">\n    <input\n      #champ\n      class=\"st-date-field__champ\"\n      stControleDeChamp\n      type=\"text\"\n      spellcheck=\"false\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [value]=\"saisie()\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      (input)=\"surSaisie($event)\"\n      (blur)=\"aLaSortieDuChamp()\"\n    />\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      #bouton\n      stIconButton\n      type=\"button\"\n      icone=\"calendrier\"\n      [etiquette]=\"libelles().choisirDansLeCalendrier(libelle())\"\n      [attr.aria-expanded]=\"ouvert()\"\n      [attr.aria-controls]=\"ouvert() ? identifiantCalendrier : null\"\n      [disabled]=\"disabled() || readonly()\"\n      (click)=\"basculer()\"\n    ></button>\n  </div>\n  @if (ouvert()) {\n    <st-calendar\n      class=\"st-date-field__calendrier\"\n      [id]=\"identifiantCalendrier\"\n      [selection]=\"value()\"\n      [dateMin]=\"dateMin()\"\n      [dateMax]=\"dateMax()\"\n      (choix)=\"choisir($event)\"\n      (fermeture)=\"fermer(true)\"\n    />\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-date-field__ligne{display:flex;gap:var(--st-espacement-1);align-items:center}.st-date-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-date-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-date-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-date-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-date-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-date-field__champ{max-inline-size:12rem;font-variant-numeric:tabular-nums}.st-date-field__calendrier{margin-block-start:var(--st-espacement-2)}\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"] }, { kind: "component", type: StCalendar, selector: "st-calendar", inputs: ["selection", "dateMin", "dateMax", "plage"], outputs: ["choix", "fermeture"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDateField, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-date-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp, StIconButton, StCalendar], host: {
+                        class: 'st-date-field',
+                        '(focusout)': 'aLaSortieDuComposant($event)',
+                    }, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aideLue()\"\n  [erreurs]=\"erreursAffichees()\"\n  [afficherErreurs]=\"touched() || quitte()\"\n  [obligatoire]=\"required()\"\n>\n  <div class=\"st-date-field__ligne\">\n    <input\n      #champ\n      class=\"st-date-field__champ\"\n      stControleDeChamp\n      type=\"text\"\n      spellcheck=\"false\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [value]=\"saisie()\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      (input)=\"surSaisie($event)\"\n      (blur)=\"aLaSortieDuChamp()\"\n    />\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      #bouton\n      stIconButton\n      type=\"button\"\n      icone=\"calendrier\"\n      [etiquette]=\"libelles().choisirDansLeCalendrier(libelle())\"\n      [attr.aria-expanded]=\"ouvert()\"\n      [attr.aria-controls]=\"ouvert() ? identifiantCalendrier : null\"\n      [disabled]=\"disabled() || readonly()\"\n      (click)=\"basculer()\"\n    ></button>\n  </div>\n  @if (ouvert()) {\n    <st-calendar\n      class=\"st-date-field__calendrier\"\n      [id]=\"identifiantCalendrier\"\n      [selection]=\"value()\"\n      [dateMin]=\"dateMin()\"\n      [dateMax]=\"dateMax()\"\n      (choix)=\"choisir($event)\"\n      (fermeture)=\"fermer(true)\"\n    />\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-date-field__ligne{display:flex;gap:var(--st-espacement-1);align-items:center}.st-date-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-date-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-date-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-date-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-date-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-date-field__champ{max-inline-size:12rem;font-variant-numeric:tabular-nums}.st-date-field__calendrier{margin-block-start:var(--st-espacement-2)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], dateMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateMin", required: false }] }], dateMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateMax", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], calendrier: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StCalendar), { isSignal: true }] }], bouton: [{ type: i0.ViewChild, args: ['bouton', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }] } });
+
+let compteur = 0;
+/**
+ * Plage de dates : un debut, une fin, dans un groupe nomme par sa question.
+ *
+ * ```html
+ * <st-date-range libelle="Periode du sejour" [formField]="reservation.sejour" />
+ * <!-- schema : validate(chemin.sejour, ({ value }) => erreurPlageDeDates(value())) -->
+ * ```
+ *
+ * Deux champs texte etiquetes — « Date de debut », « Date de fin » — dans un
+ * `fieldset` dont la legende est le `libelle` : chacun se lit avec la question.
+ * Chaque champ a son calendrier ; celui de la fin s'ouvre au mois du debut et
+ * refuse les jours qui le precedent.
+ *
+ * ⚠️ **Une erreur dit QUELLE date corriger** : « Date de fin : saisissez une date
+ * qui existe… ». Sans le nom de la partie, deux messages identiques ne disent pas
+ * lequel des champs est faux. L'erreur de lecture marque aussi son champ
+ * `aria-invalid`, et lui seul.
+ *
+ * L'obligation d'une borne est une regle du schema : `required` ne sait pas ce
+ * qu'est une plage « vide ».
+ */
+class StDateRange extends ContratDeChamp {
+    libelles = inject(ST_LIBELLES);
+    locale = inject(ST_LOCALE);
+    element = inject(ElementRef);
+    injecteur = inject(Injector);
+    value = model({ debut: null, fin: null }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* 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 */ []));
+    /** Etiquettes des deux champs. Par defaut : « Date de debut », « Date de fin ». */
+    libelleDebut = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleDebut" }] : /* istanbul ignore next */ []));
+    libelleFin = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleFin" }] : /* istanbul ignore next */ []));
+    parties = ['debut', 'fin'];
+    ouvert = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ouvert" }] : /* istanbul ignore next */ []));
+    identifiants = (() => {
+        const base = `st-plage-${(compteur += 1).toString()}`;
+        return {
+            debut: `${base}-debut`,
+            fin: `${base}-fin`,
+            calendrier: `${base}-calendrier`,
+        };
+    })();
+    calendrier = viewChild(StCalendar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendrier" }] : /* istanbul ignore next */ []));
+    /**
+     * Quitte au moins une fois. Relie a un formulaire, `touched` le dit ; employe
+     * seul, rien ne le dirait, et une saisie illisible ne s'afficherait jamais.
+     */
+    quitte = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "quitte" }] : /* istanbul ignore next */ []));
+    saisie = transformedValue(this.value, {
+        parse: (brut) => {
+            const debut = this.lirePartie(brut.debut);
+            const fin = this.lirePartie(brut.fin);
+            const erreurs = [];
+            if (debut === undefined)
+                erreurs.push({ kind: 'date', partie: 'debut' });
+            if (fin === undefined)
+                erreurs.push({ kind: 'date', partie: 'fin' });
+            if (debut === undefined || fin === undefined)
+                return { error: erreurs };
+            return { value: { debut, fin } };
+        },
+        format: (plage) => ({ debut: this.formater(plage.debut), fin: this.formater(plage.fin) }),
+    });
+    etiquettes = computed(() => ({
+        debut: this.libelleDebut() ?? this.libelles().dateDeDebut,
+        fin: this.libelleFin() ?? this.libelles().dateDeFin,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquettes" }] : /* istanbul ignore next */ []));
+    aideLue = computed(() => {
+        const libelles = this.libelles();
+        const locale = this.locale();
+        const format = libelles.formatDeDate(motifLocal(libelles, locale), exempleDeDate(locale));
+        const aide = this.aide();
+        return aide === null ? format : `${aide} ${format}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aideLue" }] : /* istanbul ignore next */ []));
+    /** Chaque erreur prefixee de sa partie, dans la langue courante. */
+    erreursAffichees = computed(() => {
+        const libelles = this.libelles();
+        const locale = this.locale();
+        const etiquettes = this.etiquettes();
+        return fusionnerErreurs(this.errors(), this.saisie.parseErrors()).map((erreur) => {
+            const partie = this.partieDe(erreur);
+            if (partie === null)
+                return erreur;
+            return {
+                kind: erreur.kind,
+                message: `${etiquettes[partie]}\u00a0: ${messageDErreur(erreur, libelles, locale)}`,
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "erreursAffichees" }] : /* istanbul ignore next */ []));
+    invalide = computed(() => {
+        const erreurs = this.touched() || this.quitte()
+            ? fusionnerErreurs(this.errors(), this.saisie.parseErrors())
+            : [];
+        return {
+            debut: erreurs.some((erreur) => this.partieDe(erreur) === 'debut'),
+            fin: erreurs.some((erreur) => this.partieDe(erreur) === 'fin'),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalide" }] : /* istanbul ignore next */ []));
+    surSaisie(partie, evenement) {
+        this.saisie.set({ ...this.saisie(), [partie]: this.texteSaisi(evenement) });
+    }
+    aLaSortieDuChamp() {
+        if (this.saisie.parseErrors().length === 0) {
+            const plage = this.value();
+            this.saisie.set({ debut: this.formater(plage.debut), fin: this.formater(plage.fin) });
+        }
+    }
+    basculer(partie) {
+        if (this.ouvert() === partie) {
+            this.ouvert.set(null);
+            return;
+        }
+        this.ouvert.set(partie);
+        afterNextRender(() => {
+            this.calendrier()?.focus();
+        }, { injector: this.injecteur });
+    }
+    bornes(partie) {
+        const plage = this.value();
+        return partie === 'debut'
+            ? { min: this.dateMin(), max: plage.fin ?? this.dateMax() }
+            : { min: plage.debut ?? this.dateMin(), max: this.dateMax() };
+    }
+    choisir(partie, date) {
+        this.value.set({ ...this.value(), [partie]: date });
+        this.fermer(partie);
+    }
+    fermer(partie) {
+        this.ouvert.set(null);
+        afterNextRender(() => {
+            this.element.nativeElement
+                .querySelector(`#${this.identifiants[partie]}`)
+                ?.focus();
+        }, { injector: this.injecteur });
+    }
+    aLaSortieDuComposant(evenement) {
+        const suivant = evenement.relatedTarget;
+        if (suivant !== null && this.element.nativeElement.contains(suivant))
+            return;
+        this.ouvert.set(null);
+        this.quitte.set(true);
+        this.touch.emit();
+    }
+    /** `null` : vide. `undefined` : illisible. */
+    lirePartie(texte) {
+        if (texte.trim() === '')
+            return null;
+        return lireDate(texte, this.locale()) ?? undefined;
+    }
+    formater(valeur) {
+        return valeur === null ? '' : formaterDateSaisie(valeur, this.locale());
+    }
+    /** La partie visee : celle d'une erreur de lecture, la fin pour une plage inversee. */
+    partieDe(erreur) {
+        const partie = erreur.partie;
+        if (partie === 'debut' || partie === 'fin')
+            return partie;
+        return erreur.kind === 'plageDeDates' ? 'fin' : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDateRange, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StDateRange, isStandalone: true, selector: "st-date-range", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, libelleDebut: { classPropertyName: "libelleDebut", publicName: "libelleDebut", isSignal: true, isRequired: false, transformFunction: null }, libelleFin: { classPropertyName: "libelleFin", publicName: "libelleFin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "aLaSortieDuComposant($event)" }, classAttribute: "st-date-range" }, viewQueries: [{ propertyName: "calendrier", first: true, predicate: StCalendar, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<st-fieldset\n  [legende]=\"libelle()\"\n  [aide]=\"aideLue()\"\n  [erreurs]=\"erreursAffichees()\"\n  [afficherErreurs]=\"touched() || quitte()\"\n  [obligatoire]=\"required()\"\n>\n  <div class=\"st-date-range__parties\">\n    @for (partie of parties; track partie) {\n      <div class=\"st-date-range__partie\">\n        <label class=\"st-date-range__libelle\" [for]=\"identifiants[partie]\">\n          {{ etiquettes()[partie] }}\n        </label>\n        <div class=\"st-date-range__ligne\">\n          <input\n            #champ\n            class=\"st-date-range__champ\"\n            type=\"text\"\n            spellcheck=\"false\"\n            [attr.data-libelle]=\"etiquettes()[partie]\"\n            [id]=\"identifiants[partie]\"\n            [value]=\"saisie()[partie]\"\n            [attr.name]=\"name() ? name() + '-' + partie : null\"\n            [attr.aria-invalid]=\"invalide()[partie] ? 'true' : null\"\n            [disabled]=\"disabled()\"\n            [readOnly]=\"readonly()\"\n            (input)=\"surSaisie(partie, $event)\"\n            (blur)=\"aLaSortieDuChamp()\"\n          />\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=\"calendrier\"\n            [etiquette]=\"libelles().choisirDansLeCalendrier(etiquettes()[partie])\"\n            [attr.aria-expanded]=\"ouvert() === partie\"\n            [attr.aria-controls]=\"ouvert() === partie ? identifiants.calendrier : null\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"basculer(partie)\"\n          ></button>\n        </div>\n      </div>\n    }\n  </div>\n  @if (ouvert(); as partie) {\n    <st-calendar\n      class=\"st-date-range__calendrier\"\n      [id]=\"identifiants.calendrier\"\n      [selection]=\"value()[partie]\"\n      [plage]=\"value()\"\n      [dateMin]=\"bornes(partie).min\"\n      [dateMax]=\"bornes(partie).max\"\n      (choix)=\"choisir(partie, $event)\"\n      (fermeture)=\"fermer(partie)\"\n    />\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-date-range__parties{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3) var(--st-espacement-5)}.st-date-range__libelle{display:block;margin-block-end:var(--st-espacement-1);font-weight:var(--st-graisse-semi)}.st-date-range__ligne{display:flex;gap:var(--st-espacement-1);align-items:center}.st-date-range__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-date-range__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-date-range__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-date-range__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-date-range__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-date-range__champ{max-inline-size:12rem;font-variant-numeric:tabular-nums}.st-date-range__calendrier{margin-block-start:var(--st-espacement-3)}\n"], dependencies: [{ kind: "component", type: StFieldset, selector: "st-fieldset", inputs: ["legende", "aide", "erreurs", "afficherErreurs", "obligatoire"] }, { kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }, { kind: "component", type: StCalendar, selector: "st-calendar", inputs: ["selection", "dateMin", "dateMax", "plage"], outputs: ["choix", "fermeture"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDateRange, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-date-range', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFieldset, StIconButton, StCalendar], host: {
+                        class: 'st-date-range',
+                        '(focusout)': 'aLaSortieDuComposant($event)',
+                    }, template: "<st-fieldset\n  [legende]=\"libelle()\"\n  [aide]=\"aideLue()\"\n  [erreurs]=\"erreursAffichees()\"\n  [afficherErreurs]=\"touched() || quitte()\"\n  [obligatoire]=\"required()\"\n>\n  <div class=\"st-date-range__parties\">\n    @for (partie of parties; track partie) {\n      <div class=\"st-date-range__partie\">\n        <label class=\"st-date-range__libelle\" [for]=\"identifiants[partie]\">\n          {{ etiquettes()[partie] }}\n        </label>\n        <div class=\"st-date-range__ligne\">\n          <input\n            #champ\n            class=\"st-date-range__champ\"\n            type=\"text\"\n            spellcheck=\"false\"\n            [attr.data-libelle]=\"etiquettes()[partie]\"\n            [id]=\"identifiants[partie]\"\n            [value]=\"saisie()[partie]\"\n            [attr.name]=\"name() ? name() + '-' + partie : null\"\n            [attr.aria-invalid]=\"invalide()[partie] ? 'true' : null\"\n            [disabled]=\"disabled()\"\n            [readOnly]=\"readonly()\"\n            (input)=\"surSaisie(partie, $event)\"\n            (blur)=\"aLaSortieDuChamp()\"\n          />\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=\"calendrier\"\n            [etiquette]=\"libelles().choisirDansLeCalendrier(etiquettes()[partie])\"\n            [attr.aria-expanded]=\"ouvert() === partie\"\n            [attr.aria-controls]=\"ouvert() === partie ? identifiants.calendrier : null\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"basculer(partie)\"\n          ></button>\n        </div>\n      </div>\n    }\n  </div>\n  @if (ouvert(); as partie) {\n    <st-calendar\n      class=\"st-date-range__calendrier\"\n      [id]=\"identifiants.calendrier\"\n      [selection]=\"value()[partie]\"\n      [plage]=\"value()\"\n      [dateMin]=\"bornes(partie).min\"\n      [dateMax]=\"bornes(partie).max\"\n      (choix)=\"choisir(partie, $event)\"\n      (fermeture)=\"fermer(partie)\"\n    />\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-date-range__parties{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3) var(--st-espacement-5)}.st-date-range__libelle{display:block;margin-block-end:var(--st-espacement-1);font-weight:var(--st-graisse-semi)}.st-date-range__ligne{display:flex;gap:var(--st-espacement-1);align-items:center}.st-date-range__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-date-range__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-date-range__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-date-range__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-date-range__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-date-range__champ{max-inline-size:12rem;font-variant-numeric:tabular-nums}.st-date-range__calendrier{margin-block-start:var(--st-espacement-3)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], dateMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateMin", required: false }] }], dateMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateMax", required: false }] }], libelleDebut: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelleDebut", required: false }] }], libelleFin: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelleFin", required: false }] }], calendrier: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StCalendar), { isSignal: true }] }] } });
+
+/**
+ * @starterlib/ui/formulaires — les champs qui LISENT leur saisie : montant, date,
+ * plage de dates.
+ *
+ * ⚠️ Un point d'entree separe pour une raison de dependance (ADR 0003). « 12,5,3 »
+ * n'est aucun montant, « 31/02/2026 » aucune date : le formulaire doit le savoir,
+ * sans quoi il envoie l'ancienne valeur en croyant la nouvelle. Signal Forms le
+ * permet par `transformedValue`, qui est du CODE d'`@angular/forms` — la ou le
+ * tronc n'importe que des types. Laisse dans le tronc, `@angular/forms` deviendrait
+ * obligatoire pour toute application qui affiche un bouton.
+ *
+ * Rien ici n'importe le CDK ni Aria : le calendrier vient du tronc, et une
+ * application qui saisit un montant ne charge pas de quoi ouvrir une liste.
+ *
+ * ⚠️ En federation, ce point d'entree se partage SEPAREMENT : c'est un
+ * specificateur de module distinct.
+ *
+ * ```ts
+ * import { StAmountField, StDateField } from '@starterlib/ui/formulaires';
+ * ```
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StAmountField, StDateField, StDateRange };
+//# sourceMappingURL=starterlib-ui-formulaires.mjs.map