@ktortu/aaa 0.9.6 → 0.9.8

package/fesm2022/ktortu-aaa-forms.mjs

@@ -2,7 +2,7 @@ import { NgTemplateOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, computed, ElementRef, Directive, input, output, booleanAttribute, contentChild, TemplateRef, forwardRef, ChangeDetectionStrategy, Component, Injectable, model, viewChild, signal, afterNextRender, isDevMode, DestroyRef, effect, PLATFORM_ID, untracked, afterRenderEffect, Injector, ChangeDetectorRef, viewChildren, LOCALE_ID, Pipe } from '@angular/core';
 import { KtTooltip } from '@ktortu/aaa/tooltip';
-import { KtIdGenerator, KT_AUDIT_ENABLED, KtBodyScrollLock, KtViewport, createKtSheetDrag } from '@ktortu/aaa/cdk';
+import { KtIdGenerator, KT_AUDIT_ENABLED, KtBodyScrollLock, KtViewport } from '@ktortu/aaa/cdk';
 import { transformedValue } from '@angular/forms/signals';
 import { Listbox, Option } from '@angular/aria/listbox';
 import { Combobox, ComboboxPopup, ComboboxWidget } from '@angular/aria/combobox';
@@ -1956,6 +1956,13 @@ class KtBaseSelect {
     hideLabel = input(this.fieldConfig?.hideLabel ?? false, { ...(ngDevMode ? { debugName: "hideLabel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Masquer visuellement le bloc d'erreur. @default KT_FIELD_CONFIG.hideErrors ?? false */
     hideErrors = input(this.fieldConfig?.hideErrors ?? false, { ...(ngDevMode ? { debugName: "hideErrors" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // --- Effacement depuis le champ (clearable) ---
+    /** Bouton « effacer » (×) sur le champ quand une valeur est sélectionnée (même contrat que
+        `clearable` de BaseInputField ; single vide la sélection, multi vide toute la sélection). @default false */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Libellé i18n du bouton « effacer ». @default 'Clear' (ou KT_FIELD_CONFIG.clearLabel) */
+    clearLabel = input(this.fieldConfig?.clearLabel ?? 'Clear', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
     // --- Filtrage (champ de recherche dans le popup, opt-in) ---
     /** Affiche un champ de recherche en tête du popup (desktop) / de la sheet (téléphone).
         Pour les listes longues ; le texte tapé ne sert qu'à filtrer (réinitialisé à la fermeture). @default false */
@@ -2108,10 +2115,12 @@ class KtBaseSelect {
                 return;
             if (this.expanded()) {
                 el.classList.remove('kt-select__popup--closing');
-                el.style.translate = ''; // efface un éventuel translate résiduel d'un drag-to-dismiss précédent
                 el.style.setProperty('position-anchor', this.anchorName);
                 el.showPopover?.();
                 this.popoverShown = true;
+                // Sheet (ADR-0005) : l'animation d'entrée est le scroll programmatique vers le snap ouvert.
+                if (this.compact() && this.sheetState === 'idle')
+                    this.openSheetByScroll(el);
                 // Desktop filtrable : le champ de recherche prend le focus à l'ouverture (pattern
                 // SelectPanel). Pas sur téléphone : le clavier virtuel recouvrirait la bottom-sheet.
                 if (this.filterable() && !this.compact())
@@ -2121,6 +2130,19 @@ class KtBaseSelect {
                 this.animateAndCloseSelect(el);
             }
         });
+        // Sheet (ADR-0005) : détection du snap « fermé » (scroll) + garde molette (wheel non-passif).
+        // Attachés une fois par élément popup ; inertes hors mode compact (le scroll ne bulle pas,
+        // la garde s'auto-neutralise). preserveContent garde l'élément vivant sur mobile.
+        effect(() => {
+            const el = this.popupEl()?.nativeElement;
+            if (!el || el === this.sheetEl)
+                return;
+            this.sheetEl?.removeEventListener('scroll', this.onSheetScroll);
+            this.sheetEl?.removeEventListener('wheel', this.onSheetWheel);
+            this.sheetEl = el;
+            el.addEventListener('scroll', this.onSheetScroll);
+            el.addEventListener('wheel', this.onSheetWheel, { passive: false });
+        });
         // Filtre éphémère : réinitialisé à la fermeture (liste complète à la réouverture).
         effect(() => {
             if (this.expanded())
@@ -2133,7 +2155,9 @@ class KtBaseSelect {
         });
         this.destroyRef.onDestroy(() => {
             clearTimeout(this.announceTimer);
-            this.sheetDrag.destroy();
+            clearTimeout(this.sheetCloseTimer);
+            this.sheetEl?.removeEventListener('scroll', this.onSheetScroll);
+            this.sheetEl?.removeEventListener('wheel', this.onSheetWheel);
             this.setBodyScrollLock(false);
         });
         // Préserve le contenu du template sur mobile pour permettre l'animation de sortie
@@ -2175,19 +2199,25 @@ class KtBaseSelect {
                 this.doc.removeEventListener('pointerdown', onPointerDown);
             });
         }
-        // Fait défiler la liste pour afficher l'option active lors de la navigation au clavier (mode activedescendant).
+        // Fait défiler la liste pour afficher l'option active lors de la navigation au clavier (mode
+        // activedescendant). Défilement SCOPÉ à la listbox (sémantique « nearest » manuelle) — PAS
+        // scrollIntoView : il scrolle aussi les ANCÊTRES, dont le popup sheet scroll-snap (ADR-0005),
+        // ce qui annulait le scroll d'entrée de la sheet et la re-snappait fermée.
         effect(() => {
             const activeId = this.listboxDir()?.activeDescendant();
             if (!this.expanded() || !activeId)
                 return;
             requestAnimationFrame(() => {
                 const listbox = this.listboxEl()?.nativeElement;
-                if (!listbox)
+                const activeEl = listbox?.querySelector('.kt-select__option--active');
+                if (!listbox || !activeEl)
                     return;
-                const activeEl = listbox.querySelector('.kt-select__option--active');
-                // `?.` : scrollIntoView n'est pas implémenté par tous les environnements de test (jsdom) ;
-                // sans ce garde, un consommateur testant le Select en jsdom subit un crash en rAF.
-                activeEl?.scrollIntoView?.({ block: 'nearest' });
+                const lbRect = listbox.getBoundingClientRect();
+                const optRect = activeEl.getBoundingClientRect();
+                if (optRect.top < lbRect.top)
+                    listbox.scrollTop += optRect.top - lbRect.top;
+                else if (optRect.bottom > lbRect.bottom)
+                    listbox.scrollTop += optRect.bottom - lbRect.bottom;
             });
         });
         if (isDevMode()) {
@@ -2297,6 +2327,7 @@ class KtBaseSelect {
     /** Fermeture synchrone du Popover (l'effect, différé, ne re-cachera pas : flag popoverShown). */
     closePopupNow() {
         this.expanded.set(false);
+        this.resetSheetState();
         if (!this.popoverShown)
             return;
         const el = this.popupEl()?.nativeElement;
@@ -2304,18 +2335,80 @@ class KtBaseSelect {
         el?.hidePopover?.();
         this.popoverShown = false;
     }
-    // --- Drag-to-dismiss de la bottom-sheet (téléphone) ---
-    // Geste DOUBLÉ par le bouton Fermer + tap-extérieur + Échap (WCAG 2.5.1). Logique FACTORISÉE
-    // avec le mode `sheet` du Dialog via createKtSheetDrag (@ktortu/aaa).
-    sheetDrag = createKtSheetDrag({
-        pane: () => this.popupEl()?.nativeElement.querySelector('.kt-select__sheet-card') ?? null,
-        onDismiss: () => this.expanded.set(false),
-        draggingClass: 'kt-select__popup--dragging',
-    });
-    onDragStart(event) {
-        if (!this.compact())
-            return; // glissement actif sur écran compact uniquement
-        this.sheetDrag.start(event);
+    // --- Bottom-sheet scroll-snap (téléphone, ADR-0005) ---
+    // Le popup est un scroller à snap (spacer « fermé » / carte « ouvert ») : le drag-to-dismiss
+    // « attrapable partout » et l'arbitrage avec la listbox interne sont NATIFS (latching du
+    // navigateur). Le JS ne fait plus que : l'entrée/sortie (scrolls programmatiques), la
+    // détection du repos au snap « fermé », et la garde molette. Geste DOUBLÉ par le bouton
+    // Fermer + tap-scrim + Échap (WCAG 2.5.1 / 2.5.7).
+    sheetEl = null;
+    sheetState = 'idle';
+    /** Armé quand l'ouverture a dépassé 50px : un repos à ~0 est alors forcément le snap « fermé »
+        (et non la position initiale) — même logique que le prototype du spike. */
+    sheetArmed = false;
+    sheetCloseTimer;
+    resetSheetState() {
+        this.sheetState = 'idle';
+        this.sheetArmed = false;
+        clearTimeout(this.sheetCloseTimer);
+    }
+    prefersReducedMotion() {
+        return this.doc.defaultView?.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+    }
+    /** Entrée de la sheet : position « fermée » puis scroll animé vers le snap « ouvert ». */
+    openSheetByScroll(el) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this.sheetState = 'opening';
+        this.sheetArmed = false;
+        el.scrollTop = 0;
+        const behavior = this.prefersReducedMotion() ? 'auto' : 'smooth';
+        requestAnimationFrame(() => {
+            el.scrollTo?.({ top: el.scrollHeight - el.clientHeight, behavior });
+        });
+    }
+    /** Détection du snap « fermé » par position de scroll (ni scrollsnapchange ni scrollend :
+        non interopérables — cf. ADR-0005). Un geste de l'utilisateur qui amène la sheet au repos
+        à 0 EST la fermeture ; les fermetures programmatiques y convergent aussi. */
+    onSheetScroll = () => {
+        const el = this.sheetEl;
+        if (!el || !this.compact() || this.sheetState === 'idle')
+            return;
+        const top = el.scrollTop;
+        if (top > 50)
+            this.sheetArmed = true;
+        if (this.sheetState === 'opening' && top >= el.scrollHeight - el.clientHeight - 2) {
+            this.sheetState = 'open';
+            return;
+        }
+        if (this.sheetArmed && top <= 1)
+            this.finalizeSheetClose();
+    };
+    /** La molette ne ferme JAMAIS la sheet (pas de geste souris — ADR-0005) : seule la listbox
+        peut consommer, dans les limites de son propre défilement. */
+    onSheetWheel = (event) => {
+        if (!this.compact() || !this.expanded())
+            return;
+        const listbox = this.listboxEl()?.nativeElement;
+        if (listbox?.contains(event.target)) {
+            const canScrollDown = listbox.scrollTop + listbox.clientHeight < listbox.scrollHeight - 1;
+            const canScrollUp = listbox.scrollTop > 0;
+            if ((event.deltaY > 0 && canScrollDown) || (event.deltaY < 0 && canScrollUp))
+                return;
+        }
+        event.preventDefault();
+    };
+    finalizeSheetClose() {
+        this.resetSheetState();
+        const el = this.sheetEl;
+        if (this.popoverShown) {
+            el?.hidePopover?.();
+            el?.classList.remove('kt-select__popup--closing');
+            this.popoverShown = false;
+        }
+        // Dismissal par geste : synchronise le signal (les fermetures programmatiques l'ont déjà fait).
+        if (this.expanded())
+            this.expanded.set(false);
     }
     animateAndCloseSelect(el) {
         if (!this.compact() || !isPlatformBrowser(this.platformId)) {
@@ -2323,44 +2416,26 @@ class KtBaseSelect {
             this.popoverShown = false;
             return;
         }
-        el.classList.add('kt-select__popup--closing');
-        const card = el.querySelector('.kt-select__sheet-card') || el;
-        // Récupérer la durée de transition configurée en CSS (ex: "150ms" ou "0.2s")
-        const styles = window.getComputedStyle(card);
-        const durationStr = styles.transitionDuration || '0s';
-        const durationMs = parseFloat(durationStr) * (durationStr.includes('ms') ? 1 : 1000);
-        if (durationMs === 0) {
-            el.hidePopover?.();
-            el.classList.remove('kt-select__popup--closing');
-            this.popoverShown = false;
+        // Sheet : sortie = scroll programmatique vers le snap « fermé » ; onSheetScroll finalise au
+        // repos. Déjà en bas (jsdom, reduced-motion instantané, geste déjà abouti) : finalise direct.
+        if (el.scrollTop <= 1) {
+            this.finalizeSheetClose();
             return;
         }
-        // Écouter la fin de la transition sur la propriété 'translate'
-        const onTransitionEnd = (event) => {
-            if (event.target === card && event.propertyName === 'translate') {
-                card.removeEventListener('transitionend', onTransitionEnd);
-                if (this.expanded())
-                    return;
-                el.hidePopover?.();
-                el.classList.remove('kt-select__popup--closing');
-                this.popoverShown = false;
-            }
-        };
-        card.addEventListener('transitionend', onTransitionEnd);
-        // Sécurité (au cas où la transition n'aboutirait pas)
-        setTimeout(() => {
-            card.removeEventListener('transitionend', onTransitionEnd);
-            if (this.expanded())
-                return;
-            if (this.popoverShown) {
-                el.hidePopover?.();
-                el.classList.remove('kt-select__popup--closing');
-                this.popoverShown = false;
-            }
-        }, durationMs + 50);
+        this.sheetState = 'closing';
+        this.sheetArmed = true;
+        el.classList.add('kt-select__popup--closing'); // fondu du scrim pendant la sortie
+        el.scrollTo?.({ top: 0, behavior: this.prefersReducedMotion() ? 'auto' : 'smooth' });
+        // Sécurité (scroll lisse interrompu, moteur sans événement final) — même filet que l'ancien
+        // transitionend : on finalise si la fermeture est toujours d'actualité.
+        clearTimeout(this.sheetCloseTimer);
+        this.sheetCloseTimer = setTimeout(() => {
+            if (!this.expanded() && this.popoverShown)
+                this.finalizeSheetClose();
+        }, 400);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtBaseSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.1", type: KtBaseSelect, isStandalone: true, inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpLabel: { classPropertyName: "helpLabel", publicName: "helpLabel", isSignal: true, isRequired: false, transformFunction: null }, customDescribedBy: { classPropertyName: "customDescribedBy", publicName: "customDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMatcher: { classPropertyName: "errorMatcher", publicName: "errorMatcher", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, hideErrors: { classPropertyName: "hideErrors", publicName: "hideErrors", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleOptions: { classPropertyName: "maxVisibleOptions", publicName: "maxVisibleOptions", isSignal: true, isRequired: false, transformFunction: null }, truncatedResultsText: { classPropertyName: "truncatedResultsText", publicName: "truncatedResultsText", isSignal: true, isRequired: false, transformFunction: null }, truncatedResultsAnnouncement: { classPropertyName: "truncatedResultsAnnouncement", publicName: "truncatedResultsAnnouncement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { helpClick: "helpClick", touched: "touchedChange" }, host: { listeners: { "keydown": "onHostKeydown($event)" } }, viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "popupEl", first: true, predicate: ["popup"], descendants: true, isSignal: true }, { propertyName: "filterInputEl", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }, { propertyName: "listboxEl", first: true, predicate: ["listboxEl"], descendants: true, isSignal: true }, { propertyName: "listboxDir", first: true, predicate: Listbox, descendants: true, isSignal: true }, { propertyName: "comboboxDir", first: true, predicate: Combobox, descendants: true, isSignal: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.1", type: KtBaseSelect, isStandalone: true, inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpLabel: { classPropertyName: "helpLabel", publicName: "helpLabel", isSignal: true, isRequired: false, transformFunction: null }, customDescribedBy: { classPropertyName: "customDescribedBy", publicName: "customDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMatcher: { classPropertyName: "errorMatcher", publicName: "errorMatcher", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, hideErrors: { classPropertyName: "hideErrors", publicName: "hideErrors", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleOptions: { classPropertyName: "maxVisibleOptions", publicName: "maxVisibleOptions", isSignal: true, isRequired: false, transformFunction: null }, truncatedResultsText: { classPropertyName: "truncatedResultsText", publicName: "truncatedResultsText", isSignal: true, isRequired: false, transformFunction: null }, truncatedResultsAnnouncement: { classPropertyName: "truncatedResultsAnnouncement", publicName: "truncatedResultsAnnouncement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { helpClick: "helpClick", touched: "touchedChange" }, host: { listeners: { "keydown": "onHostKeydown($event)" } }, viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "popupEl", first: true, predicate: ["popup"], descendants: true, isSignal: true }, { propertyName: "filterInputEl", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }, { propertyName: "listboxEl", first: true, predicate: ["listboxEl"], descendants: true, isSignal: true }, { propertyName: "listboxDir", first: true, predicate: Listbox, descendants: true, isSignal: true }, { propertyName: "comboboxDir", first: true, predicate: Combobox, descendants: true, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtBaseSelect, decorators: [{
             type: Directive,
@@ -2369,7 +2444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '(keydown)': 'onHostKeydown($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], helpClick: [{ type: i0.Output, args: ["helpClick"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], helpLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpLabel", required: false }] }], customDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "customDescribedBy", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMatcher", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], hideErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideErrors", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], maxVisibleOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleOptions", required: false }] }], truncatedResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncatedResultsText", required: false }] }], truncatedResultsAnnouncement: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncatedResultsAnnouncement", required: false }] }], triggerEl: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], popupEl: [{ type: i0.ViewChild, args: ['popup', { isSignal: true }] }], filterInputEl: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], listboxEl: [{ type: i0.ViewChild, args: ['listboxEl', { isSignal: true }] }], listboxDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Listbox), { isSignal: true }] }], comboboxDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Combobox), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], helpClick: [{ type: i0.Output, args: ["helpClick"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], helpLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpLabel", required: false }] }], customDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "customDescribedBy", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMatcher", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], hideErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideErrors", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], maxVisibleOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleOptions", required: false }] }], truncatedResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncatedResultsText", required: false }] }], truncatedResultsAnnouncement: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncatedResultsAnnouncement", required: false }] }], triggerEl: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], popupEl: [{ type: i0.ViewChild, args: ['popup', { isSignal: true }] }], filterInputEl: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], listboxEl: [{ type: i0.ViewChild, args: ['listboxEl', { isSignal: true }] }], listboxDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Listbox), { isSignal: true }] }], comboboxDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Combobox), { isSignal: true }] }] } });
 
 /** Template de rendu d'une option, posé sur un `<ng-template>` projeté dans `kt-select`.
     L'input sert UNIQUEMENT à inférer `T` (re-bind de la liste d'options) ; `ngTemplateContextGuard`
@@ -2456,6 +2531,11 @@ class KtSelect extends KtBaseSelect {
     /** Fermer le popup après une sélection (sémantique single ; le multi reste ouvert). */
     closeOnSelect = computed(() => this.config?.closeOnSelect ?? true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
+    /** Affiche le bouton « effacer » (×) sur le champ dès qu'une valeur est présente (`clearable`).
+        Basé sur `value()` et non `selectedOption()` : une clé orpheline (option retirée des données)
+        reste effaçable. */
+    showClear = computed(() => this.clearable() && !this.disabled() && !this.readonly() && this.value() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
     /** Option correspondant à la valeur courante (clé extraite, ou objet si `optionValue` est omis). */
     selectedOption = computed(() => {
         const v = this.value();
@@ -2508,12 +2588,19 @@ class KtSelect extends KtBaseSelect {
             this.refocusTriggerAfterFilterClose();
         }
     }
+    /** Efface la sélection depuis le champ (bouton `clearable`) et rend le focus au trigger. */
+    clearSelection() {
+        if (!this.showClear())
+            return;
+        this.commitSelection(null);
+        this.triggerEl()?.nativeElement.focus();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtSelect, isStandalone: true, selector: "kt-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange" }, queries: [{ propertyName: "optionDef", first: true, predicate: KtSelectOptionDef, descendants: true, isSignal: true }, { propertyName: "triggerDef", first: true, predicate: KtSelectTriggerDef, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"fieldErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  [hideLabel]=\"hideLabel()\"\n  [hideErrors]=\"hideErrors()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div class=\"kt-select\" [class.kt-select--open]=\"expanded()\">\n    <button\n      #combobox=\"ngCombobox\"\n      #trigger\n      ngCombobox\n      ktFieldControl\n      type=\"button\"\n      class=\"kt-field-box kt-select__trigger\"\n      [(expanded)]=\"expanded\"\n      [disabled]=\"disabled()\"\n      [softDisabled]=\"false\"\n      [attr.data-invalid]=\"showInvalid() ? '' : null\"\n      [attr.data-disabled]=\"disabled() ? '' : null\"\n      [attr.data-filled]=\"selectedOption() ? '' : null\"\n      [attr.data-pending]=\"pending() ? '' : null\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n    >\n      <span class=\"kt-select__value\">\n        @if (triggerDef(); as def) {\n          <ng-container [ngTemplateOutlet]=\"def.template\" [ngTemplateOutletContext]=\"{ $implicit: selectedOption() }\" />\n        } @else if (selectedOption(); as option) {\n          {{ labelOf(option) }}\n        } @else {\n          <span class=\"kt-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n        }\n      </span>\n      <span class=\"kt-select__arrow\" aria-hidden=\"true\">arrow_drop_down</span>\n    </button>\n\n    <!-- Un seul Popover (top-layer). CSS @media : dropdown ancr\u00E9 (desktop) \u2194 bottom-sheet (t\u00E9l\u00E9phone).\n         Pas de <dialog>.showModal() : ce combobox se ferme au blur, et showModal volerait le focus. -->\n    <ng-template ngComboboxPopup [combobox]=\"combobox\" [popupType]=\"filterable() ? 'dialog' : 'listbox'\">\n      <div #popup popover=\"manual\" class=\"kt-select__popup\" [class.kt-select__popup--sheet]=\"compact()\">\n        @if (compact()) {\n          <div class=\"kt-select__sheet-scrim\" aria-hidden=\"true\" (click)=\"expanded.set(false)\"></div>\n        }\n        <div class=\"kt-select__sheet-card\">\n          @if (compact()) {\n            <div\n              class=\"kt-select__sheet-grab\"\n              aria-hidden=\"true\"\n              (pointerdown)=\"onDragStart($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n            ></div>\n            <header class=\"kt-select__sheet-header\">\n              <span class=\"kt-select__sheet-title\">{{ label() }}</span>\n              <button\n                type=\"button\"\n                class=\"kt-select__sheet-close\"\n                [attr.aria-label]=\"resolvedCloseLabel()\"\n                (click)=\"expanded.set(false)\"\n              >\n                <span class=\"kt-select__sheet-close-icon\" aria-hidden=\"true\">close</span>\n              </button>\n            </header>\n          }\n          @if (filterable()) {\n            <!-- Mode filtrable : le widget combobox est le panneau ENTIER (champ + annonce + liste).\n                 Indispensable : un focus pos\u00E9 hors de l'\u00E9l\u00E9ment ngComboboxWidget ferme le popup\n                 (closePopupOnBlur de @angular/aria) \u2014 le champ doit donc vivre dans ce sous-arbre. -->\n            <div\n              ngComboboxWidget\n              role=\"dialog\"\n              class=\"kt-select__panel\"\n              [id]=\"panelId\"\n              [attr.aria-label]=\"label()\"\n              [activeDescendant]=\"lb.activeDescendant()\"\n            >\n              <div class=\"kt-select__filter\">\n                <input\n                  #filterInput\n                  type=\"search\"\n                  role=\"combobox\"\n                  aria-autocomplete=\"list\"\n                  aria-expanded=\"true\"\n                  class=\"kt-select__filter-input\"\n                  autocomplete=\"off\"\n                  [placeholder]=\"resolvedFilterPlaceholder()\"\n                  [attr.aria-label]=\"resolvedFilterLabel()\"\n                  [attr.aria-controls]=\"lb.id()\"\n                  [attr.aria-activedescendant]=\"lb.activeDescendant()\"\n                  [value]=\"filterText()\"\n                  (input)=\"onFilterInput($event)\"\n                  (keydown)=\"onFilterKeydown($event)\"\n                />\n              </div>\n              <!-- Nombre de r\u00E9sultats annonc\u00E9 (diff\u00E9r\u00E9) aux lecteurs d'\u00E9cran : une liste qui\n                   r\u00E9tr\u00E9cit en silence est per\u00E7ue comme un bug (tests utilisateurs S. Higley). -->\n              <div class=\"kt-select__sr-only\" role=\"status\" aria-live=\"polite\">{{ announcedCount() }}</div>\n              <ul\n                #lb=\"ngListbox\"\n                #listboxEl\n                ngListbox\n                [focusMode]=\"compact() && !filterable() ? 'roving' : 'activedescendant'\"\n                selectionMode=\"explicit\"\n                class=\"kt-select__listbox\"\n                [attr.aria-label]=\"label()\"\n                [value]=\"listboxValue()\"\n                (valueChange)=\"onListboxValueChange($event)\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                @for (item of displayedOptions(); track keyOf(item)) {\n                  <li\n                    #opt=\"ngOption\"\n                    ngOption\n                    class=\"kt-select__option\"\n                    [value]=\"keyOf(item)\"\n                    [label]=\"labelOf(item)\"\n                    [disabled]=\"disabledOf(item)\"\n                    [class.kt-select__option--active]=\"opt.active()\"\n                  >\n                    @if (optionDef(); as def) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"def.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: item,\n                          selected: !!opt.selected(),\n                          active: opt.active(),\n                        }\"\n                      />\n                    } @else {\n                      {{ labelOf(item) }}\n                    }\n                  </li>\n                } @empty {\n                  <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedEmptyText() }}\n                  </li>\n                }\n                @if (filterable() && filteredOptions().length > maxVisibleOptions()) {\n                  <li class=\"kt-select__truncated-info\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedTruncatedResultsText()(maxVisibleOptions(), filteredOptions().length) }}\n                  </li>\n                }\n              </ul>\n            </div>\n          } @else {\n            <ul\n              #listbox=\"ngListbox\"\n              #listboxEl\n              ngComboboxWidget\n              ngListbox\n              [focusMode]=\"compact() ? 'roving' : 'activedescendant'\"\n              selectionMode=\"explicit\"\n              class=\"kt-select__listbox\"\n              [attr.aria-label]=\"label()\"\n              [value]=\"listboxValue()\"\n              (valueChange)=\"onListboxValueChange($event)\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [activeDescendant]=\"listbox.activeDescendant()\"\n            >\n              @for (item of options(); track keyOf(item)) {\n                <li\n                  #opt=\"ngOption\"\n                  ngOption\n                  class=\"kt-select__option\"\n                  [value]=\"keyOf(item)\"\n                  [label]=\"labelOf(item)\"\n                  [disabled]=\"disabledOf(item)\"\n                  [class.kt-select__option--active]=\"opt.active()\"\n                >\n                  @if (optionDef(); as def) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"def.template\"\n                      [ngTemplateOutletContext]=\"{ $implicit: item, selected: !!opt.selected(), active: opt.active() }\"\n                    />\n                  } @else {\n                    {{ labelOf(item) }}\n                  }\n                </li>\n              } @empty {\n                <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                  {{ resolvedEmptyText() }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</kt-field>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-select{position:relative}.kt-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--field-control-gap, .5rem);inline-size:100%;cursor:pointer;text-align:start;font:inherit;color:var(--field-color, inherit)}.kt-select__trigger:disabled{cursor:not-allowed;background:var(--field-disabled-bg, #f1f3f4);color:color-mix(in srgb,currentColor 50%,transparent)}.kt-select__value{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kt-select__placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__arrow{flex:none;font-family:Material Symbols Outlined;font-size:1.25em;line-height:1;font-feature-settings:\"liga\";color:var(--field-icon-color, #5f6368);transition:var(--select-arrow-transition, transform .12s ease);-webkit-font-smoothing:antialiased}.kt-select--open .kt-select__arrow{transform:rotate(180deg)}.kt-select__popup{box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;border-width:var(--select-popup-border-width, var(--field-border-width, 1px));border-style:var(--field-border-style, solid);border-color:var(--field-border-color, #c4c7c5);border-radius:var(--field-radius, 8px);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);box-shadow:var(--select-popup-shadow, 0 4px 12px rgb(0 0 0 / 12%));-webkit-backdrop-filter:var(--select-popup-backdrop-filter, none);backdrop-filter:var(--select-popup-backdrop-filter, none);max-block-size:var(--select-popup-max-height, 16rem);overflow:hidden}.kt-select__sheet-card{display:contents}.kt-select__popup:not(:popover-open){display:none!important}.kt-select__popup:popover-open{animation:var(--select-popup-enter-animation, none)}@media(prefers-reduced-motion:reduce){.kt-select__popup:popover-open{animation:none}}.kt-select__listbox{flex:1 1 auto;min-block-size:0;margin:0;padding:.25rem;list-style:none;overflow-y:auto}.kt-select__panel{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}.kt-select__filter{flex:none;padding:.5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__filter-input{box-sizing:border-box;inline-size:100%;min-block-size:var(--field-min-height, 44px);padding:.375rem .625rem;border:var(--field-border-width, 1px) var(--field-border-style, solid) var(--field-border-color, #c4c7c5);border-radius:calc(var(--field-radius, 8px) * .75);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);font:inherit;appearance:none}.kt-select__filter-input::placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__filter-input:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-1px}.kt-select__filter-input::-webkit-search-cancel-button{appearance:none;inline-size:1rem;block-size:1rem;margin-inline-start:.375rem;cursor:pointer;background-color:var(--field-icon-color, #5f6368);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat}.kt-select__sr-only{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@supports (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto;top:anchor(bottom);left:anchor(left);margin-block-start:.25rem;min-inline-size:anchor-size(width);width:max-content;max-inline-size:min(90vw,28rem);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}@supports not (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto 0 0;inline-size:100%;max-inline-size:100%;border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0}}.kt-select__popup--sheet{position:fixed!important;inset:0!important;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important;width:100%!important;height:100%!important;max-block-size:none!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;display:flex;flex-direction:column!important;justify-content:flex-end!important}.kt-select__popup--sheet .kt-select__sheet-card{position:relative;z-index:2;display:flex;flex-direction:column;background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0;box-shadow:var(--kt-sheet-shadow, 0 -4px 16px rgb(0 0 0 / 12%));max-block-size:var(--kt-sheet-max-block-size, 85svh);width:100%;overflow:hidden;translate:0 0;transition:translate var(--kt-sheet-anim-duration, .12s) ease}.kt-select__popup--sheet .kt-select__sheet-card:has(.kt-select__filter){block-size:var(--kt-sheet-max-block-size, 85svh);max-block-size:var(--kt-sheet-max-block-size, 85svh)}.kt-select__popup--sheet:popover-open .kt-select__sheet-card{translate:0 0;animation:var(--select-sheet-enter-animation, kt-sheet-in var(--kt-sheet-anim-duration, .12s) ease)}.kt-select__popup--sheet .kt-select__sheet-card.kt-select__popup--dragging{transition:none}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-card,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-card{translate:0 100%;transition:translate var(--kt-sheet-exit-duration, 90ms) cubic-bezier(.4,0,.2,1)}::ng-deep .kt-select__popup--sheet::backdrop{display:none!important}.kt-select__sheet-scrim{display:none}.kt-select__popup--sheet .kt-select__sheet-scrim{display:block;position:fixed;inset:0;z-index:1;background:var(--kt-sheet-scrim, rgb(0 0 0 / 40%));opacity:0;pointer-events:auto;transition:opacity var(--kt-sheet-anim-duration, .12s) ease,overlay var(--kt-sheet-anim-duration, .12s) allow-discrete,display var(--kt-sheet-anim-duration, .12s) allow-discrete}.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:1}@starting-style{.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:0}}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-scrim,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-scrim{opacity:0;transition:opacity var(--kt-sheet-exit-duration, 90ms) ease}.kt-select__popup--sheet .kt-select__option{--select-option-min-height: 44px;padding-block:.625rem}.kt-select__popup--sheet .kt-select__filter-input{font-size:1rem;min-block-size:44px}@media(prefers-reduced-motion:reduce){.kt-select__popup--sheet .kt-select__sheet-card,.kt-select__popup--sheet .kt-select__sheet-scrim{transition:none;translate:0 0}}.kt-select__sheet-grab{display:flex;align-items:center;justify-content:center;flex:none;block-size:44px;cursor:grab;touch-action:none}.kt-select__sheet-grab:active{cursor:grabbing}.kt-select__sheet-grab:before{content:\"\";inline-size:2.25rem;block-size:.25rem;border-radius:999px;background:var(--kt-sheet-grab-color, var(--kt-outline, #c4c7c5))}.kt-select__sheet-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:none;padding-block:.5rem;padding-inline:1rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__sheet-title{font-weight:600}.kt-select__sheet-close{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__sheet-close:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:2px}.kt-select__sheet-close-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.5rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__option{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;min-block-size:var( --select-option-min-height, 44px );padding:.5rem .625rem;border-radius:6px;cursor:pointer}.kt-select__option[aria-selected=true]{background:var(--select-option-selected-bg, color-mix(in srgb, var(--kt-primary, #0b57d0) 14%, transparent));color:var(--select-option-selected-color, inherit);font-weight:var(--select-option-selected-weight, 600)}.kt-select__option--active:not([aria-disabled=true]),.kt-select__option:hover:not([aria-disabled=true]){background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}.kt-select__empty{padding:.5rem .625rem;color:var(--field-hint-color, #5f6368)}.kt-select__truncated-info{box-sizing:border-box;padding:.5rem .625rem;font-size:.875rem;font-style:italic;color:var(--field-hint-color, #5f6368);border-block-start:1px solid var(--field-border-color, #c4c7c5);pointer-events:none}}\n"], dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "hideLabel", "hideErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Combobox, selector: "[ngCombobox]", inputs: ["disabled", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtSelect, isStandalone: true, selector: "kt-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange" }, queries: [{ propertyName: "optionDef", first: true, predicate: KtSelectOptionDef, descendants: true, isSignal: true }, { propertyName: "triggerDef", first: true, predicate: KtSelectTriggerDef, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"fieldErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  [hideLabel]=\"hideLabel()\"\n  [hideErrors]=\"hideErrors()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div class=\"kt-select\" [class.kt-select--open]=\"expanded()\">\n    <button\n      #combobox=\"ngCombobox\"\n      #trigger\n      ngCombobox\n      ktFieldControl\n      type=\"button\"\n      class=\"kt-field-box kt-select__trigger\"\n      [class.kt-select__trigger--clearable]=\"showClear()\"\n      [(expanded)]=\"expanded\"\n      [disabled]=\"disabled()\"\n      [softDisabled]=\"false\"\n      [attr.data-invalid]=\"showInvalid() ? '' : null\"\n      [attr.data-disabled]=\"disabled() ? '' : null\"\n      [attr.data-filled]=\"selectedOption() ? '' : null\"\n      [attr.data-pending]=\"pending() ? '' : null\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n    >\n      <span class=\"kt-select__value\">\n        @if (triggerDef(); as def) {\n          <ng-container [ngTemplateOutlet]=\"def.template\" [ngTemplateOutletContext]=\"{ $implicit: selectedOption() }\" />\n        } @else if (selectedOption(); as option) {\n          {{ labelOf(option) }}\n        } @else {\n          <span class=\"kt-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n        }\n      </span>\n      <span class=\"kt-select__arrow\" aria-hidden=\"true\">arrow_drop_down</span>\n    </button>\n\n    <!-- Effacer la s\u00E9lection depuis le champ : sibling du trigger (pas de bouton imbriqu\u00E9 dans un bouton).\n         mousedown pr\u00E9ventif : un tap ne doit pas voler le focus du combobox (closePopupOnBlur). -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"kt-select__clear\"\n        [attr.aria-label]=\"clearLabel()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"clearSelection()\"\n      >\n        <span class=\"kt-select__clear-icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    <!-- Un seul Popover (top-layer). CSS @media : dropdown ancr\u00E9 (desktop) \u2194 bottom-sheet (t\u00E9l\u00E9phone).\n         Pas de <dialog>.showModal() : ce combobox se ferme au blur, et showModal volerait le focus.\n         Sheet = SCROLLER \u00E0 snap (ADR-0005) : le spacer occupe un \u00E9cran (snap \u00AB ferm\u00E9 \u00BB), la carte\n         snappe en bas (snap \u00AB ouvert \u00BB) ; le geste de fermeture est le scroll natif lui-m\u00EAme. -->\n    <ng-template ngComboboxPopup [combobox]=\"combobox\" [popupType]=\"filterable() ? 'dialog' : 'listbox'\">\n      <div #popup popover=\"manual\" class=\"kt-select__popup\" [class.kt-select__popup--sheet]=\"compact()\">\n        @if (compact()) {\n          <div class=\"kt-select__sheet-scrim\" aria-hidden=\"true\" (click)=\"expanded.set(false)\"></div>\n          <div class=\"kt-select__sheet-spacer\" aria-hidden=\"true\"></div>\n        }\n        <div class=\"kt-select__sheet-card\">\n          @if (compact()) {\n            <!-- Poign\u00E9e D\u00C9CORATIVE (ADR-0005) : la sheet s'attrape partout, le geste est natif. -->\n            <div class=\"kt-select__sheet-grab\" aria-hidden=\"true\" (mousedown)=\"$event.preventDefault()\"></div>\n            <!-- mousedown pr\u00E9ventif : un tap sur la carcasse ne doit pas voler le focus du widget\n                 (closePopupOnBlur fermerait le combobox) ; le click du bouton Fermer survit. -->\n            <header class=\"kt-select__sheet-header\" (mousedown)=\"$event.preventDefault()\">\n              <span class=\"kt-select__sheet-title\">{{ label() }}</span>\n              <button\n                type=\"button\"\n                class=\"kt-select__sheet-close\"\n                [attr.aria-label]=\"resolvedCloseLabel()\"\n                (click)=\"expanded.set(false)\"\n              >\n                <span class=\"kt-select__sheet-close-icon\" aria-hidden=\"true\">close</span>\n              </button>\n            </header>\n          }\n          @if (filterable()) {\n            <!-- Mode filtrable : le widget combobox est le panneau ENTIER (champ + annonce + liste).\n                 Indispensable : un focus pos\u00E9 hors de l'\u00E9l\u00E9ment ngComboboxWidget ferme le popup\n                 (closePopupOnBlur de @angular/aria) \u2014 le champ doit donc vivre dans ce sous-arbre. -->\n            <div\n              ngComboboxWidget\n              role=\"dialog\"\n              class=\"kt-select__panel\"\n              [id]=\"panelId\"\n              [attr.aria-label]=\"label()\"\n              [activeDescendant]=\"lb.activeDescendant()\"\n            >\n              <div class=\"kt-select__filter\">\n                <input\n                  #filterInput\n                  type=\"search\"\n                  role=\"combobox\"\n                  aria-autocomplete=\"list\"\n                  aria-expanded=\"true\"\n                  class=\"kt-select__filter-input\"\n                  autocomplete=\"off\"\n                  [placeholder]=\"resolvedFilterPlaceholder()\"\n                  [attr.aria-label]=\"resolvedFilterLabel()\"\n                  [attr.aria-controls]=\"lb.id()\"\n                  [attr.aria-activedescendant]=\"lb.activeDescendant()\"\n                  [value]=\"filterText()\"\n                  (input)=\"onFilterInput($event)\"\n                  (keydown)=\"onFilterKeydown($event)\"\n                />\n              </div>\n              <!-- Nombre de r\u00E9sultats annonc\u00E9 (diff\u00E9r\u00E9) aux lecteurs d'\u00E9cran : une liste qui\n                   r\u00E9tr\u00E9cit en silence est per\u00E7ue comme un bug (tests utilisateurs S. Higley). -->\n              <div class=\"kt-select__sr-only\" role=\"status\" aria-live=\"polite\">{{ announcedCount() }}</div>\n              <ul\n                #lb=\"ngListbox\"\n                #listboxEl\n                ngListbox\n                [focusMode]=\"compact() && !filterable() ? 'roving' : 'activedescendant'\"\n                selectionMode=\"explicit\"\n                class=\"kt-select__listbox\"\n                [attr.aria-label]=\"label()\"\n                [value]=\"listboxValue()\"\n                (valueChange)=\"onListboxValueChange($event)\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                @for (item of displayedOptions(); track keyOf(item)) {\n                  <li\n                    #opt=\"ngOption\"\n                    ngOption\n                    class=\"kt-select__option\"\n                    [value]=\"keyOf(item)\"\n                    [label]=\"labelOf(item)\"\n                    [disabled]=\"disabledOf(item)\"\n                    [class.kt-select__option--active]=\"opt.active()\"\n                  >\n                    @if (optionDef(); as def) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"def.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: item,\n                          selected: !!opt.selected(),\n                          active: opt.active(),\n                        }\"\n                      />\n                    } @else {\n                      {{ labelOf(item) }}\n                    }\n                  </li>\n                } @empty {\n                  <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedEmptyText() }}\n                  </li>\n                }\n                @if (filterable() && filteredOptions().length > maxVisibleOptions()) {\n                  <li class=\"kt-select__truncated-info\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedTruncatedResultsText()(maxVisibleOptions(), filteredOptions().length) }}\n                  </li>\n                }\n              </ul>\n            </div>\n          } @else {\n            <ul\n              #listbox=\"ngListbox\"\n              #listboxEl\n              ngComboboxWidget\n              ngListbox\n              [focusMode]=\"compact() ? 'roving' : 'activedescendant'\"\n              selectionMode=\"explicit\"\n              class=\"kt-select__listbox\"\n              [attr.aria-label]=\"label()\"\n              [value]=\"listboxValue()\"\n              (valueChange)=\"onListboxValueChange($event)\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [activeDescendant]=\"listbox.activeDescendant()\"\n            >\n              @for (item of options(); track keyOf(item)) {\n                <li\n                  #opt=\"ngOption\"\n                  ngOption\n                  class=\"kt-select__option\"\n                  [value]=\"keyOf(item)\"\n                  [label]=\"labelOf(item)\"\n                  [disabled]=\"disabledOf(item)\"\n                  [class.kt-select__option--active]=\"opt.active()\"\n                >\n                  @if (optionDef(); as def) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"def.template\"\n                      [ngTemplateOutletContext]=\"{ $implicit: item, selected: !!opt.selected(), active: opt.active() }\"\n                    />\n                  } @else {\n                    {{ labelOf(item) }}\n                  }\n                </li>\n              } @empty {\n                <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                  {{ resolvedEmptyText() }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</kt-field>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-select{position:relative}.kt-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--field-control-gap, .5rem);inline-size:100%;cursor:pointer;text-align:start;font:inherit;color:var(--field-color, inherit)}.kt-select__trigger:disabled{cursor:not-allowed;background:var(--field-disabled-bg, #f1f3f4);color:color-mix(in srgb,currentColor 50%,transparent)}.kt-select__value{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kt-select__placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__arrow{flex:none;font-family:Material Symbols Outlined;font-size:1.25em;line-height:1;font-feature-settings:\"liga\";color:var(--field-icon-color, #5f6368);transition:var(--select-arrow-transition, transform .12s ease);-webkit-font-smoothing:antialiased}.kt-select--open .kt-select__arrow{transform:rotate(180deg)}.kt-select__trigger--clearable .kt-select__value{margin-inline-end:2rem}.kt-select__clear{position:absolute;inset-block-start:50%;inset-inline-end:2.5rem;translate:0 -50%;display:inline-flex;align-items:center;justify-content:center;inline-size:24px;block-size:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__clear:after{content:\"\";position:absolute;inset:-10px}.kt-select__clear:hover{background-color:color-mix(in srgb,currentColor 12%,transparent);color:var(--field-color, inherit)}.kt-select__clear:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:1px}.kt-select__clear-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.25rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__popup{box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;border-width:var(--select-popup-border-width, var(--field-border-width, 1px));border-style:var(--field-border-style, solid);border-color:var(--field-border-color, #c4c7c5);border-radius:var(--field-radius, 8px);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);box-shadow:var(--select-popup-shadow, 0 4px 12px rgb(0 0 0 / 12%));-webkit-backdrop-filter:var(--select-popup-backdrop-filter, none);backdrop-filter:var(--select-popup-backdrop-filter, none);max-block-size:var(--select-popup-max-height, 16rem);overflow:hidden}.kt-select__sheet-card{display:contents}.kt-select__popup:not(:popover-open){display:none!important}.kt-select__popup:popover-open{animation:var(--select-popup-enter-animation, none)}@media(prefers-reduced-motion:reduce){.kt-select__popup:popover-open{animation:none}}.kt-select__listbox{flex:1 1 auto;min-block-size:0;margin:0;padding:.25rem;list-style:none;overflow-y:auto}.kt-select__panel{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}.kt-select__filter{flex:none;padding:.5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__filter-input{box-sizing:border-box;inline-size:100%;min-block-size:var(--field-min-height, 44px);padding:.375rem .625rem;border:var(--field-border-width, 1px) var(--field-border-style, solid) var(--field-border-color, #c4c7c5);border-radius:calc(var(--field-radius, 8px) * .75);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);font:inherit;appearance:none}.kt-select__filter-input::placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__filter-input:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-1px}.kt-select__filter-input::-webkit-search-cancel-button{appearance:none;inline-size:1rem;block-size:1rem;margin-inline-start:.375rem;cursor:pointer;background-color:var(--field-icon-color, #5f6368);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat}.kt-select__sr-only{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@supports (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto;top:anchor(bottom);left:anchor(left);margin-block-start:.25rem;min-inline-size:anchor-size(width);width:max-content;max-inline-size:min(90vw,28rem);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}@supports not (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto 0 0;inline-size:100%;max-inline-size:100%;border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0}}.kt-select__popup--sheet{position:fixed!important;inset:0!important;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important;width:100%!important;height:100%!important;max-block-size:none!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;display:block;overflow-y:auto!important;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}.kt-select__popup--sheet .kt-select__sheet-spacer{block-size:100%;scroll-snap-align:start;scroll-snap-stop:always}.kt-select__popup--sheet .kt-select__sheet-card{position:relative;z-index:2;display:flex;flex-direction:column;background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0;box-shadow:var(--kt-sheet-shadow, 0 -4px 16px rgb(0 0 0 / 12%));max-block-size:var(--kt-sheet-max-block-size, 85svh);width:100%;overflow:hidden;scroll-snap-align:end;scroll-snap-stop:always}.kt-select__popup--sheet .kt-select__sheet-card:has(.kt-select__filter){block-size:var(--kt-sheet-max-block-size, 85svh);max-block-size:var(--kt-sheet-max-block-size, 85svh)}::ng-deep .kt-select__popup--sheet::backdrop{display:none!important}.kt-select__sheet-scrim{display:none}.kt-select__popup--sheet .kt-select__sheet-scrim{display:block;position:fixed;inset:0;z-index:1;background:var(--kt-sheet-scrim, rgb(0 0 0 / 40%));opacity:0;pointer-events:auto;transition:opacity var(--kt-sheet-anim-duration, .12s) ease,overlay var(--kt-sheet-anim-duration, .12s) allow-discrete,display var(--kt-sheet-anim-duration, .12s) allow-discrete}.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:1}@starting-style{.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:0}}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-scrim,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-scrim{opacity:0;transition:opacity var(--kt-sheet-exit-duration, 90ms) ease}.kt-select__popup--sheet .kt-select__option{--select-option-min-height: 44px;padding-block:.625rem}.kt-select__popup--sheet .kt-select__filter-input{font-size:1rem;min-block-size:44px}@media(prefers-reduced-motion:reduce){.kt-select__popup--sheet .kt-select__sheet-scrim{transition:none}}.kt-select__sheet-grab{display:flex;align-items:center;justify-content:center;flex:none;block-size:28px}.kt-select__sheet-grab:before{content:\"\";inline-size:2.25rem;block-size:.25rem;border-radius:999px;background:var(--kt-sheet-grab-color, var(--kt-outline, #c4c7c5))}.kt-select__sheet-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:none;padding-block:.5rem;padding-inline:1rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__sheet-title{font-weight:600}.kt-select__sheet-close{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__sheet-close:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:2px}.kt-select__sheet-close-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.5rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__option{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;min-block-size:var( --select-option-min-height, 44px );padding:.5rem .625rem;border-radius:6px;cursor:pointer}.kt-select__option[aria-selected=true]{background:var(--select-option-selected-bg, color-mix(in srgb, var(--kt-primary, #0b57d0) 14%, transparent));color:var(--select-option-selected-color, inherit);font-weight:var(--select-option-selected-weight, 600)}.kt-select__option--active:not([aria-disabled=true]),.kt-select__option:hover:not([aria-disabled=true]){background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}.kt-select__empty{padding:.5rem .625rem;color:var(--field-hint-color, #5f6368)}.kt-select__truncated-info{box-sizing:border-box;padding:.5rem .625rem;font-size:.875rem;font-style:italic;color:var(--field-hint-color, #5f6368);border-block-start:1px solid var(--field-border-color, #c4c7c5);pointer-events:none}}\n"], dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "hideLabel", "hideErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Combobox, selector: "[ngCombobox]", inputs: ["disabled", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'kt-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KtField, KtFieldControl, NgTemplateOutlet, Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option], template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"fieldErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  [hideLabel]=\"hideLabel()\"\n  [hideErrors]=\"hideErrors()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div class=\"kt-select\" [class.kt-select--open]=\"expanded()\">\n    <button\n      #combobox=\"ngCombobox\"\n      #trigger\n      ngCombobox\n      ktFieldControl\n      type=\"button\"\n      class=\"kt-field-box kt-select__trigger\"\n      [(expanded)]=\"expanded\"\n      [disabled]=\"disabled()\"\n      [softDisabled]=\"false\"\n      [attr.data-invalid]=\"showInvalid() ? '' : null\"\n      [attr.data-disabled]=\"disabled() ? '' : null\"\n      [attr.data-filled]=\"selectedOption() ? '' : null\"\n      [attr.data-pending]=\"pending() ? '' : null\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n    >\n      <span class=\"kt-select__value\">\n        @if (triggerDef(); as def) {\n          <ng-container [ngTemplateOutlet]=\"def.template\" [ngTemplateOutletContext]=\"{ $implicit: selectedOption() }\" />\n        } @else if (selectedOption(); as option) {\n          {{ labelOf(option) }}\n        } @else {\n          <span class=\"kt-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n        }\n      </span>\n      <span class=\"kt-select__arrow\" aria-hidden=\"true\">arrow_drop_down</span>\n    </button>\n\n    <!-- Un seul Popover (top-layer). CSS @media : dropdown ancr\u00E9 (desktop) \u2194 bottom-sheet (t\u00E9l\u00E9phone).\n         Pas de <dialog>.showModal() : ce combobox se ferme au blur, et showModal volerait le focus. -->\n    <ng-template ngComboboxPopup [combobox]=\"combobox\" [popupType]=\"filterable() ? 'dialog' : 'listbox'\">\n      <div #popup popover=\"manual\" class=\"kt-select__popup\" [class.kt-select__popup--sheet]=\"compact()\">\n        @if (compact()) {\n          <div class=\"kt-select__sheet-scrim\" aria-hidden=\"true\" (click)=\"expanded.set(false)\"></div>\n        }\n        <div class=\"kt-select__sheet-card\">\n          @if (compact()) {\n            <div\n              class=\"kt-select__sheet-grab\"\n              aria-hidden=\"true\"\n              (pointerdown)=\"onDragStart($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n            ></div>\n            <header class=\"kt-select__sheet-header\">\n              <span class=\"kt-select__sheet-title\">{{ label() }}</span>\n              <button\n                type=\"button\"\n                class=\"kt-select__sheet-close\"\n                [attr.aria-label]=\"resolvedCloseLabel()\"\n                (click)=\"expanded.set(false)\"\n              >\n                <span class=\"kt-select__sheet-close-icon\" aria-hidden=\"true\">close</span>\n              </button>\n            </header>\n          }\n          @if (filterable()) {\n            <!-- Mode filtrable : le widget combobox est le panneau ENTIER (champ + annonce + liste).\n                 Indispensable : un focus pos\u00E9 hors de l'\u00E9l\u00E9ment ngComboboxWidget ferme le popup\n                 (closePopupOnBlur de @angular/aria) \u2014 le champ doit donc vivre dans ce sous-arbre. -->\n            <div\n              ngComboboxWidget\n              role=\"dialog\"\n              class=\"kt-select__panel\"\n              [id]=\"panelId\"\n              [attr.aria-label]=\"label()\"\n              [activeDescendant]=\"lb.activeDescendant()\"\n            >\n              <div class=\"kt-select__filter\">\n                <input\n                  #filterInput\n                  type=\"search\"\n                  role=\"combobox\"\n                  aria-autocomplete=\"list\"\n                  aria-expanded=\"true\"\n                  class=\"kt-select__filter-input\"\n                  autocomplete=\"off\"\n                  [placeholder]=\"resolvedFilterPlaceholder()\"\n                  [attr.aria-label]=\"resolvedFilterLabel()\"\n                  [attr.aria-controls]=\"lb.id()\"\n                  [attr.aria-activedescendant]=\"lb.activeDescendant()\"\n                  [value]=\"filterText()\"\n                  (input)=\"onFilterInput($event)\"\n                  (keydown)=\"onFilterKeydown($event)\"\n                />\n              </div>\n              <!-- Nombre de r\u00E9sultats annonc\u00E9 (diff\u00E9r\u00E9) aux lecteurs d'\u00E9cran : une liste qui\n                   r\u00E9tr\u00E9cit en silence est per\u00E7ue comme un bug (tests utilisateurs S. Higley). -->\n              <div class=\"kt-select__sr-only\" role=\"status\" aria-live=\"polite\">{{ announcedCount() }}</div>\n              <ul\n                #lb=\"ngListbox\"\n                #listboxEl\n                ngListbox\n                [focusMode]=\"compact() && !filterable() ? 'roving' : 'activedescendant'\"\n                selectionMode=\"explicit\"\n                class=\"kt-select__listbox\"\n                [attr.aria-label]=\"label()\"\n                [value]=\"listboxValue()\"\n                (valueChange)=\"onListboxValueChange($event)\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                @for (item of displayedOptions(); track keyOf(item)) {\n                  <li\n                    #opt=\"ngOption\"\n                    ngOption\n                    class=\"kt-select__option\"\n                    [value]=\"keyOf(item)\"\n                    [label]=\"labelOf(item)\"\n                    [disabled]=\"disabledOf(item)\"\n                    [class.kt-select__option--active]=\"opt.active()\"\n                  >\n                    @if (optionDef(); as def) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"def.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: item,\n                          selected: !!opt.selected(),\n                          active: opt.active(),\n                        }\"\n                      />\n                    } @else {\n                      {{ labelOf(item) }}\n                    }\n                  </li>\n                } @empty {\n                  <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedEmptyText() }}\n                  </li>\n                }\n                @if (filterable() && filteredOptions().length > maxVisibleOptions()) {\n                  <li class=\"kt-select__truncated-info\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedTruncatedResultsText()(maxVisibleOptions(), filteredOptions().length) }}\n                  </li>\n                }\n              </ul>\n            </div>\n          } @else {\n            <ul\n              #listbox=\"ngListbox\"\n              #listboxEl\n              ngComboboxWidget\n              ngListbox\n              [focusMode]=\"compact() ? 'roving' : 'activedescendant'\"\n              selectionMode=\"explicit\"\n              class=\"kt-select__listbox\"\n              [attr.aria-label]=\"label()\"\n              [value]=\"listboxValue()\"\n              (valueChange)=\"onListboxValueChange($event)\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [activeDescendant]=\"listbox.activeDescendant()\"\n            >\n              @for (item of options(); track keyOf(item)) {\n                <li\n                  #opt=\"ngOption\"\n                  ngOption\n                  class=\"kt-select__option\"\n                  [value]=\"keyOf(item)\"\n                  [label]=\"labelOf(item)\"\n                  [disabled]=\"disabledOf(item)\"\n                  [class.kt-select__option--active]=\"opt.active()\"\n                >\n                  @if (optionDef(); as def) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"def.template\"\n                      [ngTemplateOutletContext]=\"{ $implicit: item, selected: !!opt.selected(), active: opt.active() }\"\n                    />\n                  } @else {\n                    {{ labelOf(item) }}\n                  }\n                </li>\n              } @empty {\n                <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                  {{ resolvedEmptyText() }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</kt-field>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-select{position:relative}.kt-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--field-control-gap, .5rem);inline-size:100%;cursor:pointer;text-align:start;font:inherit;color:var(--field-color, inherit)}.kt-select__trigger:disabled{cursor:not-allowed;background:var(--field-disabled-bg, #f1f3f4);color:color-mix(in srgb,currentColor 50%,transparent)}.kt-select__value{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kt-select__placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__arrow{flex:none;font-family:Material Symbols Outlined;font-size:1.25em;line-height:1;font-feature-settings:\"liga\";color:var(--field-icon-color, #5f6368);transition:var(--select-arrow-transition, transform .12s ease);-webkit-font-smoothing:antialiased}.kt-select--open .kt-select__arrow{transform:rotate(180deg)}.kt-select__popup{box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;border-width:var(--select-popup-border-width, var(--field-border-width, 1px));border-style:var(--field-border-style, solid);border-color:var(--field-border-color, #c4c7c5);border-radius:var(--field-radius, 8px);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);box-shadow:var(--select-popup-shadow, 0 4px 12px rgb(0 0 0 / 12%));-webkit-backdrop-filter:var(--select-popup-backdrop-filter, none);backdrop-filter:var(--select-popup-backdrop-filter, none);max-block-size:var(--select-popup-max-height, 16rem);overflow:hidden}.kt-select__sheet-card{display:contents}.kt-select__popup:not(:popover-open){display:none!important}.kt-select__popup:popover-open{animation:var(--select-popup-enter-animation, none)}@media(prefers-reduced-motion:reduce){.kt-select__popup:popover-open{animation:none}}.kt-select__listbox{flex:1 1 auto;min-block-size:0;margin:0;padding:.25rem;list-style:none;overflow-y:auto}.kt-select__panel{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}.kt-select__filter{flex:none;padding:.5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__filter-input{box-sizing:border-box;inline-size:100%;min-block-size:var(--field-min-height, 44px);padding:.375rem .625rem;border:var(--field-border-width, 1px) var(--field-border-style, solid) var(--field-border-color, #c4c7c5);border-radius:calc(var(--field-radius, 8px) * .75);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);font:inherit;appearance:none}.kt-select__filter-input::placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__filter-input:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-1px}.kt-select__filter-input::-webkit-search-cancel-button{appearance:none;inline-size:1rem;block-size:1rem;margin-inline-start:.375rem;cursor:pointer;background-color:var(--field-icon-color, #5f6368);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat}.kt-select__sr-only{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@supports (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto;top:anchor(bottom);left:anchor(left);margin-block-start:.25rem;min-inline-size:anchor-size(width);width:max-content;max-inline-size:min(90vw,28rem);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}@supports not (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto 0 0;inline-size:100%;max-inline-size:100%;border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0}}.kt-select__popup--sheet{position:fixed!important;inset:0!important;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important;width:100%!important;height:100%!important;max-block-size:none!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;display:flex;flex-direction:column!important;justify-content:flex-end!important}.kt-select__popup--sheet .kt-select__sheet-card{position:relative;z-index:2;display:flex;flex-direction:column;background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0;box-shadow:var(--kt-sheet-shadow, 0 -4px 16px rgb(0 0 0 / 12%));max-block-size:var(--kt-sheet-max-block-size, 85svh);width:100%;overflow:hidden;translate:0 0;transition:translate var(--kt-sheet-anim-duration, .12s) ease}.kt-select__popup--sheet .kt-select__sheet-card:has(.kt-select__filter){block-size:var(--kt-sheet-max-block-size, 85svh);max-block-size:var(--kt-sheet-max-block-size, 85svh)}.kt-select__popup--sheet:popover-open .kt-select__sheet-card{translate:0 0;animation:var(--select-sheet-enter-animation, kt-sheet-in var(--kt-sheet-anim-duration, .12s) ease)}.kt-select__popup--sheet .kt-select__sheet-card.kt-select__popup--dragging{transition:none}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-card,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-card{translate:0 100%;transition:translate var(--kt-sheet-exit-duration, 90ms) cubic-bezier(.4,0,.2,1)}::ng-deep .kt-select__popup--sheet::backdrop{display:none!important}.kt-select__sheet-scrim{display:none}.kt-select__popup--sheet .kt-select__sheet-scrim{display:block;position:fixed;inset:0;z-index:1;background:var(--kt-sheet-scrim, rgb(0 0 0 / 40%));opacity:0;pointer-events:auto;transition:opacity var(--kt-sheet-anim-duration, .12s) ease,overlay var(--kt-sheet-anim-duration, .12s) allow-discrete,display var(--kt-sheet-anim-duration, .12s) allow-discrete}.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:1}@starting-style{.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:0}}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-scrim,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-scrim{opacity:0;transition:opacity var(--kt-sheet-exit-duration, 90ms) ease}.kt-select__popup--sheet .kt-select__option{--select-option-min-height: 44px;padding-block:.625rem}.kt-select__popup--sheet .kt-select__filter-input{font-size:1rem;min-block-size:44px}@media(prefers-reduced-motion:reduce){.kt-select__popup--sheet .kt-select__sheet-card,.kt-select__popup--sheet .kt-select__sheet-scrim{transition:none;translate:0 0}}.kt-select__sheet-grab{display:flex;align-items:center;justify-content:center;flex:none;block-size:44px;cursor:grab;touch-action:none}.kt-select__sheet-grab:active{cursor:grabbing}.kt-select__sheet-grab:before{content:\"\";inline-size:2.25rem;block-size:.25rem;border-radius:999px;background:var(--kt-sheet-grab-color, var(--kt-outline, #c4c7c5))}.kt-select__sheet-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:none;padding-block:.5rem;padding-inline:1rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__sheet-title{font-weight:600}.kt-select__sheet-close{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__sheet-close:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:2px}.kt-select__sheet-close-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.5rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__option{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;min-block-size:var( --select-option-min-height, 44px );padding:.5rem .625rem;border-radius:6px;cursor:pointer}.kt-select__option[aria-selected=true]{background:var(--select-option-selected-bg, color-mix(in srgb, var(--kt-primary, #0b57d0) 14%, transparent));color:var(--select-option-selected-color, inherit);font-weight:var(--select-option-selected-weight, 600)}.kt-select__option--active:not([aria-disabled=true]),.kt-select__option:hover:not([aria-disabled=true]){background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}.kt-select__empty{padding:.5rem .625rem;color:var(--field-hint-color, #5f6368)}.kt-select__truncated-info{box-sizing:border-box;padding:.5rem .625rem;font-size:.875rem;font-style:italic;color:var(--field-hint-color, #5f6368);border-block-start:1px solid var(--field-border-color, #c4c7c5);pointer-events:none}}\n"] }]
+            args: [{ selector: 'kt-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KtField, KtFieldControl, NgTemplateOutlet, Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option], template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"fieldErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  [hideLabel]=\"hideLabel()\"\n  [hideErrors]=\"hideErrors()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div class=\"kt-select\" [class.kt-select--open]=\"expanded()\">\n    <button\n      #combobox=\"ngCombobox\"\n      #trigger\n      ngCombobox\n      ktFieldControl\n      type=\"button\"\n      class=\"kt-field-box kt-select__trigger\"\n      [class.kt-select__trigger--clearable]=\"showClear()\"\n      [(expanded)]=\"expanded\"\n      [disabled]=\"disabled()\"\n      [softDisabled]=\"false\"\n      [attr.data-invalid]=\"showInvalid() ? '' : null\"\n      [attr.data-disabled]=\"disabled() ? '' : null\"\n      [attr.data-filled]=\"selectedOption() ? '' : null\"\n      [attr.data-pending]=\"pending() ? '' : null\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n    >\n      <span class=\"kt-select__value\">\n        @if (triggerDef(); as def) {\n          <ng-container [ngTemplateOutlet]=\"def.template\" [ngTemplateOutletContext]=\"{ $implicit: selectedOption() }\" />\n        } @else if (selectedOption(); as option) {\n          {{ labelOf(option) }}\n        } @else {\n          <span class=\"kt-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n        }\n      </span>\n      <span class=\"kt-select__arrow\" aria-hidden=\"true\">arrow_drop_down</span>\n    </button>\n\n    <!-- Effacer la s\u00E9lection depuis le champ : sibling du trigger (pas de bouton imbriqu\u00E9 dans un bouton).\n         mousedown pr\u00E9ventif : un tap ne doit pas voler le focus du combobox (closePopupOnBlur). -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"kt-select__clear\"\n        [attr.aria-label]=\"clearLabel()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"clearSelection()\"\n      >\n        <span class=\"kt-select__clear-icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    <!-- Un seul Popover (top-layer). CSS @media : dropdown ancr\u00E9 (desktop) \u2194 bottom-sheet (t\u00E9l\u00E9phone).\n         Pas de <dialog>.showModal() : ce combobox se ferme au blur, et showModal volerait le focus.\n         Sheet = SCROLLER \u00E0 snap (ADR-0005) : le spacer occupe un \u00E9cran (snap \u00AB ferm\u00E9 \u00BB), la carte\n         snappe en bas (snap \u00AB ouvert \u00BB) ; le geste de fermeture est le scroll natif lui-m\u00EAme. -->\n    <ng-template ngComboboxPopup [combobox]=\"combobox\" [popupType]=\"filterable() ? 'dialog' : 'listbox'\">\n      <div #popup popover=\"manual\" class=\"kt-select__popup\" [class.kt-select__popup--sheet]=\"compact()\">\n        @if (compact()) {\n          <div class=\"kt-select__sheet-scrim\" aria-hidden=\"true\" (click)=\"expanded.set(false)\"></div>\n          <div class=\"kt-select__sheet-spacer\" aria-hidden=\"true\"></div>\n        }\n        <div class=\"kt-select__sheet-card\">\n          @if (compact()) {\n            <!-- Poign\u00E9e D\u00C9CORATIVE (ADR-0005) : la sheet s'attrape partout, le geste est natif. -->\n            <div class=\"kt-select__sheet-grab\" aria-hidden=\"true\" (mousedown)=\"$event.preventDefault()\"></div>\n            <!-- mousedown pr\u00E9ventif : un tap sur la carcasse ne doit pas voler le focus du widget\n                 (closePopupOnBlur fermerait le combobox) ; le click du bouton Fermer survit. -->\n            <header class=\"kt-select__sheet-header\" (mousedown)=\"$event.preventDefault()\">\n              <span class=\"kt-select__sheet-title\">{{ label() }}</span>\n              <button\n                type=\"button\"\n                class=\"kt-select__sheet-close\"\n                [attr.aria-label]=\"resolvedCloseLabel()\"\n                (click)=\"expanded.set(false)\"\n              >\n                <span class=\"kt-select__sheet-close-icon\" aria-hidden=\"true\">close</span>\n              </button>\n            </header>\n          }\n          @if (filterable()) {\n            <!-- Mode filtrable : le widget combobox est le panneau ENTIER (champ + annonce + liste).\n                 Indispensable : un focus pos\u00E9 hors de l'\u00E9l\u00E9ment ngComboboxWidget ferme le popup\n                 (closePopupOnBlur de @angular/aria) \u2014 le champ doit donc vivre dans ce sous-arbre. -->\n            <div\n              ngComboboxWidget\n              role=\"dialog\"\n              class=\"kt-select__panel\"\n              [id]=\"panelId\"\n              [attr.aria-label]=\"label()\"\n              [activeDescendant]=\"lb.activeDescendant()\"\n            >\n              <div class=\"kt-select__filter\">\n                <input\n                  #filterInput\n                  type=\"search\"\n                  role=\"combobox\"\n                  aria-autocomplete=\"list\"\n                  aria-expanded=\"true\"\n                  class=\"kt-select__filter-input\"\n                  autocomplete=\"off\"\n                  [placeholder]=\"resolvedFilterPlaceholder()\"\n                  [attr.aria-label]=\"resolvedFilterLabel()\"\n                  [attr.aria-controls]=\"lb.id()\"\n                  [attr.aria-activedescendant]=\"lb.activeDescendant()\"\n                  [value]=\"filterText()\"\n                  (input)=\"onFilterInput($event)\"\n                  (keydown)=\"onFilterKeydown($event)\"\n                />\n              </div>\n              <!-- Nombre de r\u00E9sultats annonc\u00E9 (diff\u00E9r\u00E9) aux lecteurs d'\u00E9cran : une liste qui\n                   r\u00E9tr\u00E9cit en silence est per\u00E7ue comme un bug (tests utilisateurs S. Higley). -->\n              <div class=\"kt-select__sr-only\" role=\"status\" aria-live=\"polite\">{{ announcedCount() }}</div>\n              <ul\n                #lb=\"ngListbox\"\n                #listboxEl\n                ngListbox\n                [focusMode]=\"compact() && !filterable() ? 'roving' : 'activedescendant'\"\n                selectionMode=\"explicit\"\n                class=\"kt-select__listbox\"\n                [attr.aria-label]=\"label()\"\n                [value]=\"listboxValue()\"\n                (valueChange)=\"onListboxValueChange($event)\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                @for (item of displayedOptions(); track keyOf(item)) {\n                  <li\n                    #opt=\"ngOption\"\n                    ngOption\n                    class=\"kt-select__option\"\n                    [value]=\"keyOf(item)\"\n                    [label]=\"labelOf(item)\"\n                    [disabled]=\"disabledOf(item)\"\n                    [class.kt-select__option--active]=\"opt.active()\"\n                  >\n                    @if (optionDef(); as def) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"def.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: item,\n                          selected: !!opt.selected(),\n                          active: opt.active(),\n                        }\"\n                      />\n                    } @else {\n                      {{ labelOf(item) }}\n                    }\n                  </li>\n                } @empty {\n                  <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedEmptyText() }}\n                  </li>\n                }\n                @if (filterable() && filteredOptions().length > maxVisibleOptions()) {\n                  <li class=\"kt-select__truncated-info\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedTruncatedResultsText()(maxVisibleOptions(), filteredOptions().length) }}\n                  </li>\n                }\n              </ul>\n            </div>\n          } @else {\n            <ul\n              #listbox=\"ngListbox\"\n              #listboxEl\n              ngComboboxWidget\n              ngListbox\n              [focusMode]=\"compact() ? 'roving' : 'activedescendant'\"\n              selectionMode=\"explicit\"\n              class=\"kt-select__listbox\"\n              [attr.aria-label]=\"label()\"\n              [value]=\"listboxValue()\"\n              (valueChange)=\"onListboxValueChange($event)\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [activeDescendant]=\"listbox.activeDescendant()\"\n            >\n              @for (item of options(); track keyOf(item)) {\n                <li\n                  #opt=\"ngOption\"\n                  ngOption\n                  class=\"kt-select__option\"\n                  [value]=\"keyOf(item)\"\n                  [label]=\"labelOf(item)\"\n                  [disabled]=\"disabledOf(item)\"\n                  [class.kt-select__option--active]=\"opt.active()\"\n                >\n                  @if (optionDef(); as def) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"def.template\"\n                      [ngTemplateOutletContext]=\"{ $implicit: item, selected: !!opt.selected(), active: opt.active() }\"\n                    />\n                  } @else {\n                    {{ labelOf(item) }}\n                  }\n                </li>\n              } @empty {\n                <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                  {{ resolvedEmptyText() }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</kt-field>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-select{position:relative}.kt-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--field-control-gap, .5rem);inline-size:100%;cursor:pointer;text-align:start;font:inherit;color:var(--field-color, inherit)}.kt-select__trigger:disabled{cursor:not-allowed;background:var(--field-disabled-bg, #f1f3f4);color:color-mix(in srgb,currentColor 50%,transparent)}.kt-select__value{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kt-select__placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__arrow{flex:none;font-family:Material Symbols Outlined;font-size:1.25em;line-height:1;font-feature-settings:\"liga\";color:var(--field-icon-color, #5f6368);transition:var(--select-arrow-transition, transform .12s ease);-webkit-font-smoothing:antialiased}.kt-select--open .kt-select__arrow{transform:rotate(180deg)}.kt-select__trigger--clearable .kt-select__value{margin-inline-end:2rem}.kt-select__clear{position:absolute;inset-block-start:50%;inset-inline-end:2.5rem;translate:0 -50%;display:inline-flex;align-items:center;justify-content:center;inline-size:24px;block-size:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__clear:after{content:\"\";position:absolute;inset:-10px}.kt-select__clear:hover{background-color:color-mix(in srgb,currentColor 12%,transparent);color:var(--field-color, inherit)}.kt-select__clear:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:1px}.kt-select__clear-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.25rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__popup{box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;border-width:var(--select-popup-border-width, var(--field-border-width, 1px));border-style:var(--field-border-style, solid);border-color:var(--field-border-color, #c4c7c5);border-radius:var(--field-radius, 8px);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);box-shadow:var(--select-popup-shadow, 0 4px 12px rgb(0 0 0 / 12%));-webkit-backdrop-filter:var(--select-popup-backdrop-filter, none);backdrop-filter:var(--select-popup-backdrop-filter, none);max-block-size:var(--select-popup-max-height, 16rem);overflow:hidden}.kt-select__sheet-card{display:contents}.kt-select__popup:not(:popover-open){display:none!important}.kt-select__popup:popover-open{animation:var(--select-popup-enter-animation, none)}@media(prefers-reduced-motion:reduce){.kt-select__popup:popover-open{animation:none}}.kt-select__listbox{flex:1 1 auto;min-block-size:0;margin:0;padding:.25rem;list-style:none;overflow-y:auto}.kt-select__panel{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}.kt-select__filter{flex:none;padding:.5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__filter-input{box-sizing:border-box;inline-size:100%;min-block-size:var(--field-min-height, 44px);padding:.375rem .625rem;border:var(--field-border-width, 1px) var(--field-border-style, solid) var(--field-border-color, #c4c7c5);border-radius:calc(var(--field-radius, 8px) * .75);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);font:inherit;appearance:none}.kt-select__filter-input::placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__filter-input:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-1px}.kt-select__filter-input::-webkit-search-cancel-button{appearance:none;inline-size:1rem;block-size:1rem;margin-inline-start:.375rem;cursor:pointer;background-color:var(--field-icon-color, #5f6368);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat}.kt-select__sr-only{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@supports (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto;top:anchor(bottom);left:anchor(left);margin-block-start:.25rem;min-inline-size:anchor-size(width);width:max-content;max-inline-size:min(90vw,28rem);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}@supports not (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto 0 0;inline-size:100%;max-inline-size:100%;border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0}}.kt-select__popup--sheet{position:fixed!important;inset:0!important;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important;width:100%!important;height:100%!important;max-block-size:none!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;display:block;overflow-y:auto!important;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}.kt-select__popup--sheet .kt-select__sheet-spacer{block-size:100%;scroll-snap-align:start;scroll-snap-stop:always}.kt-select__popup--sheet .kt-select__sheet-card{position:relative;z-index:2;display:flex;flex-direction:column;background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0;box-shadow:var(--kt-sheet-shadow, 0 -4px 16px rgb(0 0 0 / 12%));max-block-size:var(--kt-sheet-max-block-size, 85svh);width:100%;overflow:hidden;scroll-snap-align:end;scroll-snap-stop:always}.kt-select__popup--sheet .kt-select__sheet-card:has(.kt-select__filter){block-size:var(--kt-sheet-max-block-size, 85svh);max-block-size:var(--kt-sheet-max-block-size, 85svh)}::ng-deep .kt-select__popup--sheet::backdrop{display:none!important}.kt-select__sheet-scrim{display:none}.kt-select__popup--sheet .kt-select__sheet-scrim{display:block;position:fixed;inset:0;z-index:1;background:var(--kt-sheet-scrim, rgb(0 0 0 / 40%));opacity:0;pointer-events:auto;transition:opacity var(--kt-sheet-anim-duration, .12s) ease,overlay var(--kt-sheet-anim-duration, .12s) allow-discrete,display var(--kt-sheet-anim-duration, .12s) allow-discrete}.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:1}@starting-style{.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:0}}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-scrim,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-scrim{opacity:0;transition:opacity var(--kt-sheet-exit-duration, 90ms) ease}.kt-select__popup--sheet .kt-select__option{--select-option-min-height: 44px;padding-block:.625rem}.kt-select__popup--sheet .kt-select__filter-input{font-size:1rem;min-block-size:44px}@media(prefers-reduced-motion:reduce){.kt-select__popup--sheet .kt-select__sheet-scrim{transition:none}}.kt-select__sheet-grab{display:flex;align-items:center;justify-content:center;flex:none;block-size:28px}.kt-select__sheet-grab:before{content:\"\";inline-size:2.25rem;block-size:.25rem;border-radius:999px;background:var(--kt-sheet-grab-color, var(--kt-outline, #c4c7c5))}.kt-select__sheet-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:none;padding-block:.5rem;padding-inline:1rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__sheet-title{font-weight:600}.kt-select__sheet-close{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__sheet-close:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:2px}.kt-select__sheet-close-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.5rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__option{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;min-block-size:var( --select-option-min-height, 44px );padding:.5rem .625rem;border-radius:6px;cursor:pointer}.kt-select__option[aria-selected=true]{background:var(--select-option-selected-bg, color-mix(in srgb, var(--kt-primary, #0b57d0) 14%, transparent));color:var(--select-option-selected-color, inherit);font-weight:var(--select-option-selected-weight, 600)}.kt-select__option--active:not([aria-disabled=true]),.kt-select__option:hover:not([aria-disabled=true]){background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}.kt-select__empty{padding:.5rem .625rem;color:var(--field-hint-color, #5f6368)}.kt-select__truncated-info{box-sizing:border-box;padding:.5rem .625rem;font-size:.875rem;font-style:italic;color:var(--field-hint-color, #5f6368);border-block-start:1px solid var(--field-border-color, #c4c7c5);pointer-events:none}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], optionDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtSelectOptionDef), { isSignal: true }] }], triggerDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtSelectTriggerDef), { isSignal: true }] }] } });
 
 /** Configure les `kt-select` d'un sous-arbre via DI (équivalent du Context provider de react-select).
@@ -3194,12 +3281,32 @@ class KtChipList {
         this.statusTimer = setTimeout(() => this.status.set(''), STATUS_CLEAR_MS);
     }
     activeTransition = null;
+    /**
+     * Vrai sur le moteur WebKit (Safari desktop + TOUS les navigateurs iOS, qui embarquent WebKit).
+     *
+     * Contournement DOCUMENTÉ et RÉVERSIBLE d'un bug de compositing des View Transitions au niveau
+     * document sur WebKit : après la transition, les chips (hôtes d'éléments custom dont le
+     * `view-transition-name` est posé puis retiré dynamiquement) ne se repeignent pas — seules les
+     * croix « retirer » (boutons natifs, compositées sur une couche distincte) subsistent à l'écran.
+     * Touche aussi bien le retrait que le déplier/replier : les deux passent par ce wrapper.
+     *
+     * Le défaut n'est PAS feature-detectable : `startViewTransition` répond présente puis rate le
+     * rendu final, d'où la détection de MOTEUR. `navigator.vendor` est gelé pour compat — vaut
+     * « Apple Computer, Inc. » sur WebKit UNIQUEMENT (Blink = « Google Inc. », Gecko = « »). On NE
+     * gate PAS sur l'absence de la variante scopée `element.startViewTransition` : cela exclurait
+     * Firefox à tort (transition document parfaitement rendue chez lui). À RETIRER quand Safari
+     * corrigera le compositing.
+     */
+    isWebKitEngine() {
+        return this.doc.defaultView?.navigator.vendor === 'Apple Computer, Inc.';
+    }
     /** Exécute `action` dans une View Transition (morph des chips qui se déplacent, entrée/sortie
         stylées via `::view-transition-*(.chip-transition)` — cf. tokens.css). Transition SCOPÉE à
         l'élément quand le navigateur le permet (`element.startViewTransition`, Chrome 147+) ; sinon
         transition document — dans les deux cas, seuls les chips de CETTE liste sont nommés (cf.
-        `transitioning`). Fallback : action directe si l'API est absente ou si l'utilisateur
-        préfère moins de mouvement. */
+        `transitioning`). Fallback : action directe (retrait/dépli instantané, état final garanti
+        correct) si l'API est absente, si l'utilisateur préfère moins de mouvement, ou sur WebKit
+        (bug de compositing, cf. `isWebKitEngine`). */
     withViewTransition(action) {
         if (!isPlatformBrowser(this.platformId)) {
             action();
@@ -3212,7 +3319,8 @@ class KtChipList {
         const hostEl = this.host.nativeElement;
         const startViewTransition = hostEl.startViewTransition?.bind(hostEl) ??
             this.doc.startViewTransition?.bind(this.doc);
-        if (!startViewTransition || prefersReducedMotion) {
+        // WebKit : court-circuit AVANT tout nommage — sinon les chips restent fantômes (bug iOS).
+        if (!startViewTransition || prefersReducedMotion || this.isWebKitEngine()) {
             action();
             return;
         }
@@ -3467,11 +3575,7 @@ class KtMultiSelect extends KtBaseSelect {
         (clés ou objets), `options` les objets options correspondants, dans l'ordre de sélection. */
     selectionChange = output();
     // --- Présentation / Configuration (spécifique multi) ---
-    /** Bouton « tout effacer » sur le champ (même contrat que `clearable` de BaseInputField). @default false */
-    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Libellé i18n du bouton « tout effacer ». @default 'Clear' (ou KT_FIELD_CONFIG.clearLabel) */
-    clearLabel = input(this.fieldConfig?.clearLabel ?? 'Clear', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    // `clearable` / `clearLabel` sont mutualisés dans KtBaseSelect (contrat identique au single).
     /** Barre « Tout sélectionner / Tout effacer » en tête du popup (bascule le popup en panneau dialog). */
     selectionActions = input(false, { ...(ngDevMode ? { debugName: "selectionActions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Nombre maximal de chips affichés avant repli derrière un bouton « +N more ». Défaut : illimité. */
@@ -3694,7 +3798,7 @@ class KtMultiSelect extends KtBaseSelect {
         this.announceNow(this.resolvedSelectionCountText()(this.selectedOptions().length));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMultiSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtMultiSelect, isStandalone: true, selector: "kt-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, selectionActions: { classPropertyName: "selectionActions", publicName: "selectionActions", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleChips: { classPropertyName: "maxVisibleChips", publicName: "maxVisibleChips", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange" }, queries: [{ propertyName: "optionDef", first: true, predicate: KtMultiSelectOptionDef, descendants: true, isSignal: true }, { propertyName: "triggerDef", first: true, predicate: KtMultiSelectTriggerDef, descendants: true, isSignal: true }, { propertyName: "chipDef", first: true, predicate: KtMultiSelectChipDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "chipList", first: true, predicate: KtChipList, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"fieldErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  [hideLabel]=\"hideLabel()\"\n  [hideErrors]=\"hideErrors()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div class=\"kt-select\" [class.kt-select--open]=\"expanded()\">\n    <button\n      #combobox=\"ngCombobox\"\n      #trigger\n      ngCombobox\n      ktFieldControl\n      type=\"button\"\n      class=\"kt-field-box kt-select__trigger\"\n      [class.kt-select__trigger--clearable]=\"showClear()\"\n      [(expanded)]=\"expanded\"\n      [disabled]=\"disabled()\"\n      [softDisabled]=\"false\"\n      [attr.data-invalid]=\"showInvalid() ? '' : null\"\n      [attr.data-disabled]=\"disabled() ? '' : null\"\n      [attr.data-filled]=\"selectedOptions().length ? '' : null\"\n      [attr.data-pending]=\"pending() ? '' : null\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    >\n      <span class=\"kt-select__value\">\n        @if (triggerDef(); as def) {\n          <ng-container\n            [ngTemplateOutlet]=\"def.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedOptions() }\"\n          />\n        } @else if (selectedOptions().length > 0) {\n          {{ triggerText() }}\n        } @else {\n          <span class=\"kt-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n        }\n      </span>\n      <span class=\"kt-select__arrow\" aria-hidden=\"true\">arrow_drop_down</span>\n    </button>\n\n    <!-- Tout effacer depuis le champ : sibling du trigger (pas de bouton imbriqu\u00E9 dans un bouton). -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"kt-select__clear\"\n        [attr.aria-label]=\"clearLabel()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"clearSelection()\"\n      >\n        <span class=\"kt-select__clear-icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    <!-- Popup Popover (top-layer). M\u00EAme logique mobile bottom-sheet adaptative que le select classique. -->\n    <ng-template ngComboboxPopup [combobox]=\"combobox\" [popupType]=\"dialogMode() ? 'dialog' : 'listbox'\">\n      <div #popup popover=\"manual\" class=\"kt-select__popup\" [class.kt-select__popup--sheet]=\"compact()\">\n        @if (compact()) {\n          <div class=\"kt-select__sheet-scrim\" aria-hidden=\"true\" (click)=\"expanded.set(false)\"></div>\n        }\n        <div class=\"kt-select__sheet-card\">\n          @if (compact()) {\n            <div\n              class=\"kt-select__sheet-grab\"\n              aria-hidden=\"true\"\n              (pointerdown)=\"onDragStart($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n            ></div>\n            <header class=\"kt-select__sheet-header\">\n              <span class=\"kt-select__sheet-title\">{{ label() }}</span>\n              <button\n                type=\"button\"\n                class=\"kt-select__sheet-close\"\n                [attr.aria-label]=\"resolvedCloseLabel()\"\n                (click)=\"expanded.set(false)\"\n              >\n                <span class=\"kt-select__sheet-close-icon\" aria-hidden=\"true\">close</span>\n              </button>\n            </header>\n          }\n          @if (dialogMode()) {\n            <!-- Mode panneau (filtre et/ou actions de masse) : Widget Dialog -->\n            <div\n              ngComboboxWidget\n              role=\"dialog\"\n              class=\"kt-select__panel\"\n              [id]=\"panelId\"\n              [attr.aria-label]=\"label()\"\n              [activeDescendant]=\"lb.activeDescendant()\"\n              (keydown)=\"onPanelKeydown($event)\"\n            >\n              @if (selectionActions()) {\n                <div class=\"kt-select__actions\">\n                  <button type=\"button\" class=\"kt-select__action\" (click)=\"selectAllFiltered()\">\n                    {{ resolvedSelectAllLabel() }}\n                  </button>\n                  <button type=\"button\" class=\"kt-select__action\" (click)=\"clearAllFiltered()\">\n                    {{ resolvedClearAllLabel() }}\n                  </button>\n                </div>\n              }\n              @if (filterable()) {\n                <div class=\"kt-select__filter\">\n                  <input\n                    #filterInput\n                    type=\"search\"\n                    role=\"combobox\"\n                    aria-autocomplete=\"list\"\n                    aria-expanded=\"true\"\n                    class=\"kt-select__filter-input\"\n                    autocomplete=\"off\"\n                    [placeholder]=\"resolvedFilterPlaceholder()\"\n                    [attr.aria-label]=\"resolvedFilterLabel()\"\n                    [attr.aria-controls]=\"lb.id()\"\n                    [attr.aria-activedescendant]=\"lb.activeDescendant()\"\n                    [value]=\"filterText()\"\n                    (input)=\"onFilterInput($event)\"\n                    (keydown)=\"onFilterKeydown($event)\"\n                  />\n                </div>\n              }\n              @if (selectedOptions().length > 0) {\n                <!-- Rappel visuel (s\u00E9lections potentiellement masqu\u00E9es par le filtre) ;\n                     l'info SR passe par la live region ci-dessous \u2192 aria-hidden. -->\n                <div class=\"kt-select__count\" aria-hidden=\"true\">{{ selectionCountLabel() }}</div>\n              }\n              <div class=\"kt-select__sr-only kt-select__filter-status\" role=\"status\" aria-live=\"polite\">\n                {{ announcedCount() }}\n              </div>\n              <ul\n                #lb=\"ngListbox\"\n                #listboxEl\n                ngListbox\n                [multi]=\"true\"\n                [focusMode]=\"compact() && !filterable() ? 'roving' : 'activedescendant'\"\n                selectionMode=\"explicit\"\n                class=\"kt-select__listbox\"\n                [attr.aria-label]=\"label()\"\n                [value]=\"listboxValue()\"\n                (valueChange)=\"onListboxValueChange($event)\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                @for (item of displayedOptions(); track keyOf(item)) {\n                  <li\n                    #opt=\"ngOption\"\n                    ngOption\n                    class=\"kt-select__option kt-select__option--multiple\"\n                    [value]=\"keyOf(item)\"\n                    [label]=\"labelOf(item)\"\n                    [disabled]=\"disabledOf(item)\"\n                    [class.kt-select__option--active]=\"opt.active()\"\n                  >\n                    <span class=\"kt-select__checkbox\" aria-hidden=\"true\">\n                      @if (opt.selected()) {\n                        <span class=\"kt-select__checkbox-icon\">check_box</span>\n                      } @else {\n                        <span class=\"kt-select__checkbox-icon\">check_box_outline_blank</span>\n                      }\n                    </span>\n                    <span class=\"kt-select__option-content\">\n                      @if (optionDef(); as def) {\n                        <ng-container\n                          [ngTemplateOutlet]=\"def.template\"\n                          [ngTemplateOutletContext]=\"{\n                            $implicit: item,\n                            selected: !!opt.selected(),\n                            active: opt.active(),\n                          }\"\n                        />\n                      } @else {\n                        {{ labelOf(item) }}\n                      }\n                    </span>\n                  </li>\n                } @empty {\n                  <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedEmptyText() }}\n                  </li>\n                }\n                @if (filterable() && filteredOptions().length > maxVisibleOptions()) {\n                  <li class=\"kt-select__truncated-info\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedTruncatedResultsText()(maxVisibleOptions(), filteredOptions().length) }}\n                  </li>\n                }\n              </ul>\n            </div>\n          } @else {\n            <!-- Mode simple : Widget Listbox direct -->\n            <ul\n              #listbox=\"ngListbox\"\n              #listboxEl\n              ngComboboxWidget\n              ngListbox\n              [multi]=\"true\"\n              [focusMode]=\"compact() ? 'roving' : 'activedescendant'\"\n              selectionMode=\"explicit\"\n              class=\"kt-select__listbox\"\n              [attr.aria-label]=\"label()\"\n              [value]=\"listboxValue()\"\n              (valueChange)=\"onListboxValueChange($event)\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [activeDescendant]=\"listbox.activeDescendant()\"\n            >\n              @for (item of options(); track keyOf(item)) {\n                <li\n                  #opt=\"ngOption\"\n                  ngOption\n                  class=\"kt-select__option kt-select__option--multiple\"\n                  [value]=\"keyOf(item)\"\n                  [label]=\"labelOf(item)\"\n                  [disabled]=\"disabledOf(item)\"\n                  [class.kt-select__option--active]=\"opt.active()\"\n                >\n                  <span class=\"kt-select__checkbox\" aria-hidden=\"true\">\n                    @if (opt.selected()) {\n                      <span class=\"kt-select__checkbox-icon\">check_box</span>\n                    } @else {\n                      <span class=\"kt-select__checkbox-icon\">check_box_outline_blank</span>\n                    }\n                  </span>\n                  <span class=\"kt-select__option-content\">\n                    @if (optionDef(); as def) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"def.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: item,\n                          selected: !!opt.selected(),\n                          active: opt.active(),\n                        }\"\n                      />\n                    } @else {\n                      {{ labelOf(item) }}\n                    }\n                  </span>\n                </li>\n              } @empty {\n                <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                  {{ resolvedEmptyText() }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </div>\n\n  <!-- Chips r\u00E9vocables (Option 1) sous le trigger : d\u00E9l\u00E9gu\u00E9s au composant r\u00E9utilisable\n       kt-chip-list (focus management, repli +N, live region). Les textes r\u00E9solus depuis\n       KT_SELECT_CONFIG sont pass\u00E9s en inputs (ils priment sur un \u00E9ventuel KT_CHIPS_CONFIG). -->\n  <kt-chip-list\n    [items]=\"selectedOptions()\"\n    [itemLabel]=\"chipLabelOf\"\n    [itemKey]=\"chipKeyOf\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [maxVisible]=\"maxVisibleChips()\"\n    [listLabel]=\"resolvedSelectedItemsLabel()\"\n    [removeItemLabel]=\"resolvedRemoveItemLabel()\"\n    [itemRemovedText]=\"resolvedItemRemovedText()\"\n    [moreLabel]=\"resolvedMoreChipsLabel()\"\n    [lessLabel]=\"resolvedLessChipsLabel()\"\n    [chipTemplate]=\"chipDef()?.template ?? null\"\n    [emptyFocusTarget]=\"triggerEl()?.nativeElement\"\n    (removed)=\"removeOption($event.item)\"\n  />\n</kt-field>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-select{position:relative}.kt-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--field-control-gap, .5rem);inline-size:100%;cursor:pointer;text-align:start;font:inherit;color:var(--field-color, inherit)}.kt-select__trigger:disabled{cursor:not-allowed;background:var(--field-disabled-bg, #f1f3f4);color:color-mix(in srgb,currentColor 50%,transparent)}.kt-select__value{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kt-select__placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__arrow{flex:none;font-family:Material Symbols Outlined;font-size:1.25em;line-height:1;font-feature-settings:\"liga\";color:var(--field-icon-color, #5f6368);transition:var(--select-arrow-transition, transform .12s ease);-webkit-font-smoothing:antialiased}.kt-select--open .kt-select__arrow{transform:rotate(180deg)}.kt-select__popup{box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;border-width:var(--select-popup-border-width, var(--field-border-width, 1px));border-style:var(--field-border-style, solid);border-color:var(--field-border-color, #c4c7c5);border-radius:var(--field-radius, 8px);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);box-shadow:var(--select-popup-shadow, 0 4px 12px rgb(0 0 0 / 12%));-webkit-backdrop-filter:var(--select-popup-backdrop-filter, none);backdrop-filter:var(--select-popup-backdrop-filter, none);max-block-size:var(--select-popup-max-height, 16rem);overflow:hidden}.kt-select__sheet-card{display:contents}.kt-select__popup:not(:popover-open){display:none!important}.kt-select__popup:popover-open{animation:var(--select-popup-enter-animation, none)}@media(prefers-reduced-motion:reduce){.kt-select__popup:popover-open{animation:none}}.kt-select__listbox{flex:1 1 auto;min-block-size:0;margin:0;padding:.25rem;list-style:none;overflow-y:auto}.kt-select__panel{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}.kt-select__filter{flex:none;padding:.5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__filter-input{box-sizing:border-box;inline-size:100%;min-block-size:var(--field-min-height, 44px);padding:.375rem .625rem;border:var(--field-border-width, 1px) var(--field-border-style, solid) var(--field-border-color, #c4c7c5);border-radius:calc(var(--field-radius, 8px) * .75);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);font:inherit;appearance:none}.kt-select__filter-input::placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__filter-input:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-1px}.kt-select__filter-input::-webkit-search-cancel-button{appearance:none;inline-size:1rem;block-size:1rem;margin-inline-start:.375rem;cursor:pointer;background-color:var(--field-icon-color, #5f6368);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat}.kt-select__sr-only{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@supports (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto;top:anchor(bottom);left:anchor(left);margin-block-start:.25rem;min-inline-size:anchor-size(width);width:max-content;max-inline-size:min(90vw,28rem);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}@supports not (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto 0 0;inline-size:100%;max-inline-size:100%;border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0}}.kt-select__popup--sheet{position:fixed!important;inset:0!important;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important;width:100%!important;height:100%!important;max-block-size:none!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;display:flex;flex-direction:column!important;justify-content:flex-end!important}.kt-select__popup--sheet .kt-select__sheet-card{position:relative;z-index:2;display:flex;flex-direction:column;background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0;box-shadow:var(--kt-sheet-shadow, 0 -4px 16px rgb(0 0 0 / 12%));max-block-size:var(--kt-sheet-max-block-size, 85svh);width:100%;overflow:hidden;translate:0 0;transition:translate var(--kt-sheet-anim-duration, .12s) ease}.kt-select__popup--sheet .kt-select__sheet-card:has(.kt-select__filter){block-size:var(--kt-sheet-max-block-size, 85svh);max-block-size:var(--kt-sheet-max-block-size, 85svh)}.kt-select__popup--sheet:popover-open .kt-select__sheet-card{translate:0 0;animation:var(--select-sheet-enter-animation, kt-sheet-in var(--kt-sheet-anim-duration, .12s) ease)}.kt-select__popup--sheet .kt-select__sheet-card.kt-select__popup--dragging{transition:none}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-card,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-card{translate:0 100%;transition:translate var(--kt-sheet-exit-duration, 90ms) cubic-bezier(.4,0,.2,1)}::ng-deep .kt-select__popup--sheet::backdrop{display:none!important}.kt-select__sheet-scrim{display:none}.kt-select__popup--sheet .kt-select__sheet-scrim{display:block;position:fixed;inset:0;z-index:1;background:var(--kt-sheet-scrim, rgb(0 0 0 / 40%));opacity:0;pointer-events:auto;transition:opacity var(--kt-sheet-anim-duration, .12s) ease,overlay var(--kt-sheet-anim-duration, .12s) allow-discrete,display var(--kt-sheet-anim-duration, .12s) allow-discrete}.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:1}@starting-style{.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:0}}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-scrim,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-scrim{opacity:0;transition:opacity var(--kt-sheet-exit-duration, 90ms) ease}.kt-select__popup--sheet .kt-select__option{--select-option-min-height: 44px;padding-block:.625rem}.kt-select__popup--sheet .kt-select__filter-input{font-size:1rem;min-block-size:44px}@media(prefers-reduced-motion:reduce){.kt-select__popup--sheet .kt-select__sheet-card,.kt-select__popup--sheet .kt-select__sheet-scrim{transition:none;translate:0 0}}.kt-select__sheet-grab{display:flex;align-items:center;justify-content:center;flex:none;block-size:44px;cursor:grab;touch-action:none}.kt-select__sheet-grab:active{cursor:grabbing}.kt-select__sheet-grab:before{content:\"\";inline-size:2.25rem;block-size:.25rem;border-radius:999px;background:var(--kt-sheet-grab-color, var(--kt-outline, #c4c7c5))}.kt-select__sheet-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:none;padding-block:.5rem;padding-inline:1rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__sheet-title{font-weight:600}.kt-select__sheet-close{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__sheet-close:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:2px}.kt-select__sheet-close-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.5rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__option{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;min-block-size:var( --select-option-min-height, 44px );padding:.5rem .625rem;border-radius:6px;cursor:pointer}.kt-select__option[aria-selected=true]{background:var(--select-option-selected-bg, color-mix(in srgb, var(--kt-primary, #0b57d0) 14%, transparent));color:var(--select-option-selected-color, inherit);font-weight:var(--select-option-selected-weight, 600)}.kt-select__option--active:not([aria-disabled=true]),.kt-select__option:hover:not([aria-disabled=true]){background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}.kt-select__empty{padding:.5rem .625rem;color:var(--field-hint-color, #5f6368)}.kt-select__truncated-info{box-sizing:border-box;padding:.5rem .625rem;font-size:.875rem;font-style:italic;color:var(--field-hint-color, #5f6368);border-block-start:1px solid var(--field-border-color, #c4c7c5);pointer-events:none}}\n", "@layer kt-aaa.components{.kt-select__trigger--clearable .kt-select__value{margin-inline-end:2rem}.kt-select__clear{position:absolute;inset-block-start:50%;inset-inline-end:2.5rem;translate:0 -50%;display:inline-flex;align-items:center;justify-content:center;inline-size:24px;block-size:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__clear:after{content:\"\";position:absolute;inset:-10px}.kt-select__clear:hover{background-color:color-mix(in srgb,currentColor 12%,transparent);color:var(--field-color, inherit)}.kt-select__clear:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:1px}.kt-select__clear-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.25rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__actions{display:flex;gap:.25rem;flex:none;padding:.25rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__action{flex:1;min-block-size:44px;padding:.375rem .625rem;border:0;border-radius:calc(var(--field-radius, 8px) * .75);background:transparent;color:var(--kt-primary, #0b57d0);font:inherit;font-weight:500;cursor:pointer}.kt-select__action:hover{background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__action:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-2px}.kt-select__count{flex:none;padding:.25rem .75rem;font-size:.8125rem;color:var(--field-hint-color, #5f6368);border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__checkbox{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-inline-end:.25rem;-webkit-user-select:none;user-select:none}.kt-select__checkbox-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.25rem;line-height:1;color:var(--field-icon-color, #5f6368);-webkit-font-smoothing:antialiased}.kt-select__option[aria-selected=true] .kt-select__checkbox-icon{color:var(--kt-primary, #0b57d0)}.kt-select__option--multiple{display:flex;align-items:center;gap:.5rem}.kt-select__option-content{flex:1;min-inline-size:0}kt-chip-list:not([data-empty]){margin-block-start:.5rem}}\n"], dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "hideLabel", "hideErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Combobox, selector: "[ngCombobox]", inputs: ["disabled", "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: "component", type: KtChipList, selector: "kt-chip-list", inputs: ["items", "itemLabel", "itemKey", "removable", "disabled", "readonly", "maxVisible", "listLabel", "removeItemLabel", "itemRemovedText", "moreLabel", "lessLabel", "chipTemplate", "emptyFocusTarget"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtMultiSelect, isStandalone: true, selector: "kt-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selectionActions: { classPropertyName: "selectionActions", publicName: "selectionActions", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleChips: { classPropertyName: "maxVisibleChips", publicName: "maxVisibleChips", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange" }, queries: [{ propertyName: "optionDef", first: true, predicate: KtMultiSelectOptionDef, descendants: true, isSignal: true }, { propertyName: "triggerDef", first: true, predicate: KtMultiSelectTriggerDef, descendants: true, isSignal: true }, { propertyName: "chipDef", first: true, predicate: KtMultiSelectChipDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "chipList", first: true, predicate: KtChipList, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"fieldErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  [hideLabel]=\"hideLabel()\"\n  [hideErrors]=\"hideErrors()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div class=\"kt-select\" [class.kt-select--open]=\"expanded()\">\n    <button\n      #combobox=\"ngCombobox\"\n      #trigger\n      ngCombobox\n      ktFieldControl\n      type=\"button\"\n      class=\"kt-field-box kt-select__trigger\"\n      [class.kt-select__trigger--clearable]=\"showClear()\"\n      [(expanded)]=\"expanded\"\n      [disabled]=\"disabled()\"\n      [softDisabled]=\"false\"\n      [attr.data-invalid]=\"showInvalid() ? '' : null\"\n      [attr.data-disabled]=\"disabled() ? '' : null\"\n      [attr.data-filled]=\"selectedOptions().length ? '' : null\"\n      [attr.data-pending]=\"pending() ? '' : null\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    >\n      <span class=\"kt-select__value\">\n        @if (triggerDef(); as def) {\n          <ng-container\n            [ngTemplateOutlet]=\"def.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedOptions() }\"\n          />\n        } @else if (selectedOptions().length > 0) {\n          {{ triggerText() }}\n        } @else {\n          <span class=\"kt-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n        }\n      </span>\n      <span class=\"kt-select__arrow\" aria-hidden=\"true\">arrow_drop_down</span>\n    </button>\n\n    <!-- Tout effacer depuis le champ : sibling du trigger (pas de bouton imbriqu\u00E9 dans un bouton). -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"kt-select__clear\"\n        [attr.aria-label]=\"clearLabel()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"clearSelection()\"\n      >\n        <span class=\"kt-select__clear-icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    <!-- Popup Popover (top-layer). M\u00EAme logique mobile bottom-sheet adaptative que le select classique. -->\n    <ng-template ngComboboxPopup [combobox]=\"combobox\" [popupType]=\"dialogMode() ? 'dialog' : 'listbox'\">\n      <div #popup popover=\"manual\" class=\"kt-select__popup\" [class.kt-select__popup--sheet]=\"compact()\">\n        @if (compact()) {\n          <div class=\"kt-select__sheet-scrim\" aria-hidden=\"true\" (click)=\"expanded.set(false)\"></div>\n          <div class=\"kt-select__sheet-spacer\" aria-hidden=\"true\"></div>\n        }\n        <div class=\"kt-select__sheet-card\">\n          @if (compact()) {\n            <!-- Poign\u00E9e D\u00C9CORATIVE (ADR-0005) : la sheet s'attrape partout, le geste est natif. -->\n            <div class=\"kt-select__sheet-grab\" aria-hidden=\"true\" (mousedown)=\"$event.preventDefault()\"></div>\n            <!-- mousedown pr\u00E9ventif : un tap sur la carcasse ne doit pas voler le focus du widget\n                 (closePopupOnBlur fermerait le combobox) ; le click du bouton Fermer survit. -->\n            <header class=\"kt-select__sheet-header\" (mousedown)=\"$event.preventDefault()\">\n              <span class=\"kt-select__sheet-title\">{{ label() }}</span>\n              <button\n                type=\"button\"\n                class=\"kt-select__sheet-close\"\n                [attr.aria-label]=\"resolvedCloseLabel()\"\n                (click)=\"expanded.set(false)\"\n              >\n                <span class=\"kt-select__sheet-close-icon\" aria-hidden=\"true\">close</span>\n              </button>\n            </header>\n          }\n          @if (dialogMode()) {\n            <!-- Mode panneau (filtre et/ou actions de masse) : Widget Dialog -->\n            <div\n              ngComboboxWidget\n              role=\"dialog\"\n              class=\"kt-select__panel\"\n              [id]=\"panelId\"\n              [attr.aria-label]=\"label()\"\n              [activeDescendant]=\"lb.activeDescendant()\"\n              (keydown)=\"onPanelKeydown($event)\"\n            >\n              @if (selectionActions()) {\n                <div class=\"kt-select__actions\">\n                  <button type=\"button\" class=\"kt-select__action\" (click)=\"selectAllFiltered()\">\n                    {{ resolvedSelectAllLabel() }}\n                  </button>\n                  <button type=\"button\" class=\"kt-select__action\" (click)=\"clearAllFiltered()\">\n                    {{ resolvedClearAllLabel() }}\n                  </button>\n                </div>\n              }\n              @if (filterable()) {\n                <div class=\"kt-select__filter\">\n                  <input\n                    #filterInput\n                    type=\"search\"\n                    role=\"combobox\"\n                    aria-autocomplete=\"list\"\n                    aria-expanded=\"true\"\n                    class=\"kt-select__filter-input\"\n                    autocomplete=\"off\"\n                    [placeholder]=\"resolvedFilterPlaceholder()\"\n                    [attr.aria-label]=\"resolvedFilterLabel()\"\n                    [attr.aria-controls]=\"lb.id()\"\n                    [attr.aria-activedescendant]=\"lb.activeDescendant()\"\n                    [value]=\"filterText()\"\n                    (input)=\"onFilterInput($event)\"\n                    (keydown)=\"onFilterKeydown($event)\"\n                  />\n                </div>\n              }\n              @if (selectedOptions().length > 0) {\n                <!-- Rappel visuel (s\u00E9lections potentiellement masqu\u00E9es par le filtre) ;\n                     l'info SR passe par la live region ci-dessous \u2192 aria-hidden. -->\n                <div class=\"kt-select__count\" aria-hidden=\"true\">{{ selectionCountLabel() }}</div>\n              }\n              <div class=\"kt-select__sr-only kt-select__filter-status\" role=\"status\" aria-live=\"polite\">\n                {{ announcedCount() }}\n              </div>\n              <ul\n                #lb=\"ngListbox\"\n                #listboxEl\n                ngListbox\n                [multi]=\"true\"\n                [focusMode]=\"compact() && !filterable() ? 'roving' : 'activedescendant'\"\n                selectionMode=\"explicit\"\n                class=\"kt-select__listbox\"\n                [attr.aria-label]=\"label()\"\n                [value]=\"listboxValue()\"\n                (valueChange)=\"onListboxValueChange($event)\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                @for (item of displayedOptions(); track keyOf(item)) {\n                  <li\n                    #opt=\"ngOption\"\n                    ngOption\n                    class=\"kt-select__option kt-select__option--multiple\"\n                    [value]=\"keyOf(item)\"\n                    [label]=\"labelOf(item)\"\n                    [disabled]=\"disabledOf(item)\"\n                    [class.kt-select__option--active]=\"opt.active()\"\n                  >\n                    <span class=\"kt-select__checkbox\" aria-hidden=\"true\">\n                      @if (opt.selected()) {\n                        <span class=\"kt-select__checkbox-icon\">check_box</span>\n                      } @else {\n                        <span class=\"kt-select__checkbox-icon\">check_box_outline_blank</span>\n                      }\n                    </span>\n                    <span class=\"kt-select__option-content\">\n                      @if (optionDef(); as def) {\n                        <ng-container\n                          [ngTemplateOutlet]=\"def.template\"\n                          [ngTemplateOutletContext]=\"{\n                            $implicit: item,\n                            selected: !!opt.selected(),\n                            active: opt.active(),\n                          }\"\n                        />\n                      } @else {\n                        {{ labelOf(item) }}\n                      }\n                    </span>\n                  </li>\n                } @empty {\n                  <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedEmptyText() }}\n                  </li>\n                }\n                @if (filterable() && filteredOptions().length > maxVisibleOptions()) {\n                  <li class=\"kt-select__truncated-info\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedTruncatedResultsText()(maxVisibleOptions(), filteredOptions().length) }}\n                  </li>\n                }\n              </ul>\n            </div>\n          } @else {\n            <!-- Mode simple : Widget Listbox direct -->\n            <ul\n              #listbox=\"ngListbox\"\n              #listboxEl\n              ngComboboxWidget\n              ngListbox\n              [multi]=\"true\"\n              [focusMode]=\"compact() ? 'roving' : 'activedescendant'\"\n              selectionMode=\"explicit\"\n              class=\"kt-select__listbox\"\n              [attr.aria-label]=\"label()\"\n              [value]=\"listboxValue()\"\n              (valueChange)=\"onListboxValueChange($event)\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [activeDescendant]=\"listbox.activeDescendant()\"\n            >\n              @for (item of options(); track keyOf(item)) {\n                <li\n                  #opt=\"ngOption\"\n                  ngOption\n                  class=\"kt-select__option kt-select__option--multiple\"\n                  [value]=\"keyOf(item)\"\n                  [label]=\"labelOf(item)\"\n                  [disabled]=\"disabledOf(item)\"\n                  [class.kt-select__option--active]=\"opt.active()\"\n                >\n                  <span class=\"kt-select__checkbox\" aria-hidden=\"true\">\n                    @if (opt.selected()) {\n                      <span class=\"kt-select__checkbox-icon\">check_box</span>\n                    } @else {\n                      <span class=\"kt-select__checkbox-icon\">check_box_outline_blank</span>\n                    }\n                  </span>\n                  <span class=\"kt-select__option-content\">\n                    @if (optionDef(); as def) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"def.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: item,\n                          selected: !!opt.selected(),\n                          active: opt.active(),\n                        }\"\n                      />\n                    } @else {\n                      {{ labelOf(item) }}\n                    }\n                  </span>\n                </li>\n              } @empty {\n                <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                  {{ resolvedEmptyText() }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </div>\n\n  <!-- Chips r\u00E9vocables (Option 1) sous le trigger : d\u00E9l\u00E9gu\u00E9s au composant r\u00E9utilisable\n       kt-chip-list (focus management, repli +N, live region). Les textes r\u00E9solus depuis\n       KT_SELECT_CONFIG sont pass\u00E9s en inputs (ils priment sur un \u00E9ventuel KT_CHIPS_CONFIG). -->\n  <kt-chip-list\n    [items]=\"selectedOptions()\"\n    [itemLabel]=\"chipLabelOf\"\n    [itemKey]=\"chipKeyOf\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [maxVisible]=\"maxVisibleChips()\"\n    [listLabel]=\"resolvedSelectedItemsLabel()\"\n    [removeItemLabel]=\"resolvedRemoveItemLabel()\"\n    [itemRemovedText]=\"resolvedItemRemovedText()\"\n    [moreLabel]=\"resolvedMoreChipsLabel()\"\n    [lessLabel]=\"resolvedLessChipsLabel()\"\n    [chipTemplate]=\"chipDef()?.template ?? null\"\n    [emptyFocusTarget]=\"triggerEl()?.nativeElement\"\n    (removed)=\"removeOption($event.item)\"\n  />\n</kt-field>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-select{position:relative}.kt-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--field-control-gap, .5rem);inline-size:100%;cursor:pointer;text-align:start;font:inherit;color:var(--field-color, inherit)}.kt-select__trigger:disabled{cursor:not-allowed;background:var(--field-disabled-bg, #f1f3f4);color:color-mix(in srgb,currentColor 50%,transparent)}.kt-select__value{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kt-select__placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__arrow{flex:none;font-family:Material Symbols Outlined;font-size:1.25em;line-height:1;font-feature-settings:\"liga\";color:var(--field-icon-color, #5f6368);transition:var(--select-arrow-transition, transform .12s ease);-webkit-font-smoothing:antialiased}.kt-select--open .kt-select__arrow{transform:rotate(180deg)}.kt-select__trigger--clearable .kt-select__value{margin-inline-end:2rem}.kt-select__clear{position:absolute;inset-block-start:50%;inset-inline-end:2.5rem;translate:0 -50%;display:inline-flex;align-items:center;justify-content:center;inline-size:24px;block-size:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__clear:after{content:\"\";position:absolute;inset:-10px}.kt-select__clear:hover{background-color:color-mix(in srgb,currentColor 12%,transparent);color:var(--field-color, inherit)}.kt-select__clear:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:1px}.kt-select__clear-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.25rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__popup{box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;border-width:var(--select-popup-border-width, var(--field-border-width, 1px));border-style:var(--field-border-style, solid);border-color:var(--field-border-color, #c4c7c5);border-radius:var(--field-radius, 8px);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);box-shadow:var(--select-popup-shadow, 0 4px 12px rgb(0 0 0 / 12%));-webkit-backdrop-filter:var(--select-popup-backdrop-filter, none);backdrop-filter:var(--select-popup-backdrop-filter, none);max-block-size:var(--select-popup-max-height, 16rem);overflow:hidden}.kt-select__sheet-card{display:contents}.kt-select__popup:not(:popover-open){display:none!important}.kt-select__popup:popover-open{animation:var(--select-popup-enter-animation, none)}@media(prefers-reduced-motion:reduce){.kt-select__popup:popover-open{animation:none}}.kt-select__listbox{flex:1 1 auto;min-block-size:0;margin:0;padding:.25rem;list-style:none;overflow-y:auto}.kt-select__panel{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}.kt-select__filter{flex:none;padding:.5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__filter-input{box-sizing:border-box;inline-size:100%;min-block-size:var(--field-min-height, 44px);padding:.375rem .625rem;border:var(--field-border-width, 1px) var(--field-border-style, solid) var(--field-border-color, #c4c7c5);border-radius:calc(var(--field-radius, 8px) * .75);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);font:inherit;appearance:none}.kt-select__filter-input::placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__filter-input:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-1px}.kt-select__filter-input::-webkit-search-cancel-button{appearance:none;inline-size:1rem;block-size:1rem;margin-inline-start:.375rem;cursor:pointer;background-color:var(--field-icon-color, #5f6368);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat}.kt-select__sr-only{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@supports (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto;top:anchor(bottom);left:anchor(left);margin-block-start:.25rem;min-inline-size:anchor-size(width);width:max-content;max-inline-size:min(90vw,28rem);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}@supports not (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto 0 0;inline-size:100%;max-inline-size:100%;border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0}}.kt-select__popup--sheet{position:fixed!important;inset:0!important;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important;width:100%!important;height:100%!important;max-block-size:none!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;display:block;overflow-y:auto!important;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}.kt-select__popup--sheet .kt-select__sheet-spacer{block-size:100%;scroll-snap-align:start;scroll-snap-stop:always}.kt-select__popup--sheet .kt-select__sheet-card{position:relative;z-index:2;display:flex;flex-direction:column;background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0;box-shadow:var(--kt-sheet-shadow, 0 -4px 16px rgb(0 0 0 / 12%));max-block-size:var(--kt-sheet-max-block-size, 85svh);width:100%;overflow:hidden;scroll-snap-align:end;scroll-snap-stop:always}.kt-select__popup--sheet .kt-select__sheet-card:has(.kt-select__filter){block-size:var(--kt-sheet-max-block-size, 85svh);max-block-size:var(--kt-sheet-max-block-size, 85svh)}::ng-deep .kt-select__popup--sheet::backdrop{display:none!important}.kt-select__sheet-scrim{display:none}.kt-select__popup--sheet .kt-select__sheet-scrim{display:block;position:fixed;inset:0;z-index:1;background:var(--kt-sheet-scrim, rgb(0 0 0 / 40%));opacity:0;pointer-events:auto;transition:opacity var(--kt-sheet-anim-duration, .12s) ease,overlay var(--kt-sheet-anim-duration, .12s) allow-discrete,display var(--kt-sheet-anim-duration, .12s) allow-discrete}.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:1}@starting-style{.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:0}}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-scrim,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-scrim{opacity:0;transition:opacity var(--kt-sheet-exit-duration, 90ms) ease}.kt-select__popup--sheet .kt-select__option{--select-option-min-height: 44px;padding-block:.625rem}.kt-select__popup--sheet .kt-select__filter-input{font-size:1rem;min-block-size:44px}@media(prefers-reduced-motion:reduce){.kt-select__popup--sheet .kt-select__sheet-scrim{transition:none}}.kt-select__sheet-grab{display:flex;align-items:center;justify-content:center;flex:none;block-size:28px}.kt-select__sheet-grab:before{content:\"\";inline-size:2.25rem;block-size:.25rem;border-radius:999px;background:var(--kt-sheet-grab-color, var(--kt-outline, #c4c7c5))}.kt-select__sheet-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:none;padding-block:.5rem;padding-inline:1rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__sheet-title{font-weight:600}.kt-select__sheet-close{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__sheet-close:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:2px}.kt-select__sheet-close-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.5rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__option{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;min-block-size:var( --select-option-min-height, 44px );padding:.5rem .625rem;border-radius:6px;cursor:pointer}.kt-select__option[aria-selected=true]{background:var(--select-option-selected-bg, color-mix(in srgb, var(--kt-primary, #0b57d0) 14%, transparent));color:var(--select-option-selected-color, inherit);font-weight:var(--select-option-selected-weight, 600)}.kt-select__option--active:not([aria-disabled=true]),.kt-select__option:hover:not([aria-disabled=true]){background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}.kt-select__empty{padding:.5rem .625rem;color:var(--field-hint-color, #5f6368)}.kt-select__truncated-info{box-sizing:border-box;padding:.5rem .625rem;font-size:.875rem;font-style:italic;color:var(--field-hint-color, #5f6368);border-block-start:1px solid var(--field-border-color, #c4c7c5);pointer-events:none}}\n", "@layer kt-aaa.components{.kt-select__actions{display:flex;gap:.25rem;flex:none;padding:.25rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__action{flex:1;min-block-size:44px;padding:.375rem .625rem;border:0;border-radius:calc(var(--field-radius, 8px) * .75);background:transparent;color:var(--kt-primary, #0b57d0);font:inherit;font-weight:500;cursor:pointer}.kt-select__action:hover{background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__action:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-2px}.kt-select__count{flex:none;padding:.25rem .75rem;font-size:.8125rem;color:var(--field-hint-color, #5f6368);border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__checkbox{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-inline-end:.25rem;-webkit-user-select:none;user-select:none}.kt-select__checkbox-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.25rem;line-height:1;color:var(--field-icon-color, #5f6368);-webkit-font-smoothing:antialiased}.kt-select__option[aria-selected=true] .kt-select__checkbox-icon{color:var(--kt-primary, #0b57d0)}.kt-select__option--multiple{display:flex;align-items:center;gap:.5rem}.kt-select__option-content{flex:1;min-inline-size:0}kt-chip-list:not([data-empty]){margin-block-start:.5rem}}\n"], dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "hideLabel", "hideErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Combobox, selector: "[ngCombobox]", inputs: ["disabled", "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: "component", type: KtChipList, selector: "kt-chip-list", inputs: ["items", "itemLabel", "itemKey", "removable", "disabled", "readonly", "maxVisible", "listLabel", "removeItemLabel", "itemRemovedText", "moreLabel", "lessLabel", "chipTemplate", "emptyFocusTarget"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMultiSelect, decorators: [{
             type: Component,
@@ -3708,8 +3812,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         Listbox,
                         Option,
                         KtChipList,
-                    ], template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"fieldErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  [hideLabel]=\"hideLabel()\"\n  [hideErrors]=\"hideErrors()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div class=\"kt-select\" [class.kt-select--open]=\"expanded()\">\n    <button\n      #combobox=\"ngCombobox\"\n      #trigger\n      ngCombobox\n      ktFieldControl\n      type=\"button\"\n      class=\"kt-field-box kt-select__trigger\"\n      [class.kt-select__trigger--clearable]=\"showClear()\"\n      [(expanded)]=\"expanded\"\n      [disabled]=\"disabled()\"\n      [softDisabled]=\"false\"\n      [attr.data-invalid]=\"showInvalid() ? '' : null\"\n      [attr.data-disabled]=\"disabled() ? '' : null\"\n      [attr.data-filled]=\"selectedOptions().length ? '' : null\"\n      [attr.data-pending]=\"pending() ? '' : null\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    >\n      <span class=\"kt-select__value\">\n        @if (triggerDef(); as def) {\n          <ng-container\n            [ngTemplateOutlet]=\"def.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedOptions() }\"\n          />\n        } @else if (selectedOptions().length > 0) {\n          {{ triggerText() }}\n        } @else {\n          <span class=\"kt-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n        }\n      </span>\n      <span class=\"kt-select__arrow\" aria-hidden=\"true\">arrow_drop_down</span>\n    </button>\n\n    <!-- Tout effacer depuis le champ : sibling du trigger (pas de bouton imbriqu\u00E9 dans un bouton). -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"kt-select__clear\"\n        [attr.aria-label]=\"clearLabel()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"clearSelection()\"\n      >\n        <span class=\"kt-select__clear-icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    <!-- Popup Popover (top-layer). M\u00EAme logique mobile bottom-sheet adaptative que le select classique. -->\n    <ng-template ngComboboxPopup [combobox]=\"combobox\" [popupType]=\"dialogMode() ? 'dialog' : 'listbox'\">\n      <div #popup popover=\"manual\" class=\"kt-select__popup\" [class.kt-select__popup--sheet]=\"compact()\">\n        @if (compact()) {\n          <div class=\"kt-select__sheet-scrim\" aria-hidden=\"true\" (click)=\"expanded.set(false)\"></div>\n        }\n        <div class=\"kt-select__sheet-card\">\n          @if (compact()) {\n            <div\n              class=\"kt-select__sheet-grab\"\n              aria-hidden=\"true\"\n              (pointerdown)=\"onDragStart($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n            ></div>\n            <header class=\"kt-select__sheet-header\">\n              <span class=\"kt-select__sheet-title\">{{ label() }}</span>\n              <button\n                type=\"button\"\n                class=\"kt-select__sheet-close\"\n                [attr.aria-label]=\"resolvedCloseLabel()\"\n                (click)=\"expanded.set(false)\"\n              >\n                <span class=\"kt-select__sheet-close-icon\" aria-hidden=\"true\">close</span>\n              </button>\n            </header>\n          }\n          @if (dialogMode()) {\n            <!-- Mode panneau (filtre et/ou actions de masse) : Widget Dialog -->\n            <div\n              ngComboboxWidget\n              role=\"dialog\"\n              class=\"kt-select__panel\"\n              [id]=\"panelId\"\n              [attr.aria-label]=\"label()\"\n              [activeDescendant]=\"lb.activeDescendant()\"\n              (keydown)=\"onPanelKeydown($event)\"\n            >\n              @if (selectionActions()) {\n                <div class=\"kt-select__actions\">\n                  <button type=\"button\" class=\"kt-select__action\" (click)=\"selectAllFiltered()\">\n                    {{ resolvedSelectAllLabel() }}\n                  </button>\n                  <button type=\"button\" class=\"kt-select__action\" (click)=\"clearAllFiltered()\">\n                    {{ resolvedClearAllLabel() }}\n                  </button>\n                </div>\n              }\n              @if (filterable()) {\n                <div class=\"kt-select__filter\">\n                  <input\n                    #filterInput\n                    type=\"search\"\n                    role=\"combobox\"\n                    aria-autocomplete=\"list\"\n                    aria-expanded=\"true\"\n                    class=\"kt-select__filter-input\"\n                    autocomplete=\"off\"\n                    [placeholder]=\"resolvedFilterPlaceholder()\"\n                    [attr.aria-label]=\"resolvedFilterLabel()\"\n                    [attr.aria-controls]=\"lb.id()\"\n                    [attr.aria-activedescendant]=\"lb.activeDescendant()\"\n                    [value]=\"filterText()\"\n                    (input)=\"onFilterInput($event)\"\n                    (keydown)=\"onFilterKeydown($event)\"\n                  />\n                </div>\n              }\n              @if (selectedOptions().length > 0) {\n                <!-- Rappel visuel (s\u00E9lections potentiellement masqu\u00E9es par le filtre) ;\n                     l'info SR passe par la live region ci-dessous \u2192 aria-hidden. -->\n                <div class=\"kt-select__count\" aria-hidden=\"true\">{{ selectionCountLabel() }}</div>\n              }\n              <div class=\"kt-select__sr-only kt-select__filter-status\" role=\"status\" aria-live=\"polite\">\n                {{ announcedCount() }}\n              </div>\n              <ul\n                #lb=\"ngListbox\"\n                #listboxEl\n                ngListbox\n                [multi]=\"true\"\n                [focusMode]=\"compact() && !filterable() ? 'roving' : 'activedescendant'\"\n                selectionMode=\"explicit\"\n                class=\"kt-select__listbox\"\n                [attr.aria-label]=\"label()\"\n                [value]=\"listboxValue()\"\n                (valueChange)=\"onListboxValueChange($event)\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                @for (item of displayedOptions(); track keyOf(item)) {\n                  <li\n                    #opt=\"ngOption\"\n                    ngOption\n                    class=\"kt-select__option kt-select__option--multiple\"\n                    [value]=\"keyOf(item)\"\n                    [label]=\"labelOf(item)\"\n                    [disabled]=\"disabledOf(item)\"\n                    [class.kt-select__option--active]=\"opt.active()\"\n                  >\n                    <span class=\"kt-select__checkbox\" aria-hidden=\"true\">\n                      @if (opt.selected()) {\n                        <span class=\"kt-select__checkbox-icon\">check_box</span>\n                      } @else {\n                        <span class=\"kt-select__checkbox-icon\">check_box_outline_blank</span>\n                      }\n                    </span>\n                    <span class=\"kt-select__option-content\">\n                      @if (optionDef(); as def) {\n                        <ng-container\n                          [ngTemplateOutlet]=\"def.template\"\n                          [ngTemplateOutletContext]=\"{\n                            $implicit: item,\n                            selected: !!opt.selected(),\n                            active: opt.active(),\n                          }\"\n                        />\n                      } @else {\n                        {{ labelOf(item) }}\n                      }\n                    </span>\n                  </li>\n                } @empty {\n                  <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedEmptyText() }}\n                  </li>\n                }\n                @if (filterable() && filteredOptions().length > maxVisibleOptions()) {\n                  <li class=\"kt-select__truncated-info\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedTruncatedResultsText()(maxVisibleOptions(), filteredOptions().length) }}\n                  </li>\n                }\n              </ul>\n            </div>\n          } @else {\n            <!-- Mode simple : Widget Listbox direct -->\n            <ul\n              #listbox=\"ngListbox\"\n              #listboxEl\n              ngComboboxWidget\n              ngListbox\n              [multi]=\"true\"\n              [focusMode]=\"compact() ? 'roving' : 'activedescendant'\"\n              selectionMode=\"explicit\"\n              class=\"kt-select__listbox\"\n              [attr.aria-label]=\"label()\"\n              [value]=\"listboxValue()\"\n              (valueChange)=\"onListboxValueChange($event)\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [activeDescendant]=\"listbox.activeDescendant()\"\n            >\n              @for (item of options(); track keyOf(item)) {\n                <li\n                  #opt=\"ngOption\"\n                  ngOption\n                  class=\"kt-select__option kt-select__option--multiple\"\n                  [value]=\"keyOf(item)\"\n                  [label]=\"labelOf(item)\"\n                  [disabled]=\"disabledOf(item)\"\n                  [class.kt-select__option--active]=\"opt.active()\"\n                >\n                  <span class=\"kt-select__checkbox\" aria-hidden=\"true\">\n                    @if (opt.selected()) {\n                      <span class=\"kt-select__checkbox-icon\">check_box</span>\n                    } @else {\n                      <span class=\"kt-select__checkbox-icon\">check_box_outline_blank</span>\n                    }\n                  </span>\n                  <span class=\"kt-select__option-content\">\n                    @if (optionDef(); as def) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"def.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: item,\n                          selected: !!opt.selected(),\n                          active: opt.active(),\n                        }\"\n                      />\n                    } @else {\n                      {{ labelOf(item) }}\n                    }\n                  </span>\n                </li>\n              } @empty {\n                <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                  {{ resolvedEmptyText() }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </div>\n\n  <!-- Chips r\u00E9vocables (Option 1) sous le trigger : d\u00E9l\u00E9gu\u00E9s au composant r\u00E9utilisable\n       kt-chip-list (focus management, repli +N, live region). Les textes r\u00E9solus depuis\n       KT_SELECT_CONFIG sont pass\u00E9s en inputs (ils priment sur un \u00E9ventuel KT_CHIPS_CONFIG). -->\n  <kt-chip-list\n    [items]=\"selectedOptions()\"\n    [itemLabel]=\"chipLabelOf\"\n    [itemKey]=\"chipKeyOf\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [maxVisible]=\"maxVisibleChips()\"\n    [listLabel]=\"resolvedSelectedItemsLabel()\"\n    [removeItemLabel]=\"resolvedRemoveItemLabel()\"\n    [itemRemovedText]=\"resolvedItemRemovedText()\"\n    [moreLabel]=\"resolvedMoreChipsLabel()\"\n    [lessLabel]=\"resolvedLessChipsLabel()\"\n    [chipTemplate]=\"chipDef()?.template ?? null\"\n    [emptyFocusTarget]=\"triggerEl()?.nativeElement\"\n    (removed)=\"removeOption($event.item)\"\n  />\n</kt-field>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-select{position:relative}.kt-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--field-control-gap, .5rem);inline-size:100%;cursor:pointer;text-align:start;font:inherit;color:var(--field-color, inherit)}.kt-select__trigger:disabled{cursor:not-allowed;background:var(--field-disabled-bg, #f1f3f4);color:color-mix(in srgb,currentColor 50%,transparent)}.kt-select__value{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kt-select__placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__arrow{flex:none;font-family:Material Symbols Outlined;font-size:1.25em;line-height:1;font-feature-settings:\"liga\";color:var(--field-icon-color, #5f6368);transition:var(--select-arrow-transition, transform .12s ease);-webkit-font-smoothing:antialiased}.kt-select--open .kt-select__arrow{transform:rotate(180deg)}.kt-select__popup{box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;border-width:var(--select-popup-border-width, var(--field-border-width, 1px));border-style:var(--field-border-style, solid);border-color:var(--field-border-color, #c4c7c5);border-radius:var(--field-radius, 8px);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);box-shadow:var(--select-popup-shadow, 0 4px 12px rgb(0 0 0 / 12%));-webkit-backdrop-filter:var(--select-popup-backdrop-filter, none);backdrop-filter:var(--select-popup-backdrop-filter, none);max-block-size:var(--select-popup-max-height, 16rem);overflow:hidden}.kt-select__sheet-card{display:contents}.kt-select__popup:not(:popover-open){display:none!important}.kt-select__popup:popover-open{animation:var(--select-popup-enter-animation, none)}@media(prefers-reduced-motion:reduce){.kt-select__popup:popover-open{animation:none}}.kt-select__listbox{flex:1 1 auto;min-block-size:0;margin:0;padding:.25rem;list-style:none;overflow-y:auto}.kt-select__panel{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}.kt-select__filter{flex:none;padding:.5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__filter-input{box-sizing:border-box;inline-size:100%;min-block-size:var(--field-min-height, 44px);padding:.375rem .625rem;border:var(--field-border-width, 1px) var(--field-border-style, solid) var(--field-border-color, #c4c7c5);border-radius:calc(var(--field-radius, 8px) * .75);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);font:inherit;appearance:none}.kt-select__filter-input::placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__filter-input:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-1px}.kt-select__filter-input::-webkit-search-cancel-button{appearance:none;inline-size:1rem;block-size:1rem;margin-inline-start:.375rem;cursor:pointer;background-color:var(--field-icon-color, #5f6368);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat}.kt-select__sr-only{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@supports (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto;top:anchor(bottom);left:anchor(left);margin-block-start:.25rem;min-inline-size:anchor-size(width);width:max-content;max-inline-size:min(90vw,28rem);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}@supports not (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto 0 0;inline-size:100%;max-inline-size:100%;border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0}}.kt-select__popup--sheet{position:fixed!important;inset:0!important;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important;width:100%!important;height:100%!important;max-block-size:none!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;display:flex;flex-direction:column!important;justify-content:flex-end!important}.kt-select__popup--sheet .kt-select__sheet-card{position:relative;z-index:2;display:flex;flex-direction:column;background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0;box-shadow:var(--kt-sheet-shadow, 0 -4px 16px rgb(0 0 0 / 12%));max-block-size:var(--kt-sheet-max-block-size, 85svh);width:100%;overflow:hidden;translate:0 0;transition:translate var(--kt-sheet-anim-duration, .12s) ease}.kt-select__popup--sheet .kt-select__sheet-card:has(.kt-select__filter){block-size:var(--kt-sheet-max-block-size, 85svh);max-block-size:var(--kt-sheet-max-block-size, 85svh)}.kt-select__popup--sheet:popover-open .kt-select__sheet-card{translate:0 0;animation:var(--select-sheet-enter-animation, kt-sheet-in var(--kt-sheet-anim-duration, .12s) ease)}.kt-select__popup--sheet .kt-select__sheet-card.kt-select__popup--dragging{transition:none}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-card,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-card{translate:0 100%;transition:translate var(--kt-sheet-exit-duration, 90ms) cubic-bezier(.4,0,.2,1)}::ng-deep .kt-select__popup--sheet::backdrop{display:none!important}.kt-select__sheet-scrim{display:none}.kt-select__popup--sheet .kt-select__sheet-scrim{display:block;position:fixed;inset:0;z-index:1;background:var(--kt-sheet-scrim, rgb(0 0 0 / 40%));opacity:0;pointer-events:auto;transition:opacity var(--kt-sheet-anim-duration, .12s) ease,overlay var(--kt-sheet-anim-duration, .12s) allow-discrete,display var(--kt-sheet-anim-duration, .12s) allow-discrete}.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:1}@starting-style{.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:0}}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-scrim,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-scrim{opacity:0;transition:opacity var(--kt-sheet-exit-duration, 90ms) ease}.kt-select__popup--sheet .kt-select__option{--select-option-min-height: 44px;padding-block:.625rem}.kt-select__popup--sheet .kt-select__filter-input{font-size:1rem;min-block-size:44px}@media(prefers-reduced-motion:reduce){.kt-select__popup--sheet .kt-select__sheet-card,.kt-select__popup--sheet .kt-select__sheet-scrim{transition:none;translate:0 0}}.kt-select__sheet-grab{display:flex;align-items:center;justify-content:center;flex:none;block-size:44px;cursor:grab;touch-action:none}.kt-select__sheet-grab:active{cursor:grabbing}.kt-select__sheet-grab:before{content:\"\";inline-size:2.25rem;block-size:.25rem;border-radius:999px;background:var(--kt-sheet-grab-color, var(--kt-outline, #c4c7c5))}.kt-select__sheet-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:none;padding-block:.5rem;padding-inline:1rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__sheet-title{font-weight:600}.kt-select__sheet-close{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__sheet-close:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:2px}.kt-select__sheet-close-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.5rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__option{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;min-block-size:var( --select-option-min-height, 44px );padding:.5rem .625rem;border-radius:6px;cursor:pointer}.kt-select__option[aria-selected=true]{background:var(--select-option-selected-bg, color-mix(in srgb, var(--kt-primary, #0b57d0) 14%, transparent));color:var(--select-option-selected-color, inherit);font-weight:var(--select-option-selected-weight, 600)}.kt-select__option--active:not([aria-disabled=true]),.kt-select__option:hover:not([aria-disabled=true]){background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}.kt-select__empty{padding:.5rem .625rem;color:var(--field-hint-color, #5f6368)}.kt-select__truncated-info{box-sizing:border-box;padding:.5rem .625rem;font-size:.875rem;font-style:italic;color:var(--field-hint-color, #5f6368);border-block-start:1px solid var(--field-border-color, #c4c7c5);pointer-events:none}}\n", "@layer kt-aaa.components{.kt-select__trigger--clearable .kt-select__value{margin-inline-end:2rem}.kt-select__clear{position:absolute;inset-block-start:50%;inset-inline-end:2.5rem;translate:0 -50%;display:inline-flex;align-items:center;justify-content:center;inline-size:24px;block-size:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__clear:after{content:\"\";position:absolute;inset:-10px}.kt-select__clear:hover{background-color:color-mix(in srgb,currentColor 12%,transparent);color:var(--field-color, inherit)}.kt-select__clear:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:1px}.kt-select__clear-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.25rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__actions{display:flex;gap:.25rem;flex:none;padding:.25rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__action{flex:1;min-block-size:44px;padding:.375rem .625rem;border:0;border-radius:calc(var(--field-radius, 8px) * .75);background:transparent;color:var(--kt-primary, #0b57d0);font:inherit;font-weight:500;cursor:pointer}.kt-select__action:hover{background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__action:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-2px}.kt-select__count{flex:none;padding:.25rem .75rem;font-size:.8125rem;color:var(--field-hint-color, #5f6368);border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__checkbox{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-inline-end:.25rem;-webkit-user-select:none;user-select:none}.kt-select__checkbox-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.25rem;line-height:1;color:var(--field-icon-color, #5f6368);-webkit-font-smoothing:antialiased}.kt-select__option[aria-selected=true] .kt-select__checkbox-icon{color:var(--kt-primary, #0b57d0)}.kt-select__option--multiple{display:flex;align-items:center;gap:.5rem}.kt-select__option-content{flex:1;min-inline-size:0}kt-chip-list:not([data-empty]){margin-block-start:.5rem}}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], selectionActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionActions", required: false }] }], maxVisibleChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleChips", required: false }] }], optionDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtMultiSelectOptionDef), { isSignal: true }] }], triggerDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtMultiSelectTriggerDef), { isSignal: true }] }], chipDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtMultiSelectChipDef), { isSignal: true }] }], chipList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KtChipList), { isSignal: true }] }] } });
+                    ], template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"fieldErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  [hideLabel]=\"hideLabel()\"\n  [hideErrors]=\"hideErrors()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div class=\"kt-select\" [class.kt-select--open]=\"expanded()\">\n    <button\n      #combobox=\"ngCombobox\"\n      #trigger\n      ngCombobox\n      ktFieldControl\n      type=\"button\"\n      class=\"kt-field-box kt-select__trigger\"\n      [class.kt-select__trigger--clearable]=\"showClear()\"\n      [(expanded)]=\"expanded\"\n      [disabled]=\"disabled()\"\n      [softDisabled]=\"false\"\n      [attr.data-invalid]=\"showInvalid() ? '' : null\"\n      [attr.data-disabled]=\"disabled() ? '' : null\"\n      [attr.data-filled]=\"selectedOptions().length ? '' : null\"\n      [attr.data-pending]=\"pending() ? '' : null\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    >\n      <span class=\"kt-select__value\">\n        @if (triggerDef(); as def) {\n          <ng-container\n            [ngTemplateOutlet]=\"def.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedOptions() }\"\n          />\n        } @else if (selectedOptions().length > 0) {\n          {{ triggerText() }}\n        } @else {\n          <span class=\"kt-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n        }\n      </span>\n      <span class=\"kt-select__arrow\" aria-hidden=\"true\">arrow_drop_down</span>\n    </button>\n\n    <!-- Tout effacer depuis le champ : sibling du trigger (pas de bouton imbriqu\u00E9 dans un bouton). -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"kt-select__clear\"\n        [attr.aria-label]=\"clearLabel()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"clearSelection()\"\n      >\n        <span class=\"kt-select__clear-icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    <!-- Popup Popover (top-layer). M\u00EAme logique mobile bottom-sheet adaptative que le select classique. -->\n    <ng-template ngComboboxPopup [combobox]=\"combobox\" [popupType]=\"dialogMode() ? 'dialog' : 'listbox'\">\n      <div #popup popover=\"manual\" class=\"kt-select__popup\" [class.kt-select__popup--sheet]=\"compact()\">\n        @if (compact()) {\n          <div class=\"kt-select__sheet-scrim\" aria-hidden=\"true\" (click)=\"expanded.set(false)\"></div>\n          <div class=\"kt-select__sheet-spacer\" aria-hidden=\"true\"></div>\n        }\n        <div class=\"kt-select__sheet-card\">\n          @if (compact()) {\n            <!-- Poign\u00E9e D\u00C9CORATIVE (ADR-0005) : la sheet s'attrape partout, le geste est natif. -->\n            <div class=\"kt-select__sheet-grab\" aria-hidden=\"true\" (mousedown)=\"$event.preventDefault()\"></div>\n            <!-- mousedown pr\u00E9ventif : un tap sur la carcasse ne doit pas voler le focus du widget\n                 (closePopupOnBlur fermerait le combobox) ; le click du bouton Fermer survit. -->\n            <header class=\"kt-select__sheet-header\" (mousedown)=\"$event.preventDefault()\">\n              <span class=\"kt-select__sheet-title\">{{ label() }}</span>\n              <button\n                type=\"button\"\n                class=\"kt-select__sheet-close\"\n                [attr.aria-label]=\"resolvedCloseLabel()\"\n                (click)=\"expanded.set(false)\"\n              >\n                <span class=\"kt-select__sheet-close-icon\" aria-hidden=\"true\">close</span>\n              </button>\n            </header>\n          }\n          @if (dialogMode()) {\n            <!-- Mode panneau (filtre et/ou actions de masse) : Widget Dialog -->\n            <div\n              ngComboboxWidget\n              role=\"dialog\"\n              class=\"kt-select__panel\"\n              [id]=\"panelId\"\n              [attr.aria-label]=\"label()\"\n              [activeDescendant]=\"lb.activeDescendant()\"\n              (keydown)=\"onPanelKeydown($event)\"\n            >\n              @if (selectionActions()) {\n                <div class=\"kt-select__actions\">\n                  <button type=\"button\" class=\"kt-select__action\" (click)=\"selectAllFiltered()\">\n                    {{ resolvedSelectAllLabel() }}\n                  </button>\n                  <button type=\"button\" class=\"kt-select__action\" (click)=\"clearAllFiltered()\">\n                    {{ resolvedClearAllLabel() }}\n                  </button>\n                </div>\n              }\n              @if (filterable()) {\n                <div class=\"kt-select__filter\">\n                  <input\n                    #filterInput\n                    type=\"search\"\n                    role=\"combobox\"\n                    aria-autocomplete=\"list\"\n                    aria-expanded=\"true\"\n                    class=\"kt-select__filter-input\"\n                    autocomplete=\"off\"\n                    [placeholder]=\"resolvedFilterPlaceholder()\"\n                    [attr.aria-label]=\"resolvedFilterLabel()\"\n                    [attr.aria-controls]=\"lb.id()\"\n                    [attr.aria-activedescendant]=\"lb.activeDescendant()\"\n                    [value]=\"filterText()\"\n                    (input)=\"onFilterInput($event)\"\n                    (keydown)=\"onFilterKeydown($event)\"\n                  />\n                </div>\n              }\n              @if (selectedOptions().length > 0) {\n                <!-- Rappel visuel (s\u00E9lections potentiellement masqu\u00E9es par le filtre) ;\n                     l'info SR passe par la live region ci-dessous \u2192 aria-hidden. -->\n                <div class=\"kt-select__count\" aria-hidden=\"true\">{{ selectionCountLabel() }}</div>\n              }\n              <div class=\"kt-select__sr-only kt-select__filter-status\" role=\"status\" aria-live=\"polite\">\n                {{ announcedCount() }}\n              </div>\n              <ul\n                #lb=\"ngListbox\"\n                #listboxEl\n                ngListbox\n                [multi]=\"true\"\n                [focusMode]=\"compact() && !filterable() ? 'roving' : 'activedescendant'\"\n                selectionMode=\"explicit\"\n                class=\"kt-select__listbox\"\n                [attr.aria-label]=\"label()\"\n                [value]=\"listboxValue()\"\n                (valueChange)=\"onListboxValueChange($event)\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                @for (item of displayedOptions(); track keyOf(item)) {\n                  <li\n                    #opt=\"ngOption\"\n                    ngOption\n                    class=\"kt-select__option kt-select__option--multiple\"\n                    [value]=\"keyOf(item)\"\n                    [label]=\"labelOf(item)\"\n                    [disabled]=\"disabledOf(item)\"\n                    [class.kt-select__option--active]=\"opt.active()\"\n                  >\n                    <span class=\"kt-select__checkbox\" aria-hidden=\"true\">\n                      @if (opt.selected()) {\n                        <span class=\"kt-select__checkbox-icon\">check_box</span>\n                      } @else {\n                        <span class=\"kt-select__checkbox-icon\">check_box_outline_blank</span>\n                      }\n                    </span>\n                    <span class=\"kt-select__option-content\">\n                      @if (optionDef(); as def) {\n                        <ng-container\n                          [ngTemplateOutlet]=\"def.template\"\n                          [ngTemplateOutletContext]=\"{\n                            $implicit: item,\n                            selected: !!opt.selected(),\n                            active: opt.active(),\n                          }\"\n                        />\n                      } @else {\n                        {{ labelOf(item) }}\n                      }\n                    </span>\n                  </li>\n                } @empty {\n                  <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedEmptyText() }}\n                  </li>\n                }\n                @if (filterable() && filteredOptions().length > maxVisibleOptions()) {\n                  <li class=\"kt-select__truncated-info\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                    {{ resolvedTruncatedResultsText()(maxVisibleOptions(), filteredOptions().length) }}\n                  </li>\n                }\n              </ul>\n            </div>\n          } @else {\n            <!-- Mode simple : Widget Listbox direct -->\n            <ul\n              #listbox=\"ngListbox\"\n              #listboxEl\n              ngComboboxWidget\n              ngListbox\n              [multi]=\"true\"\n              [focusMode]=\"compact() ? 'roving' : 'activedescendant'\"\n              selectionMode=\"explicit\"\n              class=\"kt-select__listbox\"\n              [attr.aria-label]=\"label()\"\n              [value]=\"listboxValue()\"\n              (valueChange)=\"onListboxValueChange($event)\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [activeDescendant]=\"listbox.activeDescendant()\"\n            >\n              @for (item of options(); track keyOf(item)) {\n                <li\n                  #opt=\"ngOption\"\n                  ngOption\n                  class=\"kt-select__option kt-select__option--multiple\"\n                  [value]=\"keyOf(item)\"\n                  [label]=\"labelOf(item)\"\n                  [disabled]=\"disabledOf(item)\"\n                  [class.kt-select__option--active]=\"opt.active()\"\n                >\n                  <span class=\"kt-select__checkbox\" aria-hidden=\"true\">\n                    @if (opt.selected()) {\n                      <span class=\"kt-select__checkbox-icon\">check_box</span>\n                    } @else {\n                      <span class=\"kt-select__checkbox-icon\">check_box_outline_blank</span>\n                    }\n                  </span>\n                  <span class=\"kt-select__option-content\">\n                    @if (optionDef(); as def) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"def.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: item,\n                          selected: !!opt.selected(),\n                          active: opt.active(),\n                        }\"\n                      />\n                    } @else {\n                      {{ labelOf(item) }}\n                    }\n                  </span>\n                </li>\n              } @empty {\n                <li class=\"kt-select__empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                  {{ resolvedEmptyText() }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </div>\n\n  <!-- Chips r\u00E9vocables (Option 1) sous le trigger : d\u00E9l\u00E9gu\u00E9s au composant r\u00E9utilisable\n       kt-chip-list (focus management, repli +N, live region). Les textes r\u00E9solus depuis\n       KT_SELECT_CONFIG sont pass\u00E9s en inputs (ils priment sur un \u00E9ventuel KT_CHIPS_CONFIG). -->\n  <kt-chip-list\n    [items]=\"selectedOptions()\"\n    [itemLabel]=\"chipLabelOf\"\n    [itemKey]=\"chipKeyOf\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [maxVisible]=\"maxVisibleChips()\"\n    [listLabel]=\"resolvedSelectedItemsLabel()\"\n    [removeItemLabel]=\"resolvedRemoveItemLabel()\"\n    [itemRemovedText]=\"resolvedItemRemovedText()\"\n    [moreLabel]=\"resolvedMoreChipsLabel()\"\n    [lessLabel]=\"resolvedLessChipsLabel()\"\n    [chipTemplate]=\"chipDef()?.template ?? null\"\n    [emptyFocusTarget]=\"triggerEl()?.nativeElement\"\n    (removed)=\"removeOption($event.item)\"\n  />\n</kt-field>\n", styles: ["@layer kt-aaa.components{:host{display:block}.kt-select{position:relative}.kt-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--field-control-gap, .5rem);inline-size:100%;cursor:pointer;text-align:start;font:inherit;color:var(--field-color, inherit)}.kt-select__trigger:disabled{cursor:not-allowed;background:var(--field-disabled-bg, #f1f3f4);color:color-mix(in srgb,currentColor 50%,transparent)}.kt-select__value{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kt-select__placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__arrow{flex:none;font-family:Material Symbols Outlined;font-size:1.25em;line-height:1;font-feature-settings:\"liga\";color:var(--field-icon-color, #5f6368);transition:var(--select-arrow-transition, transform .12s ease);-webkit-font-smoothing:antialiased}.kt-select--open .kt-select__arrow{transform:rotate(180deg)}.kt-select__trigger--clearable .kt-select__value{margin-inline-end:2rem}.kt-select__clear{position:absolute;inset-block-start:50%;inset-inline-end:2.5rem;translate:0 -50%;display:inline-flex;align-items:center;justify-content:center;inline-size:24px;block-size:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__clear:after{content:\"\";position:absolute;inset:-10px}.kt-select__clear:hover{background-color:color-mix(in srgb,currentColor 12%,transparent);color:var(--field-color, inherit)}.kt-select__clear:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:1px}.kt-select__clear-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.25rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__popup{box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;border-width:var(--select-popup-border-width, var(--field-border-width, 1px));border-style:var(--field-border-style, solid);border-color:var(--field-border-color, #c4c7c5);border-radius:var(--field-radius, 8px);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);box-shadow:var(--select-popup-shadow, 0 4px 12px rgb(0 0 0 / 12%));-webkit-backdrop-filter:var(--select-popup-backdrop-filter, none);backdrop-filter:var(--select-popup-backdrop-filter, none);max-block-size:var(--select-popup-max-height, 16rem);overflow:hidden}.kt-select__sheet-card{display:contents}.kt-select__popup:not(:popover-open){display:none!important}.kt-select__popup:popover-open{animation:var(--select-popup-enter-animation, none)}@media(prefers-reduced-motion:reduce){.kt-select__popup:popover-open{animation:none}}.kt-select__listbox{flex:1 1 auto;min-block-size:0;margin:0;padding:.25rem;list-style:none;overflow-y:auto}.kt-select__panel{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}.kt-select__filter{flex:none;padding:.5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__filter-input{box-sizing:border-box;inline-size:100%;min-block-size:var(--field-min-height, 44px);padding:.375rem .625rem;border:var(--field-border-width, 1px) var(--field-border-style, solid) var(--field-border-color, #c4c7c5);border-radius:calc(var(--field-radius, 8px) * .75);background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));color:var(--field-color, inherit);font:inherit;appearance:none}.kt-select__filter-input::placeholder{color:var(--field-hint-color, #5f6368)}.kt-select__filter-input:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-1px}.kt-select__filter-input::-webkit-search-cancel-button{appearance:none;inline-size:1rem;block-size:1rem;margin-inline-start:.375rem;cursor:pointer;background-color:var(--field-icon-color, #5f6368);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\") center / contain no-repeat}.kt-select__sr-only{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@supports (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto;top:anchor(bottom);left:anchor(left);margin-block-start:.25rem;min-inline-size:anchor-size(width);width:max-content;max-inline-size:min(90vw,28rem);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}@supports not (anchor-name: --x){.kt-select__popup{position:fixed;inset:auto 0 0;inline-size:100%;max-inline-size:100%;border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0}}.kt-select__popup--sheet{position:fixed!important;inset:0!important;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important;width:100%!important;height:100%!important;max-block-size:none!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;display:block;overflow-y:auto!important;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}.kt-select__popup--sheet .kt-select__sheet-spacer{block-size:100%;scroll-snap-align:start;scroll-snap-stop:always}.kt-select__popup--sheet .kt-select__sheet-card{position:relative;z-index:2;display:flex;flex-direction:column;background:var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));border-radius:var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0;box-shadow:var(--kt-sheet-shadow, 0 -4px 16px rgb(0 0 0 / 12%));max-block-size:var(--kt-sheet-max-block-size, 85svh);width:100%;overflow:hidden;scroll-snap-align:end;scroll-snap-stop:always}.kt-select__popup--sheet .kt-select__sheet-card:has(.kt-select__filter){block-size:var(--kt-sheet-max-block-size, 85svh);max-block-size:var(--kt-sheet-max-block-size, 85svh)}::ng-deep .kt-select__popup--sheet::backdrop{display:none!important}.kt-select__sheet-scrim{display:none}.kt-select__popup--sheet .kt-select__sheet-scrim{display:block;position:fixed;inset:0;z-index:1;background:var(--kt-sheet-scrim, rgb(0 0 0 / 40%));opacity:0;pointer-events:auto;transition:opacity var(--kt-sheet-anim-duration, .12s) ease,overlay var(--kt-sheet-anim-duration, .12s) allow-discrete,display var(--kt-sheet-anim-duration, .12s) allow-discrete}.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:1}@starting-style{.kt-select__popup--sheet:popover-open .kt-select__sheet-scrim{opacity:0}}.kt-select__popup--sheet.kt-select__popup--closing .kt-select__sheet-scrim,.kt-select__popup--sheet:popover-open.kt-select__popup--closing .kt-select__sheet-scrim{opacity:0;transition:opacity var(--kt-sheet-exit-duration, 90ms) ease}.kt-select__popup--sheet .kt-select__option{--select-option-min-height: 44px;padding-block:.625rem}.kt-select__popup--sheet .kt-select__filter-input{font-size:1rem;min-block-size:44px}@media(prefers-reduced-motion:reduce){.kt-select__popup--sheet .kt-select__sheet-scrim{transition:none}}.kt-select__sheet-grab{display:flex;align-items:center;justify-content:center;flex:none;block-size:28px}.kt-select__sheet-grab:before{content:\"\";inline-size:2.25rem;block-size:.25rem;border-radius:999px;background:var(--kt-sheet-grab-color, var(--kt-outline, #c4c7c5))}.kt-select__sheet-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:none;padding-block:.5rem;padding-inline:1rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__sheet-title{font-weight:600}.kt-select__sheet-close{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--field-icon-color, #5f6368);cursor:pointer}.kt-select__sheet-close:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:2px}.kt-select__sheet-close-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.5rem;line-height:1;-webkit-font-smoothing:antialiased}.kt-select__option{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;min-block-size:var( --select-option-min-height, 44px );padding:.5rem .625rem;border-radius:6px;cursor:pointer}.kt-select__option[aria-selected=true]{background:var(--select-option-selected-bg, color-mix(in srgb, var(--kt-primary, #0b57d0) 14%, transparent));color:var(--select-option-selected-color, inherit);font-weight:var(--select-option-selected-weight, 600)}.kt-select__option--active:not([aria-disabled=true]),.kt-select__option:hover:not([aria-disabled=true]){background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}.kt-select__empty{padding:.5rem .625rem;color:var(--field-hint-color, #5f6368)}.kt-select__truncated-info{box-sizing:border-box;padding:.5rem .625rem;font-size:.875rem;font-style:italic;color:var(--field-hint-color, #5f6368);border-block-start:1px solid var(--field-border-color, #c4c7c5);pointer-events:none}}\n", "@layer kt-aaa.components{.kt-select__actions{display:flex;gap:.25rem;flex:none;padding:.25rem .5rem;border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__action{flex:1;min-block-size:44px;padding:.375rem .625rem;border:0;border-radius:calc(var(--field-radius, 8px) * .75);background:transparent;color:var(--kt-primary, #0b57d0);font:inherit;font-weight:500;cursor:pointer}.kt-select__action:hover{background:var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent))}.kt-select__action:focus-visible{outline:2px solid var(--field-border-color-focus, #0b57d0);outline-offset:-2px}.kt-select__count{flex:none;padding:.25rem .75rem;font-size:.8125rem;color:var(--field-hint-color, #5f6368);border-block-end:1px solid var(--field-border-color, #c4c7c5)}.kt-select__checkbox{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-inline-end:.25rem;-webkit-user-select:none;user-select:none}.kt-select__checkbox-icon{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-size:1.25rem;line-height:1;color:var(--field-icon-color, #5f6368);-webkit-font-smoothing:antialiased}.kt-select__option[aria-selected=true] .kt-select__checkbox-icon{color:var(--kt-primary, #0b57d0)}.kt-select__option--multiple{display:flex;align-items:center;gap:.5rem}.kt-select__option-content{flex:1;min-inline-size:0}kt-chip-list:not([data-empty]){margin-block-start:.5rem}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionActions", required: false }] }], maxVisibleChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleChips", required: false }] }], optionDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtMultiSelectOptionDef), { isSignal: true }] }], triggerDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtMultiSelectTriggerDef), { isSignal: true }] }], chipDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtMultiSelectChipDef), { isSignal: true }] }], chipList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KtChipList), { isSignal: true }] }] } });
 
 /** Base partagée des champs Temporal (Date/Time/DateTime/YearMonth).
     Toute la logique commune (parsing tolérant, valeur vide `null`, synchronisation de l'input natif)