@starterlib/ui 0.4.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- 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';
2
+ import { InjectionToken, inject, LOCALE_ID, signal, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, ElementRef, DestroyRef, output, model, afterNextRender, viewChild, Directive, effect, Injector, linkedSignal, TemplateRef, contentChildren, contentChild, isDevMode } from '@angular/core';
3
3
  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';
4
4
  export { ETATS_DE_BLOC } from '@starterlib/util';
5
5
  import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
@@ -116,6 +116,31 @@ const LIBELLES_FR = {
116
116
  tropDeFichiers: (nombre) => `Choisissez au plus ${String(nombre)} fichier${nombre > 1 ? 's' : ''}.`,
117
117
  typesAcceptes: (types) => `Types accept\u00e9s\u00a0: ${types}.`,
118
118
  tailleMaximale: (taille) => `${taille} au plus par fichier.`,
119
+ televersementDe: (fichier) => `T\u00e9l\u00e9versement de ${fichier}`,
120
+ annulerLeTeleversement: (fichier) => `Annuler le t\u00e9l\u00e9versement de ${fichier}`,
121
+ fichierDepose: (fichier) => `${fichier} d\u00e9pos\u00e9`,
122
+ fichierRefuse: (fichier) => `${fichier} refus\u00e9`,
123
+ pagination: 'Pagination',
124
+ pagePrecedente: 'Page pr\u00e9c\u00e9dente',
125
+ pageSuivante: 'Page suivante',
126
+ pageNumero: (numero) => `Page ${String(numero)}`,
127
+ afficherPlus: 'Afficher plus',
128
+ lignesParPage: 'Lignes par page',
129
+ selectionnerLaPage: (nombre) => `S\u00e9lectionner les ${String(nombre)} lignes de la page`,
130
+ selectionnerLaLigne: (ligne) => `S\u00e9lectionner ${ligne}`,
131
+ lignesSelectionnees: (nombre) => nombre === 0
132
+ ? 'Aucune ligne s\u00e9lectionn\u00e9e'
133
+ : `${String(nombre)} ligne${nombre > 1 ? 's' : ''} s\u00e9lectionn\u00e9e${nombre > 1 ? 's' : ''}`,
134
+ trieCroissant: (colonne) => `Tri\u00e9 par ${colonne}, ordre croissant`,
135
+ trieDecroissant: (colonne) => `Tri\u00e9 par ${colonne}, ordre d\u00e9croissant`,
136
+ tableauVide: 'Aucune ligne \u00e0 afficher.',
137
+ nonRenseigne: 'Non renseign\u00e9',
138
+ filtres: 'Filtres',
139
+ filtresActifs: 'Filtres actifs',
140
+ retirerLeFiltre: (filtre) => `Retirer le filtre ${filtre}`,
141
+ effacerLesFiltres: 'Effacer les filtres',
142
+ filtreRetire: (filtre) => `Filtre ${filtre} retir\u00e9`,
143
+ filtresEffaces: 'Filtres effac\u00e9s',
119
144
  confirmer: 'Confirmer',
120
145
  annuler: 'Annuler',
121
146
  recopierPourConfirmer: (texte) => `Pour confirmer, recopiez \u00ab\u202f${texte}\u202f\u00bb`,
@@ -210,6 +235,29 @@ const LIBELLES_EN = {
210
235
  tropDeFichiers: (nombre) => `Choose no more than ${String(nombre)} file${nombre > 1 ? 's' : ''}.`,
211
236
  typesAcceptes: (types) => `Accepted types: ${types}.`,
212
237
  tailleMaximale: (taille) => `${taille} maximum per file.`,
238
+ televersementDe: (fichier) => `Uploading ${fichier}`,
239
+ annulerLeTeleversement: (fichier) => `Cancel upload of ${fichier}`,
240
+ fichierDepose: (fichier) => `${fichier} uploaded`,
241
+ fichierRefuse: (fichier) => `${fichier} rejected`,
242
+ pagination: 'Pagination',
243
+ pagePrecedente: 'Previous page',
244
+ pageSuivante: 'Next page',
245
+ pageNumero: (numero) => `Page ${String(numero)}`,
246
+ afficherPlus: 'Show more',
247
+ lignesParPage: 'Rows per page',
248
+ selectionnerLaPage: (nombre) => `Select the ${String(nombre)} rows on this page`,
249
+ selectionnerLaLigne: (ligne) => `Select ${ligne}`,
250
+ lignesSelectionnees: (nombre) => nombre === 0 ? 'No rows selected' : `${String(nombre)} row${nombre > 1 ? 's' : ''} selected`,
251
+ trieCroissant: (colonne) => `Sorted by ${colonne}, ascending`,
252
+ trieDecroissant: (colonne) => `Sorted by ${colonne}, descending`,
253
+ tableauVide: 'No rows to display.',
254
+ nonRenseigne: 'Not provided',
255
+ filtres: 'Filters',
256
+ filtresActifs: 'Active filters',
257
+ retirerLeFiltre: (filtre) => `Remove filter ${filtre}`,
258
+ effacerLesFiltres: 'Clear filters',
259
+ filtreRetire: (filtre) => `Filter ${filtre} removed`,
260
+ filtresEffaces: 'Filters cleared',
213
261
  confirmer: 'Confirm',
214
262
  annuler: 'Cancel',
215
263
  recopierPourConfirmer: (texte) => `To confirm, type \u201c${texte}\u201d`,
@@ -434,6 +482,20 @@ function formaterDuree(totalEnSecondes, locale) {
434
482
  return `${unite(Math.floor(total / 60), 'minute')} ${unite(total % 60, 'second')}`;
435
483
  }
436
484
 
485
+ /**
486
+ * Icones qui portent un sens HORIZONTAL, et qu'il faut donc miroiter en
487
+ * ecriture de droite a gauche.
488
+ *
489
+ * ⚠️ Sans miroir, « mois precedent » garde un chevron vers la gauche dans une
490
+ * interface qui se lit vers la gauche : la fleche pointe alors vers l'AVANT.
491
+ * Le clavier du calendrier inversait deja ses touches ; l'icone, elle, ne
492
+ * suivait pas — defaut vu sur un instantane du banc en ecriture inverse, et
493
+ * invisible pour toutes les mesures existantes.
494
+ *
495
+ * Les chevrons verticaux (`haut`, `bas`) et `tri` n'y sont pas : un sens
496
+ * vertical ne s'inverse jamais avec le sens d'ecriture.
497
+ */
498
+ const ICONES_DIRECTIONNELLES = new Set(['chevron-gauche', 'chevron-droite']);
437
499
  /**
438
500
  * Icone tiree d'un sprite SVG servi en meme origine.
439
501
  *
@@ -459,10 +521,12 @@ class StIcon {
459
521
  ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
460
522
  estDecorative = computed(() => this.etiquette() === null, /* @ts-ignore */
461
523
  ...(ngDevMode ? [{ debugName: "estDecorative" }] : /* istanbul ignore next */ []));
524
+ directionnelle = computed(() => ICONES_DIRECTIONNELLES.has(this.nom()), /* @ts-ignore */
525
+ ...(ngDevMode ? [{ debugName: "directionnelle" }] : /* istanbul ignore next */ []));
462
526
  reference = computed(() => `${this.cheminDuSprite}#${this.nom()}`, /* @ts-ignore */
463
527
  ...(ngDevMode ? [{ debugName: "reference" }] : /* istanbul ignore next */ []));
464
528
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
465
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StIcon, isStandalone: true, selector: "st-icon", inputs: { nom: { classPropertyName: "nom", publicName: "nom", isSignal: true, isRequired: true, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-ton": "ton()" }, classAttribute: "st-icon" }, ngImport: i0, template: "<svg\n [attr.aria-hidden]=\"estDecorative() ? 'true' : null\"\n [attr.role]=\"estDecorative() ? null : 'img'\"\n [attr.aria-label]=\"etiquette()\"\n focusable=\"false\"\n>\n <use [attr.href]=\"reference()\" />\n</svg>\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-flex;flex:none;vertical-align:-.125em;color:inherit}svg{inline-size:var(--st-icone-taille, 1.25em);block-size:var(--st-icone-taille, 1.25em)}:host([data-taille=xs]) svg{--st-icone-taille: .75em}:host([data-taille=sm]) svg{--st-icone-taille: 1em}:host([data-taille=lg]) svg{--st-icone-taille: 1.5em}:host([data-taille=xl]) svg{--st-icone-taille: 2em}:host([data-ton=discret]){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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
529
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StIcon, isStandalone: true, selector: "st-icon", inputs: { nom: { classPropertyName: "nom", publicName: "nom", isSignal: true, isRequired: true, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-ton": "ton()" }, classAttribute: "st-icon" }, ngImport: i0, template: "<svg\n [class.st-icon__miroir]=\"directionnelle()\"\n [attr.aria-hidden]=\"estDecorative() ? 'true' : null\"\n [attr.role]=\"estDecorative() ? null : 'img'\"\n [attr.aria-label]=\"etiquette()\"\n focusable=\"false\"\n>\n <use [attr.href]=\"reference()\" />\n</svg>\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-flex;flex:none;vertical-align:-.125em;color:inherit}svg{inline-size:var(--st-icone-taille, 1.25em);block-size:var(--st-icone-taille, 1.25em)}:host-context([dir=rtl]) .st-icon__miroir{transform:scaleX(-1)}:host([data-taille=xs]) svg{--st-icone-taille: .75em}:host([data-taille=sm]) svg{--st-icone-taille: 1em}:host([data-taille=lg]) svg{--st-icone-taille: 1.5em}:host([data-taille=xl]) svg{--st-icone-taille: 2em}:host([data-ton=discret]){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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
466
530
  }
467
531
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIcon, decorators: [{
468
532
  type: Component,
@@ -470,7 +534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
470
534
  class: 'st-icon',
471
535
  '[attr.data-taille]': 'taille()',
472
536
  '[attr.data-ton]': 'ton()',
473
- }, template: "<svg\n [attr.aria-hidden]=\"estDecorative() ? 'true' : null\"\n [attr.role]=\"estDecorative() ? null : 'img'\"\n [attr.aria-label]=\"etiquette()\"\n focusable=\"false\"\n>\n <use [attr.href]=\"reference()\" />\n</svg>\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-flex;flex:none;vertical-align:-.125em;color:inherit}svg{inline-size:var(--st-icone-taille, 1.25em);block-size:var(--st-icone-taille, 1.25em)}:host([data-taille=xs]) svg{--st-icone-taille: .75em}:host([data-taille=sm]) svg{--st-icone-taille: 1em}:host([data-taille=lg]) svg{--st-icone-taille: 1.5em}:host([data-taille=xl]) svg{--st-icone-taille: 2em}:host([data-ton=discret]){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"] }]
537
+ }, template: "<svg\n [class.st-icon__miroir]=\"directionnelle()\"\n [attr.aria-hidden]=\"estDecorative() ? 'true' : null\"\n [attr.role]=\"estDecorative() ? null : 'img'\"\n [attr.aria-label]=\"etiquette()\"\n focusable=\"false\"\n>\n <use [attr.href]=\"reference()\" />\n</svg>\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-flex;flex:none;vertical-align:-.125em;color:inherit}svg{inline-size:var(--st-icone-taille, 1.25em);block-size:var(--st-icone-taille, 1.25em)}:host-context([dir=rtl]) .st-icon__miroir{transform:scaleX(-1)}:host([data-taille=xs]) svg{--st-icone-taille: .75em}:host([data-taille=sm]) svg{--st-icone-taille: 1em}:host([data-taille=lg]) svg{--st-icone-taille: 1.5em}:host([data-taille=xl]) svg{--st-icone-taille: 2em}:host([data-ton=discret]){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"] }]
474
538
  }], propDecorators: { nom: [{ type: i0.Input, args: [{ isSignal: true, alias: "nom", required: true }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }] } });
475
539
 
476
540
  /**
@@ -507,6 +571,7 @@ const NOMS_DICONE = [
507
571
  'recherche',
508
572
  'serveur',
509
573
  'televerser',
574
+ 'tri',
510
575
  'triangle-alerte',
511
576
  'utilisateur',
512
577
  ];
@@ -533,7 +598,7 @@ class StText {
533
598
  tronquerA = input(null, /* @ts-ignore */
534
599
  ...(ngDevMode ? [{ debugName: "tronquerA" }] : /* istanbul ignore next */ []));
535
600
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StText, deps: [], target: i0.ɵɵFactoryTarget.Component });
536
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StText, isStandalone: true, selector: "st-text", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, graisse: { classPropertyName: "graisse", publicName: "graisse", isSignal: true, isRequired: false, transformFunction: null }, enLigne: { classPropertyName: "enLigne", publicName: "enLigne", isSignal: true, isRequired: false, transformFunction: null }, tronquerA: { classPropertyName: "tronquerA", publicName: "tronquerA", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-graisse": "graisse()", "attr.data-en-ligne": "enLigne() ? \"\" : null", "attr.data-tronque": "tronquerA() === null ? null : \"\"", "style.--st-text-lignes": "tronquerA()" }, classAttribute: "st-text" }, ngImport: i0, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-normal);color:var(--st-couleur-texte);max-inline-size:70ch}:host([data-en-ligne]){display:inline;max-inline-size:none}:host([data-variante=corps-sm]){font-size:var(--st-taille-sm)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=legende]){font-size:var(--st-taille-xs);color:var(--st-couleur-texte-discret)}:host([data-variante=mono]){font-family:var(--st-police-mono);font-size:var(--st-taille-sm)}:host([data-graisse=moyenne]){font-weight:var(--st-graisse-moyenne)}:host([data-graisse=semi]){font-weight:var(--st-graisse-semi)}:host([data-tronque]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--st-text-lignes, 2);line-clamp:var(--st-text-lignes, 2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
601
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StText, isStandalone: true, selector: "st-text", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, graisse: { classPropertyName: "graisse", publicName: "graisse", isSignal: true, isRequired: false, transformFunction: null }, enLigne: { classPropertyName: "enLigne", publicName: "enLigne", isSignal: true, isRequired: false, transformFunction: null }, tronquerA: { classPropertyName: "tronquerA", publicName: "tronquerA", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-graisse": "graisse()", "attr.data-en-ligne": "enLigne() ? \"\" : null", "attr.data-tronque": "tronquerA() === null ? null : \"\"", "style.--st-text-lignes": "tronquerA()" }, classAttribute: "st-text" }, ngImport: i0, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-normal);color:var(--st-couleur-texte);max-inline-size:var(--st-mesure-normale)}:host([data-en-ligne]){display:inline;max-inline-size:none}:host([data-variante=corps-sm]){font-size:var(--st-taille-sm)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=legende]){font-size:var(--st-taille-xs);color:var(--st-couleur-texte-discret)}:host([data-variante=mono]){font-family:var(--st-police-mono);font-size:var(--st-taille-sm)}:host([data-graisse=moyenne]){font-weight:var(--st-graisse-moyenne)}:host([data-graisse=semi]){font-weight:var(--st-graisse-semi)}:host([data-tronque]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--st-text-lignes, 2);line-clamp:var(--st-text-lignes, 2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
537
602
  }
538
603
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StText, decorators: [{
539
604
  type: Component,
@@ -544,7 +609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
544
609
  '[attr.data-en-ligne]': 'enLigne() ? "" : null',
545
610
  '[attr.data-tronque]': 'tronquerA() === null ? null : ""',
546
611
  '[style.--st-text-lignes]': 'tronquerA()',
547
- }, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-normal);color:var(--st-couleur-texte);max-inline-size:70ch}:host([data-en-ligne]){display:inline;max-inline-size:none}:host([data-variante=corps-sm]){font-size:var(--st-taille-sm)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=legende]){font-size:var(--st-taille-xs);color:var(--st-couleur-texte-discret)}:host([data-variante=mono]){font-family:var(--st-police-mono);font-size:var(--st-taille-sm)}:host([data-graisse=moyenne]){font-weight:var(--st-graisse-moyenne)}:host([data-graisse=semi]){font-weight:var(--st-graisse-semi)}:host([data-tronque]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--st-text-lignes, 2);line-clamp:var(--st-text-lignes, 2)}\n"] }]
612
+ }, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-normal);color:var(--st-couleur-texte);max-inline-size:var(--st-mesure-normale)}:host([data-en-ligne]){display:inline;max-inline-size:none}:host([data-variante=corps-sm]){font-size:var(--st-taille-sm)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=legende]){font-size:var(--st-taille-xs);color:var(--st-couleur-texte-discret)}:host([data-variante=mono]){font-family:var(--st-police-mono);font-size:var(--st-taille-sm)}:host([data-graisse=moyenne]){font-weight:var(--st-graisse-moyenne)}:host([data-graisse=semi]){font-weight:var(--st-graisse-semi)}:host([data-tronque]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--st-text-lignes, 2);line-clamp:var(--st-text-lignes, 2)}\n"] }]
548
613
  }], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], graisse: [{ type: i0.Input, args: [{ isSignal: true, alias: "graisse", required: false }] }], enLigne: [{ type: i0.Input, args: [{ isSignal: true, alias: "enLigne", required: false }] }], tronquerA: [{ type: i0.Input, args: [{ isSignal: true, alias: "tronquerA", required: false }] }] } });
549
614
 
550
615
  const TAILLE_PAR_NIVEAU = {
@@ -619,7 +684,7 @@ class StSpinner {
619
684
  sAnnonce = computed(() => this.regionParente === null, /* @ts-ignore */
620
685
  ...(ngDevMode ? [{ debugName: "sAnnonce" }] : /* istanbul ignore next */ []));
621
686
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
622
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StSpinner, isStandalone: true, selector: "st-spinner", inputs: { taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-ton": "ton()", "attr.role": "sAnnonce() ? \"status\" : null", "attr.aria-label": "sAnnonce() ? etiquetteLue() : null" }, classAttribute: "st-spinner" }, ngImport: i0, template: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <circle class=\"st-spinner__piste\" cx=\"12\" cy=\"12\" r=\"10\" />\n <circle class=\"st-spinner__arc\" cx=\"12\" cy=\"12\" r=\"10\" />\n</svg>\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-flex;flex:none;color:var(--st-couleur-primaire)}svg{inline-size:var(--st-spinner-taille, 1.5rem);block-size:var(--st-spinner-taille, 1.5rem);fill:none;stroke-width:2.5;transform-origin:center;animation:st-spinner-rotation var(--st-anim-chargement, .9s) linear infinite}.st-spinner__piste{stroke:var(--st-couleur-bordure)}.st-spinner__arc{stroke:currentcolor;stroke-linecap:round;stroke-dasharray:16 47}@keyframes st-spinner-rotation{to{transform:rotate(1turn)}}@keyframes st-spinner-pulsation{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){svg{animation:st-spinner-pulsation 1.6s ease-in-out infinite}.st-spinner__arc{stroke-dasharray:none}}:host([data-taille=sm]) svg{--st-spinner-taille: 1rem}:host([data-taille=lg]) svg{--st-spinner-taille: 2.5rem}:host([data-ton=neutre]){color:currentcolor}:host([data-ton=inverse]){color:var(--st-couleur-sur-primaire)}:host([data-ton=inverse]) .st-spinner__piste{stroke:color-mix(in srgb,var(--st-couleur-sur-primaire) 30%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
687
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StSpinner, isStandalone: true, selector: "st-spinner", inputs: { taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-ton": "ton()", "attr.role": "sAnnonce() ? \"status\" : null", "attr.aria-label": "sAnnonce() ? etiquetteLue() : null" }, classAttribute: "st-spinner" }, ngImport: i0, template: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <circle class=\"st-spinner__piste\" cx=\"12\" cy=\"12\" r=\"10\" />\n <circle class=\"st-spinner__arc\" cx=\"12\" cy=\"12\" r=\"10\" />\n</svg>\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-flex;flex:none;color:var(--st-couleur-primaire)}svg{inline-size:var(--st-spinner-taille, 1.5rem);block-size:var(--st-spinner-taille, 1.5rem);fill:none;stroke-width:2.5;transform-origin:center;animation:st-spinner-rotation var(--st-anim-chargement, .9s) linear infinite}.st-spinner__piste{stroke:var(--st-couleur-bordure)}.st-spinner__arc{stroke:currentcolor;stroke-linecap:round;stroke-dasharray:16 47}@keyframes st-spinner-rotation{to{transform:rotate(1turn)}}@keyframes st-spinner-pulsation{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){svg{animation:st-spinner-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}.st-spinner__arc{stroke-dasharray:none}}:host([data-taille=sm]) svg{--st-spinner-taille: 1rem}:host([data-taille=lg]) svg{--st-spinner-taille: 2.5rem}:host([data-ton=neutre]){color:currentcolor}:host([data-ton=inverse]){color:var(--st-couleur-sur-primaire)}:host([data-ton=inverse]) .st-spinner__piste{stroke:color-mix(in srgb,var(--st-couleur-sur-primaire) 30%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
623
688
  }
624
689
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSpinner, decorators: [{
625
690
  type: Component,
@@ -629,7 +694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
629
694
  '[attr.data-ton]': 'ton()',
630
695
  '[attr.role]': 'sAnnonce() ? "status" : null',
631
696
  '[attr.aria-label]': 'sAnnonce() ? etiquetteLue() : null',
632
- }, template: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <circle class=\"st-spinner__piste\" cx=\"12\" cy=\"12\" r=\"10\" />\n <circle class=\"st-spinner__arc\" cx=\"12\" cy=\"12\" r=\"10\" />\n</svg>\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-flex;flex:none;color:var(--st-couleur-primaire)}svg{inline-size:var(--st-spinner-taille, 1.5rem);block-size:var(--st-spinner-taille, 1.5rem);fill:none;stroke-width:2.5;transform-origin:center;animation:st-spinner-rotation var(--st-anim-chargement, .9s) linear infinite}.st-spinner__piste{stroke:var(--st-couleur-bordure)}.st-spinner__arc{stroke:currentcolor;stroke-linecap:round;stroke-dasharray:16 47}@keyframes st-spinner-rotation{to{transform:rotate(1turn)}}@keyframes st-spinner-pulsation{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){svg{animation:st-spinner-pulsation 1.6s ease-in-out infinite}.st-spinner__arc{stroke-dasharray:none}}:host([data-taille=sm]) svg{--st-spinner-taille: 1rem}:host([data-taille=lg]) svg{--st-spinner-taille: 2.5rem}:host([data-ton=neutre]){color:currentcolor}:host([data-ton=inverse]){color:var(--st-couleur-sur-primaire)}:host([data-ton=inverse]) .st-spinner__piste{stroke:color-mix(in srgb,var(--st-couleur-sur-primaire) 30%,transparent)}\n"] }]
697
+ }, template: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <circle class=\"st-spinner__piste\" cx=\"12\" cy=\"12\" r=\"10\" />\n <circle class=\"st-spinner__arc\" cx=\"12\" cy=\"12\" r=\"10\" />\n</svg>\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-flex;flex:none;color:var(--st-couleur-primaire)}svg{inline-size:var(--st-spinner-taille, 1.5rem);block-size:var(--st-spinner-taille, 1.5rem);fill:none;stroke-width:2.5;transform-origin:center;animation:st-spinner-rotation var(--st-anim-chargement, .9s) linear infinite}.st-spinner__piste{stroke:var(--st-couleur-bordure)}.st-spinner__arc{stroke:currentcolor;stroke-linecap:round;stroke-dasharray:16 47}@keyframes st-spinner-rotation{to{transform:rotate(1turn)}}@keyframes st-spinner-pulsation{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){svg{animation:st-spinner-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}.st-spinner__arc{stroke-dasharray:none}}:host([data-taille=sm]) svg{--st-spinner-taille: 1rem}:host([data-taille=lg]) svg{--st-spinner-taille: 2.5rem}:host([data-ton=neutre]){color:currentcolor}:host([data-ton=inverse]){color:var(--st-couleur-sur-primaire)}:host([data-ton=inverse]) .st-spinner__piste{stroke:color-mix(in srgb,var(--st-couleur-sur-primaire) 30%,transparent)}\n"] }]
633
698
  }], propDecorators: { taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }] } });
634
699
 
635
700
  /**
@@ -670,7 +735,7 @@ class StProgress {
670
735
  }, /* @ts-ignore */
671
736
  ...(ngDevMode ? [{ debugName: "pourcentage" }] : /* istanbul ignore next */ []));
672
737
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
673
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StProgress, isStandalone: true, selector: "st-progress", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, texteDeValeur: { classPropertyName: "texteDeValeur", publicName: "texteDeValeur", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.data-ton": "ton()", "attr.data-indetermine": "estIndeterminee() ? \"\" : null", "attr.aria-label": "etiquette()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "valeurAnnoncee()", "attr.aria-valuetext": "texteDeValeur()", "style.--st-progress-part.%": "pourcentage()" }, classAttribute: "st-progress" }, ngImport: i0, template: "<span class=\"st-progress__barre\"></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;block-size:.5rem;overflow:hidden;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}.st-progress__barre{display:block;block-size:100%;inline-size:var(--st-progress-part, 0%);background:var(--st-couleur-primaire);border-radius:inherit;transition:inline-size var(--st-duree-normale) var(--st-courbe-standard)}:host([data-ton=succes]) .st-progress__barre{background:var(--st-couleur-succes)}:host([data-ton=danger]) .st-progress__barre{background:var(--st-couleur-danger)}:host([data-indetermine]) .st-progress__barre{inline-size:35%;animation:st-progress-va-et-vient var(--st-anim-chargement, 1.4s) ease-in-out infinite}@keyframes st-progress-va-et-vient{0%{transform:translate(-100%)}to{transform:translate(calc(100cqi + 100%))}}@keyframes st-progress-pulsation{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){:host([data-indetermine]) .st-progress__barre{inline-size:100%;transform:none;animation:st-progress-pulsation 1.6s ease-in-out infinite}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
738
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StProgress, isStandalone: true, selector: "st-progress", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, texteDeValeur: { classPropertyName: "texteDeValeur", publicName: "texteDeValeur", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.data-ton": "ton()", "attr.data-indetermine": "estIndeterminee() ? \"\" : null", "attr.aria-label": "etiquette()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "valeurAnnoncee()", "attr.aria-valuetext": "texteDeValeur()", "style.--st-progress-part.%": "pourcentage()" }, classAttribute: "st-progress" }, ngImport: i0, template: "<span class=\"st-progress__barre\"></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;block-size:.5rem;overflow:hidden;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}.st-progress__barre{display:block;block-size:100%;inline-size:var(--st-progress-part, 0%);background:var(--st-couleur-primaire);border-radius:inherit;transition:inline-size var(--st-duree-normale) var(--st-courbe-standard)}:host([data-ton=succes]) .st-progress__barre{background:var(--st-couleur-succes)}:host([data-ton=danger]) .st-progress__barre{background:var(--st-couleur-danger)}:host([data-indetermine]) .st-progress__barre{inline-size:35%;animation:st-progress-va-et-vient var(--st-anim-chargement, 1.4s) ease-in-out infinite}@keyframes st-progress-va-et-vient{0%{transform:translate(-100%)}to{transform:translate(calc(100cqi + 100%))}}@keyframes st-progress-pulsation{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){:host([data-indetermine]) .st-progress__barre{inline-size:100%;transform:none;animation:st-progress-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
674
739
  }
675
740
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StProgress, decorators: [{
676
741
  type: Component,
@@ -685,7 +750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
685
750
  '[attr.aria-valuenow]': 'valeurAnnoncee()',
686
751
  '[attr.aria-valuetext]': 'texteDeValeur()',
687
752
  '[style.--st-progress-part.%]': 'pourcentage()',
688
- }, template: "<span class=\"st-progress__barre\"></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;block-size:.5rem;overflow:hidden;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}.st-progress__barre{display:block;block-size:100%;inline-size:var(--st-progress-part, 0%);background:var(--st-couleur-primaire);border-radius:inherit;transition:inline-size var(--st-duree-normale) var(--st-courbe-standard)}:host([data-ton=succes]) .st-progress__barre{background:var(--st-couleur-succes)}:host([data-ton=danger]) .st-progress__barre{background:var(--st-couleur-danger)}:host([data-indetermine]) .st-progress__barre{inline-size:35%;animation:st-progress-va-et-vient var(--st-anim-chargement, 1.4s) ease-in-out infinite}@keyframes st-progress-va-et-vient{0%{transform:translate(-100%)}to{transform:translate(calc(100cqi + 100%))}}@keyframes st-progress-pulsation{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){:host([data-indetermine]) .st-progress__barre{inline-size:100%;transform:none;animation:st-progress-pulsation 1.6s ease-in-out infinite}}\n"] }]
753
+ }, template: "<span class=\"st-progress__barre\"></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;block-size:.5rem;overflow:hidden;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}.st-progress__barre{display:block;block-size:100%;inline-size:var(--st-progress-part, 0%);background:var(--st-couleur-primaire);border-radius:inherit;transition:inline-size var(--st-duree-normale) var(--st-courbe-standard)}:host([data-ton=succes]) .st-progress__barre{background:var(--st-couleur-succes)}:host([data-ton=danger]) .st-progress__barre{background:var(--st-couleur-danger)}:host([data-indetermine]) .st-progress__barre{inline-size:35%;animation:st-progress-va-et-vient var(--st-anim-chargement, 1.4s) ease-in-out infinite}@keyframes st-progress-va-et-vient{0%{transform:translate(-100%)}to{transform:translate(calc(100cqi + 100%))}}@keyframes st-progress-pulsation{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){:host([data-indetermine]) .st-progress__barre{inline-size:100%;transform:none;animation:st-progress-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}\n"] }]
689
754
  }], propDecorators: { valeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "valeur", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: true }] }], ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], texteDeValeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "texteDeValeur", required: false }] }] } });
690
755
 
691
756
  /**
@@ -711,7 +776,7 @@ class StSkeleton {
711
776
  indicesDeColonne = computed(() => Array.from({ length: Math.max(1, this.colonnes()) }, (_, index) => index), /* @ts-ignore */
712
777
  ...(ngDevMode ? [{ debugName: "indicesDeColonne" }] : /* istanbul ignore next */ []));
713
778
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
714
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StSkeleton, isStandalone: true, selector: "st-skeleton", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, lignes: { classPropertyName: "lignes", publicName: "lignes", isSignal: true, isRequired: false, transformFunction: null }, colonnes: { classPropertyName: "colonnes", publicName: "colonnes", isSignal: true, isRequired: false, transformFunction: null }, anime: { classPropertyName: "anime", publicName: "anime", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-variante": "variante()", "attr.data-anime": "anime() ? \"\" : null" }, classAttribute: "st-skeleton" }, ngImport: i0, template: "@switch (variante()) {\n @case ('tableau') {\n @for (ligne of indicesDeLigne(); track ligne) {\n <div class=\"st-skeleton__rangee\">\n @for (colonne of indicesDeColonne(); track colonne) {\n <span class=\"st-skeleton__cellule\"></span>\n }\n </div>\n }\n }\n @case ('carte') {\n <span class=\"st-skeleton__media\"></span>\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\n @default {\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\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:flex;flex-direction:column;gap:var(--st-espacement-2)}.st-skeleton__media,.st-skeleton__cellule,.st-skeleton__ligne{display:block;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}.st-skeleton__ligne{block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__ligne:last-child{inline-size:60%}.st-skeleton__rangee{display:flex;gap:var(--st-espacement-3)}.st-skeleton__cellule{flex:1;block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__media{block-size:8rem;border-radius:var(--st-rayon-md)}:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:linear-gradient(90deg,var(--st-couleur-surface-enfoncee) 25%,var(--st-couleur-surface-survol) 50%,var(--st-couleur-surface-enfoncee) 75%);background-size:200% 100%;animation:st-skeleton-miroitement var(--st-anim-chargement, 1.4s) linear infinite}@keyframes st-skeleton-miroitement{to{background-position:-200% 0}}@keyframes st-skeleton-pulsation{0%,to{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion:reduce){:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:var(--st-couleur-surface-enfoncee);animation:st-skeleton-pulsation 1.8s ease-in-out infinite}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
779
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StSkeleton, isStandalone: true, selector: "st-skeleton", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, lignes: { classPropertyName: "lignes", publicName: "lignes", isSignal: true, isRequired: false, transformFunction: null }, colonnes: { classPropertyName: "colonnes", publicName: "colonnes", isSignal: true, isRequired: false, transformFunction: null }, anime: { classPropertyName: "anime", publicName: "anime", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-variante": "variante()", "attr.data-anime": "anime() ? \"\" : null" }, classAttribute: "st-skeleton" }, ngImport: i0, template: "@switch (variante()) {\n @case ('tableau') {\n @for (ligne of indicesDeLigne(); track ligne) {\n <div class=\"st-skeleton__rangee\">\n @for (colonne of indicesDeColonne(); track colonne) {\n <span class=\"st-skeleton__cellule\"></span>\n }\n </div>\n }\n }\n @case ('carte') {\n <span class=\"st-skeleton__media\"></span>\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\n @default {\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\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:flex;flex-direction:column;gap:var(--st-espacement-2)}.st-skeleton__media,.st-skeleton__cellule,.st-skeleton__ligne{display:block;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}.st-skeleton__ligne{block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__ligne:last-child{inline-size:60%}.st-skeleton__rangee{display:flex;gap:var(--st-espacement-3)}.st-skeleton__cellule{flex:1;block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__media{block-size:8rem;border-radius:var(--st-rayon-md)}:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:linear-gradient(90deg,var(--st-couleur-surface-enfoncee) 25%,var(--st-couleur-surface-survol) 50%,var(--st-couleur-surface-enfoncee) 75%);background-size:200% 100%;animation:st-skeleton-miroitement var(--st-anim-chargement, 1.4s) linear infinite}@keyframes st-skeleton-miroitement{to{background-position:-200% 0}}@keyframes st-skeleton-pulsation{0%,to{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion:reduce){:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:var(--st-couleur-surface-enfoncee);animation:st-skeleton-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
715
780
  }
716
781
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSkeleton, decorators: [{
717
782
  type: Component,
@@ -720,7 +785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
720
785
  'aria-hidden': 'true',
721
786
  '[attr.data-variante]': 'variante()',
722
787
  '[attr.data-anime]': 'anime() ? "" : null',
723
- }, template: "@switch (variante()) {\n @case ('tableau') {\n @for (ligne of indicesDeLigne(); track ligne) {\n <div class=\"st-skeleton__rangee\">\n @for (colonne of indicesDeColonne(); track colonne) {\n <span class=\"st-skeleton__cellule\"></span>\n }\n </div>\n }\n }\n @case ('carte') {\n <span class=\"st-skeleton__media\"></span>\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\n @default {\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\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:flex;flex-direction:column;gap:var(--st-espacement-2)}.st-skeleton__media,.st-skeleton__cellule,.st-skeleton__ligne{display:block;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}.st-skeleton__ligne{block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__ligne:last-child{inline-size:60%}.st-skeleton__rangee{display:flex;gap:var(--st-espacement-3)}.st-skeleton__cellule{flex:1;block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__media{block-size:8rem;border-radius:var(--st-rayon-md)}:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:linear-gradient(90deg,var(--st-couleur-surface-enfoncee) 25%,var(--st-couleur-surface-survol) 50%,var(--st-couleur-surface-enfoncee) 75%);background-size:200% 100%;animation:st-skeleton-miroitement var(--st-anim-chargement, 1.4s) linear infinite}@keyframes st-skeleton-miroitement{to{background-position:-200% 0}}@keyframes st-skeleton-pulsation{0%,to{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion:reduce){:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:var(--st-couleur-surface-enfoncee);animation:st-skeleton-pulsation 1.8s ease-in-out infinite}}\n"] }]
788
+ }, template: "@switch (variante()) {\n @case ('tableau') {\n @for (ligne of indicesDeLigne(); track ligne) {\n <div class=\"st-skeleton__rangee\">\n @for (colonne of indicesDeColonne(); track colonne) {\n <span class=\"st-skeleton__cellule\"></span>\n }\n </div>\n }\n }\n @case ('carte') {\n <span class=\"st-skeleton__media\"></span>\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\n @default {\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\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:flex;flex-direction:column;gap:var(--st-espacement-2)}.st-skeleton__media,.st-skeleton__cellule,.st-skeleton__ligne{display:block;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}.st-skeleton__ligne{block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__ligne:last-child{inline-size:60%}.st-skeleton__rangee{display:flex;gap:var(--st-espacement-3)}.st-skeleton__cellule{flex:1;block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__media{block-size:8rem;border-radius:var(--st-rayon-md)}:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:linear-gradient(90deg,var(--st-couleur-surface-enfoncee) 25%,var(--st-couleur-surface-survol) 50%,var(--st-couleur-surface-enfoncee) 75%);background-size:200% 100%;animation:st-skeleton-miroitement var(--st-anim-chargement, 1.4s) linear infinite}@keyframes st-skeleton-miroitement{to{background-position:-200% 0}}@keyframes st-skeleton-pulsation{0%,to{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion:reduce){:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:var(--st-couleur-surface-enfoncee);animation:st-skeleton-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}\n"] }]
724
789
  }], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], lignes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lignes", required: false }] }], colonnes: [{ type: i0.Input, args: [{ isSignal: true, alias: "colonnes", required: false }] }], anime: [{ type: i0.Input, args: [{ isSignal: true, alias: "anime", required: false }] }] } });
725
790
 
726
791
  /**
@@ -798,7 +863,7 @@ class StButton {
798
863
  });
799
864
  }
800
865
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
801
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StButton, isStandalone: true, selector: "button[stButton]", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, pleineLargeur: { classPropertyName: "pleineLargeur", publicName: "pleineLargeur", isSignal: true, isRequired: false, transformFunction: null }, iconeAvant: { classPropertyName: "iconeAvant", publicName: "iconeAvant", isSignal: true, isRequired: false, transformFunction: null }, iconeApres: { classPropertyName: "iconeApres", publicName: "iconeApres", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null }, indisponible: { classPropertyName: "indisponible", publicName: "indisponible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-taille": "taille()", "attr.data-pleine-largeur": "pleineLargeur() ? \"\" : null", "attr.aria-disabled": "chargement() || indisponible() ? \"true\" : null", "attr.aria-busy": "chargement() ? \"true\" : null" }, classAttribute: "st-button" }, ngImport: i0, template: "@if (iconeAvant(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n<span class=\"st-button__libelle\"><ng-content /></span>\n\n@if (iconeApres(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n@if (chargement()) {\n <st-spinner\n class=\"st-button__chargement\"\n taille=\"sm\"\n [ton]=\"tonDuChargement()\"\n aria-hidden=\"true\"\n />\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{position:relative;display:inline-flex;gap:var(--st-espacement-2);align-items:center;justify-content:center;min-block-size:var(--st-cible-tactile-min);padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);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-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard),border-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;border-color:var(--st-couleur-bordure)}:host[aria-disabled=true]{cursor:progress}.st-button__libelle{white-space:normal}:host([aria-busy=true])>:not(.st-button__chargement){opacity:0}.st-button__chargement{position:absolute;inset:0;margin:auto}:host([data-variante=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:transparent}:host([data-variante=primaire]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=primaire]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-primaire-survol)}:host([data-variante=danger]){color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border-color:transparent}:host([data-variante=danger]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=danger]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-danger-survol)}:host([data-variante=discret]){color:var(--st-couleur-primaire);background:transparent;border-color:transparent}:host([data-variante=discret]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host([data-taille=sm]){min-block-size:2.25rem;padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm)}@media(pointer:coarse){:host([data-taille=sm]){min-block-size:var(--st-cible-tactile-min)}}:host([data-taille=lg]){min-block-size:3.25rem;padding-inline:var(--st-espacement-6);font-size:var(--st-taille-lg)}:host([data-pleine-largeur]){display:flex;inline-size:100%}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StSpinner, selector: "st-spinner", inputs: ["taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
866
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StButton, isStandalone: true, selector: "button[stButton]", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, pleineLargeur: { classPropertyName: "pleineLargeur", publicName: "pleineLargeur", isSignal: true, isRequired: false, transformFunction: null }, iconeAvant: { classPropertyName: "iconeAvant", publicName: "iconeAvant", isSignal: true, isRequired: false, transformFunction: null }, iconeApres: { classPropertyName: "iconeApres", publicName: "iconeApres", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null }, indisponible: { classPropertyName: "indisponible", publicName: "indisponible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-taille": "taille()", "attr.data-pleine-largeur": "pleineLargeur() ? \"\" : null", "attr.aria-disabled": "chargement() || indisponible() ? \"true\" : null", "attr.aria-busy": "chargement() ? \"true\" : null" }, classAttribute: "st-button" }, ngImport: i0, template: "@if (iconeAvant(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n<span class=\"st-button__libelle\"><ng-content /></span>\n\n@if (iconeApres(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n@if (chargement()) {\n <st-spinner\n class=\"st-button__chargement\"\n taille=\"sm\"\n [ton]=\"tonDuChargement()\"\n aria-hidden=\"true\"\n />\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{position:relative;display:inline-flex;gap:var(--st-espacement-2);align-items:center;justify-content:center;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md));transition:background-color var(--st-duree-rapide) var(--st-courbe-standard),border-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;border-color:var(--st-couleur-bordure)}:host[aria-disabled=true]{cursor:progress}.st-button__libelle{white-space:normal}:host([aria-busy=true])>:not(.st-button__chargement){opacity:0}.st-button__chargement{position:absolute;inset:0;margin:auto}:host([data-variante=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:transparent}:host([data-variante=primaire]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=primaire]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-primaire-survol)}:host([data-variante=danger]){color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border-color:transparent}:host([data-variante=danger]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=danger]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-danger-survol)}:host([data-variante=discret]){color:var(--st-couleur-primaire);background:transparent;border-color:transparent}:host([data-variante=discret]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host([data-taille=sm]){min-block-size:2.25rem;padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm)}@media(pointer:coarse){:host([data-taille=sm]){min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min))}}:host([data-taille=lg]){min-block-size:3.25rem;padding-inline:var(--st-espacement-6);font-size:var(--st-taille-lg)}:host([data-pleine-largeur]){display:flex;inline-size:100%}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StSpinner, selector: "st-spinner", inputs: ["taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
802
867
  }
803
868
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StButton, decorators: [{
804
869
  type: Component,
@@ -809,7 +874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
809
874
  '[attr.data-pleine-largeur]': 'pleineLargeur() ? "" : null',
810
875
  '[attr.aria-disabled]': 'chargement() || indisponible() ? "true" : null',
811
876
  '[attr.aria-busy]': 'chargement() ? "true" : null',
812
- }, template: "@if (iconeAvant(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n<span class=\"st-button__libelle\"><ng-content /></span>\n\n@if (iconeApres(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n@if (chargement()) {\n <st-spinner\n class=\"st-button__chargement\"\n taille=\"sm\"\n [ton]=\"tonDuChargement()\"\n aria-hidden=\"true\"\n />\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{position:relative;display:inline-flex;gap:var(--st-espacement-2);align-items:center;justify-content:center;min-block-size:var(--st-cible-tactile-min);padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);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-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard),border-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;border-color:var(--st-couleur-bordure)}:host[aria-disabled=true]{cursor:progress}.st-button__libelle{white-space:normal}:host([aria-busy=true])>:not(.st-button__chargement){opacity:0}.st-button__chargement{position:absolute;inset:0;margin:auto}:host([data-variante=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:transparent}:host([data-variante=primaire]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=primaire]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-primaire-survol)}:host([data-variante=danger]){color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border-color:transparent}:host([data-variante=danger]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=danger]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-danger-survol)}:host([data-variante=discret]){color:var(--st-couleur-primaire);background:transparent;border-color:transparent}:host([data-variante=discret]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host([data-taille=sm]){min-block-size:2.25rem;padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm)}@media(pointer:coarse){:host([data-taille=sm]){min-block-size:var(--st-cible-tactile-min)}}:host([data-taille=lg]){min-block-size:3.25rem;padding-inline:var(--st-espacement-6);font-size:var(--st-taille-lg)}:host([data-pleine-largeur]){display:flex;inline-size:100%}\n"] }]
877
+ }, template: "@if (iconeAvant(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n<span class=\"st-button__libelle\"><ng-content /></span>\n\n@if (iconeApres(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n@if (chargement()) {\n <st-spinner\n class=\"st-button__chargement\"\n taille=\"sm\"\n [ton]=\"tonDuChargement()\"\n aria-hidden=\"true\"\n />\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{position:relative;display:inline-flex;gap:var(--st-espacement-2);align-items:center;justify-content:center;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md));transition:background-color var(--st-duree-rapide) var(--st-courbe-standard),border-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;border-color:var(--st-couleur-bordure)}:host[aria-disabled=true]{cursor:progress}.st-button__libelle{white-space:normal}:host([aria-busy=true])>:not(.st-button__chargement){opacity:0}.st-button__chargement{position:absolute;inset:0;margin:auto}:host([data-variante=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:transparent}:host([data-variante=primaire]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=primaire]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-primaire-survol)}:host([data-variante=danger]){color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border-color:transparent}:host([data-variante=danger]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=danger]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-danger-survol)}:host([data-variante=discret]){color:var(--st-couleur-primaire);background:transparent;border-color:transparent}:host([data-variante=discret]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host([data-taille=sm]){min-block-size:2.25rem;padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm)}@media(pointer:coarse){:host([data-taille=sm]){min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min))}}:host([data-taille=lg]){min-block-size:3.25rem;padding-inline:var(--st-espacement-6);font-size:var(--st-taille-lg)}:host([data-pleine-largeur]){display:flex;inline-size:100%}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
813
878
  }], ctorParameters: () => [], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], pleineLargeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "pleineLargeur", required: false }] }], iconeAvant: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconeAvant", required: false }] }], iconeApres: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconeApres", required: false }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }], indisponible: [{ type: i0.Input, args: [{ isSignal: true, alias: "indisponible", required: false }] }] } });
814
879
 
815
880
  /**
@@ -840,7 +905,7 @@ class StIconButton {
840
905
  enfonce = input(null, /* @ts-ignore */
841
906
  ...(ngDevMode ? [{ debugName: "enfonce" }] : /* istanbul ignore next */ []));
842
907
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
843
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StIconButton, isStandalone: true, selector: "button[stIconButton]", inputs: { icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: true, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, enfonce: { classPropertyName: "enfonce", publicName: "enfonce", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-taille": "taille()", "attr.aria-label": "etiquette()", "attr.aria-pressed": "enfonce() === null ? null : enfonce()" }, classAttribute: "st-icon-button" }, ngImport: i0, template: "<st-icon [nom]=\"icone()\" [taille]=\"taille() === 'sm' ? 'sm' : 'md'\" />\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-flex;flex:none;align-items:center;justify-content:center;min-inline-size:var(--st-cible-tactile-min);min-block-size:var(--st-cible-tactile-min);color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not(:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed}:host[aria-pressed=true]{background:var(--st-couleur-surface-enfoncee)}:host([data-variante=secondaire]){background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure-forte)}:host([data-variante=danger]){color:var(--st-couleur-danger)}:host([data-variante=danger]):hover:not(:disabled){background:var(--st-couleur-danger-discret)}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
908
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StIconButton, isStandalone: true, selector: "button[stIconButton]", inputs: { icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: true, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, enfonce: { classPropertyName: "enfonce", publicName: "enfonce", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-taille": "taille()", "attr.aria-label": "etiquette()", "attr.aria-pressed": "enfonce() === null ? null : enfonce()" }, classAttribute: "st-icon-button" }, ngImport: i0, template: "<st-icon [nom]=\"icone()\" [taille]=\"taille() === 'sm' ? 'sm' : 'md'\" />\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-flex;flex:none;align-items:center;justify-content:center;min-inline-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-commande-rayon, var(--st-rayon-md));transition:background-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not(:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed}:host[aria-pressed=true]{background:var(--st-couleur-surface-enfoncee)}:host([data-variante=secondaire]){background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure-forte)}:host([data-variante=danger]){color:var(--st-couleur-danger)}:host([data-variante=danger]):hover:not(:disabled){background:var(--st-couleur-danger-discret)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
844
909
  }
845
910
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIconButton, decorators: [{
846
911
  type: Component,
@@ -850,7 +915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
850
915
  '[attr.data-taille]': 'taille()',
851
916
  '[attr.aria-label]': 'etiquette()',
852
917
  '[attr.aria-pressed]': 'enfonce() === null ? null : enfonce()',
853
- }, template: "<st-icon [nom]=\"icone()\" [taille]=\"taille() === 'sm' ? 'sm' : 'md'\" />\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-flex;flex:none;align-items:center;justify-content:center;min-inline-size:var(--st-cible-tactile-min);min-block-size:var(--st-cible-tactile-min);color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not(:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed}:host[aria-pressed=true]{background:var(--st-couleur-surface-enfoncee)}:host([data-variante=secondaire]){background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure-forte)}:host([data-variante=danger]){color:var(--st-couleur-danger)}:host([data-variante=danger]):hover:not(:disabled){background:var(--st-couleur-danger-discret)}\n"] }]
918
+ }, template: "<st-icon [nom]=\"icone()\" [taille]=\"taille() === 'sm' ? 'sm' : 'md'\" />\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-flex;flex:none;align-items:center;justify-content:center;min-inline-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-commande-rayon, var(--st-rayon-md));transition:background-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not(:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed}:host[aria-pressed=true]{background:var(--st-couleur-surface-enfoncee)}:host([data-variante=secondaire]){background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure-forte)}:host([data-variante=danger]){color:var(--st-couleur-danger)}:host([data-variante=danger]):hover:not(:disabled){background:var(--st-couleur-danger-discret)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
854
919
  }], propDecorators: { icone: [{ type: i0.Input, args: [{ isSignal: true, alias: "icone", required: true }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: true }] }], variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], enfonce: [{ type: i0.Input, args: [{ isSignal: true, alias: "enfonce", required: false }] }] } });
855
920
 
856
921
  /**
@@ -878,7 +943,7 @@ class StLink {
878
943
  mentionExterneLue = computed(() => this.mentionExterne() ?? this.libelles().nouvelleFenetre, /* @ts-ignore */
879
944
  ...(ngDevMode ? [{ debugName: "mentionExterneLue" }] : /* istanbul ignore next */ []));
880
945
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
881
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StLink, isStandalone: true, selector: "a[stLink]", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, externe: { classPropertyName: "externe", publicName: "externe", isSignal: true, isRequired: false, transformFunction: null }, mentionExterne: { classPropertyName: "mentionExterne", publicName: "mentionExterne", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.target": "externe() ? \"_blank\" : null", "attr.rel": "externe() ? \"noopener noreferrer\" : null" }, classAttribute: "st-link" }, ngImport: i0, template: "<ng-content />\n@if (externe()) {\n <st-icon nom=\"lien-externe\" taille=\"xs\" />\n <span class=\"st-vh\">{{ mentionExterneLue() }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{display:inline;gap:var(--st-espacement-1);color:var(--st-couleur-primaire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;border-radius:var(--st-rayon-xs)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover{color:var(--st-couleur-primaire-survol)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=autonome]){display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);text-decoration:none}:host([data-variante=autonome]):hover{text-decoration:underline}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
946
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StLink, isStandalone: true, selector: "a[stLink]", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, externe: { classPropertyName: "externe", publicName: "externe", isSignal: true, isRequired: false, transformFunction: null }, mentionExterne: { classPropertyName: "mentionExterne", publicName: "mentionExterne", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.target": "externe() ? \"_blank\" : null", "attr.rel": "externe() ? \"noopener noreferrer\" : null" }, classAttribute: "st-link" }, ngImport: i0, template: "<ng-content />\n@if (externe()) {\n <st-icon nom=\"lien-externe\" taille=\"xs\" />\n <span class=\"st-vh\">{{ mentionExterneLue() }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{display:inline;gap:var(--st-espacement-1);min-block-size:var(--st-cible-min);align-items:center;color:var(--st-couleur-primaire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;border-radius:var(--st-rayon-xs)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover{color:var(--st-couleur-primaire-survol)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=autonome]){display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);text-decoration:none}:host([data-variante=autonome]):hover{text-decoration:underline}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
882
947
  }
883
948
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StLink, decorators: [{
884
949
  type: Component,
@@ -887,7 +952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
887
952
  '[attr.data-variante]': 'variante()',
888
953
  '[attr.target]': 'externe() ? "_blank" : null',
889
954
  '[attr.rel]': 'externe() ? "noopener noreferrer" : null',
890
- }, template: "<ng-content />\n@if (externe()) {\n <st-icon nom=\"lien-externe\" taille=\"xs\" />\n <span class=\"st-vh\">{{ mentionExterneLue() }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{display:inline;gap:var(--st-espacement-1);color:var(--st-couleur-primaire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;border-radius:var(--st-rayon-xs)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover{color:var(--st-couleur-primaire-survol)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=autonome]){display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);text-decoration:none}:host([data-variante=autonome]):hover{text-decoration:underline}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
955
+ }, template: "<ng-content />\n@if (externe()) {\n <st-icon nom=\"lien-externe\" taille=\"xs\" />\n <span class=\"st-vh\">{{ mentionExterneLue() }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{display:inline;gap:var(--st-espacement-1);min-block-size:var(--st-cible-min);align-items:center;color:var(--st-couleur-primaire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;border-radius:var(--st-rayon-xs)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover{color:var(--st-couleur-primaire-survol)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=autonome]){display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);text-decoration:none}:host([data-variante=autonome]):hover{text-decoration:underline}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
891
956
  }], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], externe: [{ type: i0.Input, args: [{ isSignal: true, alias: "externe", required: false }] }], mentionExterne: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentionExterne", required: false }] }] } });
892
957
 
893
958
  /**
@@ -2506,7 +2571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
2506
2571
  type: Directive
2507
2572
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
2508
2573
 
2509
- let compteur$6 = 0;
2574
+ let compteur$8 = 0;
2510
2575
  /** Elements qu'un `label for` etiquette. */
2511
2576
  const ELEMENTS_ETIQUETABLES = new Set([
2512
2577
  'INPUT',
@@ -2574,7 +2639,7 @@ class StFormField {
2574
2639
  libelleMasque = input(false, { ...(ngDevMode ? { debugName: "libelleMasque" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
2575
2640
  /** Identifiants du champ, lus par `stControleDeChamp` et par le gabarit. */
2576
2641
  identifiants = (() => {
2577
- const base = `st-champ-${(compteur$6 += 1).toString()}`;
2642
+ const base = `st-champ-${(compteur$8 += 1).toString()}`;
2578
2643
  return {
2579
2644
  controle: base,
2580
2645
  libelle: `${base}-libelle`,
@@ -2703,11 +2768,11 @@ class StInput extends ControleDeSaisie {
2703
2768
  this.value.set(this.texteSaisi(evenement));
2704
2769
  }
2705
2770
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
2706
- 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 });
2771
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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 });
2707
2772
  }
2708
2773
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StInput, decorators: [{
2709
2774
  type: Component,
2710
- 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"] }]
2775
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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"] }]
2711
2776
  }], 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 }] }] } });
2712
2777
 
2713
2778
  /** Restant a partir duquel le compteur se signale. */
@@ -2770,14 +2835,14 @@ class StTextarea extends ControleDeSaisie {
2770
2835
  this.value.set(this.texteSaisi(evenement));
2771
2836
  }
2772
2837
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
2773
- 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 });
2838
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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 });
2774
2839
  }
2775
2840
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTextarea, decorators: [{
2776
2841
  type: Component,
2777
- 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"] }]
2842
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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"] }]
2778
2843
  }], ctorParameters: () => [], propDecorators: { lignes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lignes", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }] } });
2779
2844
 
2780
- let compteur$5 = 0;
2845
+ let compteur$7 = 0;
2781
2846
  /**
2782
2847
  * Groupe de controles, nomme par sa QUESTION.
2783
2848
  *
@@ -2805,7 +2870,7 @@ class StFieldset {
2805
2870
  ...(ngDevMode ? [{ debugName: "erreurs" }] : /* istanbul ignore next */ []));
2806
2871
  afficherErreurs = input(false, { ...(ngDevMode ? { debugName: "afficherErreurs" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
2807
2872
  obligatoire = input(false, { ...(ngDevMode ? { debugName: "obligatoire" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
2808
- base = `st-groupe-${(compteur$5 += 1).toString()}`;
2873
+ base = `st-groupe-${(compteur$7 += 1).toString()}`;
2809
2874
  identifiantAide = `${this.base}-aide`;
2810
2875
  identifiantErreur = `${this.base}-erreur`;
2811
2876
  libelleObligatoire = computed(() => this.libelles().obligatoire, /* @ts-ignore */
@@ -2890,7 +2955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
2890
2955
  }, 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"] }]
2891
2956
  }], 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 }] }] } });
2892
2957
 
2893
- let compteur$4 = 0;
2958
+ let compteur$6 = 0;
2894
2959
  /**
2895
2960
  * Groupe de boutons radio, integre a Signal Forms.
2896
2961
  *
@@ -2930,7 +2995,7 @@ class StRadioGroup {
2930
2995
  ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
2931
2996
  touch = output();
2932
2997
  /** Nom partage par les options : sans lui, chaque radio forme son propre groupe. */
2933
- nomParDefaut = `st-radio-${(compteur$4 += 1).toString()}`;
2998
+ nomParDefaut = `st-radio-${(compteur$6 += 1).toString()}`;
2934
2999
  nomDuGroupe() {
2935
3000
  return this.name() === '' ? this.nomParDefaut : this.name();
2936
3001
  }
@@ -3007,17 +3072,17 @@ class StSwitch {
3007
3072
  this.checked.set(evenement.target.checked);
3008
3073
  }
3009
3074
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
3010
- 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 });
3075
+ 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:checked:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}.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}}@media(prefers-reduced-motion:reduce){.st-switch__interrupteur:after{transition:none}}\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 });
3011
3076
  }
3012
3077
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSwitch, decorators: [{
3013
3078
  type: Component,
3014
3079
  args: [{ selector: 'st-switch', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: {
3015
3080
  class: 'st-switch',
3016
3081
  '[attr.hidden]': 'hidden() ? "" : null',
3017
- }, 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"] }]
3082
+ }, 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:checked:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}.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}}@media(prefers-reduced-motion:reduce){.st-switch__interrupteur:after{transition:none}}\n"] }]
3018
3083
  }], 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 }] }] } });
3019
3084
 
3020
- let compteur$3 = 0;
3085
+ let compteur$5 = 0;
3021
3086
  /**
3022
3087
  * Recapitulatif des erreurs d'un formulaire, a l'envoi.
3023
3088
  *
@@ -3057,7 +3122,7 @@ class StErrorSummary {
3057
3122
  titre = input(null, /* @ts-ignore */
3058
3123
  ...(ngDevMode ? [{ debugName: "titre" }] : /* istanbul ignore next */ []));
3059
3124
  /** Unique par instance : deux recapitulatifs sur une page partageraient leur titre. */
3060
- identifiantDuTitre = `st-recapitulatif-${(compteur$3 += 1).toString()}`;
3125
+ identifiantDuTitre = `st-recapitulatif-${(compteur$5 += 1).toString()}`;
3061
3126
  lignes = computed(() => {
3062
3127
  const libelles = this.libelles();
3063
3128
  const locale = this.locale();
@@ -3201,7 +3266,7 @@ class StPasswordField extends ControleDeSaisie {
3201
3266
  this.revele.set(false);
3202
3267
  }
3203
3268
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPasswordField, deps: null, target: i0.ɵɵFactoryTarget.Component });
3204
- 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 });
3269
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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 });
3205
3270
  }
3206
3271
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPasswordField, decorators: [{
3207
3272
  type: Component,
@@ -3209,7 +3274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
3209
3274
  class: 'st-password-field',
3210
3275
  '(focusout)': 'aLaSortie($event)',
3211
3276
  '(document:submit)': 'aLEnvoi($event)',
3212
- }, 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"] }]
3277
+ }, 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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"] }]
3213
3278
  }], propDecorators: { usage: [{ type: i0.Input, args: [{ isSignal: true, alias: "usage", required: false }] }], regles: [{ type: i0.Input, args: [{ isSignal: true, alias: "regles", required: false }] }] } });
3214
3279
 
3215
3280
  /**
@@ -3237,11 +3302,11 @@ class StOtpField extends ControleDeSaisie {
3237
3302
  this.value.set(this.texteSaisi(evenement).replace(/[\s-]/g, ''));
3238
3303
  }
3239
3304
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StOtpField, deps: null, target: i0.ɵɵFactoryTarget.Component });
3240
- 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 });
3305
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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 });
3241
3306
  }
3242
3307
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StOtpField, decorators: [{
3243
3308
  type: Component,
3244
- 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"] }]
3309
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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"] }]
3245
3310
  }], propDecorators: { longueur: [{ type: i0.Input, args: [{ isSignal: true, alias: "longueur", required: false }] }] } });
3246
3311
 
3247
3312
  /**
@@ -3274,11 +3339,11 @@ class StSearchField extends ControleDeSaisie {
3274
3339
  this.recherche.emit(this.value().trim());
3275
3340
  }
3276
3341
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSearchField, deps: null, target: i0.ɵɵFactoryTarget.Component });
3277
- 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 });
3342
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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 });
3278
3343
  }
3279
3344
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSearchField, decorators: [{
3280
3345
  type: Component,
3281
- 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"] }]
3346
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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"] }]
3282
3347
  }], propDecorators: { recherche: [{ type: i0.Output, args: ["recherche"] }] } });
3283
3348
 
3284
3349
  /**
@@ -3335,11 +3400,11 @@ class StIbanField extends ControleDeSaisie {
3335
3400
  this.touch.emit();
3336
3401
  }
3337
3402
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIbanField, deps: null, target: i0.ɵɵFactoryTarget.Component });
3338
- 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 });
3403
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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 });
3339
3404
  }
3340
3405
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIbanField, decorators: [{
3341
3406
  type: Component,
3342
- 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"] }]
3407
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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"] }]
3343
3408
  }] });
3344
3409
 
3345
3410
  /**
@@ -3383,11 +3448,11 @@ class StPhoneField extends ControleDeSaisie {
3383
3448
  this.value.set(normaliserTelephone(saisie));
3384
3449
  }
3385
3450
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPhoneField, deps: null, target: i0.ɵɵFactoryTarget.Component });
3386
- 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 });
3451
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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 });
3387
3452
  }
3388
3453
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPhoneField, decorators: [{
3389
3454
  type: Component,
3390
- 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"] }]
3455
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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"] }]
3391
3456
  }], propDecorators: { autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
3392
3457
 
3393
3458
  /** Sans accents ni casse : « eleve » trouve « Élève ». */
@@ -3460,14 +3525,14 @@ class StSelect extends ControleDeSaisie {
3460
3525
  this.value.set(element.value);
3461
3526
  }
3462
3527
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
3463
- 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 });
3528
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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 });
3464
3529
  }
3465
3530
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSelect, decorators: [{
3466
3531
  type: Component,
3467
- 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"] }]
3532
+ 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-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-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"] }]
3468
3533
  }], 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 }] }] } });
3469
3534
 
3470
- let compteur$2 = 0;
3535
+ let compteur$4 = 0;
3471
3536
  /** Un lundi connu, pour nommer les jours de la semaine sans horloge. */
3472
3537
  const LUNDI_DE_REFERENCE = '2006-01-02';
3473
3538
  /** « Aujourd'hui » dans un fuseau : la date du poste n'est pas celle de la personne. */
@@ -3522,7 +3587,7 @@ class StCalendar {
3522
3587
  /** Echap : le conteneur decide de fermer, et ou rendre le focus. */
3523
3588
  fermeture = output();
3524
3589
  identifiants = (() => {
3525
- const base = `st-calendrier-${(compteur$2 += 1).toString()}`;
3590
+ const base = `st-calendrier-${(compteur$4 += 1).toString()}`;
3526
3591
  return { titre: `${base}-titre`, aide: `${base}-aide` };
3527
3592
  })();
3528
3593
  /** La date qui porte le focus. Suit la selection, bornee. */
@@ -3635,18 +3700,21 @@ class StCalendar {
3635
3700
  }, { injector: this.injecteur });
3636
3701
  }
3637
3702
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
3638
- 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 });
3703
+ 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:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-min));block-size:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-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-discret);text-decoration:line-through;cursor:not-allowed}[aria-selected=true]>.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}[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 });
3639
3704
  }
3640
3705
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCalendar, decorators: [{
3641
3706
  type: Component,
3642
3707
  args: [{ selector: 'st-calendar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIconButton], host: {
3643
3708
  class: 'st-calendar',
3644
3709
  '(keydown)': 'surTouche($event)',
3645
- }, 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"] }]
3710
+ }, 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:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-min));block-size:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-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-discret);text-decoration:line-through;cursor:not-allowed}[aria-selected=true]>.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}[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"] }]
3646
3711
  }], 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"] }] } });
3647
3712
 
3648
- /** Deux choix du meme fichier ne l'ajoutent pas deux fois. */
3649
- function empreinte(fichier) {
3713
+ /**
3714
+ * Cle d'un fichier choisi : deux choix du meme fichier ne l'ajoutent pas deux
3715
+ * fois, et l'application s'en sert pour dire ou en est chaque televersement.
3716
+ */
3717
+ function cleDeFichier(fichier) {
3650
3718
  return `${fichier.name}|${fichier.size.toString()}|${fichier.lastModified.toString()}`;
3651
3719
  }
3652
3720
  /**
@@ -3677,6 +3745,11 @@ function empreinte(fichier) {
3677
3745
  * Chaque changement de la liste s'annonce : « 2 fichiers choisis ». Un fichier
3678
3746
  * retire rend le focus au bouton de retrait suivant, ou au choix de fichiers : le
3679
3747
  * focus ne tombe jamais sur le document.
3748
+ *
3749
+ * ⚠️ **Il ne televerse pas.** `etats` dit ou en est chaque fichier, et le bouton
3750
+ * de la ligne devient « Annuler » pendant l'envoi : le trajet — declaration, depot
3751
+ * pre-signe, confirmation antivirus — vit dans `StTeleversement`
3752
+ * (`@starterlib/core`), seul a parler au reseau.
3680
3753
  */
3681
3754
  class StFileUpload extends ContratDeChamp {
3682
3755
  libelles = inject(ST_LIBELLES);
@@ -3692,6 +3765,12 @@ class StFileUpload extends ContratDeChamp {
3692
3765
  /** En octets. Affiche en aide ; la verification est dans le schema. */
3693
3766
  tailleMax = input(null, /* @ts-ignore */
3694
3767
  ...(ngDevMode ? [{ debugName: "tailleMax" }] : /* istanbul ignore next */ []));
3768
+ /**
3769
+ * Ou en est chaque fichier, par `cleDeFichier`. Le composant AFFICHE ce trajet,
3770
+ * il ne le fait pas : `StTeleversement` de `@starterlib/core` s'en charge.
3771
+ */
3772
+ etats = input(null, /* @ts-ignore */
3773
+ ...(ngDevMode ? [{ debugName: "etats" }] : /* istanbul ignore next */ []));
3695
3774
  annonce = new AnnonceLocale(inject(DestroyRef));
3696
3775
  survol = signal(false, /* @ts-ignore */
3697
3776
  ...(ngDevMode ? [{ debugName: "survol" }] : /* istanbul ignore next */ []));
@@ -3709,11 +3788,16 @@ class StFileUpload extends ContratDeChamp {
3709
3788
  ...(ngDevMode ? [{ debugName: "aideLue" }] : /* istanbul ignore next */ []));
3710
3789
  lignes = computed(() => {
3711
3790
  const locale = this.locale();
3712
- return this.value().map((fichier) => ({
3713
- fichier,
3714
- cle: empreinte(fichier),
3715
- taille: formaterTaille(fichier.size, locale),
3716
- }));
3791
+ const etats = this.etats();
3792
+ return this.value().map((fichier) => {
3793
+ const cle = cleDeFichier(fichier);
3794
+ return {
3795
+ fichier,
3796
+ cle,
3797
+ taille: formaterTaille(fichier.size, locale),
3798
+ etat: etats?.get(cle) ?? null,
3799
+ };
3800
+ });
3717
3801
  }, /* @ts-ignore */
3718
3802
  ...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
3719
3803
  surChoix(evenement) {
@@ -3735,6 +3819,8 @@ class StFileUpload extends ContratDeChamp {
3735
3819
  return;
3736
3820
  this.ajouter(Array.from(evenement.dataTransfer?.files ?? []));
3737
3821
  }
3822
+ /** Emis quand la personne interrompt un envoi : c'est l'application qui annule. */
3823
+ annulation = output();
3738
3824
  retirer(indice) {
3739
3825
  const restants = this.value().filter((_, position) => position !== indice);
3740
3826
  this.value.set(restants);
@@ -3759,8 +3845,11 @@ class StFileUpload extends ContratDeChamp {
3759
3845
  return;
3760
3846
  let liste;
3761
3847
  if (this.multiple()) {
3762
- const connus = new Set(this.value().map(empreinte));
3763
- liste = [...this.value(), ...fichiers.filter((fichier) => !connus.has(empreinte(fichier)))];
3848
+ const connus = new Set(this.value().map(cleDeFichier));
3849
+ liste = [
3850
+ ...this.value(),
3851
+ ...fichiers.filter((fichier) => !connus.has(cleDeFichier(fichier))),
3852
+ ];
3764
3853
  }
3765
3854
  else {
3766
3855
  liste = fichiers.slice(0, 1);
@@ -3771,15 +3860,657 @@ class StFileUpload extends ContratDeChamp {
3771
3860
  this.annonce.annoncer(this.libelles().nombreDeFichiers(liste.length));
3772
3861
  }
3773
3862
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFileUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
3774
- 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 });
3863
+ 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 }, etats: { classPropertyName: "etats", publicName: "etats", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", annulation: "annulation" }, 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\" [attr.data-etape]=\"ligne.etat?.etape\">\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\n @if (ligne.etat; as etat) {\n @switch (etat.etape) {\n @case ('en-cours') {\n <st-progress\n class=\"st-file-upload__progression\"\n [valeur]=\"etat.progression ?? null\"\n [etiquette]=\"libelles().televersementDe(ligne.fichier.name)\"\n />\n }\n @case ('depose') {\n <span class=\"st-file-upload__etat\">\n <st-icon nom=\"cercle-coche\" taille=\"sm\" ton=\"succes\" />\n {{ libelles().fichierDepose(ligne.fichier.name) }}\n </span>\n }\n @case ('refuse') {\n <span class=\"st-file-upload__etat\" data-refuse>\n <st-icon nom=\"triangle-alerte\" taille=\"sm\" ton=\"danger\" />\n {{ etat.message ?? libelles().fichierRefuse(ligne.fichier.name) }}\n </span>\n }\n }\n }\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 class=\"st-file-upload__retrait\"\n stIconButton\n type=\"button\"\n taille=\"sm\"\n [icone]=\"ligne.etat?.etape === 'en-cours' ? 'croix' : 'corbeille'\"\n [etiquette]=\"\n ligne.etat?.etape === 'en-cours'\n ? libelles().annulerLeTeleversement(ligne.fichier.name)\n : libelles().retirerLeFichier(ligne.fichier.name)\n \"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"\n ligne.etat?.etape === 'en-cours' ? annulation.emit(ligne.fichier) : retirer(indice)\n \"\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__progression{flex:1 1 8rem;max-inline-size:12rem}.st-file-upload__etat{display:inline-flex;gap:var(--st-espacement-1);align-items:center;color:var(--st-couleur-texte-discret)}.st-file-upload__etat[data-refuse]{color:var(--st-couleur-danger)}.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"] }, { kind: "component", type: StProgress, selector: "st-progress", inputs: ["valeur", "max", "etiquette", "ton", "texteDeValeur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3775
3864
  }
3776
3865
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFileUpload, decorators: [{
3777
3866
  type: Component,
3778
- args: [{ selector: 'st-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp, StIcon, StIconButton], host: {
3867
+ args: [{ selector: 'st-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp, StIcon, StIconButton, StProgress], host: {
3779
3868
  class: 'st-file-upload',
3780
3869
  '(focusout)': 'aLaSortie($event)',
3781
- }, 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"] }]
3782
- }], 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 }] }] } });
3870
+ }, 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\" [attr.data-etape]=\"ligne.etat?.etape\">\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\n @if (ligne.etat; as etat) {\n @switch (etat.etape) {\n @case ('en-cours') {\n <st-progress\n class=\"st-file-upload__progression\"\n [valeur]=\"etat.progression ?? null\"\n [etiquette]=\"libelles().televersementDe(ligne.fichier.name)\"\n />\n }\n @case ('depose') {\n <span class=\"st-file-upload__etat\">\n <st-icon nom=\"cercle-coche\" taille=\"sm\" ton=\"succes\" />\n {{ libelles().fichierDepose(ligne.fichier.name) }}\n </span>\n }\n @case ('refuse') {\n <span class=\"st-file-upload__etat\" data-refuse>\n <st-icon nom=\"triangle-alerte\" taille=\"sm\" ton=\"danger\" />\n {{ etat.message ?? libelles().fichierRefuse(ligne.fichier.name) }}\n </span>\n }\n }\n }\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 class=\"st-file-upload__retrait\"\n stIconButton\n type=\"button\"\n taille=\"sm\"\n [icone]=\"ligne.etat?.etape === 'en-cours' ? 'croix' : 'corbeille'\"\n [etiquette]=\"\n ligne.etat?.etape === 'en-cours'\n ? libelles().annulerLeTeleversement(ligne.fichier.name)\n : libelles().retirerLeFichier(ligne.fichier.name)\n \"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"\n ligne.etat?.etape === 'en-cours' ? annulation.emit(ligne.fichier) : retirer(indice)\n \"\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__progression{flex:1 1 8rem;max-inline-size:12rem}.st-file-upload__etat{display:inline-flex;gap:var(--st-espacement-1);align-items:center;color:var(--st-couleur-texte-discret)}.st-file-upload__etat[data-refuse]{color:var(--st-couleur-danger)}.st-file-upload__taille{flex:none;color:var(--st-couleur-texte-discret);font-variant-numeric:tabular-nums}\n"] }]
3871
+ }], 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 }] }], etats: [{ type: i0.Input, args: [{ isSignal: true, alias: "etats", required: false }] }], annulation: [{ type: i0.Output, args: ["annulation"] }] } });
3872
+
3873
+ /** Plafond du backend : au-dela, la requete est refusee (SEC-7 de la vague 4). */
3874
+ const TAILLE_MAXIMALE = 100;
3875
+ /**
3876
+ * Pagination d'une liste par curseur.
3877
+ *
3878
+ * ```html
3879
+ * <st-data-table #tableau … />
3880
+ * <st-pagination
3881
+ * [numero]="navigation.numeroDePage()"
3882
+ * [precedenteDisponible]="navigation.precedenteDisponible()"
3883
+ * [suivanteDisponible]="page.value()?.hasMore ?? false"
3884
+ * [chargement]="page.isLoading()"
3885
+ * [cible]="tableau"
3886
+ * (precedente)="navigation.precedente()"
3887
+ * (suivante)="navigation.suivante(page.value())"
3888
+ * />
3889
+ * ```
3890
+ *
3891
+ * ⚠️ **Ni total, ni numeros cliquables** : le backend ne compte pas et ne va que
3892
+ * vers l'avant (audit de la vague 4, V4-2). « Page 3 » se dit ; « page 3 sur 12 »
3893
+ * serait invente.
3894
+ *
3895
+ * ⚠️ **Boutons indisponibles, jamais desactives** : sur la derniere page, « Page
3896
+ * suivante » garde le focus qu'il avait. Desactive, il le perdrait, et le lecteur
3897
+ * d'ecran retomberait sur le debut du document.
3898
+ *
3899
+ * ⚠️ **Apres un changement de page, le focus va a la `cible`** — la legende du
3900
+ * tableau — et « Page 2 » s'annonce (UX-13). Sans cela, la personne au clavier
3901
+ * reste en bas, sur « Page suivante », sans savoir que le contenu au-dessus a
3902
+ * change.
3903
+ */
3904
+ class StPagination {
3905
+ libelles = inject(ST_LIBELLES);
3906
+ injecteur = inject(Injector);
3907
+ mode = input('pages', /* @ts-ignore */
3908
+ ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
3909
+ /** A partir de 1. */
3910
+ numero = input(1, /* @ts-ignore */
3911
+ ...(ngDevMode ? [{ debugName: "numero" }] : /* istanbul ignore next */ []));
3912
+ precedenteDisponible = input(false, { ...(ngDevMode ? { debugName: "precedenteDisponible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3913
+ suivanteDisponible = input(false, { ...(ngDevMode ? { debugName: "suivanteDisponible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3914
+ chargement = input(false, { ...(ngDevMode ? { debugName: "chargement" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
3915
+ /** Nom de la navigation, quand une page en porte plusieurs. */
3916
+ etiquette = input(null, /* @ts-ignore */
3917
+ ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
3918
+ /** Tailles proposees ; vide, pas de choix. Plafonnees a 100. */
3919
+ taillesDePage = input([], /* @ts-ignore */
3920
+ ...(ngDevMode ? [{ debugName: "taillesDePage" }] : /* istanbul ignore next */ []));
3921
+ taille = model(20, /* @ts-ignore */
3922
+ ...(ngDevMode ? [{ debugName: "taille" }] : /* istanbul ignore next */ []));
3923
+ /** Recoit le focus apres un changement de page. */
3924
+ cible = input(null, /* @ts-ignore */
3925
+ ...(ngDevMode ? [{ debugName: "cible" }] : /* istanbul ignore next */ []));
3926
+ precedente = output();
3927
+ suivante = output();
3928
+ annonce = new AnnonceLocale(inject(DestroyRef));
3929
+ tailles = computed(() => this.taillesDePage().filter((taille) => taille >= 1 && taille <= TAILLE_MAXIMALE), /* @ts-ignore */
3930
+ ...(ngDevMode ? [{ debugName: "tailles" }] : /* istanbul ignore next */ []));
3931
+ etiquetteLue = computed(() => this.etiquette() ?? this.libelles().pagination, /* @ts-ignore */
3932
+ ...(ngDevMode ? [{ debugName: "etiquetteLue" }] : /* istanbul ignore next */ []));
3933
+ constructor() {
3934
+ // Le focus attend la FIN du chargement : amene sur la cible pendant que les
3935
+ // anciennes lignes sont encore la, il ferait relire la page quittee.
3936
+ let dernier = null;
3937
+ let enAttente = false;
3938
+ effect(() => {
3939
+ const numero = this.numero();
3940
+ const chargement = this.chargement();
3941
+ if (dernier === null) {
3942
+ dernier = numero;
3943
+ return;
3944
+ }
3945
+ if (numero !== dernier) {
3946
+ dernier = numero;
3947
+ enAttente = true;
3948
+ if (this.mode() === 'pages')
3949
+ this.annonce.annoncer(this.libelles().pageNumero(numero));
3950
+ }
3951
+ if (!enAttente || chargement)
3952
+ return;
3953
+ enAttente = false;
3954
+ afterNextRender(() => {
3955
+ const cible = this.cible();
3956
+ const element = typeof cible === 'function' ? cible() : cible;
3957
+ element?.focus();
3958
+ }, { injector: this.injecteur });
3959
+ });
3960
+ }
3961
+ surTaille(evenement) {
3962
+ this.taille.set(Number(evenement.target.value));
3963
+ }
3964
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
3965
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StPagination, isStandalone: true, selector: "st-pagination", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, numero: { classPropertyName: "numero", publicName: "numero", isSignal: true, isRequired: false, transformFunction: null }, precedenteDisponible: { classPropertyName: "precedenteDisponible", publicName: "precedenteDisponible", isSignal: true, isRequired: false, transformFunction: null }, suivanteDisponible: { classPropertyName: "suivanteDisponible", publicName: "suivanteDisponible", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, taillesDePage: { classPropertyName: "taillesDePage", publicName: "taillesDePage", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, cible: { classPropertyName: "cible", publicName: "cible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { taille: "tailleChange", precedente: "precedente", suivante: "suivante" }, host: { classAttribute: "st-pagination" }, ngImport: i0, template: "<nav class=\"st-pagination__navigation\" [attr.aria-label]=\"etiquetteLue()\">\n @if (mode() === 'pages') {\n <button\n stButton\n type=\"button\"\n iconeAvant=\"chevron-gauche\"\n [indisponible]=\"!precedenteDisponible() || chargement()\"\n (click)=\"precedente.emit()\"\n >\n {{ libelles().pagePrecedente }}\n </button>\n <span class=\"st-pagination__numero\" aria-current=\"page\">\n {{ libelles().pageNumero(numero()) }}\n </span>\n <button\n stButton\n type=\"button\"\n iconeApres=\"chevron-droite\"\n [indisponible]=\"!suivanteDisponible()\"\n [chargement]=\"chargement()\"\n (click)=\"suivante.emit()\"\n >\n {{ libelles().pageSuivante }}\n </button>\n } @else if (suivanteDisponible()) {\n <button stButton type=\"button\" [chargement]=\"chargement()\" (click)=\"suivante.emit()\">\n {{ libelles().afficherPlus }}\n </button>\n }\n\n @if (tailles().length > 0) {\n <label class=\"st-pagination__taille\">\n <span>{{ libelles().lignesParPage }}</span>\n <select class=\"st-pagination__choix\" (change)=\"surTaille($event)\">\n @for (proposee of tailles(); track proposee) {\n <option [value]=\"proposee\" [selected]=\"proposee === taille()\">{{ proposee }}</option>\n }\n </select>\n </label>\n }\n</nav>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}.st-pagination__navigation{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-3);align-items:center}.st-pagination__numero{font-variant-numeric:tabular-nums;font-weight:var(--st-graisse-semi)}.st-pagination__taille{display:inline-flex;gap:var(--st-espacement-2);align-items:center;margin-inline-start:auto}.st-pagination__choix:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-pagination__choix{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-pagination__choix[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-pagination__choix:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-pagination__choix:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-pagination__choix{inline-size:auto}\n"], dependencies: [{ kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement", "indisponible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3966
+ }
3967
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPagination, decorators: [{
3968
+ type: Component,
3969
+ args: [{ selector: 'st-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StButton], host: { class: 'st-pagination' }, template: "<nav class=\"st-pagination__navigation\" [attr.aria-label]=\"etiquetteLue()\">\n @if (mode() === 'pages') {\n <button\n stButton\n type=\"button\"\n iconeAvant=\"chevron-gauche\"\n [indisponible]=\"!precedenteDisponible() || chargement()\"\n (click)=\"precedente.emit()\"\n >\n {{ libelles().pagePrecedente }}\n </button>\n <span class=\"st-pagination__numero\" aria-current=\"page\">\n {{ libelles().pageNumero(numero()) }}\n </span>\n <button\n stButton\n type=\"button\"\n iconeApres=\"chevron-droite\"\n [indisponible]=\"!suivanteDisponible()\"\n [chargement]=\"chargement()\"\n (click)=\"suivante.emit()\"\n >\n {{ libelles().pageSuivante }}\n </button>\n } @else if (suivanteDisponible()) {\n <button stButton type=\"button\" [chargement]=\"chargement()\" (click)=\"suivante.emit()\">\n {{ libelles().afficherPlus }}\n </button>\n }\n\n @if (tailles().length > 0) {\n <label class=\"st-pagination__taille\">\n <span>{{ libelles().lignesParPage }}</span>\n <select class=\"st-pagination__choix\" (change)=\"surTaille($event)\">\n @for (proposee of tailles(); track proposee) {\n <option [value]=\"proposee\" [selected]=\"proposee === taille()\">{{ proposee }}</option>\n }\n </select>\n </label>\n }\n</nav>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}.st-pagination__navigation{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-3);align-items:center}.st-pagination__numero{font-variant-numeric:tabular-nums;font-weight:var(--st-graisse-semi)}.st-pagination__taille{display:inline-flex;gap:var(--st-espacement-2);align-items:center;margin-inline-start:auto}.st-pagination__choix:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-pagination__choix{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-pagination__choix[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-pagination__choix:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-pagination__choix:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-pagination__choix{inline-size:auto}\n"] }]
3970
+ }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], numero: [{ type: i0.Input, args: [{ isSignal: true, alias: "numero", required: false }] }], precedenteDisponible: [{ type: i0.Input, args: [{ isSignal: true, alias: "precedenteDisponible", required: false }] }], suivanteDisponible: [{ type: i0.Input, args: [{ isSignal: true, alias: "suivanteDisponible", required: false }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], taillesDePage: [{ type: i0.Input, args: [{ isSignal: true, alias: "taillesDePage", required: false }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }, { type: i0.Output, args: ["tailleChange"] }], cible: [{ type: i0.Input, args: [{ isSignal: true, alias: "cible", required: false }] }], precedente: [{ type: i0.Output, args: ["precedente"] }], suivante: [{ type: i0.Output, args: ["suivante"] }] } });
3971
+
3972
+ /**
3973
+ * Valeur riche d'un element : montant, date, valeur masquee.
3974
+ *
3975
+ * ```html
3976
+ * <ng-template stDescription="iban" let-element>
3977
+ * <st-masked nature="iban" [valeur]="compte().iban" />
3978
+ * </ng-template>
3979
+ * ```
3980
+ */
3981
+ class StDescription {
3982
+ cle = input.required({ ...(ngDevMode ? { debugName: "cle" } : /* istanbul ignore next */ {}), alias: 'stDescription' });
3983
+ gabarit = inject(TemplateRef);
3984
+ static ngTemplateContextGuard(_directive, _contexte) {
3985
+ return true;
3986
+ }
3987
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
3988
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StDescription, isStandalone: true, selector: "ng-template[stDescription]", inputs: { cle: { classPropertyName: "cle", publicName: "stDescription", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
3989
+ }
3990
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDescription, decorators: [{
3991
+ type: Directive,
3992
+ args: [{ selector: 'ng-template[stDescription]' }]
3993
+ }], propDecorators: { cle: [{ type: i0.Input, args: [{ isSignal: true, alias: "stDescription", required: true }] }] } });
3994
+ /**
3995
+ * Liste de descriptions : les proprietes d'un objet, sur une page de detail.
3996
+ *
3997
+ * ```html
3998
+ * <st-description-list [elements]="[
3999
+ * { terme: 'Reference', description: commande().reference },
4000
+ * { cle: 'montant', terme: 'Montant', description: null },
4001
+ * ]">
4002
+ * <ng-template stDescription="montant"><st-money [valeur]="commande().montant" /></ng-template>
4003
+ * </st-description-list>
4004
+ * ```
4005
+ *
4006
+ * ⚠️ **Un vrai `dl`, rendu par le composant.** Le lecteur d'ecran annonce « liste de
4007
+ * descriptions, 4 elements » et lit chaque terme avec sa valeur. Ecrits par
4008
+ * l'application et projetes, `dt` et `dd` echapperaient aux styles du composant,
4009
+ * et un `div` mal place rendrait la liste invalide.
4010
+ *
4011
+ * ⚠️ **Une valeur absente se dit** : « — » a l'ecran, « Non renseigne » au lecteur
4012
+ * d'ecran. Une cellule vide ne distingue pas « aucun » de « pas encore charge ».
4013
+ *
4014
+ * En colonnes quand la place le permet, empile en dessous : la largeur est celle
4015
+ * du CONTENEUR, pas de l'ecran — la meme liste dans une carte etroite s'empile
4016
+ * aussi sur un grand ecran (UX-18).
4017
+ */
4018
+ class StDescriptionList {
4019
+ libelles = inject(ST_LIBELLES);
4020
+ elements = input.required(/* @ts-ignore */
4021
+ ...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
4022
+ gabarits = contentChildren(StDescription, /* @ts-ignore */
4023
+ ...(ngDevMode ? [{ debugName: "gabarits" }] : /* istanbul ignore next */ []));
4024
+ lignes = computed(() => {
4025
+ const gabarits = new Map(this.gabarits().map((gabarit) => [gabarit.cle(), gabarit.gabarit]));
4026
+ return this.elements().map((element) => ({
4027
+ element,
4028
+ gabarit: gabarits.get(element.cle ?? element.terme) ?? null,
4029
+ }));
4030
+ }, /* @ts-ignore */
4031
+ ...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
4032
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDescriptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
4033
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StDescriptionList, isStandalone: true, selector: "st-description-list", inputs: { elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "st-description-list" }, queries: [{ propertyName: "gabarits", predicate: StDescription, isSignal: true }], ngImport: i0, template: "<dl class=\"st-description-list__liste\">\n @for (ligne of lignes(); track ligne.element.cle ?? ligne.element.terme) {\n <div class=\"st-description-list__groupe\">\n <dt class=\"st-description-list__terme\">{{ ligne.element.terme }}</dt>\n <dd class=\"st-description-list__valeur\">\n @if (ligne.gabarit; as gabarit) {\n <ng-container *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne.element }\" />\n } @else if (ligne.element.description === null) {\n <span aria-hidden=\"true\">&#8212;</span>\n <span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n } @else {\n {{ ligne.element.description }}\n }\n </dd>\n </div>\n }\n</dl>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;container-type:inline-size}.st-description-list__liste{margin:0}.st-description-list__groupe{display:grid;gap:var(--st-espacement-1);padding-block:var(--st-espacement-2);border-block-end:1px solid var(--st-couleur-bordure)}.st-description-list__terme{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret)}.st-description-list__valeur{margin:0;overflow-wrap:anywhere}@container (min-width: 32rem){.st-description-list__groupe{grid-template-columns:minmax(10rem,1fr) 2fr;gap:var(--st-espacement-4)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4034
+ }
4035
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDescriptionList, decorators: [{
4036
+ type: Component,
4037
+ args: [{ selector: 'st-description-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: 'st-description-list' }, template: "<dl class=\"st-description-list__liste\">\n @for (ligne of lignes(); track ligne.element.cle ?? ligne.element.terme) {\n <div class=\"st-description-list__groupe\">\n <dt class=\"st-description-list__terme\">{{ ligne.element.terme }}</dt>\n <dd class=\"st-description-list__valeur\">\n @if (ligne.gabarit; as gabarit) {\n <ng-container *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne.element }\" />\n } @else if (ligne.element.description === null) {\n <span aria-hidden=\"true\">&#8212;</span>\n <span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n } @else {\n {{ ligne.element.description }}\n }\n </dd>\n </div>\n }\n</dl>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;container-type:inline-size}.st-description-list__liste{margin:0}.st-description-list__groupe{display:grid;gap:var(--st-espacement-1);padding-block:var(--st-espacement-2);border-block-end:1px solid var(--st-couleur-bordure)}.st-description-list__terme{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret)}.st-description-list__valeur{margin:0;overflow-wrap:anywhere}@container (min-width: 32rem){.st-description-list__groupe{grid-template-columns:minmax(10rem,1fr) 2fr;gap:var(--st-espacement-4)}}\n"] }]
4038
+ }], propDecorators: { elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: true }] }], gabarits: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StDescription), { isSignal: true }] }] } });
4039
+
4040
+ /**
4041
+ * Rendu d'un element, type par `[stElementDeListeDe]` :
4042
+ *
4043
+ * ```html
4044
+ * <ng-template stElementDeListe [stElementDeListeDe]="expeditions()" let-expedition>
4045
+ * <a [routerLink]="['/expeditions', expedition.id]">{{ expedition.reference }}</a>
4046
+ * </ng-template>
4047
+ * ```
4048
+ */
4049
+ class StElementDeListe {
4050
+ /** Sert seulement au typage du contexte ; nom de l'attribut, d'ou l'absence d'alias. */
4051
+ stElementDeListeDe = input(undefined, /* @ts-ignore */
4052
+ ...(ngDevMode ? [{ debugName: "stElementDeListeDe" }] : /* istanbul ignore next */ []));
4053
+ gabarit = inject(TemplateRef);
4054
+ static ngTemplateContextGuard(_directive, _contexte) {
4055
+ return true;
4056
+ }
4057
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StElementDeListe, deps: [], target: i0.ɵɵFactoryTarget.Directive });
4058
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StElementDeListe, isStandalone: true, selector: "ng-template[stElementDeListe]", inputs: { stElementDeListeDe: { classPropertyName: "stElementDeListeDe", publicName: "stElementDeListeDe", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
4059
+ }
4060
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StElementDeListe, decorators: [{
4061
+ type: Directive,
4062
+ args: [{ selector: 'ng-template[stElementDeListe]' }]
4063
+ }], propDecorators: { stElementDeListeDe: [{ type: i0.Input, args: [{ isSignal: true, alias: "stElementDeListeDe", required: false }] }] } });
4064
+ /**
4065
+ * Liste d'objets : expeditions, notifications, documents. La forme mobile d'un
4066
+ * tableau (UX-5).
4067
+ *
4068
+ * ```html
4069
+ * <st-list #liste etiquette="Mes expeditions" [elements]="expeditions()" cle="id">
4070
+ * <ng-template stElementDeListe [stElementDeListeDe]="expeditions()" let-expedition>…</ng-template>
4071
+ * </st-list>
4072
+ * <st-pagination mode="suite" [cible]="liste" … />
4073
+ * ```
4074
+ *
4075
+ * ⚠️ **Un lien DANS l'element, jamais un element cliquable** (UX-3) : le lien a un
4076
+ * nom, s'ouvre dans un onglet, et laisse les autres boutons de l'element
4077
+ * atteignables.
4078
+ *
4079
+ * ⚠️ **`focus()` va au premier element AJOUTE** depuis le dernier affichage : apres
4080
+ * « Afficher plus », la lecture reprend la ou la liste s'est allongee, et non en
4081
+ * tete. Apres un filtre, la liste raccourcit, et le focus va au premier element.
4082
+ *
4083
+ * `track` par la cle : un rafraichissement garde le focus sur le bon element.
4084
+ */
4085
+ class StList {
4086
+ element = inject(ElementRef);
4087
+ elements = input.required(/* @ts-ignore */
4088
+ ...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
4089
+ /** Propriete qui identifie un element. */
4090
+ cle = input.required(/* @ts-ignore */
4091
+ ...(ngDevMode ? [{ debugName: "cle" }] : /* istanbul ignore next */ []));
4092
+ /** Nom de la liste, lu a l'entree. */
4093
+ etiquette = input(null, /* @ts-ignore */
4094
+ ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
4095
+ /** `ol` quand l'ordre a un sens : etapes, classement. */
4096
+ ordonnee = input(false, { ...(ngDevMode ? { debugName: "ordonnee" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
4097
+ /** Contenu en cours de remplacement : `aria-busy`. */
4098
+ chargement = input(false, { ...(ngDevMode ? { debugName: "chargement" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
4099
+ gabarit = contentChild(StElementDeListe, /* @ts-ignore */
4100
+ ...(ngDevMode ? [{ debugName: "gabarit" }] : /* istanbul ignore next */ []));
4101
+ indiceDuPremierAjout = 0;
4102
+ lignes = computed(() => {
4103
+ const cle = this.cle();
4104
+ return this.elements().map((valeur, indice) => ({
4105
+ valeur,
4106
+ indice,
4107
+ identifiant: String(valeur[cle]),
4108
+ }));
4109
+ }, /* @ts-ignore */
4110
+ ...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
4111
+ constructor() {
4112
+ let longueur = 0;
4113
+ effect(() => {
4114
+ const nouvelle = this.elements().length;
4115
+ this.indiceDuPremierAjout = nouvelle > longueur && longueur > 0 ? longueur : 0;
4116
+ longueur = nouvelle;
4117
+ });
4118
+ }
4119
+ /** Focus sur le premier element ajoute, ou sur le premier. */
4120
+ focus(options) {
4121
+ const elements = this.element.nativeElement.querySelectorAll('.st-list__element');
4122
+ (elements[this.indiceDuPremierAjout] ?? elements[0])?.focus(options);
4123
+ }
4124
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StList, deps: [], target: i0.ɵɵFactoryTarget.Component });
4125
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StList, isStandalone: true, selector: "st-list", inputs: { elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: true, transformFunction: null }, cle: { classPropertyName: "cle", publicName: "cle", isSignal: true, isRequired: true, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, ordonnee: { classPropertyName: "ordonnee", publicName: "ordonnee", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-list" }, queries: [{ propertyName: "gabarit", first: true, predicate: StElementDeListe, descendants: true, isSignal: true }], ngImport: i0, template: "@if (ordonnee()) {\n <ol\n class=\"st-list__liste\"\n [attr.aria-label]=\"etiquette()\"\n [attr.aria-busy]=\"chargement() ? 'true' : null\"\n >\n <ng-container *ngTemplateOutlet=\"contenu\" />\n </ol>\n} @else {\n <ul\n class=\"st-list__liste\"\n [attr.aria-label]=\"etiquette()\"\n [attr.aria-busy]=\"chargement() ? 'true' : null\"\n >\n <ng-container *ngTemplateOutlet=\"contenu\" />\n </ul>\n}\n\n<ng-template #contenu>\n @for (ligne of lignes(); track ligne.identifiant) {\n <!-- tabindex -1 : cible du focus apres \u00AB Afficher plus \u00BB, hors tabulation. -->\n <li class=\"st-list__element\" tabindex=\"-1\">\n @if (gabarit(); as gabarit) {\n <ng-container\n *ngTemplateOutlet=\"\n gabarit.gabarit;\n context: { $implicit: ligne.valeur, indice: ligne.indice }\n \"\n />\n } @else {\n {{ ligne.valeur }}\n }\n </li>\n }\n</ng-template>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}.st-list__liste{padding:0;margin:0;list-style:none}.st-list__liste[aria-busy=true]{cursor:progress}.st-list__element{padding-block:var(--st-espacement-3);border-block-end:1px solid var(--st-couleur-bordure)}.st-list__element:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4126
+ }
4127
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StList, decorators: [{
4128
+ type: Component,
4129
+ args: [{ selector: 'st-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: 'st-list' }, template: "@if (ordonnee()) {\n <ol\n class=\"st-list__liste\"\n [attr.aria-label]=\"etiquette()\"\n [attr.aria-busy]=\"chargement() ? 'true' : null\"\n >\n <ng-container *ngTemplateOutlet=\"contenu\" />\n </ol>\n} @else {\n <ul\n class=\"st-list__liste\"\n [attr.aria-label]=\"etiquette()\"\n [attr.aria-busy]=\"chargement() ? 'true' : null\"\n >\n <ng-container *ngTemplateOutlet=\"contenu\" />\n </ul>\n}\n\n<ng-template #contenu>\n @for (ligne of lignes(); track ligne.identifiant) {\n <!-- tabindex -1 : cible du focus apres \u00AB Afficher plus \u00BB, hors tabulation. -->\n <li class=\"st-list__element\" tabindex=\"-1\">\n @if (gabarit(); as gabarit) {\n <ng-container\n *ngTemplateOutlet=\"\n gabarit.gabarit;\n context: { $implicit: ligne.valeur, indice: ligne.indice }\n \"\n />\n } @else {\n {{ ligne.valeur }}\n }\n </li>\n }\n</ng-template>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}.st-list__liste{padding:0;margin:0;list-style:none}.st-list__liste[aria-busy=true]{cursor:progress}.st-list__element{padding-block:var(--st-espacement-3);border-block-end:1px solid var(--st-couleur-bordure)}.st-list__element:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}\n"] }]
4130
+ }], ctorParameters: () => [], propDecorators: { elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: true }] }], cle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cle", required: true }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], ordonnee: [{ type: i0.Input, args: [{ isSignal: true, alias: "ordonnee", required: false }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }], gabarit: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StElementDeListe), { isSignal: true }] }] } });
4131
+
4132
+ /**
4133
+ * Bouton de tri d'une colonne, pose DANS l'en-tete : `<th><button stSortHeader>`.
4134
+ *
4135
+ * ⚠️ **Le bouton, pas l'en-tete cliquable** : un `th` n'est ni focalisable ni
4136
+ * annonce comme actionnable. Et l'etat se porte par `aria-sort` sur le `th`, que
4137
+ * `st-data-table` pose sur la SEULE colonne triee (FE-3).
4138
+ *
4139
+ * ⚠️ **Ne trie rien.** Il dit l'intention ; c'est le serveur qui trie, et le
4140
+ * contrat actuel ne le fait pas (audit de la vague 4, V4-3). Trier la page
4141
+ * affichee ferait croire a un tri de toute la liste.
4142
+ *
4143
+ * Une colonne non triee montre deux chevrons, pour se signaler triable sans
4144
+ * attendre le survol ; l'icone est decorative, l'etat est lu par `aria-sort`.
4145
+ */
4146
+ class StSortHeader {
4147
+ sens = input(null, /* @ts-ignore */
4148
+ ...(ngDevMode ? [{ debugName: "sens" }] : /* istanbul ignore next */ []));
4149
+ icone = computed(() => {
4150
+ const sens = this.sens();
4151
+ if (sens === 'croissant')
4152
+ return 'chevron-haut';
4153
+ if (sens === 'decroissant')
4154
+ return 'chevron-bas';
4155
+ return 'tri';
4156
+ }, /* @ts-ignore */
4157
+ ...(ngDevMode ? [{ debugName: "icone" }] : /* istanbul ignore next */ []));
4158
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
4159
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StSortHeader, isStandalone: true, selector: "button[stSortHeader]", inputs: { sens: { classPropertyName: "sens", publicName: "sens", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.data-sens": "sens()" }, classAttribute: "st-sort-header" }, ngImport: i0, template: "<span class=\"st-sort-header__libelle\"><ng-content /></span>\n<st-icon class=\"st-sort-header__icone\" taille=\"sm\" [nom]=\"icone()\" />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-min);padding:0;font:inherit;font-weight:inherit;color:inherit;text-align:inherit;cursor:pointer;background:none;border:0}.st-sort-header__icone{flex:none;color:var(--st-couleur-texte-discret)}:host([data-sens]) .st-sort-header__icone{color:inherit}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4160
+ }
4161
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSortHeader, decorators: [{
4162
+ type: Component,
4163
+ args: [{ selector: 'button[stSortHeader]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon], host: {
4164
+ class: 'st-sort-header',
4165
+ type: 'button',
4166
+ '[attr.data-sens]': 'sens()',
4167
+ }, template: "<span class=\"st-sort-header__libelle\"><ng-content /></span>\n<st-icon class=\"st-sort-header__icone\" taille=\"sm\" [nom]=\"icone()\" />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-min);padding:0;font:inherit;font-weight:inherit;color:inherit;text-align:inherit;cursor:pointer;background:none;border:0}.st-sort-header__icone{flex:none;color:var(--st-couleur-texte-discret)}:host([data-sens]) .st-sort-header__icone{color:inherit}\n"] }]
4168
+ }], propDecorators: { sens: [{ type: i0.Input, args: [{ isSignal: true, alias: "sens", required: false }] }] } });
4169
+
4170
+ let compteur$3 = 0;
4171
+ /**
4172
+ * Rendu d'une cellule, type par `[stCelluleDe]` :
4173
+ *
4174
+ * ```html
4175
+ * <ng-template stCellule="montant" [stCelluleDe]="lignes()" let-ligne>
4176
+ * <st-money [valeur]="ligne.montant" />
4177
+ * </ng-template>
4178
+ * ```
4179
+ */
4180
+ class StCellule {
4181
+ cle = input.required({ ...(ngDevMode ? { debugName: "cle" } : /* istanbul ignore next */ {}), alias: 'stCellule' });
4182
+ /** Sert seulement au typage du contexte ; nom de l'attribut, d'ou l'absence d'alias. */
4183
+ stCelluleDe = input(undefined, /* @ts-ignore */
4184
+ ...(ngDevMode ? [{ debugName: "stCelluleDe" }] : /* istanbul ignore next */ []));
4185
+ gabarit = inject(TemplateRef);
4186
+ static ngTemplateContextGuard(_directive, _contexte) {
4187
+ return true;
4188
+ }
4189
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCellule, deps: [], target: i0.ɵɵFactoryTarget.Directive });
4190
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StCellule, isStandalone: true, selector: "ng-template[stCellule]", inputs: { cle: { classPropertyName: "cle", publicName: "stCellule", isSignal: true, isRequired: true, transformFunction: null }, stCelluleDe: { classPropertyName: "stCelluleDe", publicName: "stCelluleDe", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
4191
+ }
4192
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCellule, decorators: [{
4193
+ type: Directive,
4194
+ args: [{ selector: 'ng-template[stCellule]' }]
4195
+ }], propDecorators: { cle: [{ type: i0.Input, args: [{ isSignal: true, alias: "stCellule", required: true }] }], stCelluleDe: [{ type: i0.Input, args: [{ isSignal: true, alias: "stCelluleDe", required: false }] }] } });
4196
+ /** Contenu du tableau vide : un `st-empty`, avec son action. */
4197
+ class StTableauVide {
4198
+ gabarit = inject(TemplateRef);
4199
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTableauVide, deps: [], target: i0.ɵɵFactoryTarget.Directive });
4200
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: StTableauVide, isStandalone: true, selector: "ng-template[stTableauVide]", ngImport: i0 });
4201
+ }
4202
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTableauVide, decorators: [{
4203
+ type: Directive,
4204
+ args: [{ selector: 'ng-template[stTableauVide]' }]
4205
+ }] });
4206
+ /** Lignes de squelette au premier chargement. */
4207
+ const LIGNES_DE_SQUELETTE = 5;
4208
+ /**
4209
+ * Tableau de donnees, sur un `<table>` NATIF.
4210
+ *
4211
+ * ```html
4212
+ * <st-data-table #tableau legende="Expeditions" [colonnes]="colonnes" [lignes]="lignes()"
4213
+ * cle="id" selectionnable [(selection)]="choisies" [chargement]="page.isLoading()">
4214
+ * <ng-template stCellule="reference" [stCelluleDe]="lignes()" let-ligne>
4215
+ * <a [routerLink]="['/expeditions', ligne.id]">{{ ligne.reference }}</a>
4216
+ * </ng-template>
4217
+ * <button stButton stActionsDeTableau (click)="exporter()">Exporter</button>
4218
+ * </st-data-table>
4219
+ * ```
4220
+ *
4221
+ * ⚠️ **Un tableau, pas une grille** (audit de la vague 4, V4-1). Le lecteur d'ecran
4222
+ * sait parcourir un `<table>` de cellule en cellule ; une grille ARIA remplacerait
4223
+ * ce parcours par les fleches, et rendrait les liens des cellules plus durs a
4224
+ * atteindre. Ni Material, ni `CdkTable` : pas de pair dans le tronc.
4225
+ *
4226
+ * - **Legende obligatoire** (UX-1), et une colonne d'en-tete de ligne — la premiere
4227
+ * par defaut — pour que chaque cellule se lise avec sa ligne (UX-2).
4228
+ * - **Zone de defilement nommee** : focalisable quand le tableau deborde (UX-6),
4229
+ * colonne figee sans masquer le focus (UX-7), en-tete fige seulement avec
4230
+ * `hauteurMax` (UX-8).
4231
+ * - **Selection de la PAGE, par cle** (V4-4) : elle ne garde que les lignes encore
4232
+ * affichees, et se vide donc au changement de page.
4233
+ * - **Tri PILOTE** : le tableau dit la demande et l'annonce, il ne reordonne
4234
+ * jamais les lignes (V4-3).
4235
+ * - **Chargement** : squelette au premier, lignes gardees et `aria-busy` ensuite
4236
+ * (UX-11).
4237
+ * - Export, actions de masse : zone `stActionsDeTableau`, et le SERVEUR fait le
4238
+ * travail (V4-5, SEC-4, SEC-5).
4239
+ */
4240
+ class StDataTable {
4241
+ libelles = inject(ST_LIBELLES);
4242
+ legende = input.required(/* @ts-ignore */
4243
+ ...(ngDevMode ? [{ debugName: "legende" }] : /* istanbul ignore next */ []));
4244
+ /** Lue mais non affichee, quand un titre visible nomme deja le tableau. */
4245
+ legendeMasquee = input(false, { ...(ngDevMode ? { debugName: "legendeMasquee" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
4246
+ colonnes = input.required(/* @ts-ignore */
4247
+ ...(ngDevMode ? [{ debugName: "colonnes" }] : /* istanbul ignore next */ []));
4248
+ lignes = input.required(/* @ts-ignore */
4249
+ ...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
4250
+ /** Propriete qui identifie une ligne. Jamais l'indice (FE-1). */
4251
+ cle = input.required(/* @ts-ignore */
4252
+ ...(ngDevMode ? [{ debugName: "cle" }] : /* istanbul ignore next */ []));
4253
+ /** Colonne lue comme en-tete de chaque ligne. Par defaut : la premiere. */
4254
+ enTeteDeLigne = input(null, /* @ts-ignore */
4255
+ ...(ngDevMode ? [{ debugName: "enTeteDeLigne" }] : /* istanbul ignore next */ []));
4256
+ premiereColonneFigee = input(false, { ...(ngDevMode ? { debugName: "premiereColonneFigee" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
4257
+ /** Hauteur maximale, `32rem` : l'en-tete se fige, le corps defile. */
4258
+ hauteurMax = input(null, /* @ts-ignore */
4259
+ ...(ngDevMode ? [{ debugName: "hauteurMax" }] : /* istanbul ignore next */ []));
4260
+ densite = input('confortable', /* @ts-ignore */
4261
+ ...(ngDevMode ? [{ debugName: "densite" }] : /* istanbul ignore next */ []));
4262
+ chargement = input(false, { ...(ngDevMode ? { debugName: "chargement" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
4263
+ selectionnable = input(false, { ...(ngDevMode ? { debugName: "selectionnable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
4264
+ selection = model([], /* @ts-ignore */
4265
+ ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
4266
+ tri = model(null, /* @ts-ignore */
4267
+ ...(ngDevMode ? [{ debugName: "tri" }] : /* istanbul ignore next */ []));
4268
+ /** Texte du tableau vide, sans gabarit `stTableauVide`. */
4269
+ texteVide = input(null, /* @ts-ignore */
4270
+ ...(ngDevMode ? [{ debugName: "texteVide" }] : /* istanbul ignore next */ []));
4271
+ gabarits = contentChildren(StCellule, /* @ts-ignore */
4272
+ ...(ngDevMode ? [{ debugName: "gabarits" }] : /* istanbul ignore next */ []));
4273
+ gabaritVide = contentChild(StTableauVide, /* @ts-ignore */
4274
+ ...(ngDevMode ? [{ debugName: "gabaritVide" }] : /* istanbul ignore next */ []));
4275
+ zone = viewChild.required('zone', /* @ts-ignore */
4276
+ ...(ngDevMode ? [{ debugName: "zone" }] : /* istanbul ignore next */ []));
4277
+ annonce = new AnnonceLocale(inject(DestroyRef));
4278
+ deborde = signal(false, /* @ts-ignore */
4279
+ ...(ngDevMode ? [{ debugName: "deborde" }] : /* istanbul ignore next */ []));
4280
+ largeurFigee = signal(0, /* @ts-ignore */
4281
+ ...(ngDevMode ? [{ debugName: "largeurFigee" }] : /* istanbul ignore next */ []));
4282
+ identifiants = (() => {
4283
+ const base = `st-tableau-${(compteur$3 += 1).toString()}`;
4284
+ return { legende: `${base}-legende`, selection: `${base}-selection` };
4285
+ })();
4286
+ cleDEnTete = computed(() => this.enTeteDeLigne() ?? this.colonnes()[0]?.cle ?? '', /* @ts-ignore */
4287
+ ...(ngDevMode ? [{ debugName: "cleDEnTete" }] : /* istanbul ignore next */ []));
4288
+ cellules = computed(() => {
4289
+ const gabarits = new Map(this.gabarits().map((gabarit) => [gabarit.cle(), gabarit.gabarit]));
4290
+ return this.colonnes().map((colonne) => ({
4291
+ colonne,
4292
+ gabarit: gabarits.get(colonne.cle) ?? null,
4293
+ enTete: colonne.cle === this.cleDEnTete(),
4294
+ }));
4295
+ }, /* @ts-ignore */
4296
+ ...(ngDevMode ? [{ debugName: "cellules" }] : /* istanbul ignore next */ []));
4297
+ rangees = computed(() => {
4298
+ const cle = this.cle();
4299
+ const entete = this.cleDEnTete();
4300
+ const choisies = new Set(this.selection());
4301
+ return this.lignes().map((valeur) => {
4302
+ const identifiant = String(valeur[cle]);
4303
+ return {
4304
+ valeur,
4305
+ identifiant,
4306
+ nom: texteDe(valeur[entete]),
4307
+ choisie: choisies.has(identifiant),
4308
+ };
4309
+ });
4310
+ }, /* @ts-ignore */
4311
+ ...(ngDevMode ? [{ debugName: "rangees" }] : /* istanbul ignore next */ []));
4312
+ squelette = computed(() => this.chargement() && this.lignes().length === 0
4313
+ ? Array.from({ length: LIGNES_DE_SQUELETTE }, (_, indice) => indice)
4314
+ : [], /* @ts-ignore */
4315
+ ...(ngDevMode ? [{ debugName: "squelette" }] : /* istanbul ignore next */ []));
4316
+ nombreDeColonnes = computed(() => this.colonnes().length + (this.selectionnable() ? 1 : 0), /* @ts-ignore */
4317
+ ...(ngDevMode ? [{ debugName: "nombreDeColonnes" }] : /* istanbul ignore next */ []));
4318
+ colonnesDeSquelette = computed(() => Array.from({ length: this.nombreDeColonnes() }, (_, indice) => indice), /* @ts-ignore */
4319
+ ...(ngDevMode ? [{ debugName: "colonnesDeSquelette" }] : /* istanbul ignore next */ []));
4320
+ toutesChoisies = computed(() => {
4321
+ const rangees = this.rangees();
4322
+ return rangees.length > 0 && rangees.every((rangee) => rangee.choisie);
4323
+ }, /* @ts-ignore */
4324
+ ...(ngDevMode ? [{ debugName: "toutesChoisies" }] : /* istanbul ignore next */ []));
4325
+ quelquesChoisies = computed(() => !this.toutesChoisies() && this.rangees().some((rangee) => rangee.choisie), /* @ts-ignore */
4326
+ ...(ngDevMode ? [{ debugName: "quelquesChoisies" }] : /* istanbul ignore next */ []));
4327
+ constructor() {
4328
+ // V4-4 : une selection ne vise que ce qui est affiche. Nouvelle page, nouvelles
4329
+ // cles : les anciennes tombent.
4330
+ effect(() => {
4331
+ const presentes = new Set(this.rangees().map((rangee) => rangee.identifiant));
4332
+ const selection = this.selection();
4333
+ const gardees = selection.filter((identifiant) => presentes.has(identifiant));
4334
+ if (gardees.length !== selection.length)
4335
+ this.selection.set(gardees);
4336
+ });
4337
+ // Mesures du rendu, jamais sur le serveur (FE-5).
4338
+ const destruction = inject(DestroyRef);
4339
+ afterNextRender(() => {
4340
+ const zone = this.zone().nativeElement;
4341
+ if (typeof ResizeObserver === 'undefined')
4342
+ return;
4343
+ const observateur = new ResizeObserver(() => {
4344
+ this.deborde.set(zone.scrollWidth > zone.clientWidth + 1 || zone.scrollHeight > zone.clientHeight + 1);
4345
+ // UX-7 : la largeur des colonnes figees devient la marge de defilement,
4346
+ // pour que la cellule focalisee s'arrete A COTE d'elles et non dessous.
4347
+ const figees = zone.querySelectorAll('tr:first-child > [data-figee]');
4348
+ let largeur = 0;
4349
+ figees.forEach((cellule) => (largeur += cellule.getBoundingClientRect().width));
4350
+ this.largeurFigee.set(Math.ceil(largeur));
4351
+ });
4352
+ observateur.observe(zone);
4353
+ const tableau = zone.querySelector('table');
4354
+ if (tableau !== null)
4355
+ observateur.observe(tableau);
4356
+ destruction.onDestroy(() => {
4357
+ observateur.disconnect();
4358
+ });
4359
+ });
4360
+ }
4361
+ /** Amene le focus sur le tableau : sa legende est lue (UX-13). */
4362
+ focus(options) {
4363
+ this.zone().nativeElement.focus(options);
4364
+ }
4365
+ sensDe(colonne) {
4366
+ const tri = this.tri();
4367
+ return tri?.cle === colonne.cle ? tri.sens : null;
4368
+ }
4369
+ ariaSort(colonne) {
4370
+ const sens = this.sensDe(colonne);
4371
+ if (sens === null)
4372
+ return null;
4373
+ return sens === 'croissant' ? 'ascending' : 'descending';
4374
+ }
4375
+ trier(colonne) {
4376
+ const sens = this.sensDe(colonne) === 'croissant' ? 'decroissant' : 'croissant';
4377
+ this.tri.set({ cle: colonne.cle, sens });
4378
+ const libelles = this.libelles();
4379
+ this.annonce.annoncer(sens === 'croissant'
4380
+ ? libelles.trieCroissant(colonne.libelle)
4381
+ : libelles.trieDecroissant(colonne.libelle));
4382
+ }
4383
+ basculerTout() {
4384
+ this.selection.set(this.toutesChoisies() ? [] : this.rangees().map((rangee) => rangee.identifiant));
4385
+ }
4386
+ basculer(identifiant) {
4387
+ const selection = this.selection();
4388
+ this.selection.set(selection.includes(identifiant)
4389
+ ? selection.filter((choisie) => choisie !== identifiant)
4390
+ : [...selection, identifiant]);
4391
+ }
4392
+ texteDe(ligne, colonne) {
4393
+ return texteDe(ligne[colonne.cle]);
4394
+ }
4395
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
4396
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StDataTable, isStandalone: true, selector: "st-data-table", inputs: { legende: { classPropertyName: "legende", publicName: "legende", isSignal: true, isRequired: true, transformFunction: null }, legendeMasquee: { classPropertyName: "legendeMasquee", publicName: "legendeMasquee", isSignal: true, isRequired: false, transformFunction: null }, colonnes: { classPropertyName: "colonnes", publicName: "colonnes", isSignal: true, isRequired: true, transformFunction: null }, lignes: { classPropertyName: "lignes", publicName: "lignes", isSignal: true, isRequired: true, transformFunction: null }, cle: { classPropertyName: "cle", publicName: "cle", isSignal: true, isRequired: true, transformFunction: null }, enTeteDeLigne: { classPropertyName: "enTeteDeLigne", publicName: "enTeteDeLigne", isSignal: true, isRequired: false, transformFunction: null }, premiereColonneFigee: { classPropertyName: "premiereColonneFigee", publicName: "premiereColonneFigee", isSignal: true, isRequired: false, transformFunction: null }, hauteurMax: { classPropertyName: "hauteurMax", publicName: "hauteurMax", isSignal: true, isRequired: false, transformFunction: null }, densite: { classPropertyName: "densite", publicName: "densite", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null }, selectionnable: { classPropertyName: "selectionnable", publicName: "selectionnable", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, tri: { classPropertyName: "tri", publicName: "tri", isSignal: true, isRequired: false, transformFunction: null }, texteVide: { classPropertyName: "texteVide", publicName: "texteVide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", tri: "triChange" }, host: { properties: { "attr.data-densite": "densite()", "attr.data-figee": "premiereColonneFigee() ? \"\" : null" }, classAttribute: "st-data-table" }, queries: [{ propertyName: "gabarits", predicate: StCellule, isSignal: true }, { propertyName: "gabaritVide", first: true, predicate: StTableauVide, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "zone", first: true, predicate: ["zone"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- UN seul ng-content : la projection se decide a la compilation, et un second\n emplacement de meme selecteur, dans une autre branche, ne recevrait jamais\n rien. -->\n<div class=\"st-data-table__barre\">\n @if (selectionnable()) {\n <p class=\"st-data-table__selection\" role=\"status\" [id]=\"identifiants.selection\">\n {{ selection().length > 0 ? libelles().lignesSelectionnees(selection().length) : '' }}\n </p>\n }\n <div class=\"st-data-table__actions\">\n <ng-content select=\"[stActionsDeTableau]\" />\n </div>\n</div>\n\n<!-- UX-6 : zone nommee par la legende ; focalisable quand elle deborde, et par\n programme toujours, pour recevoir le focus apres un changement de page. -->\n<div\n #zone\n class=\"st-data-table__zone\"\n role=\"region\"\n [attr.aria-labelledby]=\"identifiants.legende\"\n [attr.tabindex]=\"deborde() ? 0 : -1\"\n [attr.data-deborde]=\"deborde() ? '' : null\"\n [style.max-block-size]=\"hauteurMax()\"\n [style.scroll-padding-inline-start.px]=\"largeurFigee()\"\n>\n <table class=\"st-data-table__tableau\" [attr.aria-busy]=\"chargement() ? 'true' : null\">\n <caption\n class=\"st-data-table__legende\"\n [id]=\"identifiants.legende\"\n [class.st-vh]=\"legendeMasquee()\"\n >\n {{\n legende()\n }}\n </caption>\n <thead>\n <tr>\n @if (selectionnable()) {\n <th class=\"st-data-table__case\" scope=\"col\" data-figee>\n <input\n class=\"st-data-table__cocher\"\n type=\"checkbox\"\n [checked]=\"toutesChoisies()\"\n [indeterminate]=\"quelquesChoisies()\"\n [disabled]=\"rangees().length === 0\"\n [attr.aria-label]=\"libelles().selectionnerLaPage(rangees().length)\"\n (change)=\"basculerTout()\"\n />\n </th>\n }\n @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n <th\n scope=\"col\"\n [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n [attr.aria-sort]=\"ariaSort(cellule.colonne)\"\n >\n @if (cellule.colonne.triable) {\n <button\n stSortHeader\n type=\"button\"\n [sens]=\"sensDe(cellule.colonne)\"\n (click)=\"trier(cellule.colonne)\"\n >\n {{ cellule.colonne.libelle }}\n </button>\n } @else if (cellule.colonne.libelleMasque) {\n <span class=\"st-vh\">{{ cellule.colonne.libelle }}</span>\n } @else {\n {{ cellule.colonne.libelle }}\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (rang of squelette(); track rang) {\n <tr class=\"st-data-table__squelette\" aria-hidden=\"true\">\n @for (colonne of colonnesDeSquelette(); track colonne) {\n <td><span class=\"st-data-table__barre-de-squelette\"></span></td>\n }\n </tr>\n }\n @for (rangee of rangees(); track rangee.identifiant) {\n <tr [attr.data-choisie]=\"rangee.choisie ? '' : null\">\n @if (selectionnable()) {\n <td class=\"st-data-table__case\" data-figee>\n <input\n class=\"st-data-table__cocher\"\n type=\"checkbox\"\n [checked]=\"rangee.choisie\"\n [attr.aria-label]=\"libelles().selectionnerLaLigne(rangee.nom ?? rangee.identifiant)\"\n (change)=\"basculer(rangee.identifiant)\"\n />\n </td>\n }\n @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n @if (cellule.enTete) {\n <th\n scope=\"row\"\n [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n valeur;\n context: { $implicit: rangee.valeur, cellule: cellule }\n \"\n />\n </th>\n } @else {\n <td\n [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n valeur;\n context: { $implicit: rangee.valeur, cellule: cellule }\n \"\n />\n </td>\n }\n }\n </tr>\n } @empty {\n @if (!chargement()) {\n <tr>\n <td class=\"st-data-table__vide\" [attr.colspan]=\"nombreDeColonnes()\">\n @if (gabaritVide(); as vide) {\n <ng-container *ngTemplateOutlet=\"vide.gabarit\" />\n } @else {\n {{ texteVide() ?? libelles().tableauVide }}\n }\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n\n<ng-template #valeur let-ligne let-cellule=\"cellule\">\n @if (cellule.gabarit; as gabarit) {\n <ng-container\n *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne, colonne: cellule.colonne }\"\n />\n } @else if (texteDe(ligne, cellule.colonne); as texte) {\n {{ texte }}\n } @else {\n <span aria-hidden=\"true\">&#8212;</span><span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n }\n</ng-template>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{--st-tableau-plan-figee: 1;--st-tableau-plan-entete: 2;--st-tableau-plan-coin: 3;display:block}.st-data-table__barre,.st-data-table__actions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-data-table__barre{justify-content:space-between}.st-data-table__barre:has(.st-data-table__selection,.st-data-table__actions:not(:empty)){min-block-size:var(--st-cible-tactile-min);margin-block-end:var(--st-espacement-2)}.st-data-table__actions{margin-inline-start:auto}.st-data-table__actions:empty{display:none}.st-data-table__selection{margin:0;font-weight:var(--st-graisse-semi)}.st-data-table__zone:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__zone{position:relative;overflow:auto;border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);background:linear-gradient(to right,var(--st-couleur-surface) 30%,transparent) left/2rem 100% no-repeat local,linear-gradient(to left,var(--st-couleur-surface) 30%,transparent) right/2rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.2),transparent) left/.75rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),transparent) right/.75rem 100% no-repeat scroll,var(--st-couleur-surface)}.st-data-table__tableau{inline-size:100%;font-variant-numeric:tabular-nums;border-collapse:separate;border-spacing:0}.st-data-table__legende{padding:var(--st-espacement-3);font-weight:var(--st-graisse-semi);text-align:start}th,td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-3));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-3));text-align:start;vertical-align:top;overflow-wrap:anywhere;border-block-end:1px solid var(--st-couleur-bordure)}thead th{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);white-space:nowrap;background:var(--st-couleur-surface-enfoncee)}thead th{position:sticky;inset-block-start:0;z-index:var(--st-tableau-plan-entete)}tbody th{font-weight:var(--st-graisse-semi)}tbody tr:last-child>*{border-block-end:0}tbody tr:hover>*{background:var(--st-couleur-surface-survol)}tbody tr[data-choisie]>*{background:var(--st-couleur-primaire-discret)}tbody tr[data-choisie]>:first-child{box-shadow:inset 3px 0 0 var(--st-couleur-primaire)}:host-context([dir=rtl]) tbody tr[data-choisie]>:first-child{box-shadow:inset -3px 0 0 var(--st-couleur-primaire)}[data-alignement=fin]{text-align:end}.st-data-table__case{inline-size:var(--st-tableau-largeur-case, 3rem);min-inline-size:var(--st-tableau-largeur-case, 3rem);text-align:center;vertical-align:middle}:host([data-densite=compacte]) th,:host([data-densite=compacte]) td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-1));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-2))}.st-data-table__cocher:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__cocher{inline-size:var(--st-cible-min);block-size:var(--st-cible-min);margin:0;accent-color:var(--st-couleur-primaire);cursor:pointer}:host([data-figee]) [data-figee]{position:sticky;inset-inline-start:0;z-index:var(--st-tableau-plan-figee);background:var(--st-couleur-surface)}:host([data-figee]) .st-data-table__case+[data-figee]{inset-inline-start:var(--st-tableau-largeur-case, 3rem)}:host([data-figee]) thead [data-figee]{z-index:var(--st-tableau-plan-coin);background:var(--st-couleur-surface-enfoncee)}.st-data-table__vide{padding:var(--st-espacement-5);color:var(--st-couleur-texte-discret);text-align:center}.st-data-table__barre-de-squelette{display:block;block-size:1em;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}@media(prefers-reduced-motion:no-preference){.st-data-table__barre-de-squelette{animation:st-tableau-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}@keyframes st-tableau-pulsation{50%{opacity:.5}}.st-data-table__tableau[aria-busy=true]{cursor:progress}@media(forced-colors:active){tbody tr[data-choisie]>:first-child{box-shadow:none;border-inline-start:3px solid Highlight}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StSortHeader, selector: "button[stSortHeader]", inputs: ["sens"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4397
+ }
4398
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDataTable, decorators: [{
4399
+ type: Component,
4400
+ args: [{ selector: 'st-data-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, StSortHeader], host: {
4401
+ class: 'st-data-table',
4402
+ '[attr.data-densite]': 'densite()',
4403
+ '[attr.data-figee]': 'premiereColonneFigee() ? "" : null',
4404
+ }, template: "<!-- UN seul ng-content : la projection se decide a la compilation, et un second\n emplacement de meme selecteur, dans une autre branche, ne recevrait jamais\n rien. -->\n<div class=\"st-data-table__barre\">\n @if (selectionnable()) {\n <p class=\"st-data-table__selection\" role=\"status\" [id]=\"identifiants.selection\">\n {{ selection().length > 0 ? libelles().lignesSelectionnees(selection().length) : '' }}\n </p>\n }\n <div class=\"st-data-table__actions\">\n <ng-content select=\"[stActionsDeTableau]\" />\n </div>\n</div>\n\n<!-- UX-6 : zone nommee par la legende ; focalisable quand elle deborde, et par\n programme toujours, pour recevoir le focus apres un changement de page. -->\n<div\n #zone\n class=\"st-data-table__zone\"\n role=\"region\"\n [attr.aria-labelledby]=\"identifiants.legende\"\n [attr.tabindex]=\"deborde() ? 0 : -1\"\n [attr.data-deborde]=\"deborde() ? '' : null\"\n [style.max-block-size]=\"hauteurMax()\"\n [style.scroll-padding-inline-start.px]=\"largeurFigee()\"\n>\n <table class=\"st-data-table__tableau\" [attr.aria-busy]=\"chargement() ? 'true' : null\">\n <caption\n class=\"st-data-table__legende\"\n [id]=\"identifiants.legende\"\n [class.st-vh]=\"legendeMasquee()\"\n >\n {{\n legende()\n }}\n </caption>\n <thead>\n <tr>\n @if (selectionnable()) {\n <th class=\"st-data-table__case\" scope=\"col\" data-figee>\n <input\n class=\"st-data-table__cocher\"\n type=\"checkbox\"\n [checked]=\"toutesChoisies()\"\n [indeterminate]=\"quelquesChoisies()\"\n [disabled]=\"rangees().length === 0\"\n [attr.aria-label]=\"libelles().selectionnerLaPage(rangees().length)\"\n (change)=\"basculerTout()\"\n />\n </th>\n }\n @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n <th\n scope=\"col\"\n [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n [attr.aria-sort]=\"ariaSort(cellule.colonne)\"\n >\n @if (cellule.colonne.triable) {\n <button\n stSortHeader\n type=\"button\"\n [sens]=\"sensDe(cellule.colonne)\"\n (click)=\"trier(cellule.colonne)\"\n >\n {{ cellule.colonne.libelle }}\n </button>\n } @else if (cellule.colonne.libelleMasque) {\n <span class=\"st-vh\">{{ cellule.colonne.libelle }}</span>\n } @else {\n {{ cellule.colonne.libelle }}\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (rang of squelette(); track rang) {\n <tr class=\"st-data-table__squelette\" aria-hidden=\"true\">\n @for (colonne of colonnesDeSquelette(); track colonne) {\n <td><span class=\"st-data-table__barre-de-squelette\"></span></td>\n }\n </tr>\n }\n @for (rangee of rangees(); track rangee.identifiant) {\n <tr [attr.data-choisie]=\"rangee.choisie ? '' : null\">\n @if (selectionnable()) {\n <td class=\"st-data-table__case\" data-figee>\n <input\n class=\"st-data-table__cocher\"\n type=\"checkbox\"\n [checked]=\"rangee.choisie\"\n [attr.aria-label]=\"libelles().selectionnerLaLigne(rangee.nom ?? rangee.identifiant)\"\n (change)=\"basculer(rangee.identifiant)\"\n />\n </td>\n }\n @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n @if (cellule.enTete) {\n <th\n scope=\"row\"\n [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n valeur;\n context: { $implicit: rangee.valeur, cellule: cellule }\n \"\n />\n </th>\n } @else {\n <td\n [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n valeur;\n context: { $implicit: rangee.valeur, cellule: cellule }\n \"\n />\n </td>\n }\n }\n </tr>\n } @empty {\n @if (!chargement()) {\n <tr>\n <td class=\"st-data-table__vide\" [attr.colspan]=\"nombreDeColonnes()\">\n @if (gabaritVide(); as vide) {\n <ng-container *ngTemplateOutlet=\"vide.gabarit\" />\n } @else {\n {{ texteVide() ?? libelles().tableauVide }}\n }\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n\n<ng-template #valeur let-ligne let-cellule=\"cellule\">\n @if (cellule.gabarit; as gabarit) {\n <ng-container\n *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne, colonne: cellule.colonne }\"\n />\n } @else if (texteDe(ligne, cellule.colonne); as texte) {\n {{ texte }}\n } @else {\n <span aria-hidden=\"true\">&#8212;</span><span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n }\n</ng-template>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{--st-tableau-plan-figee: 1;--st-tableau-plan-entete: 2;--st-tableau-plan-coin: 3;display:block}.st-data-table__barre,.st-data-table__actions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-data-table__barre{justify-content:space-between}.st-data-table__barre:has(.st-data-table__selection,.st-data-table__actions:not(:empty)){min-block-size:var(--st-cible-tactile-min);margin-block-end:var(--st-espacement-2)}.st-data-table__actions{margin-inline-start:auto}.st-data-table__actions:empty{display:none}.st-data-table__selection{margin:0;font-weight:var(--st-graisse-semi)}.st-data-table__zone:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__zone{position:relative;overflow:auto;border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);background:linear-gradient(to right,var(--st-couleur-surface) 30%,transparent) left/2rem 100% no-repeat local,linear-gradient(to left,var(--st-couleur-surface) 30%,transparent) right/2rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.2),transparent) left/.75rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),transparent) right/.75rem 100% no-repeat scroll,var(--st-couleur-surface)}.st-data-table__tableau{inline-size:100%;font-variant-numeric:tabular-nums;border-collapse:separate;border-spacing:0}.st-data-table__legende{padding:var(--st-espacement-3);font-weight:var(--st-graisse-semi);text-align:start}th,td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-3));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-3));text-align:start;vertical-align:top;overflow-wrap:anywhere;border-block-end:1px solid var(--st-couleur-bordure)}thead th{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);white-space:nowrap;background:var(--st-couleur-surface-enfoncee)}thead th{position:sticky;inset-block-start:0;z-index:var(--st-tableau-plan-entete)}tbody th{font-weight:var(--st-graisse-semi)}tbody tr:last-child>*{border-block-end:0}tbody tr:hover>*{background:var(--st-couleur-surface-survol)}tbody tr[data-choisie]>*{background:var(--st-couleur-primaire-discret)}tbody tr[data-choisie]>:first-child{box-shadow:inset 3px 0 0 var(--st-couleur-primaire)}:host-context([dir=rtl]) tbody tr[data-choisie]>:first-child{box-shadow:inset -3px 0 0 var(--st-couleur-primaire)}[data-alignement=fin]{text-align:end}.st-data-table__case{inline-size:var(--st-tableau-largeur-case, 3rem);min-inline-size:var(--st-tableau-largeur-case, 3rem);text-align:center;vertical-align:middle}:host([data-densite=compacte]) th,:host([data-densite=compacte]) td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-1));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-2))}.st-data-table__cocher:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__cocher{inline-size:var(--st-cible-min);block-size:var(--st-cible-min);margin:0;accent-color:var(--st-couleur-primaire);cursor:pointer}:host([data-figee]) [data-figee]{position:sticky;inset-inline-start:0;z-index:var(--st-tableau-plan-figee);background:var(--st-couleur-surface)}:host([data-figee]) .st-data-table__case+[data-figee]{inset-inline-start:var(--st-tableau-largeur-case, 3rem)}:host([data-figee]) thead [data-figee]{z-index:var(--st-tableau-plan-coin);background:var(--st-couleur-surface-enfoncee)}.st-data-table__vide{padding:var(--st-espacement-5);color:var(--st-couleur-texte-discret);text-align:center}.st-data-table__barre-de-squelette{display:block;block-size:1em;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}@media(prefers-reduced-motion:no-preference){.st-data-table__barre-de-squelette{animation:st-tableau-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}@keyframes st-tableau-pulsation{50%{opacity:.5}}.st-data-table__tableau[aria-busy=true]{cursor:progress}@media(forced-colors:active){tbody tr[data-choisie]>:first-child{box-shadow:none;border-inline-start:3px solid Highlight}}\n"] }]
4405
+ }], ctorParameters: () => [], propDecorators: { legende: [{ type: i0.Input, args: [{ isSignal: true, alias: "legende", required: true }] }], legendeMasquee: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendeMasquee", required: false }] }], colonnes: [{ type: i0.Input, args: [{ isSignal: true, alias: "colonnes", required: true }] }], lignes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lignes", required: true }] }], cle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cle", required: true }] }], enTeteDeLigne: [{ type: i0.Input, args: [{ isSignal: true, alias: "enTeteDeLigne", required: false }] }], premiereColonneFigee: [{ type: i0.Input, args: [{ isSignal: true, alias: "premiereColonneFigee", required: false }] }], hauteurMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "hauteurMax", required: false }] }], densite: [{ type: i0.Input, args: [{ isSignal: true, alias: "densite", required: false }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }], selectionnable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionnable", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], tri: [{ type: i0.Input, args: [{ isSignal: true, alias: "tri", required: false }] }, { type: i0.Output, args: ["triChange"] }], texteVide: [{ type: i0.Input, args: [{ isSignal: true, alias: "texteVide", required: false }] }], gabarits: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StCellule), { isSignal: true }] }], gabaritVide: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StTableauVide), { isSignal: true }] }], zone: [{ type: i0.ViewChild, args: ['zone', { isSignal: true }] }] } });
4406
+ /** Texte d'une valeur ; `null` quand elle est absente, pour le dire (UX de la vague 4). */
4407
+ function texteDe(valeur) {
4408
+ if (valeur === null || valeur === undefined || valeur === '')
4409
+ return null;
4410
+ if (typeof valeur === 'string')
4411
+ return valeur;
4412
+ if (typeof valeur === 'number' || typeof valeur === 'boolean' || typeof valeur === 'bigint') {
4413
+ return String(valeur);
4414
+ }
4415
+ return null;
4416
+ }
4417
+
4418
+ /**
4419
+ * Filtre actif, retirable : « Statut : Expediee ✕ ».
4420
+ *
4421
+ * ```html
4422
+ * <button stFilterChip libelle="Statut : Expediee" (click)="retirer('statut')"></button>
4423
+ * ```
4424
+ *
4425
+ * ⚠️ **Toute la puce est le bouton**, et son nom CONTIENT le texte visible —
4426
+ * « Retirer le filtre Statut : Expediee » (WCAG 2.5.3) : une commande vocale
4427
+ * « cliquer Statut » l'atteint. Une croix seule, a cote d'un texte inerte, serait
4428
+ * une cible de quelques pixels sans nom.
4429
+ */
4430
+ class StFilterChip {
4431
+ libelles = inject(ST_LIBELLES);
4432
+ libelle = input.required(/* @ts-ignore */
4433
+ ...(ngDevMode ? [{ debugName: "libelle" }] : /* istanbul ignore next */ []));
4434
+ nom = computed(() => this.libelles().retirerLeFiltre(this.libelle()), /* @ts-ignore */
4435
+ ...(ngDevMode ? [{ debugName: "nom" }] : /* istanbul ignore next */ []));
4436
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFilterChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
4437
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StFilterChip, isStandalone: true, selector: "button[stFilterChip]", inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.aria-label": "nom()" }, classAttribute: "st-filter-chip" }, ngImport: i0, template: "<span class=\"st-filter-chip__libelle\">{{ libelle() }}</span>\n<st-icon class=\"st-filter-chip__croix\" nom=\"croix\" taille=\"sm\" />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:calc(var(--st-cible-min) + var(--st-espacement-2));padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3) var(--st-espacement-2);font:inherit;color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine)}:host:hover{background:var(--st-couleur-surface-survol)}.st-filter-chip__croix{flex:none}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4438
+ }
4439
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFilterChip, decorators: [{
4440
+ type: Component,
4441
+ args: [{ selector: 'button[stFilterChip]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon], host: {
4442
+ class: 'st-filter-chip',
4443
+ type: 'button',
4444
+ '[attr.aria-label]': 'nom()',
4445
+ }, template: "<span class=\"st-filter-chip__libelle\">{{ libelle() }}</span>\n<st-icon class=\"st-filter-chip__croix\" nom=\"croix\" taille=\"sm\" />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:calc(var(--st-cible-min) + var(--st-espacement-2));padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3) var(--st-espacement-2);font:inherit;color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine)}:host:hover{background:var(--st-couleur-surface-survol)}.st-filter-chip__croix{flex:none}\n"] }]
4446
+ }], propDecorators: { libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: true }] }] } });
4447
+
4448
+ let compteur$2 = 0;
4449
+ /**
4450
+ * Barre de filtres : les champs, puis les filtres en vigueur, retirables.
4451
+ *
4452
+ * ```html
4453
+ * <st-filter-bar [filtresActifs]="actifs()" (retrait)="retirer($event)" (effacement)="effacer()">
4454
+ * <st-select libelle="Statut" [options]="statuts" [(value)]="statut" />
4455
+ * </st-filter-bar>
4456
+ * ```
4457
+ *
4458
+ * Un formulaire NOMME : repere « Filtres » dans la liste des reperes du lecteur
4459
+ * d'ecran. Pas un repere `search` : un `st-search-field` pose dedans en porte deja
4460
+ * un, et deux reperes imbriques se liraient en double.
4461
+ *
4462
+ * ⚠️ **Les filtres s'appliquent au changement**, par l'application : Entree dans
4463
+ * un champ n'envoie rien, et ne recharge pas la page.
4464
+ *
4465
+ * ⚠️ **Retirer un filtre rend le focus a la puce suivante**, sinon a la
4466
+ * precedente, sinon au formulaire ; « Effacer les filtres » le rend au formulaire
4467
+ * (UX-14). Le focus ne tombe jamais sur le document, et le retrait s'annonce.
4468
+ *
4469
+ * ⚠️ **Dans l'adresse, des valeurs d'enumeration seulement** (SEC-2) : un texte
4470
+ * cherche, un nom, un IBAN n'y vont pas. Le composant ne touche pas a l'adresse ;
4471
+ * la regle est pour l'application qui le ferait.
4472
+ */
4473
+ class StFilterBar {
4474
+ libelles = inject(ST_LIBELLES);
4475
+ element = inject(ElementRef);
4476
+ injecteur = inject(Injector);
4477
+ /** Nom du formulaire. Par defaut : « Filtres ». */
4478
+ etiquette = input(null, /* @ts-ignore */
4479
+ ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
4480
+ filtresActifs = input([], /* @ts-ignore */
4481
+ ...(ngDevMode ? [{ debugName: "filtresActifs" }] : /* istanbul ignore next */ []));
4482
+ retrait = output();
4483
+ effacement = output();
4484
+ annonce = new AnnonceLocale(inject(DestroyRef));
4485
+ identifiantActifs = `st-filtres-${(compteur$2 += 1).toString()}-actifs`;
4486
+ etiquetteLue = computed(() => this.etiquette() ?? this.libelles().filtres, /* @ts-ignore */
4487
+ ...(ngDevMode ? [{ debugName: "etiquetteLue" }] : /* istanbul ignore next */ []));
4488
+ retirer(filtre, indice) {
4489
+ this.retrait.emit(filtre.cle);
4490
+ this.annonce.annoncer(this.libelles().filtreRetire(filtre.libelle));
4491
+ this.apresLeRendu(() => {
4492
+ const puces = this.element.nativeElement.querySelectorAll('.st-filter-chip');
4493
+ return puces[Math.min(indice, puces.length - 1)] ?? null;
4494
+ });
4495
+ }
4496
+ effacer() {
4497
+ this.effacement.emit();
4498
+ this.annonce.annoncer(this.libelles().filtresEffaces);
4499
+ this.apresLeRendu(() => null);
4500
+ }
4501
+ apresLeRendu(cible) {
4502
+ afterNextRender(() => {
4503
+ const formulaire = this.element.nativeElement.querySelector('form');
4504
+ (cible() ?? formulaire)?.focus();
4505
+ }, { injector: this.injecteur });
4506
+ }
4507
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
4508
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StFilterBar, isStandalone: true, selector: "st-filter-bar", inputs: { etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, filtresActifs: { classPropertyName: "filtresActifs", publicName: "filtresActifs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retrait: "retrait", effacement: "effacement" }, host: { classAttribute: "st-filter-bar" }, ngImport: i0, template: "<!-- tabindex -1 : cible du focus quand la derniere puce disparait. -->\n<form\n class=\"st-filter-bar__formulaire\"\n tabindex=\"-1\"\n [attr.aria-label]=\"etiquetteLue()\"\n (submit)=\"$event.preventDefault()\"\n>\n <div class=\"st-filter-bar__champs\">\n <ng-content />\n </div>\n\n @if (filtresActifs().length > 0) {\n <div class=\"st-filter-bar__actifs\">\n <p class=\"st-filter-bar__titre\" [id]=\"identifiantActifs\">{{ libelles().filtresActifs }}</p>\n <ul class=\"st-filter-bar__puces\" [attr.aria-labelledby]=\"identifiantActifs\">\n @for (filtre of filtresActifs(); track filtre.cle; let indice = $index) {\n <li>\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stFilterChip, et le libelle est requis. -->\n <button\n stFilterChip\n type=\"button\"\n [libelle]=\"filtre.libelle\"\n (click)=\"retirer(filtre, indice)\"\n ></button>\n </li>\n }\n </ul>\n <button stButton type=\"button\" variante=\"discret\" (click)=\"effacer()\">\n {{ libelles().effacerLesFiltres }}\n </button>\n </div>\n }\n</form>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}.st-filter-bar__formulaire:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-filter-bar__formulaire{display:grid;gap:var(--st-espacement-3)}.st-filter-bar__champs{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3) var(--st-espacement-4);align-items:flex-end}.st-filter-bar__actifs{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-filter-bar__titre{margin:0;font-weight:var(--st-graisse-semi)}.st-filter-bar__puces{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);padding:0;margin:0;list-style:none}\n"], dependencies: [{ kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement", "indisponible"] }, { kind: "component", type: StFilterChip, selector: "button[stFilterChip]", inputs: ["libelle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4509
+ }
4510
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFilterBar, decorators: [{
4511
+ type: Component,
4512
+ args: [{ selector: 'st-filter-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StButton, StFilterChip], host: { class: 'st-filter-bar' }, template: "<!-- tabindex -1 : cible du focus quand la derniere puce disparait. -->\n<form\n class=\"st-filter-bar__formulaire\"\n tabindex=\"-1\"\n [attr.aria-label]=\"etiquetteLue()\"\n (submit)=\"$event.preventDefault()\"\n>\n <div class=\"st-filter-bar__champs\">\n <ng-content />\n </div>\n\n @if (filtresActifs().length > 0) {\n <div class=\"st-filter-bar__actifs\">\n <p class=\"st-filter-bar__titre\" [id]=\"identifiantActifs\">{{ libelles().filtresActifs }}</p>\n <ul class=\"st-filter-bar__puces\" [attr.aria-labelledby]=\"identifiantActifs\">\n @for (filtre of filtresActifs(); track filtre.cle; let indice = $index) {\n <li>\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stFilterChip, et le libelle est requis. -->\n <button\n stFilterChip\n type=\"button\"\n [libelle]=\"filtre.libelle\"\n (click)=\"retirer(filtre, indice)\"\n ></button>\n </li>\n }\n </ul>\n <button stButton type=\"button\" variante=\"discret\" (click)=\"effacer()\">\n {{ libelles().effacerLesFiltres }}\n </button>\n </div>\n }\n</form>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}.st-filter-bar__formulaire:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-filter-bar__formulaire{display:grid;gap:var(--st-espacement-3)}.st-filter-bar__champs{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3) var(--st-espacement-4);align-items:flex-end}.st-filter-bar__actifs{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-filter-bar__titre{margin:0;font-weight:var(--st-graisse-semi)}.st-filter-bar__puces{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);padding:0;margin:0;list-style:none}\n"] }]
4513
+ }], propDecorators: { etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], filtresActifs: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtresActifs", required: false }] }], retrait: [{ type: i0.Output, args: ["retrait"] }], effacement: [{ type: i0.Output, args: ["effacement"] }] } });
3783
4514
 
3784
4515
  let compteur$1 = 0;
3785
4516
  /**
@@ -4418,5 +5149,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
4418
5149
  * Generated bundle index. Do not edit.
4419
5150
  */
4420
5151
 
4421
- 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 };
5152
+ 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, StCellule, StChargement, StCheckbox, StCode, StControleDeChamp, StCopyButton, StCount, StDataTable, StDate, StDescription, StDescriptionList, StDivider, StElementDeListe, StEmpty, StErreur, StError, StErrorSummary, StFieldset, StFileUpload, StFilterBar, StFilterChip, StFormField, StHeader, StHeading, StHorsLigne, StIbanField, StIcon, StIconButton, StInlineMessage, StInput, StLangSwitch, StLink, StList, StLogo, StMasked, StMoney, StOfflineBanner, StOtpField, StPageTitle, StPagination, StPasswordField, StPhoneField, StProgress, StRadioGroup, StRelativeTime, StSearchField, StSection, StSelect, StSkeleton, StSkipLink, StSortHeader, StSpinner, StState, StStatusPill, StSucces, StSwitch, StTableauVide, StTag, StText, StTextarea, StThemeToggle, StTimer, StVide, cleDeFichier, copierDansLePressePapiers, erreurDate, erreurIban, erreurPlageDeDates, erreurTelephone, erreursDeFichiers, exempleDeDate, filtrerOptions, formaterDuree, fournirCheminDuSprite, fusionnerErreurs, messageDErreur, motifLocal, normaliserPourRecherche, pressePapiersDisponible, provideStarterUi };
4422
5153
  //# sourceMappingURL=starterlib-ui.mjs.map