@cityway/bo-ui 1.1.0-beta017 → 1.1.0-beta018

package/docs/components/drag-n-drop-nested-list.md

@@ -45,6 +45,7 @@ Liste hiérarchique réordonnable par glisser-déposer (CDK drag-drop), pilotée
 | `delete` | `DragItem` | Clic sur l'action « supprimer » (corbeille) — sur une carte **non** `pendingDelete`. |
 | `restore` | `DragItem` | Clic sur « Restaurer » — sur une carte `pendingDelete` (la corbeille bascule en restauration). |
 | `add` | `DragAddEvent` | Clic sur un lien « Ajouter » (racine ou pied de carte). Payload : `{ parent?: DragItem; depth: number }` (`parent` = `undefined` à la racine). |
+| `expandedChange` | `{ item: DragItem; expanded: boolean }` | L'utilisateur a plié / déplié une carte (chevron). À refléter dans `DragItem.expanded` pour que l'état survive au prochain `items`. **Jamais émis** pour un état posé par l'hôte (`expanded`, `expandSelected`). |
 
 ### Contenu projeté (corps de carte custom)
 
@@ -72,7 +73,9 @@ interface DragItem {
   label: string;                  // libellé (fallback de title dans l'en-tête)
   code?: string;                  // affiché seul dans le corps quand il n'y a pas d'itemTemplate
   order?: number;                 // position 1..n (renumérotée si reorderOnDrop)
-  disabled?: boolean;             // verrouille le drag de CETTE carte (poignée inactive)
+  disabled?: boolean;             // verrouille le drag de CETTE carte (poignée affichée, inactive)
+  sortable?: boolean;             // false : ordre non manipulable, AUCUNE poignée (défaut column.sortable → true)
+  expanded?: boolean;             // état déplié voulu par l'hôte, réappliqué à chaque nouvel `items` (undefined : replié au départ)
   children?: DragItem[];          // sous-arbre
 
   title?: string;                 // titre de la carte (fallback sur label)
@@ -108,6 +111,8 @@ interface DragListColumn {
   cssClass?: string;              // classe sur chaque <ul> de niveau
 
   collapsible?: boolean;          // cartes pliables (défaut true) ; false désactive globalement
+  sortable?: boolean;             // défaut de DragItem.sortable ; false = liste à ordre fixe (aucune poignée)
+  expandSelected?: boolean;       // déplie les ancêtres de la carte selectedId (prime sur DragItem.expanded)
   showView?: boolean;             // visibilité par défaut des actions (surchargée par DragItem.actions)
   showEdit?: boolean;
   showDelete?: boolean;
@@ -132,6 +137,8 @@ interface DragAddEvent {
 
 - **Ajout** (`canAdd`) : `item.actions.add` → `column.showAdd` → `depth < maxDepth` (si `maxDepth` défini) → `true`. Indépendant de la présence d'enfants (une carte vide reste addable).
 - **Actions view/edit/delete** (`showAction`) : `item.actions[action]` → `column.show{View|Edit|Delete}` → `true`.
+- **Triable** (`isSortable`) : `item.sortable` → `column.sortable` → `true`. Non triable : poignée **non rendue** et drag désactivé. Distinct de `disabled` (poignée affichée mais inerte) ; `disabled` et `pendingDelete` n'ont pas d'effet supplémentaire sur une carte non triable.
+- **Déplié** (`isCollapsedCard`) : dernier état connu de la carte, mis à jour par le chevron (utilisateur), par `item.expanded` à chaque nouvelle valeur de `items`, puis par `column.expandSelected` (ancêtres de `selectedId` dépliés, à chaque changement de sélection ou d'`items`) ; à défaut, une carte pliable démarre repliée. L'état est indexé par `id` : une carte dont l'`id` change (id définitif après enregistrement) repart de zéro, d'où l'intérêt de lui passer `expanded`.
 - **Pliable** (`isCollapsible`) : faux si `pendingDelete` ou `column.collapsible === false` ; sinon vrai si la carte a des enfants OU peut en recevoir.
 - **Niveau plein** (`isLevelFull`) : vrai si `maxItemsByDepth[depth]` défini et atteint (`excludePendingDeleteFromMax` exclut les marqués du décompte).
 
@@ -200,6 +207,43 @@ items: DragItem[] = [
 ];
 ```
 
+### Liste à ordre fixe (`sortable: false`)
+
+```ts
+// L'ordre n'est pas manuel (ex. trié côté API) : aucune poignée rendue, aucun drag.
+// Le reste fonctionne (sélection, édition, suppression différée, ajout, sous-niveaux).
+column: DragListColumn = { title: 'Seuils de zoom', sortable: false };
+
+// Ou carte par carte (l'item prime sur la colonne) :
+items: DragItem[] = [
+  { id: 1, label: 'Racine', sortable: false, children: [
+    { id: 11, label: 'Enfant réordonnable' },  // hérite de la colonne → triable
+  ] },
+];
+```
+
+> `disabled` ≠ `sortable: false` : `disabled` = « déplaçable en principe, verrouillé pour l'instant » (poignée affichée, inerte) ; `sortable: false` = « cet ordre ne se manipule pas » (pas de poignée).
+
+### Dépliage piloté par l'hôte (`expanded`, `expandSelected`)
+
+```html
+<cw-drag-n-drop-nested-list [items]="items" [column]="column" [selectedId]="selectedId"
+  (expandedChange)="onExpandedChange($event)" />
+```
+
+```ts
+// La sélection (ex. un enfant désigné par une erreur d'enregistrement) est toujours visible.
+column: DragListColumn = { title: 'Seuils', expandSelected: true };
+
+// Tout déplier : nouvel `items` avec `expanded` (réappliqué à chaque nouvelle valeur).
+expandAll() { this.items = this.items.map(i => ({ ...i, expanded: true })); }
+
+// Refléter les choix de l'utilisateur, pour qu'ils survivent au prochain rechargement.
+onExpandedChange({ item, expanded }: { item: DragItem; expanded: boolean }) {
+  this.items = this.items.map(i => i.id === item.id ? { ...i, expanded } : i);
+}
+```
+
 ### Nombre max par niveau (`maxItemsByDepth`)
 
 ```ts
@@ -296,6 +340,8 @@ onReorder(items: DragItem[]) { this.items = items; }
 - « Limite les rubriques à 3 par thème (`maxItemsByDepth: { 1: 3 }`) avec un message d'alerte i18n quand le max est atteint. »
 - « Ajoute un soft-delete : *Supprimer* marque la carte (`pendingDelete`), *Restaurer* l'annule ; sélection exclusive de la carte en cours d'édition via `selectedId`. »
 - « Affiche un corps de carte custom (titre + niveau) via `itemTemplate`, en gardant l'en-tête data-driven. »
+- « Garde mes sections dépliées après enregistrement et ouvre automatiquement le parent de la carte en erreur (`expanded` + `expandSelected`). »
+- « Ma liste de seuils est triée par l'API : retire les poignées de drag (`column.sortable: false`) en gardant édition et suppression. »
 - « Rends la *Section A* non déplaçable (`disabled`) et masque l'action *supprimer* sur les feuilles via `DragItem.actions`. »
 
 **Rappels pour Claude :**

package/docs/components/page-header.md

@@ -52,8 +52,8 @@ Trois emplacements, dans l'ordre du template :
 | Slot | Sélecteur | Position dans la barre | Usage |
 |------|-----------|------------------------|-------|
 | Import | `cwPageHeaderImport` | après *Colonnes*, avant l'export | `<cw-import-button>` |
-| Export | `cwPageHeaderExport` | après l'import, avant *Réinitialiser* | `<cw-export-button>` |
-| Libre | *(aucun)* | après *Réinitialiser*, avant *Ajouter* / *Enregistrer* | tout le reste |
+| Export | `cwPageHeaderExport` | après l'import, avant le slot libre | `<cw-export-button>` |
+| Libre | *(aucun)* | après l'export, avant *Réinitialiser* | tout le reste |
 
 ```html
 <cw-page-header [title]="'DOMAIN.USERS.TITLE'" [actions]="[actionEnum.add]" (action)="onAction($event)">
@@ -215,7 +215,7 @@ Règles :
 
 - **i18n** : `title` et `description` passent par `translate` → fournir des **clés**, pas du texte en dur. `description` est rendue en `[innerHTML]` (peut contenir du HTML/markup traduit).
 - **Libellés des actions** : non paramétrables. Ils sont câblés sur les clés `_COMMON._ACTION.*` (`ADD`, `SAVE`, `RESET`) et `_COMMON._FORM.BACK` pour le retour. Ces clés doivent exister dans les bundles i18n de l'app.
-- **Ordre d'affichage** : imposé par le template, indépendant de l'ordre du tableau `actions` et de l'ordre d'écriture du contenu projeté → Colonnes, *slot import*, *slot export*, Réinitialiser, *slot libre*, Ajouter, Enregistrer (échanges de données, puis actions sur le formulaire, puis action principale).
+- **Ordre d'affichage** : imposé par le template, indépendant de l'ordre du tableau `actions` et de l'ordre d'écriture du contenu projeté → Colonnes, *slot import*, *slot export*, *slot libre*, Réinitialiser, Ajouter, Enregistrer. Lu de droite à gauche : Enregistrer, Réinitialiser, zone custom, Exporter, Importer — les actions sur le formulaire au plus près de l'action principale, les échanges de données à l'extérieur.
 - **Bouton retour** : navigue via `Location.back()` (historique du navigateur). Aucune sortie ni cible configurable ; masquer avec `[showBack]="false"` si non pertinent.
 - **États par action** : `isLoading` / `isDisabled` sont des maps partielles ; une action absente de la map vaut `false`.
 - **Dépendance** : le composant projette des `cw-button` (`@cityway/basic-ui`) en interne — `basic-ui` doit être disponible.