@starterlib/ui 0.7.2 → 0.9.0

package/fesm2022/starterlib-ui-selection.mjs

@@ -0,0 +1,1341 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injector, TemplateRef, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, effect, inject, input, isDevMode, linkedSignal, model, numberAttribute, output, resource, signal, untracked, viewChild } from "@angular/core";
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import { Combobox, ComboboxPopup, ComboboxWidget } from "@angular/aria/combobox";
+import { Listbox, Option } from "@angular/aria/listbox";
+import { CdkConnectedOverlay } from "@angular/cdk/overlay";
+import { AnnonceLocale, ST_LIBELLES, ST_LOCALE, ST_RECHERCHE_D_ADRESSES, StButton, StIcon, StIconButton, StIdentifiants, StInlineMessage, StLink, StSpinner, affichageDiffere } from "@starterlib/ui";
+import { ContratDeChamp, ControleDeSaisie, ST_CHAMP_D_ADRESSE, StControleDeChamp, StFormField, filtrerOptions, groupesDOptions, optionsDesPays } from "@starterlib/ui/saisie";
+import { sansCommandesDeDirection } from "@starterlib/util";
+var StOption = class StOption {
+	gabarit = inject(TemplateRef);
+	static ngTemplateContextGuard(_directive, _contexte) {
+		return true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: StOption,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: StOption,
+		isStandalone: true,
+		selector: "ng-template[stOption]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: StOption,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[stOption]" }]
+	}]
+});
+var StCombobox = class StCombobox extends ControleDeSaisie {
+	affichable = sansCommandesDeDirection;
+	libelles = inject(ST_LIBELLES);
+	locale = inject(ST_LOCALE);
+	element = inject(ElementRef);
+	injecteur = inject(Injector);
+	document = inject(DOCUMENT);
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : 	/* istanbul ignore next */ []);
+	filtrage = input("local", ...ngDevMode ? [{ debugName: "filtrage" }] : 	/* istanbul ignore next */ []);
+	icone = input(null, ...ngDevMode ? [{ debugName: "icone" }] : 	/* istanbul ignore next */ []);
+	presentation = input("libelle", ...ngDevMode ? [{ debugName: "presentation" }] : 	/* istanbul ignore next */ []);
+	chargement = input(false, {
+		...ngDevMode ? { debugName: "chargement" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	effacable = input(false, {
+		...ngDevMode ? { debugName: "effacable" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	temporisationEnMs = input(250, {
+		...ngDevMode ? { debugName: "temporisationEnMs" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	longueurMinimale = input(0, {
+		...ngDevMode ? { debugName: "longueurMinimale" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	recherche = output();
+	annonce = new AnnonceLocale(inject(DestroyRef));
+	gabaritDOption = contentChild(StOption, ...ngDevMode ? [{ debugName: "gabaritDOption" }] : 	/* istanbul ignore next */ []);
+	attenteVisible = affichageDiffere(() => this.chargement());
+	ouvert = signal(false, ...ngDevMode ? [{ debugName: "ouvert" }] : 	/* istanbul ignore next */ []);
+	texte = linkedSignal({
+		...ngDevMode ? { debugName: "texte" } : 		/* istanbul ignore next */ {},
+		source: this.value,
+		computation: (valeur) => untracked(() => this.libelleDe(valeur))
+	});
+	filtre = signal("", ...ngDevMode ? [{ debugName: "filtre" }] : 	/* istanbul ignore next */ []);
+	surlignee = linkedSignal(() => this.value() === "" ? [] : [this.value()], ...ngDevMode ? [{ debugName: "surlignee" }] : 	/* istanbul ignore next */ []);
+	visibles = computed(() => this.filtrage() === "local" ? filtrerOptions(this.options(), this.filtre(), this.locale()) : this.options(), ...ngDevMode ? [{ debugName: "visibles" }] : 	/* istanbul ignore next */ []);
+	blocs = computed(() => groupesDOptions(this.visibles()), ...ngDevMode ? [{ debugName: "blocs" }] : 	/* istanbul ignore next */ []);
+	tropCourt = computed(() => {
+		const minimum = this.longueurMinimale();
+		const longueur = this.filtre().trim().length;
+		return this.filtrage() === "distant" && minimum > 0 && longueur > 0 && longueur < minimum;
+	}, ...ngDevMode ? [{ debugName: "tropCourt" }] : 	/* istanbul ignore next */ []);
+	afficherEffacer = computed(() => this.effacable() && this.value() !== "", ...ngDevMode ? [{ debugName: "afficherEffacer" }] : 	/* istanbul ignore next */ []);
+	choixAffiche = computed(() => this.value() !== "" && this.texte() !== "" && this.texte() === this.libelleDe(this.value()), ...ngDevMode ? [{ debugName: "choixAffiche" }] : 	/* istanbul ignore next */ []);
+	idListe = inject(StIdentifiants).prochain("st-combobox-liste");
+	liste = viewChild(Listbox, ...ngDevMode ? [{ debugName: "liste" }] : 	/* istanbul ignore next */ []);
+	champNatif = viewChild("champ", ...ngDevMode ? [{ debugName: "champNatif" }] : 	/* istanbul ignore next */ []);
+	minuterie;
+	derniereAnnonce = null;
+	constructor() {
+		super();
+		inject(DestroyRef).onDestroy(() => {
+			clearTimeout(this.minuterie);
+		});
+		afterRenderEffect(() => {
+			if (this.ouvert()) this.liste()?.scrollActiveItemIntoView({ block: "nearest" });
+		});
+		afterRenderEffect(() => {
+			const libelle = this.libelleDe(this.value());
+			if (this.filtre() !== "") return;
+			if (this.document.activeElement === this.champNatif()?.nativeElement) return;
+			if (libelle !== "" && libelle !== untracked(this.texte)) this.texte.set(libelle);
+		});
+		afterRenderEffect(() => {
+			if (this.filtrage() !== "distant") return;
+			if (this.chargement()) return;
+			const nombre = this.options().length;
+			if (untracked(() => this.filtre().trim()) === "") return;
+			if (untracked(() => this.derniereAnnonce) === nombre) return;
+			this.derniereAnnonce = nombre;
+			untracked(() => {
+				const libelles = this.libelles();
+				this.annonce.annoncer(nombre === 0 && this.tropCourt() ? libelles.longueurMinimale(this.longueurMinimale()) : libelles.nombreDeResultats(nombre));
+			});
+		});
+		afterRenderEffect(() => {
+			if (!this.attenteVisible()) return;
+			untracked(() => {
+				if (!this.ouvert()) return;
+				this.derniereAnnonce = null;
+				this.annonce.annoncer(this.libelles().chargementEnCours);
+			});
+		});
+	}
+	surSaisie(evenement) {
+		const saisie = this.texteSaisi(evenement);
+		this.filtre.set(saisie);
+		if (this.filtrage() === "local") {
+			this.annoncerLeNombreLocal();
+			return;
+		}
+		this.emettreRecherche(saisie);
+	}
+	annoncerLeNombreLocal() {
+		clearTimeout(this.minuterie);
+		this.minuterie = setTimeout(() => {
+			this.minuterie = void 0;
+			const nombre = this.visibles().length;
+			if (nombre === this.derniereAnnonce) return;
+			this.derniereAnnonce = nombre;
+			this.annonce.annoncer(this.libelles().nombreDeResultats(nombre));
+		}, this.temporisationEnMs());
+	}
+	emettreRecherche(saisie) {
+		clearTimeout(this.minuterie);
+		if (saisie === "") {
+			this.derniereAnnonce = null;
+			this.recherche.emit(saisie);
+			return;
+		}
+		this.minuterie = setTimeout(() => {
+			this.derniereAnnonce = null;
+			this.recherche.emit(saisie);
+		}, this.temporisationEnMs());
+	}
+	annulerRecherche() {
+		clearTimeout(this.minuterie);
+		this.minuterie = void 0;
+	}
+	basculer() {
+		if (this.desactive() || this.readonly()) return;
+		this.filtre.set("");
+		this.ouvert.update((ouvert) => !ouvert);
+		this.focus();
+	}
+	effacer() {
+		this.annulerRecherche();
+		this.value.set("");
+		this.texte.set("");
+		this.filtre.set("");
+		this.derniereAnnonce = null;
+		if (this.filtrage() === "distant") this.recherche.emit("");
+		this.focus();
+	}
+	surClic(evenement) {
+		if (evenement.target?.closest("[role=\"option\"]:not([aria-disabled=\"true\"])") == null) return;
+		this.valider();
+	}
+	valider() {
+		const choisie = this.surlignee()[0];
+		if (choisie === void 0) return;
+		this.annulerRecherche();
+		this.value.set(choisie);
+		this.texte.set(this.libelleDe(choisie));
+		this.filtre.set("");
+		this.ouvert.set(false);
+		this.derniereAnnonce = null;
+		afterNextRender(() => {
+			this.focus();
+		}, { injector: this.injecteur });
+	}
+	aLaSortie(evenement) {
+		const suivant = evenement.relatedTarget;
+		if (suivant !== null && this.element.nativeElement.contains(suivant)) return;
+		this.annulerRecherche();
+		if (this.texte().trim() === "") this.value.set("");
+		this.texte.set(this.libelleDe(this.value()));
+		this.filtre.set("");
+		this.derniereAnnonce = null;
+		this.touch.emit();
+	}
+	idDuGroupe(indice) {
+		return `${this.idListe}-groupe-${indice.toString()}`;
+	}
+	idDuContenu(indiceDuBloc, indice) {
+		return `${this.idListe}-contenu-${indiceDuBloc.toString()}-${indice.toString()}`;
+	}
+	idDeLAide(indiceDuBloc, indice) {
+		return `${this.idListe}-aide-${indiceDuBloc.toString()}-${indice.toString()}`;
+	}
+	libelleDe(valeur) {
+		if (valeur === "") return "";
+		return sansCommandesDeDirection(this.options().find((option) => option.valeur === valeur)?.libelle ?? "");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: StCombobox,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: StCombobox,
+		isStandalone: true,
+		selector: "st-combobox",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			filtrage: {
+				classPropertyName: "filtrage",
+				publicName: "filtrage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icone: {
+				classPropertyName: "icone",
+				publicName: "icone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			presentation: {
+				classPropertyName: "presentation",
+				publicName: "presentation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			chargement: {
+				classPropertyName: "chargement",
+				publicName: "chargement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			effacable: {
+				classPropertyName: "effacable",
+				publicName: "effacable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			temporisationEnMs: {
+				classPropertyName: "temporisationEnMs",
+				publicName: "temporisationEnMs",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			longueurMinimale: {
+				classPropertyName: "longueurMinimale",
+				publicName: "longueurMinimale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { recherche: "recherche" },
+		host: {
+			listeners: { "focusout": "aLaSortie($event)" },
+			classAttribute: "st-combobox"
+		},
+		queries: [{
+			propertyName: "gabaritDOption",
+			first: true,
+			predicate: StOption,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "liste",
+			first: true,
+			predicate: Listbox,
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "champNatif",
+			first: true,
+			predicate: ["champ"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n  [presentation]=\"presentation()\"\n>\n  <div #cadre class=\"st-combobox__cadre\">\n    @if (icone(); as nom) {\n      <st-icon class=\"st-combobox__icone\" [nom]=\"nom\" taille=\"18\" />\n    }\n    <input\n      #champ\n      #combobox=\"ngCombobox\"\n      class=\"st-combobox__champ\"\n      stControleDeChamp\n      ngCombobox\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [(value)]=\"texte\"\n      [(expanded)]=\"ouvert\"\n      [attr.name]=\"name() || null\"\n      [attr.data-effacable]=\"afficherEffacer() ? '' : null\"\n      [attr.data-icone]=\"icone() ? '' : null\"\n      [attr.data-choisi]=\"choixAffiche() ? '' : null\"\n      [attr.aria-busy]=\"chargement() ? 'true' : null\"\n      [disabled]=\"desactive()\"\n      [softDisabled]=\"false\"\n      [readonly]=\"readonly()\"\n      (input)=\"surSaisie($event)\"\n    />\n    <!-- Boutons REELS (APG, VoiceOver iOS, TalkBack) : `tabindex=\"-1\"`, hors tabulation, la\n         fleche bas du clavier ouvre deja la liste depuis le champ. `mousedown.preventDefault`\n         garde le focus dans le champ au clic. -->\n    <div class=\"st-combobox__actions\">\n      @if (afficherEffacer()) {\n        <button\n          class=\"st-combobox__effacer\"\n          stIconButton\n          type=\"button\"\n          tabindex=\"-1\"\n          taille=\"md\"\n          tailleDuGlyphe=\"16\"\n          icone=\"croix\"\n          [etiquette]=\"libelles().effacerLeChoix\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"effacer()\"\n        ></button>\n      }\n      <span class=\"st-combobox__bouton\">\n        <button\n          class=\"st-combobox__ouvrir\"\n          stIconButton\n          type=\"button\"\n          tabindex=\"-1\"\n          taille=\"md\"\n          tailleDuGlyphe=\"20\"\n          icone=\"chevron-bas\"\n          [attr.data-ouvert]=\"ouvert() ? '' : null\"\n          [attr.data-attente]=\"attenteVisible() ? '' : null\"\n          [etiquette]=\"libelles().afficherLesChoix(libelle())\"\n          [attr.aria-expanded]=\"ouvert() ? 'true' : 'false'\"\n          [attr.aria-controls]=\"idListe\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"basculer()\"\n        ></button>\n        <!-- Distant, reponse attendue : l'indicateur PREND LA PLACE du glyphe, sur le bouton qui\n           reste nomme et operant (la liste s'ouvre et se ferme toujours). Decoratif : l'attente\n           se dit par `aria-busy`, puis par l'annonce du nombre de resultats. -->\n        @if (attenteVisible()) {\n          <span class=\"st-combobox__attente\" aria-hidden=\"true\"\n            ><st-spinner taille=\"sm\" ton=\"neutre\"\n          /></span>\n        }\n      </span>\n    </div>\n  </div>\n\n  <!-- ⚠️ La primitive de popup ENVELOPPE la surcouche, et non l'inverse (exemple\n       de la documentation d'Aria). Enfermee dans la surcouche, elle ne\n       s'enregistre qu'a l'ouverture : liste fermee, le champ annonce\n       aria-autocomplete=\"none\" et aucun aria-haspopup, et le lecteur d'ecran\n       ignore qu'une liste existe. -->\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\n    <ng-template\n      [cdkConnectedOverlay]=\"{ origin: cadre, usePopover: 'inline', matchWidth: true }\"\n      [cdkConnectedOverlayOpen]=\"ouvert()\"\n    >\n      <div class=\"st-combobox__popup\">\n        <!-- En attente, une liste vide n'est pas « Aucun resultat » : la reponse n'est pas encore\n             la (une ressource repasse a sa valeur par defaut quand son terme change). -->\n        @if (visibles().length === 0) {\n          @if (tropCourt()) {\n            <p class=\"st-combobox__vide\">{{ libelles().longueurMinimale(longueurMinimale()) }}</p>\n          } @else if (!chargement()) {\n            <p class=\"st-combobox__vide\">{{ libelles().aucunResultat }}</p>\n          } @else if (attenteVisible()) {\n            <p class=\"st-combobox__vide\">{{ libelles().chargementEnCours }}</p>\n          }\n        }\n        <div\n          #liste=\"ngListbox\"\n          [id]=\"idListe\"\n          class=\"st-combobox__liste\"\n          ngListbox\n          ngComboboxWidget\n          focusMode=\"activedescendant\"\n          [tabindex]=\"-1\"\n          [attr.aria-label]=\"libelle()\"\n          [attr.aria-busy]=\"chargement() ? 'true' : null\"\n          [activeDescendant]=\"liste.activeDescendant()\"\n          [(value)]=\"surlignee\"\n          (click)=\"surClic($event)\"\n          (keydown.enter)=\"valider()\"\n        >\n          @for (bloc of blocs(); track bloc.cle; let indiceDuBloc = $index) {\n            @if (bloc.groupe === null) {\n              @for (option of bloc.options; track option.valeur) {\n                <div\n                  class=\"st-combobox__option\"\n                  ngOption\n                  [value]=\"option.valeur\"\n                  [label]=\"affichable(option.libelle)\"\n                  [disabled]=\"option.desactivee === true\"\n                  [attr.aria-label]=\"gabaritDOption() ? null : affichable(option.libelle)\"\n                  [attr.aria-labelledby]=\"\n                    gabaritDOption() ? idDuContenu(indiceDuBloc, $index) : null\n                  \"\n                  [attr.aria-describedby]=\"option.aide ? idDeLAide(indiceDuBloc, $index) : null\"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      contenuDOption;\n                      context: {\n                        $implicit: option,\n                        idAide: idDeLAide(indiceDuBloc, $index),\n                        idContenu: idDuContenu(indiceDuBloc, $index),\n                      }\n                    \"\n                  />\n                  <st-icon class=\"st-combobox__coche\" nom=\"coche\" taille=\"sm\" />\n                </div>\n              }\n            } @else {\n              <div role=\"group\" [attr.aria-labelledby]=\"idDuGroupe(indiceDuBloc)\">\n                <p class=\"st-combobox__groupe\" [id]=\"idDuGroupe(indiceDuBloc)\">\n                  {{ bloc.groupe }}\n                </p>\n                @for (option of bloc.options; track option.valeur) {\n                  <div\n                    class=\"st-combobox__option\"\n                    ngOption\n                    [value]=\"option.valeur\"\n                    [label]=\"affichable(option.libelle)\"\n                    [disabled]=\"option.desactivee === true\"\n                    [attr.aria-label]=\"gabaritDOption() ? null : affichable(option.libelle)\"\n                    [attr.aria-labelledby]=\"\n                      gabaritDOption() ? idDuContenu(indiceDuBloc, $index) : null\n                    \"\n                    [attr.aria-describedby]=\"option.aide ? idDeLAide(indiceDuBloc, $index) : null\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        contenuDOption;\n                        context: {\n                          $implicit: option,\n                          idAide: idDeLAide(indiceDuBloc, $index),\n                          idContenu: idDuContenu(indiceDuBloc, $index),\n                        }\n                      \"\n                    />\n                    <st-icon class=\"st-combobox__coche\" nom=\"coche\" taille=\"sm\" />\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</st-form-field>\n\n<!-- Contenu d'une option. Sans gabarit : le libelle et, dessous, l'aide ; le NOM est le libelle\n     (`aria-label`), l'aide la description. Avec le gabarit `stOption` : le NOM est le texte que le\n     gabarit REND — ce qui se voit est ce qui se lit (WCAG 1.3.1, 2.5.3) — et l'aide reste la\n     description. Le gabarit est rendu DEUX fois : la copie visible est `inert` (un element\n     interactif glisse dedans ne prend jamais le focus : il reste dans le champ,\n     `aria-activedescendant`) ; la copie `hidden` nomme l'option (`aria-labelledby` lit un noeud\n     masque, jamais un noeud inerte : vu au banc Chromium). La marque `choisie` suit la coche :\n     l'option `aria-selected`, celle qu'Entree retiendrait. -->\n<ng-template #contenuDOption let-option let-idAide=\"idAide\" let-idContenu=\"idContenu\">\n  @if (gabaritDOption(); as gabarit) {\n    <span class=\"st-combobox__textes\" inert>\n      <ng-container\n        *ngTemplateOutlet=\"\n          gabarit.gabarit;\n          context: { $implicit: option, choisie: surlignee().includes(option.valeur) }\n        \"\n      />\n    </span>\n    <span [id]=\"idContenu\" hidden>\n      <ng-container\n        *ngTemplateOutlet=\"\n          gabarit.gabarit;\n          context: { $implicit: option, choisie: surlignee().includes(option.valeur) }\n        \"\n      />\n    </span>\n    @if (option.aide) {\n      <span class=\"st-vh\" [id]=\"idAide\">{{ option.aide }}</span>\n    }\n  } @else {\n    <span class=\"st-combobox__textes\">\n      <span class=\"st-combobox__libelle\" dir=\"auto\">{{ affichable(option.libelle) }}</span>\n      @if (option.aide) {\n        <span class=\"st-combobox__aide\" [id]=\"idAide\">{{ option.aide }}</span>\n      }\n    </span>\n  }\n</ng-template>\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-combobox__cadre{--_glyphe: 1.125rem;position:relative}.st-combobox__champ:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-combobox__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-combobox__champ:is(input,select){block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-combobox__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( (var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2 - var(--st-epaisseur-fine) ) ) );padding-block:var(--_remplissage-bloc);padding-inline:var(--st-espacement-3-5);font-family:inherit;font-size:var(--st-taille-sm);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}@media(pointer:coarse){.st-combobox__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( ( var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var( --st-interligne-md ) ) / 2 - var(--st-epaisseur-fine) ) ) );font-size:var(--st-taille-md);line-height:var(--st-interligne-md)}}.st-combobox__champ::placeholder{color:var(--st-couleur-texte-attenue);opacity:1}@media(hover:hover){.st-combobox__champ:hover:not(:disabled,:focus,[aria-invalid=true]){border-color:var(--st-couleur-texte-discret);transition:border-color var(--st-duree-rapide) var(--st-courbe-standard)}}.st-combobox__champ:focus-visible{border-color:var(--st-couleur-primaire)}.st-combobox__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-danger)}.st-combobox__champ[aria-invalid=true]:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus),inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-danger)}.st-combobox__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure)}.st-combobox__champ:disabled::placeholder{color:var(--st-couleur-texte-desactive)}.st-combobox__champ:is(input,textarea):read-only:not(:disabled),.st-combobox__champ[aria-readonly=true]:not(:disabled){font-weight:var(--st-graisse-moyenne);background:var(--st-couleur-surface-enfoncee)}.st-combobox__champ{padding-inline-end:var(--st-cible-tactile-min)}.st-combobox__champ[data-effacable]{padding-inline-end:calc(var(--st-cible-tactile-min) * 2)}.st-combobox__champ[data-icone]{padding-inline-start:calc(var(--st-espacement-3) + var(--_glyphe) + var(--st-espacement-1-5))}.st-combobox__champ[data-choisi]{font-weight:var(--st-graisse-semi)}.st-combobox__icone{position:absolute;inset-block-start:50%;inset-inline-start:var(--st-espacement-3);color:var(--st-couleur-texte-attenue);pointer-events:none;translate:0 -50%}.st-combobox__cadre:has(.st-combobox__champ:disabled) .st-combobox__icone{color:var(--st-couleur-texte-desactive)}.st-combobox__actions{position:absolute;inset-block:0;inset-inline-end:0;display:flex;align-items:center}.st-combobox__effacer,.st-combobox__ouvrir{color:var(--st-couleur-texte-discret)}.st-combobox__bouton{display:grid}.st-combobox__bouton>*{grid-area:1/1}.st-combobox__attente{display:inline-flex;place-self:center;pointer-events:none}.st-combobox__ouvrir[data-attente] ::ng-deep st-icon{visibility:hidden}.st-combobox__ouvrir[data-ouvert]{rotate:180deg}.st-combobox__cadre:has(.st-combobox__champ:disabled) .st-combobox__actions,.st-combobox__cadre:has(.st-combobox__champ:read-only) .st-combobox__actions{display:none}.st-combobox__popup{box-sizing:border-box;inline-size:100%;max-block-size:var(--st-liste-hauteur-max, 18rem);padding-block:var(--st-espacement-1);overflow-y:auto;color:var(--st-couleur-texte);background:var(--st-couleur-surface-elevee);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);box-shadow:var(--st-ombre-surelevee);transition:opacity var(--st-duree-normale) linear,translate var(--st-duree-normale) var(--st-courbe-entrant)}@starting-style{.st-combobox__popup{opacity:0;translate:0 calc(-1 * var(--st-deplacement-court))}}.st-combobox__vide{padding:var(--st-espacement-2) var(--st-espacement-3);margin:0;color:var(--st-couleur-texte-discret)}.st-combobox__groupe{font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-large);padding:var(--st-espacement-2) var(--st-espacement-3) var(--st-espacement-1);margin:0;color:var(--st-couleur-texte-discret)}.st-combobox__option{box-sizing:border-box;display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);margin-inline:var(--st-espacement-1);border-radius:var(--st-rayon-sm);cursor:pointer}@media(hover:hover){.st-combobox__option:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-survol-elevee)}}.st-combobox__option[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}.st-combobox__option[aria-selected=true]{font-weight:var(--st-graisse-semi);background:var(--st-couleur-surface-selection)}.st-combobox__option[data-active=true]{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:calc(-1 * var(--st-focus-epaisseur));background:var(--st-couleur-surface-survol-elevee)}.st-combobox__option:active:not([aria-disabled=true]){background:var(--st-couleur-surface-active)}.st-combobox__textes{display:flex;flex-direction:column;min-inline-size:0}.st-combobox__aide{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);letter-spacing:var(--st-interlettrage-normal);font-weight:var(--st-graisse-normale);color:var(--st-couleur-texte-discret)}[aria-disabled=true] .st-combobox__aide{color:var(--st-couleur-texte-desactive)}.st-combobox__coche{visibility:hidden}[aria-selected=true]>.st-combobox__coche{visibility:visible}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: StFormField,
+				selector: "st-form-field",
+				inputs: [
+					"libelle",
+					"complement",
+					"disposition",
+					"presentation",
+					"libelleMasque",
+					"descriptionsDuControle"
+				]
+			},
+			{
+				kind: "directive",
+				type: StControleDeChamp,
+				selector: "[stControleDeChamp]"
+			},
+			{
+				kind: "component",
+				type: StIcon,
+				selector: "st-icon",
+				inputs: [
+					"icone",
+					"nom",
+					"variante",
+					"sprite",
+					"nomMetier",
+					"taille",
+					"ton",
+					"etiquette",
+					"miroir"
+				]
+			},
+			{
+				kind: "component",
+				type: StIconButton,
+				selector: "button[stIconButton]",
+				inputs: [
+					"icone",
+					"etiquette",
+					"variante",
+					"taille",
+					"tailleDuGlyphe",
+					"enfonce",
+					"iconeEnfoncee",
+					"chargement",
+					"indisponible",
+					"raisonIndisponible"
+				]
+			},
+			{
+				kind: "component",
+				type: StSpinner,
+				selector: "st-spinner",
+				inputs: [
+					"taille",
+					"ton",
+					"etiquette",
+					"icone"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: Combobox,
+				selector: "[ngCombobox]",
+				inputs: [
+					"disabled",
+					"readonly",
+					"softDisabled",
+					"alwaysExpanded",
+					"tabindex",
+					"expanded",
+					"value",
+					"inlineSuggestion"
+				],
+				outputs: ["expandedChange", "valueChange"],
+				exportAs: ["ngCombobox"]
+			},
+			{
+				kind: "directive",
+				type: ComboboxPopup,
+				selector: "ng-template[ngComboboxPopup]",
+				inputs: ["combobox", "popupType"],
+				exportAs: ["ngComboboxPopup"]
+			},
+			{
+				kind: "directive",
+				type: ComboboxWidget,
+				selector: "[ngComboboxWidget]",
+				inputs: ["activeDescendant"],
+				exportAs: ["ngComboboxWidget"]
+			},
+			{
+				kind: "directive",
+				type: Listbox,
+				selector: "[ngListbox]",
+				inputs: [
+					"id",
+					"orientation",
+					"multi",
+					"wrap",
+					"softDisabled",
+					"focusMode",
+					"selectionMode",
+					"typeaheadDelay",
+					"disabled",
+					"readonly",
+					"tabindex",
+					"value"
+				],
+				outputs: ["valueChange"],
+				exportAs: ["ngListbox"]
+			},
+			{
+				kind: "directive",
+				type: Option,
+				selector: "[ngOption]",
+				inputs: [
+					"id",
+					"value",
+					"disabled",
+					"label"
+				],
+				exportAs: ["ngOption"]
+			},
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: StCombobox,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "st-combobox",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				StFormField,
+				StControleDeChamp,
+				StIcon,
+				StIconButton,
+				StSpinner,
+				NgTemplateOutlet,
+				Combobox,
+				ComboboxPopup,
+				ComboboxWidget,
+				Listbox,
+				Option,
+				CdkConnectedOverlay
+			],
+			host: {
+				class: "st-combobox",
+				"(focusout)": "aLaSortie($event)"
+			},
+			template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n  [presentation]=\"presentation()\"\n>\n  <div #cadre class=\"st-combobox__cadre\">\n    @if (icone(); as nom) {\n      <st-icon class=\"st-combobox__icone\" [nom]=\"nom\" taille=\"18\" />\n    }\n    <input\n      #champ\n      #combobox=\"ngCombobox\"\n      class=\"st-combobox__champ\"\n      stControleDeChamp\n      ngCombobox\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [(value)]=\"texte\"\n      [(expanded)]=\"ouvert\"\n      [attr.name]=\"name() || null\"\n      [attr.data-effacable]=\"afficherEffacer() ? '' : null\"\n      [attr.data-icone]=\"icone() ? '' : null\"\n      [attr.data-choisi]=\"choixAffiche() ? '' : null\"\n      [attr.aria-busy]=\"chargement() ? 'true' : null\"\n      [disabled]=\"desactive()\"\n      [softDisabled]=\"false\"\n      [readonly]=\"readonly()\"\n      (input)=\"surSaisie($event)\"\n    />\n    <!-- Boutons REELS (APG, VoiceOver iOS, TalkBack) : `tabindex=\"-1\"`, hors tabulation, la\n         fleche bas du clavier ouvre deja la liste depuis le champ. `mousedown.preventDefault`\n         garde le focus dans le champ au clic. -->\n    <div class=\"st-combobox__actions\">\n      @if (afficherEffacer()) {\n        <button\n          class=\"st-combobox__effacer\"\n          stIconButton\n          type=\"button\"\n          tabindex=\"-1\"\n          taille=\"md\"\n          tailleDuGlyphe=\"16\"\n          icone=\"croix\"\n          [etiquette]=\"libelles().effacerLeChoix\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"effacer()\"\n        ></button>\n      }\n      <span class=\"st-combobox__bouton\">\n        <button\n          class=\"st-combobox__ouvrir\"\n          stIconButton\n          type=\"button\"\n          tabindex=\"-1\"\n          taille=\"md\"\n          tailleDuGlyphe=\"20\"\n          icone=\"chevron-bas\"\n          [attr.data-ouvert]=\"ouvert() ? '' : null\"\n          [attr.data-attente]=\"attenteVisible() ? '' : null\"\n          [etiquette]=\"libelles().afficherLesChoix(libelle())\"\n          [attr.aria-expanded]=\"ouvert() ? 'true' : 'false'\"\n          [attr.aria-controls]=\"idListe\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"basculer()\"\n        ></button>\n        <!-- Distant, reponse attendue : l'indicateur PREND LA PLACE du glyphe, sur le bouton qui\n           reste nomme et operant (la liste s'ouvre et se ferme toujours). Decoratif : l'attente\n           se dit par `aria-busy`, puis par l'annonce du nombre de resultats. -->\n        @if (attenteVisible()) {\n          <span class=\"st-combobox__attente\" aria-hidden=\"true\"\n            ><st-spinner taille=\"sm\" ton=\"neutre\"\n          /></span>\n        }\n      </span>\n    </div>\n  </div>\n\n  <!-- ⚠️ La primitive de popup ENVELOPPE la surcouche, et non l'inverse (exemple\n       de la documentation d'Aria). Enfermee dans la surcouche, elle ne\n       s'enregistre qu'a l'ouverture : liste fermee, le champ annonce\n       aria-autocomplete=\"none\" et aucun aria-haspopup, et le lecteur d'ecran\n       ignore qu'une liste existe. -->\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\n    <ng-template\n      [cdkConnectedOverlay]=\"{ origin: cadre, usePopover: 'inline', matchWidth: true }\"\n      [cdkConnectedOverlayOpen]=\"ouvert()\"\n    >\n      <div class=\"st-combobox__popup\">\n        <!-- En attente, une liste vide n'est pas « Aucun resultat » : la reponse n'est pas encore\n             la (une ressource repasse a sa valeur par defaut quand son terme change). -->\n        @if (visibles().length === 0) {\n          @if (tropCourt()) {\n            <p class=\"st-combobox__vide\">{{ libelles().longueurMinimale(longueurMinimale()) }}</p>\n          } @else if (!chargement()) {\n            <p class=\"st-combobox__vide\">{{ libelles().aucunResultat }}</p>\n          } @else if (attenteVisible()) {\n            <p class=\"st-combobox__vide\">{{ libelles().chargementEnCours }}</p>\n          }\n        }\n        <div\n          #liste=\"ngListbox\"\n          [id]=\"idListe\"\n          class=\"st-combobox__liste\"\n          ngListbox\n          ngComboboxWidget\n          focusMode=\"activedescendant\"\n          [tabindex]=\"-1\"\n          [attr.aria-label]=\"libelle()\"\n          [attr.aria-busy]=\"chargement() ? 'true' : null\"\n          [activeDescendant]=\"liste.activeDescendant()\"\n          [(value)]=\"surlignee\"\n          (click)=\"surClic($event)\"\n          (keydown.enter)=\"valider()\"\n        >\n          @for (bloc of blocs(); track bloc.cle; let indiceDuBloc = $index) {\n            @if (bloc.groupe === null) {\n              @for (option of bloc.options; track option.valeur) {\n                <div\n                  class=\"st-combobox__option\"\n                  ngOption\n                  [value]=\"option.valeur\"\n                  [label]=\"affichable(option.libelle)\"\n                  [disabled]=\"option.desactivee === true\"\n                  [attr.aria-label]=\"gabaritDOption() ? null : affichable(option.libelle)\"\n                  [attr.aria-labelledby]=\"\n                    gabaritDOption() ? idDuContenu(indiceDuBloc, $index) : null\n                  \"\n                  [attr.aria-describedby]=\"option.aide ? idDeLAide(indiceDuBloc, $index) : null\"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      contenuDOption;\n                      context: {\n                        $implicit: option,\n                        idAide: idDeLAide(indiceDuBloc, $index),\n                        idContenu: idDuContenu(indiceDuBloc, $index),\n                      }\n                    \"\n                  />\n                  <st-icon class=\"st-combobox__coche\" nom=\"coche\" taille=\"sm\" />\n                </div>\n              }\n            } @else {\n              <div role=\"group\" [attr.aria-labelledby]=\"idDuGroupe(indiceDuBloc)\">\n                <p class=\"st-combobox__groupe\" [id]=\"idDuGroupe(indiceDuBloc)\">\n                  {{ bloc.groupe }}\n                </p>\n                @for (option of bloc.options; track option.valeur) {\n                  <div\n                    class=\"st-combobox__option\"\n                    ngOption\n                    [value]=\"option.valeur\"\n                    [label]=\"affichable(option.libelle)\"\n                    [disabled]=\"option.desactivee === true\"\n                    [attr.aria-label]=\"gabaritDOption() ? null : affichable(option.libelle)\"\n                    [attr.aria-labelledby]=\"\n                      gabaritDOption() ? idDuContenu(indiceDuBloc, $index) : null\n                    \"\n                    [attr.aria-describedby]=\"option.aide ? idDeLAide(indiceDuBloc, $index) : null\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        contenuDOption;\n                        context: {\n                          $implicit: option,\n                          idAide: idDeLAide(indiceDuBloc, $index),\n                          idContenu: idDuContenu(indiceDuBloc, $index),\n                        }\n                      \"\n                    />\n                    <st-icon class=\"st-combobox__coche\" nom=\"coche\" taille=\"sm\" />\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</st-form-field>\n\n<!-- Contenu d'une option. Sans gabarit : le libelle et, dessous, l'aide ; le NOM est le libelle\n     (`aria-label`), l'aide la description. Avec le gabarit `stOption` : le NOM est le texte que le\n     gabarit REND — ce qui se voit est ce qui se lit (WCAG 1.3.1, 2.5.3) — et l'aide reste la\n     description. Le gabarit est rendu DEUX fois : la copie visible est `inert` (un element\n     interactif glisse dedans ne prend jamais le focus : il reste dans le champ,\n     `aria-activedescendant`) ; la copie `hidden` nomme l'option (`aria-labelledby` lit un noeud\n     masque, jamais un noeud inerte : vu au banc Chromium). La marque `choisie` suit la coche :\n     l'option `aria-selected`, celle qu'Entree retiendrait. -->\n<ng-template #contenuDOption let-option let-idAide=\"idAide\" let-idContenu=\"idContenu\">\n  @if (gabaritDOption(); as gabarit) {\n    <span class=\"st-combobox__textes\" inert>\n      <ng-container\n        *ngTemplateOutlet=\"\n          gabarit.gabarit;\n          context: { $implicit: option, choisie: surlignee().includes(option.valeur) }\n        \"\n      />\n    </span>\n    <span [id]=\"idContenu\" hidden>\n      <ng-container\n        *ngTemplateOutlet=\"\n          gabarit.gabarit;\n          context: { $implicit: option, choisie: surlignee().includes(option.valeur) }\n        \"\n      />\n    </span>\n    @if (option.aide) {\n      <span class=\"st-vh\" [id]=\"idAide\">{{ option.aide }}</span>\n    }\n  } @else {\n    <span class=\"st-combobox__textes\">\n      <span class=\"st-combobox__libelle\" dir=\"auto\">{{ affichable(option.libelle) }}</span>\n      @if (option.aide) {\n        <span class=\"st-combobox__aide\" [id]=\"idAide\">{{ option.aide }}</span>\n      }\n    </span>\n  }\n</ng-template>\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-combobox__cadre{--_glyphe: 1.125rem;position:relative}.st-combobox__champ:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-combobox__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-combobox__champ:is(input,select){block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-combobox__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( (var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2 - var(--st-epaisseur-fine) ) ) );padding-block:var(--_remplissage-bloc);padding-inline:var(--st-espacement-3-5);font-family:inherit;font-size:var(--st-taille-sm);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}@media(pointer:coarse){.st-combobox__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( ( var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var( --st-interligne-md ) ) / 2 - var(--st-epaisseur-fine) ) ) );font-size:var(--st-taille-md);line-height:var(--st-interligne-md)}}.st-combobox__champ::placeholder{color:var(--st-couleur-texte-attenue);opacity:1}@media(hover:hover){.st-combobox__champ:hover:not(:disabled,:focus,[aria-invalid=true]){border-color:var(--st-couleur-texte-discret);transition:border-color var(--st-duree-rapide) var(--st-courbe-standard)}}.st-combobox__champ:focus-visible{border-color:var(--st-couleur-primaire)}.st-combobox__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-danger)}.st-combobox__champ[aria-invalid=true]:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus),inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-danger)}.st-combobox__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure)}.st-combobox__champ:disabled::placeholder{color:var(--st-couleur-texte-desactive)}.st-combobox__champ:is(input,textarea):read-only:not(:disabled),.st-combobox__champ[aria-readonly=true]:not(:disabled){font-weight:var(--st-graisse-moyenne);background:var(--st-couleur-surface-enfoncee)}.st-combobox__champ{padding-inline-end:var(--st-cible-tactile-min)}.st-combobox__champ[data-effacable]{padding-inline-end:calc(var(--st-cible-tactile-min) * 2)}.st-combobox__champ[data-icone]{padding-inline-start:calc(var(--st-espacement-3) + var(--_glyphe) + var(--st-espacement-1-5))}.st-combobox__champ[data-choisi]{font-weight:var(--st-graisse-semi)}.st-combobox__icone{position:absolute;inset-block-start:50%;inset-inline-start:var(--st-espacement-3);color:var(--st-couleur-texte-attenue);pointer-events:none;translate:0 -50%}.st-combobox__cadre:has(.st-combobox__champ:disabled) .st-combobox__icone{color:var(--st-couleur-texte-desactive)}.st-combobox__actions{position:absolute;inset-block:0;inset-inline-end:0;display:flex;align-items:center}.st-combobox__effacer,.st-combobox__ouvrir{color:var(--st-couleur-texte-discret)}.st-combobox__bouton{display:grid}.st-combobox__bouton>*{grid-area:1/1}.st-combobox__attente{display:inline-flex;place-self:center;pointer-events:none}.st-combobox__ouvrir[data-attente] ::ng-deep st-icon{visibility:hidden}.st-combobox__ouvrir[data-ouvert]{rotate:180deg}.st-combobox__cadre:has(.st-combobox__champ:disabled) .st-combobox__actions,.st-combobox__cadre:has(.st-combobox__champ:read-only) .st-combobox__actions{display:none}.st-combobox__popup{box-sizing:border-box;inline-size:100%;max-block-size:var(--st-liste-hauteur-max, 18rem);padding-block:var(--st-espacement-1);overflow-y:auto;color:var(--st-couleur-texte);background:var(--st-couleur-surface-elevee);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);box-shadow:var(--st-ombre-surelevee);transition:opacity var(--st-duree-normale) linear,translate var(--st-duree-normale) var(--st-courbe-entrant)}@starting-style{.st-combobox__popup{opacity:0;translate:0 calc(-1 * var(--st-deplacement-court))}}.st-combobox__vide{padding:var(--st-espacement-2) var(--st-espacement-3);margin:0;color:var(--st-couleur-texte-discret)}.st-combobox__groupe{font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-large);padding:var(--st-espacement-2) var(--st-espacement-3) var(--st-espacement-1);margin:0;color:var(--st-couleur-texte-discret)}.st-combobox__option{box-sizing:border-box;display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);margin-inline:var(--st-espacement-1);border-radius:var(--st-rayon-sm);cursor:pointer}@media(hover:hover){.st-combobox__option:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-survol-elevee)}}.st-combobox__option[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}.st-combobox__option[aria-selected=true]{font-weight:var(--st-graisse-semi);background:var(--st-couleur-surface-selection)}.st-combobox__option[data-active=true]{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:calc(-1 * var(--st-focus-epaisseur));background:var(--st-couleur-surface-survol-elevee)}.st-combobox__option:active:not([aria-disabled=true]){background:var(--st-couleur-surface-active)}.st-combobox__textes{display:flex;flex-direction:column;min-inline-size:0}.st-combobox__aide{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);letter-spacing:var(--st-interlettrage-normal);font-weight:var(--st-graisse-normale);color:var(--st-couleur-texte-discret)}[aria-disabled=true] .st-combobox__aide{color:var(--st-couleur-texte-desactive)}.st-combobox__coche{visibility:hidden}[aria-selected=true]>.st-combobox__coche{visibility:visible}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		filtrage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filtrage",
+				required: false
+			}]
+		}],
+		icone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icone",
+				required: false
+			}]
+		}],
+		presentation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "presentation",
+				required: false
+			}]
+		}],
+		chargement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "chargement",
+				required: false
+			}]
+		}],
+		effacable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "effacable",
+				required: false
+			}]
+		}],
+		temporisationEnMs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "temporisationEnMs",
+				required: false
+			}]
+		}],
+		longueurMinimale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "longueurMinimale",
+				required: false
+			}]
+		}],
+		recherche: [{
+			type: i0.Output,
+			args: ["recherche"]
+		}],
+		gabaritDOption: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StOption), { isSignal: true }]
+		}],
+		liste: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => Listbox), { isSignal: true }]
+		}],
+		champNatif: [{
+			type: i0.ViewChild,
+			args: ["champ", { isSignal: true }]
+		}]
+	}
+});
+var StMultiselect = class StMultiselect extends ContratDeChamp {
+	affichable = sansCommandesDeDirection;
+	libelles = inject(ST_LIBELLES);
+	locale = inject(ST_LOCALE);
+	element = inject(ElementRef);
+	injecteur = inject(Injector);
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : 	/* istanbul ignore next */ []);
+	modeDeResume = input("auto", ...ngDevMode ? [{ debugName: "modeDeResume" }] : 	/* istanbul ignore next */ []);
+	toutRetirer = input(true, {
+		...ngDevMode ? { debugName: "toutRetirer" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	puces = input(true, {
+		...ngDevMode ? { debugName: "puces" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	annonce = new AnnonceLocale(inject(DestroyRef));
+	ouvert = signal(false, ...ngDevMode ? [{ debugName: "ouvert" }] : 	/* istanbul ignore next */ []);
+	liste = viewChild(Listbox, ...ngDevMode ? [{ debugName: "liste" }] : 	/* istanbul ignore next */ []);
+	idListe = inject(StIdentifiants).prochain("st-multiselect-liste");
+	valeursDeListe = computed(() => [...this.value()], ...ngDevMode ? [{ debugName: "valeursDeListe" }] : 	/* istanbul ignore next */ []);
+	choisies = computed(() => {
+		const valeurs = new Set(this.value());
+		return this.options().filter((option) => valeurs.has(option.valeur));
+	}, ...ngDevMode ? [{ debugName: "choisies" }] : 	/* istanbul ignore next */ []);
+	blocs = computed(() => groupesDOptions(this.options()), ...ngDevMode ? [{ debugName: "blocs" }] : 	/* istanbul ignore next */ []);
+	resume = computed(() => {
+		const choisies = this.choisies();
+		const libelles = this.libelles();
+		if (choisies.length === 0) return [{
+			texte: libelles.choisir,
+			libelle: false
+		}];
+		const mode = this.modeDeResume();
+		if (mode === "nombre" || mode === "auto" && choisies.length > 3) return [{
+			texte: libelles.nombreDeSelections(choisies.length),
+			libelle: false
+		}];
+		return new Intl.ListFormat(this.locale(), { type: "conjunction" }).formatToParts(choisies.map((option) => sansCommandesDeDirection(option.libelle))).map((partie) => ({
+			texte: partie.value,
+			libelle: partie.type === "element"
+		}));
+	}, ...ngDevMode ? [{ debugName: "resume" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		super();
+		afterRenderEffect(() => {
+			if (this.ouvert()) this.liste()?.scrollActiveItemIntoView({ block: "nearest" });
+		});
+	}
+	focus(options) {
+		this.element.nativeElement.querySelector("[ngCombobox]")?.focus(options);
+	}
+	surChoix(valeurs) {
+		if (this.readonly()) return;
+		const precedentes = new Set(this.value());
+		const suivantes = new Set(valeurs);
+		const ajoutee = valeurs.find((valeur) => !precedentes.has(valeur));
+		const retiree = this.value().find((valeur) => !suivantes.has(valeur));
+		const bascule = ajoutee ?? retiree;
+		const retenues = this.options().filter((option) => suivantes.has(option.valeur)).map((option) => option.valeur);
+		this.value.set(retenues);
+		if (bascule === void 0) return;
+		const option = this.options().find((candidate) => candidate.valeur === bascule);
+		if (option === void 0) return;
+		this.annonce.annoncer(this.libelles().choixBascule(sansCommandesDeDirection(option.libelle), ajoutee !== void 0, retenues.length));
+	}
+	retirer(valeur, indice) {
+		const restantes = this.value().filter((choisie) => choisie !== valeur);
+		this.value.set(restantes);
+		this.annonce.annoncer(this.libelles().nombreDeSelections(restantes.length));
+		afterNextRender(() => {
+			const boutons = this.element.nativeElement.querySelectorAll(".st-multiselect__retrait");
+			const suivant = boutons[Math.min(indice, boutons.length - 1)];
+			if (suivant !== void 0) suivant.focus();
+			else this.focus();
+		}, { injector: this.injecteur });
+	}
+	retirerTout() {
+		this.value.set([]);
+		this.annonce.annoncer(this.libelles().nombreDeSelections(0));
+		this.focus();
+	}
+	aLaSortie(evenement) {
+		const suivant = evenement.relatedTarget;
+		if (suivant !== null && this.element.nativeElement.contains(suivant)) return;
+		this.touch.emit();
+	}
+	idDuGroupe(indice) {
+		return `${this.idListe}-groupe-${indice.toString()}`;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: StMultiselect,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: StMultiselect,
+		isStandalone: true,
+		selector: "st-multiselect",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			modeDeResume: {
+				classPropertyName: "modeDeResume",
+				publicName: "modeDeResume",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			toutRetirer: {
+				classPropertyName: "toutRetirer",
+				publicName: "toutRetirer",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			puces: {
+				classPropertyName: "puces",
+				publicName: "puces",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: {
+			listeners: { "focusout": "aLaSortie($event)" },
+			classAttribute: "st-multiselect"
+		},
+		viewQueries: [{
+			propertyName: "liste",
+			first: true,
+			predicate: Listbox,
+			descendants: true,
+			isSignal: true
+		}],
+		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\n    #combobox=\"ngCombobox\"\n    class=\"st-multiselect__declencheur\"\n    stControleDeChamp\n    ngCombobox\n    [attr.data-vide]=\"choisies().length === 0 ? '' : null\"\n    [attr.data-readonly]=\"readonly() ? '' : null\"\n    [(expanded)]=\"ouvert\"\n    [disabled]=\"desactive()\"\n    [softDisabled]=\"false\"\n    [readonly]=\"readonly()\"\n  >\n    <!-- Chaque libelle isole (`dir=\"auto\"`), la liste dans la forme de la langue (D-5, D-28) ;\n         chaque texte dans son element : aucun blanc de mise en page ne s'y glisse. -->\n    <span class=\"st-multiselect__resume\">\n      @for (morceau of resume(); track $index) {\n        @if (morceau.libelle) {\n          <span dir=\"auto\">{{ morceau.texte }}</span>\n        } @else {\n          <span>{{ morceau.texte }}</span>\n        }\n      }\n    </span>\n    @if (!readonly()) {\n      <st-icon class=\"st-multiselect__chevron\" nom=\"chevron-bas\" taille=\"sm\" />\n    }\n  </div>\n\n  <!-- ⚠️ La primitive de popup ENVELOPPE la surcouche, et non l'inverse (exemple\n       de la documentation d'Aria). Enfermee dans la surcouche, elle ne\n       s'enregistre qu'a l'ouverture : liste fermee, le champ annonce\n       aria-autocomplete=\"none\" et aucun aria-haspopup, et le lecteur d'ecran\n       ignore qu'une liste existe. -->\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\n    <ng-template\n      [cdkConnectedOverlay]=\"{ origin: combobox.element, usePopover: 'inline', matchWidth: true }\"\n      [cdkConnectedOverlayOpen]=\"ouvert()\"\n    >\n      <div class=\"st-multiselect__popup\">\n        <div\n          #liste=\"ngListbox\"\n          [id]=\"idListe\"\n          class=\"st-multiselect__liste\"\n          ngListbox\n          ngComboboxWidget\n          focusMode=\"activedescendant\"\n          selectionMode=\"explicit\"\n          [multi]=\"true\"\n          [tabindex]=\"-1\"\n          [attr.aria-label]=\"libelle()\"\n          [activeDescendant]=\"liste.activeDescendant()\"\n          [value]=\"valeursDeListe()\"\n          (valueChange)=\"surChoix($event)\"\n        >\n          @for (bloc of blocs(); track bloc.cle; let indiceDuBloc = $index) {\n            @if (bloc.groupe === null) {\n              @for (option of bloc.options; track option.valeur) {\n                <div\n                  class=\"st-multiselect__option\"\n                  ngOption\n                  [value]=\"option.valeur\"\n                  [label]=\"affichable(option.libelle)\"\n                  [disabled]=\"option.desactivee === true\"\n                >\n                  <span class=\"st-multiselect__case\" aria-hidden=\"true\">\n                    <st-icon class=\"st-multiselect__coche\" nom=\"coche\" taille=\"xs\" />\n                  </span>\n                  <span dir=\"auto\">{{ affichable(option.libelle) }}</span>\n                </div>\n              }\n            } @else {\n              <div role=\"group\" [attr.aria-labelledby]=\"idDuGroupe(indiceDuBloc)\">\n                <p class=\"st-multiselect__groupe\" [id]=\"idDuGroupe(indiceDuBloc)\">\n                  {{ bloc.groupe }}\n                </p>\n                @for (option of bloc.options; track option.valeur) {\n                  <div\n                    class=\"st-multiselect__option\"\n                    ngOption\n                    [value]=\"option.valeur\"\n                    [label]=\"affichable(option.libelle)\"\n                    [disabled]=\"option.desactivee === true\"\n                  >\n                    <span class=\"st-multiselect__case\" aria-hidden=\"true\">\n                      <st-icon class=\"st-multiselect__coche\" nom=\"coche\" taille=\"xs\" />\n                    </span>\n                    <span dir=\"auto\">{{ affichable(option.libelle) }}</span>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  @if (puces() && choisies().length > 0) {\n    <!-- `role=\"list\"` : sans puces, Safari ne lit plus une liste comme une liste (D-1). -->\n    <ul class=\"st-multiselect__choix\" role=\"list\" [attr.aria-label]=\"libelles().choixRetenus\">\n      @for (option of choisies(); track option.valeur; let indice = $index) {\n        <li class=\"st-multiselect__puce\">\n          <span dir=\"auto\">{{ affichable(option.libelle) }}</span>\n          @if (!readonly()) {\n            <button\n              class=\"st-multiselect__retrait\"\n              stIconButton\n              type=\"button\"\n              icone=\"croix\"\n              taille=\"sm\"\n              [etiquette]=\"libelles().retirerLeChoix(affichable(option.libelle))\"\n              [disabled]=\"desactive()\"\n              (click)=\"retirer(option.valeur, indice)\"\n            ></button>\n          }\n        </li>\n      }\n    </ul>\n    @if (toutRetirer() && choisies().length > 1 && !readonly()) {\n      <button\n        class=\"st-multiselect__tout-retirer\"\n        stButton\n        type=\"button\"\n        variante=\"discret\"\n        [disabled]=\"desactive()\"\n        (click)=\"retirerTout()\"\n      >\n        {{ libelles().toutRetirer }}\n      </button>\n    }\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-multiselect__declencheur:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-multiselect__declencheur{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-multiselect__declencheur:is(input,select){block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-multiselect__declencheur{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( (var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2 - var(--st-epaisseur-fine) ) ) );padding-block:var(--_remplissage-bloc);padding-inline:var(--st-espacement-3-5);font-family:inherit;font-size:var(--st-taille-sm);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}@media(pointer:coarse){.st-multiselect__declencheur{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( ( var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var( --st-interligne-md ) ) / 2 - var(--st-epaisseur-fine) ) ) );font-size:var(--st-taille-md);line-height:var(--st-interligne-md)}}.st-multiselect__declencheur::placeholder{color:var(--st-couleur-texte-attenue);opacity:1}@media(hover:hover){.st-multiselect__declencheur:hover:not(:disabled,:focus,[aria-invalid=true]){border-color:var(--st-couleur-texte-discret);transition:border-color var(--st-duree-rapide) var(--st-courbe-standard)}}.st-multiselect__declencheur:focus-visible{border-color:var(--st-couleur-primaire)}.st-multiselect__declencheur[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-danger)}.st-multiselect__declencheur[aria-invalid=true]:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus),inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-danger)}.st-multiselect__declencheur:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure)}.st-multiselect__declencheur:disabled::placeholder{color:var(--st-couleur-texte-desactive)}.st-multiselect__declencheur:is(input,textarea):read-only:not(:disabled),.st-multiselect__declencheur[aria-readonly=true]:not(:disabled){font-weight:var(--st-graisse-moyenne);background:var(--st-couleur-surface-enfoncee)}.st-multiselect__declencheur{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;cursor:pointer}.st-multiselect__declencheur[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-multiselect__declencheur[data-readonly]{cursor:default;background:var(--st-couleur-surface-enfoncee)}.st-multiselect__resume{min-inline-size:0;overflow-wrap:break-word}[data-vide]>.st-multiselect__resume{color:var(--st-couleur-texte-discret)}.st-multiselect__chevron{flex:none;color:var(--st-couleur-texte-discret)}.st-multiselect__popup{box-sizing:border-box;inline-size:100%;max-block-size:var(--st-liste-hauteur-max, 18rem);padding-block:var(--st-espacement-1);overflow-y:auto;color:var(--st-couleur-texte);background:var(--st-couleur-surface-elevee);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);box-shadow:var(--st-ombre-surelevee);transition:opacity var(--st-duree-normale) linear,translate var(--st-duree-normale) var(--st-courbe-entrant)}@starting-style{.st-multiselect__popup{opacity:0;translate:0 calc(-1 * var(--st-deplacement-court))}}.st-multiselect__groupe{font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-large);padding:var(--st-espacement-2) var(--st-espacement-3) var(--st-espacement-1);margin:0;color:var(--st-couleur-texte-discret)}.st-multiselect__option{box-sizing:border-box;display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);margin-inline:var(--st-espacement-1);border-radius:var(--st-rayon-sm);cursor:pointer}@media(hover:hover){.st-multiselect__option:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-survol-elevee)}}.st-multiselect__option[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}.st-multiselect__option[aria-selected=true]{font-weight:var(--st-graisse-semi);background:var(--st-couleur-surface-selection)}.st-multiselect__option[data-active=true]{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:calc(-1 * var(--st-focus-epaisseur));background:var(--st-couleur-surface-survol-elevee)}.st-multiselect__option:active:not([aria-disabled=true]){background:var(--st-couleur-surface-active)}.st-multiselect__option{justify-content:flex-start}.st-multiselect__option[aria-selected=true]:not([data-active=true]){background:transparent}.st-multiselect__case{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:var(--st-cible-min);block-size:var(--st-cible-min);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-xs)}.st-multiselect__coche{visibility:hidden}[aria-selected=true]>.st-multiselect__case{background:var(--st-couleur-primaire);border-color:var(--st-couleur-primaire)}[aria-selected=true] .st-multiselect__coche{visibility:visible}.st-multiselect__choix{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);padding:0;margin:var(--st-espacement-2) 0 0;list-style:none}.st-multiselect__puce{display:inline-flex;gap:var(--st-espacement-1);align-items:center;padding-inline-start:var(--st-espacement-3);background:var(--st-couleur-surface-enfoncee);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine)}.st-multiselect__tout-retirer{margin-block-start:var(--st-espacement-2)}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: StFormField,
+				selector: "st-form-field",
+				inputs: [
+					"libelle",
+					"complement",
+					"disposition",
+					"presentation",
+					"libelleMasque",
+					"descriptionsDuControle"
+				]
+			},
+			{
+				kind: "directive",
+				type: StControleDeChamp,
+				selector: "[stControleDeChamp]"
+			},
+			{
+				kind: "component",
+				type: StButton,
+				selector: "button[stButton]",
+				inputs: [
+					"variante",
+					"taille",
+					"pleineLargeur",
+					"iconeAvant",
+					"iconeApres",
+					"chargement",
+					"indisponible",
+					"raisonIndisponible"
+				]
+			},
+			{
+				kind: "component",
+				type: StIcon,
+				selector: "st-icon",
+				inputs: [
+					"icone",
+					"nom",
+					"variante",
+					"sprite",
+					"nomMetier",
+					"taille",
+					"ton",
+					"etiquette",
+					"miroir"
+				]
+			},
+			{
+				kind: "component",
+				type: StIconButton,
+				selector: "button[stIconButton]",
+				inputs: [
+					"icone",
+					"etiquette",
+					"variante",
+					"taille",
+					"tailleDuGlyphe",
+					"enfonce",
+					"iconeEnfoncee",
+					"chargement",
+					"indisponible",
+					"raisonIndisponible"
+				]
+			},
+			{
+				kind: "directive",
+				type: Combobox,
+				selector: "[ngCombobox]",
+				inputs: [
+					"disabled",
+					"readonly",
+					"softDisabled",
+					"alwaysExpanded",
+					"tabindex",
+					"expanded",
+					"value",
+					"inlineSuggestion"
+				],
+				outputs: ["expandedChange", "valueChange"],
+				exportAs: ["ngCombobox"]
+			},
+			{
+				kind: "directive",
+				type: ComboboxPopup,
+				selector: "ng-template[ngComboboxPopup]",
+				inputs: ["combobox", "popupType"],
+				exportAs: ["ngComboboxPopup"]
+			},
+			{
+				kind: "directive",
+				type: ComboboxWidget,
+				selector: "[ngComboboxWidget]",
+				inputs: ["activeDescendant"],
+				exportAs: ["ngComboboxWidget"]
+			},
+			{
+				kind: "directive",
+				type: Listbox,
+				selector: "[ngListbox]",
+				inputs: [
+					"id",
+					"orientation",
+					"multi",
+					"wrap",
+					"softDisabled",
+					"focusMode",
+					"selectionMode",
+					"typeaheadDelay",
+					"disabled",
+					"readonly",
+					"tabindex",
+					"value"
+				],
+				outputs: ["valueChange"],
+				exportAs: ["ngListbox"]
+			},
+			{
+				kind: "directive",
+				type: Option,
+				selector: "[ngOption]",
+				inputs: [
+					"id",
+					"value",
+					"disabled",
+					"label"
+				],
+				exportAs: ["ngOption"]
+			},
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: StMultiselect,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "st-multiselect",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				StFormField,
+				StControleDeChamp,
+				StButton,
+				StIcon,
+				StIconButton,
+				Combobox,
+				ComboboxPopup,
+				ComboboxWidget,
+				Listbox,
+				Option,
+				CdkConnectedOverlay
+			],
+			host: {
+				class: "st-multiselect",
+				"(focusout)": "aLaSortie($event)"
+			},
+			template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <div\n    #combobox=\"ngCombobox\"\n    class=\"st-multiselect__declencheur\"\n    stControleDeChamp\n    ngCombobox\n    [attr.data-vide]=\"choisies().length === 0 ? '' : null\"\n    [attr.data-readonly]=\"readonly() ? '' : null\"\n    [(expanded)]=\"ouvert\"\n    [disabled]=\"desactive()\"\n    [softDisabled]=\"false\"\n    [readonly]=\"readonly()\"\n  >\n    <!-- Chaque libelle isole (`dir=\"auto\"`), la liste dans la forme de la langue (D-5, D-28) ;\n         chaque texte dans son element : aucun blanc de mise en page ne s'y glisse. -->\n    <span class=\"st-multiselect__resume\">\n      @for (morceau of resume(); track $index) {\n        @if (morceau.libelle) {\n          <span dir=\"auto\">{{ morceau.texte }}</span>\n        } @else {\n          <span>{{ morceau.texte }}</span>\n        }\n      }\n    </span>\n    @if (!readonly()) {\n      <st-icon class=\"st-multiselect__chevron\" nom=\"chevron-bas\" taille=\"sm\" />\n    }\n  </div>\n\n  <!-- ⚠️ La primitive de popup ENVELOPPE la surcouche, et non l'inverse (exemple\n       de la documentation d'Aria). Enfermee dans la surcouche, elle ne\n       s'enregistre qu'a l'ouverture : liste fermee, le champ annonce\n       aria-autocomplete=\"none\" et aucun aria-haspopup, et le lecteur d'ecran\n       ignore qu'une liste existe. -->\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\n    <ng-template\n      [cdkConnectedOverlay]=\"{ origin: combobox.element, usePopover: 'inline', matchWidth: true }\"\n      [cdkConnectedOverlayOpen]=\"ouvert()\"\n    >\n      <div class=\"st-multiselect__popup\">\n        <div\n          #liste=\"ngListbox\"\n          [id]=\"idListe\"\n          class=\"st-multiselect__liste\"\n          ngListbox\n          ngComboboxWidget\n          focusMode=\"activedescendant\"\n          selectionMode=\"explicit\"\n          [multi]=\"true\"\n          [tabindex]=\"-1\"\n          [attr.aria-label]=\"libelle()\"\n          [activeDescendant]=\"liste.activeDescendant()\"\n          [value]=\"valeursDeListe()\"\n          (valueChange)=\"surChoix($event)\"\n        >\n          @for (bloc of blocs(); track bloc.cle; let indiceDuBloc = $index) {\n            @if (bloc.groupe === null) {\n              @for (option of bloc.options; track option.valeur) {\n                <div\n                  class=\"st-multiselect__option\"\n                  ngOption\n                  [value]=\"option.valeur\"\n                  [label]=\"affichable(option.libelle)\"\n                  [disabled]=\"option.desactivee === true\"\n                >\n                  <span class=\"st-multiselect__case\" aria-hidden=\"true\">\n                    <st-icon class=\"st-multiselect__coche\" nom=\"coche\" taille=\"xs\" />\n                  </span>\n                  <span dir=\"auto\">{{ affichable(option.libelle) }}</span>\n                </div>\n              }\n            } @else {\n              <div role=\"group\" [attr.aria-labelledby]=\"idDuGroupe(indiceDuBloc)\">\n                <p class=\"st-multiselect__groupe\" [id]=\"idDuGroupe(indiceDuBloc)\">\n                  {{ bloc.groupe }}\n                </p>\n                @for (option of bloc.options; track option.valeur) {\n                  <div\n                    class=\"st-multiselect__option\"\n                    ngOption\n                    [value]=\"option.valeur\"\n                    [label]=\"affichable(option.libelle)\"\n                    [disabled]=\"option.desactivee === true\"\n                  >\n                    <span class=\"st-multiselect__case\" aria-hidden=\"true\">\n                      <st-icon class=\"st-multiselect__coche\" nom=\"coche\" taille=\"xs\" />\n                    </span>\n                    <span dir=\"auto\">{{ affichable(option.libelle) }}</span>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  @if (puces() && choisies().length > 0) {\n    <!-- `role=\"list\"` : sans puces, Safari ne lit plus une liste comme une liste (D-1). -->\n    <ul class=\"st-multiselect__choix\" role=\"list\" [attr.aria-label]=\"libelles().choixRetenus\">\n      @for (option of choisies(); track option.valeur; let indice = $index) {\n        <li class=\"st-multiselect__puce\">\n          <span dir=\"auto\">{{ affichable(option.libelle) }}</span>\n          @if (!readonly()) {\n            <button\n              class=\"st-multiselect__retrait\"\n              stIconButton\n              type=\"button\"\n              icone=\"croix\"\n              taille=\"sm\"\n              [etiquette]=\"libelles().retirerLeChoix(affichable(option.libelle))\"\n              [disabled]=\"desactive()\"\n              (click)=\"retirer(option.valeur, indice)\"\n            ></button>\n          }\n        </li>\n      }\n    </ul>\n    @if (toutRetirer() && choisies().length > 1 && !readonly()) {\n      <button\n        class=\"st-multiselect__tout-retirer\"\n        stButton\n        type=\"button\"\n        variante=\"discret\"\n        [disabled]=\"desactive()\"\n        (click)=\"retirerTout()\"\n      >\n        {{ libelles().toutRetirer }}\n      </button>\n    }\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-multiselect__declencheur:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-multiselect__declencheur{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-multiselect__declencheur:is(input,select){block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-multiselect__declencheur{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( (var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2 - var(--st-epaisseur-fine) ) ) );padding-block:var(--_remplissage-bloc);padding-inline:var(--st-espacement-3-5);font-family:inherit;font-size:var(--st-taille-sm);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}@media(pointer:coarse){.st-multiselect__declencheur{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( ( var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var( --st-interligne-md ) ) / 2 - var(--st-epaisseur-fine) ) ) );font-size:var(--st-taille-md);line-height:var(--st-interligne-md)}}.st-multiselect__declencheur::placeholder{color:var(--st-couleur-texte-attenue);opacity:1}@media(hover:hover){.st-multiselect__declencheur:hover:not(:disabled,:focus,[aria-invalid=true]){border-color:var(--st-couleur-texte-discret);transition:border-color var(--st-duree-rapide) var(--st-courbe-standard)}}.st-multiselect__declencheur:focus-visible{border-color:var(--st-couleur-primaire)}.st-multiselect__declencheur[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-danger)}.st-multiselect__declencheur[aria-invalid=true]:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus),inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-danger)}.st-multiselect__declencheur:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure)}.st-multiselect__declencheur:disabled::placeholder{color:var(--st-couleur-texte-desactive)}.st-multiselect__declencheur:is(input,textarea):read-only:not(:disabled),.st-multiselect__declencheur[aria-readonly=true]:not(:disabled){font-weight:var(--st-graisse-moyenne);background:var(--st-couleur-surface-enfoncee)}.st-multiselect__declencheur{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;cursor:pointer}.st-multiselect__declencheur[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-multiselect__declencheur[data-readonly]{cursor:default;background:var(--st-couleur-surface-enfoncee)}.st-multiselect__resume{min-inline-size:0;overflow-wrap:break-word}[data-vide]>.st-multiselect__resume{color:var(--st-couleur-texte-discret)}.st-multiselect__chevron{flex:none;color:var(--st-couleur-texte-discret)}.st-multiselect__popup{box-sizing:border-box;inline-size:100%;max-block-size:var(--st-liste-hauteur-max, 18rem);padding-block:var(--st-espacement-1);overflow-y:auto;color:var(--st-couleur-texte);background:var(--st-couleur-surface-elevee);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);box-shadow:var(--st-ombre-surelevee);transition:opacity var(--st-duree-normale) linear,translate var(--st-duree-normale) var(--st-courbe-entrant)}@starting-style{.st-multiselect__popup{opacity:0;translate:0 calc(-1 * var(--st-deplacement-court))}}.st-multiselect__groupe{font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-large);padding:var(--st-espacement-2) var(--st-espacement-3) var(--st-espacement-1);margin:0;color:var(--st-couleur-texte-discret)}.st-multiselect__option{box-sizing:border-box;display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);margin-inline:var(--st-espacement-1);border-radius:var(--st-rayon-sm);cursor:pointer}@media(hover:hover){.st-multiselect__option:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-survol-elevee)}}.st-multiselect__option[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}.st-multiselect__option[aria-selected=true]{font-weight:var(--st-graisse-semi);background:var(--st-couleur-surface-selection)}.st-multiselect__option[data-active=true]{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:calc(-1 * var(--st-focus-epaisseur));background:var(--st-couleur-surface-survol-elevee)}.st-multiselect__option:active:not([aria-disabled=true]){background:var(--st-couleur-surface-active)}.st-multiselect__option{justify-content:flex-start}.st-multiselect__option[aria-selected=true]:not([data-active=true]){background:transparent}.st-multiselect__case{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:var(--st-cible-min);block-size:var(--st-cible-min);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-xs)}.st-multiselect__coche{visibility:hidden}[aria-selected=true]>.st-multiselect__case{background:var(--st-couleur-primaire);border-color:var(--st-couleur-primaire)}[aria-selected=true] .st-multiselect__coche{visibility:visible}.st-multiselect__choix{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);padding:0;margin:var(--st-espacement-2) 0 0;list-style:none}.st-multiselect__puce{display:inline-flex;gap:var(--st-espacement-1);align-items:center;padding-inline-start:var(--st-espacement-3);background:var(--st-couleur-surface-enfoncee);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine)}.st-multiselect__tout-retirer{margin-block-start:var(--st-espacement-2)}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		modeDeResume: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "modeDeResume",
+				required: false
+			}]
+		}],
+		toutRetirer: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toutRetirer",
+				required: false
+			}]
+		}],
+		puces: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "puces",
+				required: false
+			}]
+		}],
+		liste: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => Listbox), { isSignal: true }]
+		}]
+	}
+});
+const MINIMUM = 3;
+const LIMITE = 5;
+var StAddressSearch = class StAddressSearch {
+	source = inject(ST_RECHERCHE_D_ADRESSES);
+	champ = inject(ST_CHAMP_D_ADRESSE, { optional: true });
+	libelles = inject(ST_LIBELLES);
+	locale = inject(ST_LOCALE);
+	minimum = MINIMUM;
+	active = this.source !== null && this.champ !== null;
+	attribution = this.source?.attribution ?? null;
+	terme = signal("", ...ngDevMode ? [{ debugName: "terme" }] : 	/* istanbul ignore next */ []);
+	choix = signal("", ...ngDevMode ? [{ debugName: "choix" }] : 	/* istanbul ignore next */ []);
+	inactive = computed(() => !(this.champ?.modifiable() ?? false), ...ngDevMode ? [{ debugName: "inactive" }] : 	/* istanbul ignore next */ []);
+	demande = computed(() => {
+		const texte = this.terme().trim();
+		if (!this.active || texte.length < MINIMUM) return void 0;
+		const pays = this.champ?.pays() ?? "";
+		return {
+			texte,
+			pays: pays === "" ? null : pays,
+			langue: this.locale(),
+			limite: LIMITE
+		};
+	}, ...ngDevMode ? [{ debugName: "demande" }] : 	/* istanbul ignore next */ []);
+	suggestions = resource({
+		...ngDevMode ? { debugName: "suggestions" } : 		/* istanbul ignore next */ {},
+		params: () => this.demande(),
+		loader: ({ params, abortSignal }) => this.source === null ? Promise.resolve([]) : this.source.suggerer(params, abortSignal)
+	});
+	servies = computed(() => this.suggestions.hasValue() ? this.suggestions.value() : [], ...ngDevMode ? [{ debugName: "servies" }] : 	/* istanbul ignore next */ []);
+	options = computed(() => this.servies().map((suggestion) => suggestion.precision === null || suggestion.precision === "" ? {
+		valeur: suggestion.id,
+		libelle: suggestion.libelle
+	} : {
+		valeur: suggestion.id,
+		libelle: suggestion.libelle,
+		aide: suggestion.precision
+	}), ...ngDevMode ? [{ debugName: "options" }] : 	/* istanbul ignore next */ []);
+	indisponible = signal(false, ...ngDevMode ? [{ debugName: "indisponible" }] : 	/* istanbul ignore next */ []);
+	arret = new AbortController();
+	constructor() {
+		inject(DestroyRef).onDestroy(() => {
+			this.arret.abort();
+		});
+		if (isDevMode() && this.champ === null) console.error("[st-address-search] a placer dans st-address-fieldset : rien ne sera rendu.");
+		effect(() => {
+			const enPanne = this.suggestions.status() === "error";
+			if (enPanne === untracked(this.indisponible)) return;
+			this.indisponible.set(enPanne);
+			if (enPanne) this.champ?.annoncer(untracked(this.libelles).rechercheDAdresseIndisponible);
+		});
+	}
+	async choisir(id) {
+		this.choix.set(id);
+		const suggestion = this.servies().find((une) => une.id === id);
+		if (suggestion === void 0 || this.source === null || this.champ === null) return;
+		try {
+			const adresse = suggestion.adresse ?? await this.source.detailler(suggestion, this.arret.signal);
+			this.indisponible.set(false);
+			this.champ.remplir(adresse);
+			this.champ.annoncer(this.libelles().adresseReportee);
+		} catch {
+			if (this.arret.signal.aborted) return;
+			this.indisponible.set(true);
+			this.champ.annoncer(this.libelles().rechercheDAdresseIndisponible);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: StAddressSearch,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: StAddressSearch,
+		isStandalone: true,
+		selector: "st-address-search",
+		host: { classAttribute: "st-address-search" },
+		ngImport: i0,
+		template: "@if (active) {\n  <st-combobox\n    [libelle]=\"libelles().rechercherUneAdresse\"\n    [aide]=\"libelles().aideRechercheDAdresse(minimum)\"\n    filtrage=\"distant\"\n    icone=\"recherche\"\n    [longueurMinimale]=\"minimum\"\n    [options]=\"options()\"\n    [chargement]=\"suggestions.isLoading()\"\n    [disabled]=\"inactive()\"\n    [value]=\"choix()\"\n    (valueChange)=\"choisir($event)\"\n    (recherche)=\"terme.set($event)\"\n  />\n  @if (indisponible()) {\n    <st-inline-message class=\"st-address-search__panne\" ton=\"avertissement\">{{\n      libelles().rechercheDAdresseIndisponible\n    }}</st-inline-message>\n  }\n  @if (attribution; as source) {\n    <p class=\"st-address-search__attribution\">\n      @if (source.lien; as lien) {\n        <a stLink externe [href]=\"lien\">{{ source.texte }}</a>\n      } @else {\n        {{ source.texte }}\n      }\n    </p>\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);min-inline-size:0}:host:empty{display:none}.st-address-search__attribution{margin:0;font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-discret)}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: StCombobox,
+				selector: "st-combobox",
+				inputs: [
+					"options",
+					"filtrage",
+					"icone",
+					"presentation",
+					"chargement",
+					"effacable",
+					"temporisationEnMs",
+					"longueurMinimale"
+				],
+				outputs: ["recherche"]
+			},
+			{
+				kind: "component",
+				type: StInlineMessage,
+				selector: "st-inline-message",
+				inputs: [
+					"ton",
+					"identifiant",
+					"annonce",
+					"encadre",
+					"icone"
+				]
+			},
+			{
+				kind: "component",
+				type: StLink,
+				selector: "a[stLink]",
+				inputs: [
+					"variante",
+					"externe",
+					"mentionExterne",
+					"iconeAvant",
+					"iconeApres"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: StAddressSearch,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "st-address-search",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				StCombobox,
+				StInlineMessage,
+				StLink
+			],
+			host: { class: "st-address-search" },
+			template: "@if (active) {\n  <st-combobox\n    [libelle]=\"libelles().rechercherUneAdresse\"\n    [aide]=\"libelles().aideRechercheDAdresse(minimum)\"\n    filtrage=\"distant\"\n    icone=\"recherche\"\n    [longueurMinimale]=\"minimum\"\n    [options]=\"options()\"\n    [chargement]=\"suggestions.isLoading()\"\n    [disabled]=\"inactive()\"\n    [value]=\"choix()\"\n    (valueChange)=\"choisir($event)\"\n    (recherche)=\"terme.set($event)\"\n  />\n  @if (indisponible()) {\n    <st-inline-message class=\"st-address-search__panne\" ton=\"avertissement\">{{\n      libelles().rechercheDAdresseIndisponible\n    }}</st-inline-message>\n  }\n  @if (attribution; as source) {\n    <p class=\"st-address-search__attribution\">\n      @if (source.lien; as lien) {\n        <a stLink externe [href]=\"lien\">{{ source.texte }}</a>\n      } @else {\n        {{ source.texte }}\n      }\n    </p>\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);min-inline-size:0}:host:empty{display:none}.st-address-search__attribution{margin:0;font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-discret)}\n"]
+		}]
+	}],
+	ctorParameters: () => []
+});
+var StCountryCombobox = class StCountryCombobox extends ControleDeSaisie {
+	libelles = inject(ST_LIBELLES);
+	locale = inject(ST_LOCALE);
+	codes = input(null, ...ngDevMode ? [{ debugName: "codes" }] : 	/* istanbul ignore next */ []);
+	enTete = input([], ...ngDevMode ? [{ debugName: "enTete" }] : 	/* istanbul ignore next */ []);
+	effacable = input(false, {
+		...ngDevMode ? { debugName: "effacable" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	presentation = input("libelle", ...ngDevMode ? [{ debugName: "presentation" }] : 	/* istanbul ignore next */ []);
+	liste = viewChild.required(StCombobox, ...ngDevMode ? [{ debugName: "liste" }] : 	/* istanbul ignore next */ []);
+	options = computed(() => optionsDesPays({
+		locale: this.locale(),
+		codes: this.codes(),
+		enTete: this.enTete(),
+		courant: this.value(),
+		groupes: {
+			frequents: this.libelles().paysFrequents,
+			tous: this.libelles().tousLesPays
+		}
+	}), ...ngDevMode ? [{ debugName: "options" }] : 	/* istanbul ignore next */ []);
+	focus(options) {
+		this.liste().focus(options);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: StCountryCombobox,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.0",
+		type: StCountryCombobox,
+		isStandalone: true,
+		selector: "st-country-combobox",
+		inputs: {
+			codes: {
+				classPropertyName: "codes",
+				publicName: "codes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			enTete: {
+				classPropertyName: "enTete",
+				publicName: "enTete",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			effacable: {
+				classPropertyName: "effacable",
+				publicName: "effacable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			presentation: {
+				classPropertyName: "presentation",
+				publicName: "presentation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "st-country-combobox" },
+		viewQueries: [{
+			propertyName: "liste",
+			first: true,
+			predicate: StCombobox,
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<st-combobox\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [options]=\"options()\"\n  [presentation]=\"presentation()\"\n  [effacable]=\"effacable()\"\n  [value]=\"value()\"\n  (valueChange)=\"value.set($event)\"\n  [errors]=\"errors()\"\n  [touched]=\"touched()\"\n  [dirty]=\"dirty()\"\n  [pending]=\"pending()\"\n  [disabled]=\"disabled()\"\n  [disabledReasons]=\"disabledReasons()\"\n  [readonly]=\"readonly()\"\n  [required]=\"required()\"\n  [name]=\"name()\"\n  (touch)=\"touch.emit()\"\n/>\n",
+		dependencies: [{
+			kind: "component",
+			type: StCombobox,
+			selector: "st-combobox",
+			inputs: [
+				"options",
+				"filtrage",
+				"icone",
+				"presentation",
+				"chargement",
+				"effacable",
+				"temporisationEnMs",
+				"longueurMinimale"
+			],
+			outputs: ["recherche"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: StCountryCombobox,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "st-country-combobox",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [StCombobox],
+			host: { class: "st-country-combobox" },
+			template: "<st-combobox\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [options]=\"options()\"\n  [presentation]=\"presentation()\"\n  [effacable]=\"effacable()\"\n  [value]=\"value()\"\n  (valueChange)=\"value.set($event)\"\n  [errors]=\"errors()\"\n  [touched]=\"touched()\"\n  [dirty]=\"dirty()\"\n  [pending]=\"pending()\"\n  [disabled]=\"disabled()\"\n  [disabledReasons]=\"disabledReasons()\"\n  [readonly]=\"readonly()\"\n  [required]=\"required()\"\n  [name]=\"name()\"\n  (touch)=\"touch.emit()\"\n/>\n"
+		}]
+	}],
+	propDecorators: {
+		codes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "codes",
+				required: false
+			}]
+		}],
+		enTete: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "enTete",
+				required: false
+			}]
+		}],
+		effacable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "effacable",
+				required: false
+			}]
+		}],
+		presentation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "presentation",
+				required: false
+			}]
+		}],
+		liste: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => StCombobox), { isSignal: true }]
+		}]
+	}
+});
+export { StAddressSearch, StCombobox, StCountryCombobox, StMultiselect, StOption };
+
+//# sourceMappingURL=starterlib-ui-selection.mjs.map