@ktortu/aaa 0.10.0 → 0.10.2

package/forms/multi-select/multi-select.css

@@ -83,4 +83,52 @@
   kt-chip-list:not([data-empty]) {
     margin-block-start: 0.5rem;
   }
+
+  /* Pied de la bottom-sheet (bouton Valider), rendu sur téléphone quand validationButtonLabel est configuré. */
+  .kt-select__sheet-footer {
+    display: flex;
+    flex: none;
+    padding-block: 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
+    padding-inline: 1rem;
+    border-block-start: 1px solid var(--field-border-color, #c4c7c5);
+    background: var(--field-panel-bg, #ffffff);
+    box-sizing: border-box;
+  }
+
+  .kt-select__sheet-validate {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    min-block-size: 44px;
+    padding-block: 0.625rem;
+    padding-inline: 1.25rem;
+    border: 0;
+    border-radius: var(--field-radius, 8px);
+    background: var(--kt-primary, #0b57d0);
+    color: var(--kt-on-primary, #ffffff);
+    font: inherit;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 120ms ease;
+  }
+
+  .kt-select__sheet-validate:hover {
+    background: color-mix(in srgb, var(--kt-primary, #0b57d0) 90%, black);
+  }
+
+  .kt-select__sheet-validate:active {
+    background: color-mix(in srgb, var(--kt-primary, #0b57d0) 80%, black);
+  }
+
+  .kt-select__sheet-validate:focus-visible {
+    outline: 2px solid var(--field-border-color-focus, #0b57d0);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kt-select__sheet-validate {
+      transition: none;
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktortu/aaa",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "Bibliothèque de composants Angular headless + thémés par tokens CSS.",
   "keywords": [
     "angular",

package/types/ktortu-aaa-forms.d.ts

@@ -1284,6 +1284,8 @@ interface KtSelectConfigOptions {
     truncatedResultsText: (max: number, total: number) => string;
     /** Annonce de la troncature des résultats (live region). Défaut : `'X results displayed out of Y...'`. */
     truncatedResultsAnnouncement: (max: number, total: number) => string;
+    /** Libellé du bouton de validation en bas de la sheet mobile (opt-in, multi-select). Défaut : `''` (aucun bouton). */
+    validationButtonLabel: string;
 }
 declare const KT_SELECT_CONFIG: InjectionToken<Partial<KtSelectConfigOptions>>;
 /**
@@ -1432,10 +1434,13 @@ declare class KtMultiSelect<T, V = T> extends KtBaseSelect<T, V> implements Form
     readonly selectionActions: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Nombre maximal de chips affichés avant repli derrière un bouton « +N more ». Défaut : illimité. */
     readonly maxVisibleChips: _angular_core.InputSignal<number | undefined>;
+    /** Libellé du bouton de validation affiché en bas de la sheet mobile. Défaut : `KT_SELECT_CONFIG.validationButtonLabel` ou vide. */
+    readonly validationButtonLabel: _angular_core.InputSignal<string | undefined>;
     protected readonly optionDef: _angular_core.Signal<KtMultiSelectOptionDef<any> | undefined>;
     protected readonly triggerDef: _angular_core.Signal<KtMultiSelectTriggerDef<any> | undefined>;
     protected readonly chipDef: _angular_core.Signal<KtMultiSelectChipDef<any> | undefined>;
     private readonly chipList;
+    protected readonly resolvedValidationButtonLabel: _angular_core.Signal<string>;
     protected readonly resolvedRemoveItemLabel: _angular_core.Signal<(itemLabel: string) => string>;
     protected readonly resolvedSelectedItemsLabel: _angular_core.Signal<string>;
     private readonly resolvedSelectionSummaryText;
@@ -1487,8 +1492,10 @@ declare class KtMultiSelect<T, V = T> extends KtBaseSelect<T, V> implements Form
     protected clearAllFiltered(): void;
     /** Annonce immédiate (action ponctuelle, pas de débounce) du total sélectionné. */
     private announceSelectionCount;
+    /** Valide la sélection depuis la sheet mobile (ferme le popup, marque le champ comme visité et replace le focus sur le trigger). */
+    protected validateSheet(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KtMultiSelect<any, any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtMultiSelect<any, any>, "kt-multi-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectionActions": { "alias": "selectionActions"; "required": false; "isSignal": true; }; "maxVisibleChips": { "alias": "maxVisibleChips"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectionChange": "selectionChange"; }, ["optionDef", "triggerDef", "chipDef"], ["[ktFieldHelp]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KtMultiSelect<any, any>, "kt-multi-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectionActions": { "alias": "selectionActions"; "required": false; "isSignal": true; }; "maxVisibleChips": { "alias": "maxVisibleChips"; "required": false; "isSignal": true; }; "validationButtonLabel": { "alias": "validationButtonLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectionChange": "selectionChange"; }, ["optionDef", "triggerDef", "chipDef"], ["[ktFieldHelp]"], true, never>;
 }
 
 /** Portée de transition des chips. Fourni par `ChipList` (via `useExisting`) ; injecté en