@ktortu/aaa 0.9.5 → 0.9.7

package/fesm2022/ktortu-aaa-forms.mjs

@@ -125,6 +125,10 @@ class KtField {
     hideHintWhenInvalid = input(this.config?.hideHintWhenInvalid ?? false, { ...(ngDevMode ? { debugName: "hideHintWhenInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Afficher toutes les erreurs au lieu de la première seule. @default KT_FIELD_CONFIG.showAllErrors ?? false */
     showAllErrors = input(this.config?.showAllErrors ?? false, { ...(ngDevMode ? { debugName: "showAllErrors" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Masquer visuellement le label. @default KT_FIELD_CONFIG.hideLabel ?? false */
+    hideLabel = input(this.config?.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.config?.hideErrors ?? false, { ...(ngDevMode ? { debugName: "hideErrors" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Apparence du chrome : `fill` (label au-dessus) ou `outline` (bordure + label flottant, façon
         Material). Non fournie ⇒ valeur du `KT_FIELD_CONFIG`, sinon `'fill'`. @default undefined */
     appearance = input(/* @ts-ignore */
@@ -206,15 +210,15 @@ class KtField {
         this.helpClick.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtField, isStandalone: true, selector: "kt-field", inputs: { 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 }, errors: { classPropertyName: "errors", publicName: "errors", 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 }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: false, transformFunction: null }, hideHintWhenInvalid: { classPropertyName: "hideHintWhenInvalid", publicName: "hideHintWhenInvalid", isSignal: true, isRequired: false, transformFunction: null }, showAllErrors: { classPropertyName: "showAllErrors", publicName: "showAllErrors", 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 } }, outputs: { helpClick: "helpClick" }, host: { properties: { "attr.data-appearance": "resolvedAppearance()", "attr.data-float-label": "resolvedFloatLabel()" } }, providers: [{ provide: KT_FIELD, useExisting: forwardRef(() => KtField) }], queries: [{ propertyName: "control", first: true, predicate: KtFieldControl, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kt-field__header\">\n  @if (label(); as labelText) {\n    <label class=\"kt-field__label\" [id]=\"labelId()\" [for]=\"baseId()\">\n      {{ labelText }}\n      @if (required()) {\n        <span class=\"kt-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  @if (helpText(); as help) {\n    <button\n      type=\"button\"\n      class=\"kt-field__help\"\n      [ktTooltip]=\"help\"\n      [attr.aria-label]=\"helpLabel()\"\n      [attr.aria-describedby]=\"null\"\n      (click)=\"onHelpClick($event)\"\n    >\n      <span class=\"kt-field__help-icon\" aria-hidden=\"true\">help</span>\n    </button>\n  }\n\n  <ng-content select=\"[ktFieldHelp]\" />\n</div>\n\n<div class=\"kt-field__control\">\n  <ng-content />\n</div>\n\n@if (hasHelp()) {\n  <!-- Copie de l'aide TOUJOURS pr\u00E9sente (visually-hidden) : cible stable d'aria-describedby du\n       contr\u00F4le, alors que la bulle visuelle du tooltip n'existe dans le DOM qu'\u00E0 l'affichage. -->\n  <span [id]=\"helpId()\" class=\"kt-field__help-description\">\n    @if (helpTemplate(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\" />\n    } @else {\n      {{ helpString() }}\n    }\n  </span>\n}\n\n@if (showHint()) {\n  <p class=\"kt-field__hint\" [id]=\"hintId()\">{{ hint() }}</p>\n}\n\n<!-- R\u00E9gion live toujours pr\u00E9sente : les AT annoncent l'erreur d\u00E8s son apparition. -->\n<p class=\"kt-field__error\" [id]=\"errorId()\" aria-live=\"polite\">\n  @if (hasError()) {\n    @for (error of displayedErrors(); track $index) {\n      <span class=\"kt-field__error-message\">{{ error.message }}</span>\n    }\n  }\n</p>\n", styles: ["@layer kt-aaa.components{:host{display:flex;flex-direction:column;gap:var(--field-gap, .375rem);font-size:var(--field-font-size, 1rem);color:var(--field-color, inherit)}.kt-field__header{display:flex;align-items:center;gap:.375rem}.kt-field__label{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);text-transform:var(--field-label-transform, none);letter-spacing:var(--field-label-letter-spacing, normal);color:var(--field-label-color, inherit)}.kt-field__help{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--field-icon-color, #474747);cursor:pointer;position:relative}.kt-field__help:after{content:\"\";position:absolute;inset:-12px}.kt-field__help-icon{font-family:Material Symbols Outlined;font-size:1.25rem;line-height:1;font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.kt-field__required{margin-inline-start:.125rem;color:var(--field-required-color, #8c1d18)}.kt-field__hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-field__error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-field__help-description{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}.kt-field__error-message{animation:var(--field-error-animation, none)}@media(prefers-reduced-motion:reduce){.kt-field__error-message{animation:none}}}\n"], dependencies: [{ kind: "directive", type: KtTooltip, selector: "[ktTooltip]", inputs: ["ktTooltip", "tooltipPosition", "tooltipDisabled", "showDelay", "hideDelay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtField, isStandalone: true, selector: "kt-field", inputs: { 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 }, errors: { classPropertyName: "errors", publicName: "errors", 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 }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: false, transformFunction: null }, hideHintWhenInvalid: { classPropertyName: "hideHintWhenInvalid", publicName: "hideHintWhenInvalid", isSignal: true, isRequired: false, transformFunction: null }, showAllErrors: { classPropertyName: "showAllErrors", publicName: "showAllErrors", 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { helpClick: "helpClick" }, host: { properties: { "attr.data-appearance": "resolvedAppearance()", "attr.data-float-label": "resolvedFloatLabel()" } }, providers: [{ provide: KT_FIELD, useExisting: forwardRef(() => KtField) }], queries: [{ propertyName: "control", first: true, predicate: KtFieldControl, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kt-field__header\">\n  @if (label(); as labelText) {\n    <label\n      class=\"kt-field__label\"\n      [class.kt-field__label--visually-hidden]=\"hideLabel()\"\n      [id]=\"labelId()\"\n      [for]=\"baseId()\"\n    >\n      {{ labelText }}\n      @if (required()) {\n        <span class=\"kt-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  @if (helpText(); as help) {\n    <button\n      type=\"button\"\n      class=\"kt-field__help\"\n      [ktTooltip]=\"help\"\n      [attr.aria-label]=\"helpLabel()\"\n      [attr.aria-describedby]=\"null\"\n      (click)=\"onHelpClick($event)\"\n    >\n      <span class=\"kt-field__help-icon\" aria-hidden=\"true\">help</span>\n    </button>\n  }\n\n  <ng-content select=\"[ktFieldHelp]\" />\n</div>\n\n<div class=\"kt-field__control\">\n  <ng-content />\n</div>\n\n@if (hasHelp()) {\n  <!-- Copie de l'aide TOUJOURS pr\u00E9sente (visually-hidden) : cible stable d'aria-describedby du\n       contr\u00F4le, alors que la bulle visuelle du tooltip n'existe dans le DOM qu'\u00E0 l'affichage. -->\n  <span [id]=\"helpId()\" class=\"kt-field__help-description\">\n    @if (helpTemplate(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\" />\n    } @else {\n      {{ helpString() }}\n    }\n  </span>\n}\n\n@if (showHint()) {\n  <p class=\"kt-field__hint\" [id]=\"hintId()\">{{ hint() }}</p>\n}\n\n<!-- R\u00E9gion live toujours pr\u00E9sente : les AT annoncent l'erreur d\u00E8s son apparition. -->\n<p class=\"kt-field__error\" [class.kt-field__error--visually-hidden]=\"hideErrors()\" [id]=\"errorId()\" aria-live=\"polite\">\n  @if (hasError()) {\n    @for (error of displayedErrors(); track $index) {\n      <span class=\"kt-field__error-message\">{{ error.message }}</span>\n    }\n  }\n</p>\n", styles: ["@layer kt-aaa.components{:host{display:flex;flex-direction:column;gap:var(--field-gap, .375rem);font-size:var(--field-font-size, 1rem);color:var(--field-color, inherit)}.kt-field__header{display:flex;align-items:center;gap:.375rem}.kt-field__label{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);text-transform:var(--field-label-transform, none);letter-spacing:var(--field-label-letter-spacing, normal);color:var(--field-label-color, inherit)}.kt-field__help{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--field-icon-color, #474747);cursor:pointer;position:relative}.kt-field__help:after{content:\"\";position:absolute;inset:-12px}.kt-field__help-icon{font-family:Material Symbols Outlined;font-size:1.25rem;line-height:1;font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.kt-field__required{margin-inline-start:.125rem;color:var(--field-required-color, #8c1d18)}.kt-field__hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-field__error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-field__help-description,.kt-field__label--visually-hidden,.kt-field__error--visually-hidden{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}.kt-field__error-message{animation:var(--field-error-animation, none)}@media(prefers-reduced-motion:reduce){.kt-field__error-message{animation:none}}}\n"], dependencies: [{ kind: "directive", type: KtTooltip, selector: "[ktTooltip]", inputs: ["ktTooltip", "tooltipPosition", "tooltipDisabled", "showDelay", "hideDelay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtField, decorators: [{
             type: Component,
             args: [{ selector: 'kt-field', imports: [KtTooltip, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-appearance]': 'resolvedAppearance()',
                         '[attr.data-float-label]': 'resolvedFloatLabel()',
-                    }, providers: [{ provide: KT_FIELD, useExisting: forwardRef(() => KtField) }], template: "<div class=\"kt-field__header\">\n  @if (label(); as labelText) {\n    <label class=\"kt-field__label\" [id]=\"labelId()\" [for]=\"baseId()\">\n      {{ labelText }}\n      @if (required()) {\n        <span class=\"kt-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  @if (helpText(); as help) {\n    <button\n      type=\"button\"\n      class=\"kt-field__help\"\n      [ktTooltip]=\"help\"\n      [attr.aria-label]=\"helpLabel()\"\n      [attr.aria-describedby]=\"null\"\n      (click)=\"onHelpClick($event)\"\n    >\n      <span class=\"kt-field__help-icon\" aria-hidden=\"true\">help</span>\n    </button>\n  }\n\n  <ng-content select=\"[ktFieldHelp]\" />\n</div>\n\n<div class=\"kt-field__control\">\n  <ng-content />\n</div>\n\n@if (hasHelp()) {\n  <!-- Copie de l'aide TOUJOURS pr\u00E9sente (visually-hidden) : cible stable d'aria-describedby du\n       contr\u00F4le, alors que la bulle visuelle du tooltip n'existe dans le DOM qu'\u00E0 l'affichage. -->\n  <span [id]=\"helpId()\" class=\"kt-field__help-description\">\n    @if (helpTemplate(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\" />\n    } @else {\n      {{ helpString() }}\n    }\n  </span>\n}\n\n@if (showHint()) {\n  <p class=\"kt-field__hint\" [id]=\"hintId()\">{{ hint() }}</p>\n}\n\n<!-- R\u00E9gion live toujours pr\u00E9sente : les AT annoncent l'erreur d\u00E8s son apparition. -->\n<p class=\"kt-field__error\" [id]=\"errorId()\" aria-live=\"polite\">\n  @if (hasError()) {\n    @for (error of displayedErrors(); track $index) {\n      <span class=\"kt-field__error-message\">{{ error.message }}</span>\n    }\n  }\n</p>\n", styles: ["@layer kt-aaa.components{:host{display:flex;flex-direction:column;gap:var(--field-gap, .375rem);font-size:var(--field-font-size, 1rem);color:var(--field-color, inherit)}.kt-field__header{display:flex;align-items:center;gap:.375rem}.kt-field__label{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);text-transform:var(--field-label-transform, none);letter-spacing:var(--field-label-letter-spacing, normal);color:var(--field-label-color, inherit)}.kt-field__help{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--field-icon-color, #474747);cursor:pointer;position:relative}.kt-field__help:after{content:\"\";position:absolute;inset:-12px}.kt-field__help-icon{font-family:Material Symbols Outlined;font-size:1.25rem;line-height:1;font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.kt-field__required{margin-inline-start:.125rem;color:var(--field-required-color, #8c1d18)}.kt-field__hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-field__error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-field__help-description{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}.kt-field__error-message{animation:var(--field-error-animation, none)}@media(prefers-reduced-motion:reduce){.kt-field__error-message{animation:none}}}\n"] }]
-        }], propDecorators: { 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 }] }], helpClick: [{ type: i0.Output, args: ["helpClick"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], fieldId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldId", required: false }] }], hideHintWhenInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHintWhenInvalid", required: false }] }], showAllErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllErrors", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtFieldControl), { isSignal: true }] }] } });
+                    }, providers: [{ provide: KT_FIELD, useExisting: forwardRef(() => KtField) }], template: "<div class=\"kt-field__header\">\n  @if (label(); as labelText) {\n    <label\n      class=\"kt-field__label\"\n      [class.kt-field__label--visually-hidden]=\"hideLabel()\"\n      [id]=\"labelId()\"\n      [for]=\"baseId()\"\n    >\n      {{ labelText }}\n      @if (required()) {\n        <span class=\"kt-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  @if (helpText(); as help) {\n    <button\n      type=\"button\"\n      class=\"kt-field__help\"\n      [ktTooltip]=\"help\"\n      [attr.aria-label]=\"helpLabel()\"\n      [attr.aria-describedby]=\"null\"\n      (click)=\"onHelpClick($event)\"\n    >\n      <span class=\"kt-field__help-icon\" aria-hidden=\"true\">help</span>\n    </button>\n  }\n\n  <ng-content select=\"[ktFieldHelp]\" />\n</div>\n\n<div class=\"kt-field__control\">\n  <ng-content />\n</div>\n\n@if (hasHelp()) {\n  <!-- Copie de l'aide TOUJOURS pr\u00E9sente (visually-hidden) : cible stable d'aria-describedby du\n       contr\u00F4le, alors que la bulle visuelle du tooltip n'existe dans le DOM qu'\u00E0 l'affichage. -->\n  <span [id]=\"helpId()\" class=\"kt-field__help-description\">\n    @if (helpTemplate(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\" />\n    } @else {\n      {{ helpString() }}\n    }\n  </span>\n}\n\n@if (showHint()) {\n  <p class=\"kt-field__hint\" [id]=\"hintId()\">{{ hint() }}</p>\n}\n\n<!-- R\u00E9gion live toujours pr\u00E9sente : les AT annoncent l'erreur d\u00E8s son apparition. -->\n<p class=\"kt-field__error\" [class.kt-field__error--visually-hidden]=\"hideErrors()\" [id]=\"errorId()\" aria-live=\"polite\">\n  @if (hasError()) {\n    @for (error of displayedErrors(); track $index) {\n      <span class=\"kt-field__error-message\">{{ error.message }}</span>\n    }\n  }\n</p>\n", styles: ["@layer kt-aaa.components{:host{display:flex;flex-direction:column;gap:var(--field-gap, .375rem);font-size:var(--field-font-size, 1rem);color:var(--field-color, inherit)}.kt-field__header{display:flex;align-items:center;gap:.375rem}.kt-field__label{font-size:var(--field-label-font-size, .875rem);font-weight:var(--field-label-weight, 500);text-transform:var(--field-label-transform, none);letter-spacing:var(--field-label-letter-spacing, normal);color:var(--field-label-color, inherit)}.kt-field__help{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--field-icon-color, #474747);cursor:pointer;position:relative}.kt-field__help:after{content:\"\";position:absolute;inset:-12px}.kt-field__help-icon{font-family:Material Symbols Outlined;font-size:1.25rem;line-height:1;font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.kt-field__required{margin-inline-start:.125rem;color:var(--field-required-color, #8c1d18)}.kt-field__hint{margin:0;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-hint-color, #474747)}.kt-field__error{margin:0;display:flex;flex-direction:column;font-size:var(--field-hint-font-size, .8125rem);color:var(--field-error-color, #8c1d18)}.kt-field__help-description,.kt-field__label--visually-hidden,.kt-field__error--visually-hidden{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}.kt-field__error-message{animation:var(--field-error-animation, none)}@media(prefers-reduced-motion:reduce){.kt-field__error-message{animation:none}}}\n"] }]
+        }], propDecorators: { 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 }] }], helpClick: [{ type: i0.Output, args: ["helpClick"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], fieldId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldId", required: false }] }], hideHintWhenInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHintWhenInvalid", required: false }] }], showAllErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllErrors", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], hideErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideErrors", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KtFieldControl), { isSignal: true }] }] } });
 
 /**
  * Lit un param typé d'une `ValidationError` (ex. `min`, `minLength`, `maxLength`, `minDate`…).
@@ -395,6 +399,10 @@ class KtBaseInputField {
         ?? `'auto'`. En `always`, le label reste en haut même vide et le placeholder s'affiche. @default undefined */
     floatLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "floatLabel" }] : /* istanbul ignore next */ []));
+    /** Masquer visuellement le label. @default KT_FIELD_CONFIG.hideLabel ?? false */
+    hideLabel = input(this.config?.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.config?.hideErrors ?? false, { ...(ngDevMode ? { debugName: "hideErrors" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     inputRef = viewChild('input', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
     matcher = computed(() => this.errorMatcher() ?? this.config?.errorMatcher ?? defaultKtFieldErrorMatcher, /* @ts-ignore */
@@ -462,11 +470,11 @@ class KtBaseInputField {
         this.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtBaseInputField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.1", type: KtBaseInputField, isStandalone: true, inputs: { 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 }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", 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 } }, outputs: { touched: "touchedChange", helpClick: "helpClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.1", type: KtBaseInputField, isStandalone: true, inputs: { 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 }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", 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 } }, outputs: { touched: "touchedChange", helpClick: "helpClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtBaseInputField, decorators: [{
             type: Directive
-        }], propDecorators: { 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 }] }], helpClick: [{ type: i0.Output, args: ["helpClick"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", 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 }] }], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
+        }], propDecorators: { 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 }] }], helpClick: [{ type: i0.Output, args: ["helpClick"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", 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 }] }], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
 
 /** Normalise une liste de suggestions en options `<datalist>`. `toValue` sérialise la valeur en
     chaîne attendue par l'input natif (identité pour le texte, `String()` pour les nombres,
@@ -599,11 +607,11 @@ class KtNumberField extends KtBaseInputField {
         return value === null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtNumberField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtNumberField, isStandalone: true, selector: "kt-number-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      role=\"spinbutton\"\n      [attr.aria-valuemin]=\"min() ?? null\"\n      [attr.aria-valuemax]=\"max() ?? null\"\n      [attr.aria-valuenow]=\"value() ?? null\"\n      [value]=\"rawValue()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.min]=\"min() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step() ?? null\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"rawValue.set($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtNumberField, isStandalone: true, selector: "kt-number-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      role=\"spinbutton\"\n      [attr.aria-valuemin]=\"min() ?? null\"\n      [attr.aria-valuemax]=\"max() ?? null\"\n      [attr.aria-valuenow]=\"value() ?? null\"\n      [value]=\"rawValue()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.min]=\"min() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step() ?? null\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"rawValue.set($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtNumberField, decorators: [{
             type: Component,
-            args: [{ selector: 'kt-number-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      role=\"spinbutton\"\n      [attr.aria-valuemin]=\"min() ?? null\"\n      [attr.aria-valuemax]=\"max() ?? null\"\n      [attr.aria-valuenow]=\"value() ?? null\"\n      [value]=\"rawValue()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.min]=\"min() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step() ?? null\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"rawValue.set($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
+            args: [{ selector: 'kt-number-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      role=\"spinbutton\"\n      [attr.aria-valuemin]=\"min() ?? null\"\n      [attr.aria-valuemax]=\"max() ?? null\"\n      [attr.aria-valuenow]=\"value() ?? null\"\n      [value]=\"rawValue()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.min]=\"min() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step() ?? null\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"rawValue.set($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }] } });
 
 /**
@@ -638,11 +646,11 @@ class KtTextArea extends KtBaseInputField {
         return value.length === 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtTextArea, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtTextArea, isStandalone: true, selector: "kt-text-area", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    data-multiline\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <textarea\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [value]=\"value()\"\n      [rows]=\"rows()\"\n      [style.min-height.lh]=\"rows()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    ></textarea>\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtTextArea, isStandalone: true, selector: "kt-text-area", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    data-multiline\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <textarea\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [value]=\"value()\"\n      [rows]=\"rows()\"\n      [style.min-height.lh]=\"rows()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    ></textarea>\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtTextArea, decorators: [{
             type: Component,
-            args: [{ selector: 'kt-text-area', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    data-multiline\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <textarea\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [value]=\"value()\"\n      [rows]=\"rows()\"\n      [style.min-height.lh]=\"rows()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    ></textarea>\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
+            args: [{ selector: 'kt-text-area', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    data-multiline\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <textarea\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [value]=\"value()\"\n      [rows]=\"rows()\"\n      [style.min-height.lh]=\"rows()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    ></textarea>\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }] } });
 
 /**
@@ -696,11 +704,11 @@ class KtTextField extends KtBaseInputField {
         return value.length === 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtTextField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtTextField, isStandalone: true, selector: "kt-text-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [type]=\"type()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.pattern]=\"patternAttr()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtTextField, isStandalone: true, selector: "kt-text-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [type]=\"type()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.pattern]=\"patternAttr()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtTextField, decorators: [{
             type: Component,
-            args: [{ selector: 'kt-text-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [type]=\"type()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.pattern]=\"patternAttr()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
+            args: [{ selector: 'kt-text-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [type]=\"type()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.pattern]=\"patternAttr()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }] } });
 
 /**
@@ -762,11 +770,11 @@ class KtPasswordField extends KtBaseInputField {
         this.isPasswordVisible.update((visible) => !visible);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtPasswordField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtPasswordField, isStandalone: true, selector: "kt-password-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"inputId()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [type]=\"inputType()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"resolvedAutocomplete()\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.pattern]=\"patternAttr()\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    <button\n      type=\"button\"\n      class=\"kt-field-box__toggle\"\n      [disabled]=\"disabled() || readonly()\"\n      [attr.aria-label]=\"isPasswordVisible() ? 'Masquer le mot de passe' : 'Afficher le mot de passe'\"\n      [attr.aria-controls]=\"inputId()\"\n      (mousedown)=\"toggleVisibility($event)\"\n    >\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">\n        {{ isPasswordVisible() ? 'visibility_off' : 'visibility' }}\n      </span>\n    </button>\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtPasswordField, isStandalone: true, selector: "kt-password-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"inputId()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [type]=\"inputType()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"resolvedAutocomplete()\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.pattern]=\"patternAttr()\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    <button\n      type=\"button\"\n      class=\"kt-field-box__toggle\"\n      [disabled]=\"disabled() || readonly()\"\n      [attr.aria-label]=\"isPasswordVisible() ? 'Masquer le mot de passe' : 'Afficher le mot de passe'\"\n      [attr.aria-controls]=\"inputId()\"\n      (mousedown)=\"toggleVisibility($event)\"\n    >\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">\n        {{ isPasswordVisible() ? 'visibility_off' : 'visibility' }}\n      </span>\n    </button>\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtPasswordField, decorators: [{
             type: Component,
-            args: [{ selector: 'kt-password-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"inputId()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [type]=\"inputType()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"resolvedAutocomplete()\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.pattern]=\"patternAttr()\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    <button\n      type=\"button\"\n      class=\"kt-field-box__toggle\"\n      [disabled]=\"disabled() || readonly()\"\n      [attr.aria-label]=\"isPasswordVisible() ? 'Masquer le mot de passe' : 'Afficher le mot de passe'\"\n      [attr.aria-controls]=\"inputId()\"\n      (mousedown)=\"toggleVisibility($event)\"\n    >\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">\n        {{ isPasswordVisible() ? 'visibility_off' : 'visibility' }}\n      </span>\n    </button>\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
+            args: [{ selector: 'kt-password-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"inputId()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      [type]=\"inputType()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholderAttr()\"\n      [attr.autocomplete]=\"resolvedAutocomplete()\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.pattern]=\"patternAttr()\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    <button\n      type=\"button\"\n      class=\"kt-field-box__toggle\"\n      [disabled]=\"disabled() || readonly()\"\n      [attr.aria-label]=\"isPasswordVisible() ? 'Masquer le mot de passe' : 'Afficher le mot de passe'\"\n      [attr.aria-controls]=\"inputId()\"\n      (mousedown)=\"toggleVisibility($event)\"\n    >\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">\n        {{ isPasswordVisible() ? 'visibility_off' : 'visibility' }}\n      </span>\n    </button>\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }] } });
 
 /**
@@ -1944,6 +1952,10 @@ class KtBaseSelect {
         ?? `'auto'`. @default undefined */
     floatLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "floatLabel" }] : /* istanbul ignore next */ []));
+    /** Masquer visuellement le label. @default KT_FIELD_CONFIG.hideLabel ?? false */
+    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 });
     // --- 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 */
@@ -2348,7 +2360,7 @@ class KtBaseSelect {
         }, durationMs + 50);
     }
     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 }, 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 }, 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,
@@ -2357,7 +2369,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 }] }], 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 }] }], 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`
@@ -2497,11 +2509,11 @@ class KtSelect extends KtBaseSelect {
         }
     }
     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  (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, #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, #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, #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", "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      [(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 });
 }
 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  (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, #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, #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, #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      [(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"] }]
         }], 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).
@@ -2623,6 +2635,10 @@ class KtChipListbox {
     /** Nom accessible (aria-label) quand label est absent. @default undefined */
     ariaLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Masquer visuellement le label. @default KT_FIELD_CONFIG.hideLabel ?? false */
+    hideLabel = input(this.config?.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.config?.hideErrors ?? false, { ...(ngDevMode ? { debugName: "hideErrors" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Stratégie d'affichage des erreurs. @default undefined */
     errorMatcher = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "errorMatcher" }] : /* istanbul ignore next */ []));
@@ -2766,14 +2782,18 @@ class KtChipListbox {
         this.el.nativeElement.querySelector('.kt-chip:not([disabled])')?.focus(options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtChipListbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtChipListbox, isStandalone: true, selector: "kt-chip-listbox", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, errorMatcher: { classPropertyName: "errorMatcher", publicName: "errorMatcher", isSignal: true, isRequired: false, transformFunction: null }, showAllErrors: { classPropertyName: "showAllErrors", publicName: "showAllErrors", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { listeners: { "keydown": "onKeydown($event)", "focusin": "onFocusin($event)" }, classAttribute: "kt-chip-listbox-container" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtChipListbox, isStandalone: true, selector: "kt-chip-listbox", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 }, errorMatcher: { classPropertyName: "errorMatcher", publicName: "errorMatcher", isSignal: true, isRequired: false, transformFunction: null }, showAllErrors: { classPropertyName: "showAllErrors", publicName: "showAllErrors", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { listeners: { "keydown": "onKeydown($event)", "focusin": "onFocusin($event)" }, classAttribute: "kt-chip-listbox-container" }, ngImport: i0, template: `
     <div
       class="kt-chip-listbox-field"
       [class.kt-chip-listbox-field--invalid]="showInvalid()"
       [class.kt-chip-listbox-field--disabled]="disabled()"
     >
       @if (label(); as labelText) {
-        <span [id]="labelId()" class="kt-chip-listbox__legend">
+        <span
+          [id]="labelId()"
+          class="kt-chip-listbox__legend"
+          [class.kt-chip-listbox__legend--visually-hidden]="hideLabel()"
+        >
           {{ labelText }}
           @if (required()) {
             <span class="kt-chip-listbox__required" aria-hidden="true">*</span>
@@ -2799,7 +2819,12 @@ class KtChipListbox {
       @if (hint() && !showInvalid()) {
         <p [id]="hintId()" class="kt-chip-listbox__hint">{{ hint() }}</p>
       }
-      <div [id]="errorId()" class="kt-chip-listbox__error" aria-live="polite">
+      <div
+        [id]="errorId()"
+        class="kt-chip-listbox__error"
+        [class.kt-chip-listbox__error--visually-hidden]="hideErrors()"
+        aria-live="polite"
+      >
         @if (showInvalid()) {
           @for (error of displayedErrors(); track $index) {
             <span class="kt-chip-listbox__error-message">{{ error.message }}</span>
@@ -2807,7 +2832,7 @@ class KtChipListbox {
         }
       </div>
     </div>
-  `, isInline: true, styles: ["@layer kt-aaa.components{.kt-chip-listbox-field{display:flex;flex-direction:column;gap:.5rem}.kt-chip-listbox__legend{font-size:.875rem;font-weight:500;color:var(--field-label-color, currentColor)}.kt-chip-listbox__required{color:var(--kt-danger);margin-inline-start:.125rem}.kt-chip-listbox__options{display:flex;flex-wrap:wrap;gap:.5rem;outline:none}.kt-chip-listbox__hint{font-size:.75rem;color:var(--field-hint-color);margin:0}.kt-chip-listbox__error{font-size:.75rem;color:var(--field-error-color);min-block-size:1.25rem}.kt-chip-listbox__error-message{display:block}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@layer kt-aaa.components{.kt-chip-listbox-field{display:flex;flex-direction:column;gap:.5rem}.kt-chip-listbox__legend{font-size:.875rem;font-weight:500;color:var(--field-label-color, currentColor)}.kt-chip-listbox__required{color:var(--kt-danger);margin-inline-start:.125rem}.kt-chip-listbox__options{display:flex;flex-wrap:wrap;gap:.5rem;outline:none}.kt-chip-listbox__hint{font-size:.75rem;color:var(--field-hint-color);margin:0}.kt-chip-listbox__error{font-size:.75rem;color:var(--field-error-color);min-block-size:1.25rem}.kt-chip-listbox__error-message{display:block}.kt-chip-listbox__legend--visually-hidden,.kt-chip-listbox__error--visually-hidden{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;min-block-size:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtChipListbox, decorators: [{
             type: Component,
@@ -2822,7 +2847,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
       [class.kt-chip-listbox-field--disabled]="disabled()"
     >
       @if (label(); as labelText) {
-        <span [id]="labelId()" class="kt-chip-listbox__legend">
+        <span
+          [id]="labelId()"
+          class="kt-chip-listbox__legend"
+          [class.kt-chip-listbox__legend--visually-hidden]="hideLabel()"
+        >
           {{ labelText }}
           @if (required()) {
             <span class="kt-chip-listbox__required" aria-hidden="true">*</span>
@@ -2848,7 +2877,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
       @if (hint() && !showInvalid()) {
         <p [id]="hintId()" class="kt-chip-listbox__hint">{{ hint() }}</p>
       }
-      <div [id]="errorId()" class="kt-chip-listbox__error" aria-live="polite">
+      <div
+        [id]="errorId()"
+        class="kt-chip-listbox__error"
+        [class.kt-chip-listbox__error--visually-hidden]="hideErrors()"
+        aria-live="polite"
+      >
         @if (showInvalid()) {
           @for (error of displayedErrors(); track $index) {
             <span class="kt-chip-listbox__error-message">{{ error.message }}</span>
@@ -2856,8 +2890,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }
       </div>
     </div>
-  `, styles: ["@layer kt-aaa.components{.kt-chip-listbox-field{display:flex;flex-direction:column;gap:.5rem}.kt-chip-listbox__legend{font-size:.875rem;font-weight:500;color:var(--field-label-color, currentColor)}.kt-chip-listbox__required{color:var(--kt-danger);margin-inline-start:.125rem}.kt-chip-listbox__options{display:flex;flex-wrap:wrap;gap:.5rem;outline:none}.kt-chip-listbox__hint{font-size:.75rem;color:var(--field-hint-color);margin:0}.kt-chip-listbox__error{font-size:.75rem;color:var(--field-error-color);min-block-size:1.25rem}.kt-chip-listbox__error-message{display:block}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], 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 }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], errorMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMatcher", required: false }] }], showAllErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllErrors", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }] } });
+  `, styles: ["@layer kt-aaa.components{.kt-chip-listbox-field{display:flex;flex-direction:column;gap:.5rem}.kt-chip-listbox__legend{font-size:.875rem;font-weight:500;color:var(--field-label-color, currentColor)}.kt-chip-listbox__required{color:var(--kt-danger);margin-inline-start:.125rem}.kt-chip-listbox__options{display:flex;flex-wrap:wrap;gap:.5rem;outline:none}.kt-chip-listbox__hint{font-size:.75rem;color:var(--field-hint-color);margin:0}.kt-chip-listbox__error{font-size:.75rem;color:var(--field-error-color);min-block-size:1.25rem}.kt-chip-listbox__error-message{display:block}.kt-chip-listbox__legend--visually-hidden,.kt-chip-listbox__error--visually-hidden{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;min-block-size:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], 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 }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], hideErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideErrors", required: false }] }], errorMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMatcher", required: false }] }], showAllErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllErrors", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }] } });
 
 /**
  * Pilule individuelle (tag). Utilisable seule (tag statique), dans `kt-chip-list` ou dans `kt-chip-listbox`.
@@ -3660,7 +3694,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  (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, #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, #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, #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", "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 }, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMultiSelect, decorators: [{
             type: Component,
@@ -3674,7 +3708,7 @@ 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  (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, #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, #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, #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"] }]
+                    ], 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 }] }] } });
 
 /** Base partagée des champs Temporal (Date/Time/DateTime/YearMonth).
@@ -3866,11 +3900,11 @@ class KtDateField extends KtBaseTemporalField {
         return value.toString();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtDateField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtDateField, isStandalone: true, selector: "kt-date-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"date\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtDateField, isStandalone: true, selector: "kt-date-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"date\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtDateField, decorators: [{
             type: Component,
-            args: [{ selector: 'kt-date-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"date\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
+            args: [{ selector: 'kt-date-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"date\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /** Champ « heure sans date » : valeur = `Temporal.PlainTime`, input natif `type="time"`.
@@ -3894,11 +3928,11 @@ class KtTimeField extends KtBaseTimeTemporalField {
         return value.toString({ smallestUnit: this.precision() });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtTimeField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtTimeField, isStandalone: true, selector: "kt-time-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"time\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.step]=\"step()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtTimeField, isStandalone: true, selector: "kt-time-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"time\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.step]=\"step()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtTimeField, decorators: [{
             type: Component,
-            args: [{ selector: 'kt-time-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"time\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.step]=\"step()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
+            args: [{ selector: 'kt-time-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"time\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.step]=\"step()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /** Champ « date-heure sans fuseau » : valeur = `Temporal.PlainDateTime`, input
@@ -3923,11 +3957,11 @@ class KtDateTimeField extends KtBaseTimeTemporalField {
         return value.toString({ smallestUnit: this.precision() });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtDateTimeField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtDateTimeField, isStandalone: true, selector: "kt-date-time-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"datetime-local\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.step]=\"step()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtDateTimeField, isStandalone: true, selector: "kt-date-time-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"datetime-local\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.step]=\"step()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtDateTimeField, decorators: [{
             type: Component,
-            args: [{ selector: 'kt-date-time-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"datetime-local\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.step]=\"step()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
+            args: [{ selector: 'kt-date-time-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"datetime-local\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.step]=\"step()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /** Champ « mois/année » (ex. expiration de carte) : valeur = `Temporal.PlainYearMonth`,
@@ -3951,11 +3985,11 @@ class KtYearMonthField extends KtBaseTemporalField {
         return value.toString();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtYearMonthField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtYearMonthField, isStandalone: true, selector: "kt-year-month-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"month\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtYearMonthField, isStandalone: true, selector: "kt-year-month-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"month\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtYearMonthField, decorators: [{
             type: Component,
-            args: [{ selector: 'kt-year-month-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"month\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
+            args: [{ selector: 'kt-year-month-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"month\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /** Source unique de l'heure courante et du **fuseau local** de l'utilisateur.
@@ -4053,11 +4087,11 @@ class KtInstantField extends KtBaseTimeTemporalField {
             .toString({ smallestUnit: this.precision() });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtInstantField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtInstantField, isStandalone: true, selector: "kt-instant-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"datetime-local\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.step]=\"step()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n", dependencies: [{ kind: "component", type: KtField, selector: "kt-field", inputs: ["label", "hint", "helpText", "helpLabel", "customDescribedBy", "errors", "invalid", "required", "fieldId", "hideHintWhenInvalid", "showAllErrors", "appearance", "floatLabel"], outputs: ["helpClick"] }, { kind: "directive", type: KtFieldControl, selector: "[ktFieldControl]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: KtInstantField, isStandalone: true, selector: "kt-instant-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"datetime-local\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.step]=\"step()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtInstantField, decorators: [{
             type: Component,
-            args: [{ selector: 'kt-instant-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\n  [invalid]=\"showInvalid()\"\n  [required]=\"required()\"\n  [fieldId]=\"id()\"\n  [appearance]=\"appearance()\"\n  [floatLabel]=\"floatLabel()\"\n  (helpClick)=\"helpClick.emit($event)\"\n>\n  <ng-content select=\"[ktFieldHelp]\" />\n  <div\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"datetime-local\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.step]=\"step()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
+            args: [{ selector: 'kt-instant-field', imports: [KtField, KtFieldControl, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kt-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [helpText]=\"helpText()\"\n  [helpLabel]=\"helpLabel()\"\n  [customDescribedBy]=\"customDescribedBy()\"\n  [errors]=\"displayErrors()\"\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\n    class=\"kt-field-box\"\n    [attr.data-invalid]=\"showInvalid() ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n    [attr.data-pending]=\"pending() ? '' : null\"\n  >\n    @if (icon(); as icon) {\n      <span class=\"kt-field-box__icon\" aria-hidden=\"true\">{{ icon }}</span>\n    }\n\n    @if (prefix(); as prefix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(prefix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(prefix) }}\n        }\n      </span>\n    }\n\n    <input\n      #input\n      ktFieldControl\n      class=\"kt-field-box__input\"\n      type=\"datetime-local\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-busy]=\"pending() ? 'true' : null\"\n      [attr.name]=\"name() || null\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.min]=\"serializedMin()\"\n      [attr.max]=\"serializedMax()\"\n      [attr.step]=\"step()\"\n      [attr.list]=\"hasSuggestions() ? datalistId : null\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"touched.set(true)\"\n    />\n\n    @if (hasSuggestions()) {\n      <datalist [id]=\"datalistId\">\n        @for (option of datalistOptions(); track $index) {\n          <option [value]=\"option.value\" [attr.label]=\"option.label\"></option>\n        }\n      </datalist>\n    }\n\n    @if (showClear()) {\n      <button type=\"button\" class=\"kt-field-box__clear\" [attr.aria-label]=\"clearLabel()\" (click)=\"clear()\">\n        <span class=\"kt-field-box__icon\" aria-hidden=\"true\">close</span>\n      </button>\n    }\n\n    @if (suffix(); as suffix) {\n      <span class=\"kt-field-box__affix\">\n        @if (asTemplate(suffix); as tpl) {\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else {\n          {{ asText(suffix) }}\n        }\n      </span>\n    }\n  </div>\n</kt-field>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /** Formate une valeur Temporal pour l'affichage selon la locale active.