Sélecteur : affiche « Mois Année » à droite du bouton d'en-tête

Le mois et l'année sélectionnés (ex. « Septembre 2026 ») sont affichés à droite
du libellé « 📅 Choisir un mois », séparés par un léger trait. Vide tant qu'aucun
mois n'est choisi. Permet de connaître la période courante sans déplier le
sélecteur.

Build prod OK.
This commit is contained in:
2026-09-16 06:43:12 +02:00
parent d9618d140b
commit 4ef7ee7f5a
3 changed files with 25 additions and 0 deletions
@@ -7,6 +7,9 @@
(click)="basculerOuverture()">
<span class="selecteur-entete__chevron" aria-hidden="true">{{ ouvert() ? '▾' : '▸' }}</span>
<span class="selecteur-entete__libelle">📅 Choisir un mois</span>
@if (libelleMoisAnnee) {
<span class="selecteur-entete__selection">{{ libelleMoisAnnee }}</span>
}
</button>
<div class="selecteur-contenu" *ngIf="ouvert()">
@@ -29,6 +29,15 @@
font-size: 0.85rem;
color: #64748b;
}
// « Mois Année » sélectionné, affiché à droite du libellé.
&__selection {
margin-left: 0.35rem;
padding-left: 0.6rem;
border-left: 1px solid #e2e8f0;
color: #2563eb;
font-weight: 700;
}
}
// Contenu déplié : les trois groupes de pastilles.
@@ -81,6 +81,19 @@ export class SelecteurTemporelComponent implements OnInit, OnChanges {
/** État d'ouverture du conteneur repliable (fermé par défaut). */
readonly ouvert = signal(false);
/**
* Libellé « Mois Année » de la sélection courante (ex. « Septembre 2026 »),
* affiché à droite du bouton d'en-tête. Vide tant qu'aucun mois n'est choisi.
*/
get libelleMoisAnnee(): string {
const annee = this.anneeSelectionnee();
const mois = this.moisSelectionneSignal();
if (annee == null || mois == null) {
return '';
}
return `${this.nomsMois[mois - 1]} ${annee}`;
}
/** Bascule l'ouverture / fermeture du sélecteur repliable. */
basculerOuverture(): void {
this.ouvert.update((v) => !v);