@cityway/bo-ui 1.1.0-beta004 → 1.1.0-beta005

package/docs/components/page-header.md

@@ -32,12 +32,16 @@ En-tête de page transverse du back-office. Couvre :
 | `actions` | `PageHeaderActionEnum[]` | `[]` | Liste des actions à afficher. Voir enum §3. L'ordre d'affichage est imposé par le template (cf. §5). |
 | `isLoading` | `PageHeaderActionState` | `{}` | Map action → `boolean` ; passe l'action en état chargement. |
 | `isDisabled` | `PageHeaderActionState` | `{}` | Map action → `boolean` ; désactive l'action. |
+| `columns` | `TableColumn[]` | `[]` | Colonnes du tableau associé. **Fourni → un menu déroulant « Colonnes » apparaît** (cases à cocher afficher/masquer). Voir §6 bis. |
+| `storageKey` | `string` | — | Identifiant **stable** du tableau pour persister l'état en localStorage (ex. `'users/list'`). Sans clé : le menu fonctionne mais l'état n'est pas mémorisé. |
+| `columnsLabel` | `string` | `_COMMON._TABLE.COLUMNS` | Clé i18n du libellé du bouton « Colonnes ». |
 
 ### Outputs
 
 | Output | Payload | Description |
 |--------|---------|-------------|
 | `action` | `PageHeaderActionEnum` | Émis au clic sur une action de la barre. Le bouton retour n'émet pas (géré en interne). |
+| `columnsChange` | `TableColumn[]` | Émis quand la visibilité des colonnes change (colonnes avec `hidden` à jour). À renvoyer dans le `signal`/state lié à la `cw-table`. |
 
 ### Contenu projeté
 
@@ -134,6 +138,47 @@ onAction(action: PageHeaderActionEnum): void {
 
 ---
 
+## 4 bis. Menu « Colonnes » (visibilité + persistance)
+
+Quand on passe `columns` au page-header, un bouton **Colonnes** apparaît : un dropdown de cases à cocher pour afficher/masquer chaque colonne du tableau associé. L'état (colonnes masquées) est **persisté en localStorage** par tableau.
+
+```ts
+import { PageHeaderComponent, TableComponent, TableColumn } from '@cityway/bo-ui';
+
+@Component({
+  standalone: true,
+  imports: [PageHeaderComponent, TableComponent],
+  template: `
+    <cw-page-header
+      [title]="'DOMAIN.USERS.TITLE'"
+      [columns]="columns()"
+      storageKey="users/list"
+      (columnsChange)="columns.set($event)">
+    </cw-page-header>
+
+    <cw-table [columns]="columns()" [data]="rows()"></cw-table>
+  `,
+})
+export class UsersPage {
+  // Source de vérité unique, liée au header (contrôle) ET à la table (rendu).
+  columns = signal<TableColumn[]>([
+    { key: 'name',  label: 'DOMAIN.USERS.NAME' },
+    { key: 'email', label: 'DOMAIN.USERS.EMAIL' },
+    { key: 'createdAt', label: 'DOMAIN.USERS.CREATED', hidden: true }, // masquée par défaut
+    { key: 'actions', label: '', type: 'actions' },                    // jamais masquable
+  ]);
+}
+```
+
+Règles :
+- **Activation** : le menu n'apparaît que si `columns` contient au moins une colonne masquable. Sans `columns`, pas de menu.
+- **Colonnes exclues** : `type='actions'` (jamais masquable) et toute colonne `hideable: false`.
+- **Garde-fou** : impossible de masquer la **dernière** colonne masquable visible (sa case est désactivée).
+- **Persistance** : une seule clé localStorage `cw-table-columns` → `{ [storageKey]: string[] }`, **on ne stocke que les clés des colonnes masquées**. Au chargement, l'état mémorisé prime sur les `hidden` du config ; **sans `storageKey`**, le menu fonctionne mais rien n'est mémorisé.
+- **Helpers** : `loadHiddenColumns(storageKey)` / `saveHiddenColumns(storageKey, keys)` exportés par `@cityway/bo-ui` (le page-header les utilise en interne).
+
+---
+
 ## 5. Notes d'intégration
 
 - **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).

package/docs/components/table.md

@@ -36,6 +36,9 @@ Dépend de `@cityway/basic-ui` (badge, button, icon, image, loader, modale de su
 | `pagination` | `Pagination` | `undefined` | Config de pagination (intègre `cw-pagination`). |
 | `bulkActions` | `BulkAction[]` | `[]` | Actions groupées (nécessite `checkbox`). |
 | `rowActions` | `RowActionsConfig` | `undefined` | Actions par ligne (API déclarative). |
+| `emptyStateNoData` | `TableEmptyStateConfig` | `undefined` | État vide quand `data` est vide **et** table non filtrée (`cw-empty-state`). |
+| `emptyStateNoResult` | `TableEmptyStateConfig` | `undefined` | État vide quand un filtrage ne renvoie rien (`isFiltered=true`). |
+| `isFiltered` | `boolean` | `false` | Des filtres sont actifs → pilote le choix noData vs noResult. |
 
 ### Outputs
 
@@ -75,6 +78,7 @@ interface TableColumn {
   hidden?: boolean;
   clickable?: boolean;               // rend la cellule cliquable (-> cellClick)
   translate?: boolean;               // traduit la VALEUR (text/link). Défaut false. Voir ci-dessous.
+  hideable?: boolean;                // proposée au masquage dans le menu « Colonnes ». Défaut true.
 }
 
 interface BadgeConfig {
@@ -190,6 +194,8 @@ rowActions: RowActionsConfig = {
 ## 5. Notes d'intégration
 
 - **i18n** : tous les `label` (colonnes, actions) sont des **clés** traduites en interne.
+- **Visibilité des colonnes** : le menu « Colonnes » (afficher/masquer + persistance localStorage) est porté par **`cw-page-header`** (lui passer `[columns]` + `storageKey`, relier `(columnsChange)`). La `cw-table` ne fait que rendre les colonnes non `hidden` ; côté colonne, `hideable: false` exclut du menu et `type='actions'` est exclu d'office. Voir la doc `cw-page-header` §4 bis.
+- **État vide** : fournir `emptyStateNoData` et/ou `emptyStateNoResult` (+ `isFiltered`) pour afficher un `cw-empty-state` (illustration + titre + description + 2 boutons avec `click`). Sans config, la table garde le texte `NO_RESULT`. Voir la doc `cw-empty-state`.
 - **Traduction des VALEURS de cellule** : les colonnes `text` / `link` affichent la donnée **brute par défaut**. Mettre `translate: true` **uniquement** quand la valeur est elle-même une clé i18n (enum / statut affiché en texte). Sinon une donnée qui coïncide avec une clé serait traduite à tort — typiquement un code applicatif `"NEWS"` rendu en `[object Object]` car la clé pointe sur une branche d'objet. (Les `badge` traduisent déjà leur `label` ; les en-têtes `label` sont toujours traduits.)
 - **OnPush** : `data`/`columns` sont des signals → fournir des références à jour (set/update du signal).
 - **`rowActions` vs `#actionsTemplate`** : ne fournir qu'un seul. `rowActions` est l'API recommandée ; le template custom reste pour les cas hors standard.

package/fesm2022/cityway-bo-ui.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, output, effect, HostListener, Directive, computed, inject, contentChild, signal, isSignal, DestroyRef, viewChild, contentChildren } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, output, effect, HostListener, Directive, computed, inject, contentChild, signal, isSignal, DestroyRef, afterNextRender, viewChild, contentChildren } from '@angular/core';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, Location } from '@angular/common';
 import * as i2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
-import { CardComponent, SpriteIconEnum, IconSizeEnum, BoButtonTypeEnum, ButtonPositionEnum, ButtonIconSizeEnum, AlertTypeEnum, CardTypeEnum, BadgeComponent, IconComponent, ButtonComponent, AlertComponent, FormFieldTypeEnum, FormFieldComponent, ModalsService, IconTypeEnum, IconUiTypeEnum, BadgeTypeEnum, ModalsType, LoaderComponent, ImageComponent, DropdownItemDirective } from '@cityway/basic-ui';
+import { CardComponent, SpriteIconEnum, IconSizeEnum, BoButtonTypeEnum, ButtonPositionEnum, ButtonIconSizeEnum, AlertTypeEnum, CardTypeEnum, BadgeComponent, IconComponent, ButtonComponent, AlertComponent, FormFieldTypeEnum, FormFieldComponent, ModalsService, IconTypeEnum, IconUiTypeEnum, EmptyStateIllustrationEnum, BadgeTypeEnum, ModalsType, LoaderComponent, ImageComponent, EmptyStateComponent, DropdownItemDirective } from '@cityway/basic-ui';
 import * as i1$2 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormGroup } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -510,6 +510,12 @@ class TableComponent {
         this.pagination = input(undefined, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
         this.bulkActions = input([], ...(ngDevMode ? [{ debugName: "bulkActions" }] : []));
         this.rowActions = input(undefined, ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
+        /** Etat vide affiche quand il n'y a aucune donnee (table non filtree). */
+        this.emptyStateNoData = input(undefined, ...(ngDevMode ? [{ debugName: "emptyStateNoData" }] : []));
+        /** Etat vide affiche quand un filtrage ne renvoie aucun resultat (`isFiltered=true`). */
+        this.emptyStateNoResult = input(undefined, ...(ngDevMode ? [{ debugName: "emptyStateNoResult" }] : []));
+        /** Indique que des filtres sont actifs : pilote le choix noData vs noResult. */
+        this.isFiltered = input(false, ...(ngDevMode ? [{ debugName: "isFiltered" }] : []));
         this.cellClick = output();
         this.sortChange = output();
         this.selectionChange = output();
@@ -524,6 +530,9 @@ class TableComponent {
         this.iconSize = IconSizeEnum;
         this.spriteIcon = SpriteIconEnum;
         this.buttonType = BoButtonTypeEnum;
+        this.illustrationEnum = EmptyStateIllustrationEnum;
+        /** Config d'etat vide a afficher selon le contexte (filtre ou non). `undefined` -> fallback texte. */
+        this.currentEmptyState = computed(() => this.isFiltered() ? this.emptyStateNoResult() : this.emptyStateNoData(), ...(ngDevMode ? [{ debugName: "currentEmptyState" }] : []));
         this.currentSortKey = signal(null, ...(ngDevMode ? [{ debugName: "currentSortKey" }] : []));
         this.currentSortDirection = signal('asc', ...(ngDevMode ? [{ debugName: "currentSortDirection" }] : []));
         this.selectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
@@ -734,7 +743,7 @@ class TableComponent {
         return typeof descriptor.link === 'function' ? descriptor.link(row) : descriptor.link;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.20", type: TableComponent, isStandalone: true, selector: "cw-table", inputs: { checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, bulkActions: { classPropertyName: "bulkActions", publicName: "bulkActions", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick", sortChange: "sortChange", selectionChange: "selectionChange", paginationChange: "paginationChange", bulkDelete: "bulkDelete", bulkAction: "bulkAction" }, host: { classAttribute: "cw-table" }, queries: [{ propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (checkbox() && selectedRows().size > 0) {\n  <div class=\"table-selection-info mb-2 d-flex align-items-center gap-2 flex-wrap\">\n    <span>\n      {{ selectedRows().size }} {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEMS_CURRENT_PAGE' | translate }}\n    </span>\n    @for (action of bulkActions(); track $index) {\n      <cw-button\n        [type]=\"resolveVariant(action)\"\n        [label]=\"action.label\"\n        [withIcon]=\"action.icon\"\n        [isDisabled]=\"resolveDisabled(action)\"\n        (btnAction)=\"onBulkActionClick(action)\">\n      </cw-button>\n    }\n  </div>\n}\n\n<div class=\"table-responsive\">\n  <table class=\"table\">\n    <caption class=\"visually-hidden\" [innerHTML]=\"'_COMMON._TABLE.CAPTION' | translate: { label: title() } \"></caption>\n    <thead>\n      <tr>\n        @if(checkbox()) {\n          <th scope=\"col\" width=\"10\">\n            <div class=\"field-check\">\n              <input class=\"field-check-input\" type=\"checkbox\" id=\"checkme\" [checked]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\" (change)=\"toggleAll()\">\n              <label class=\"field-check-label\" for=\"checkme\">\n                <span class=\"visually-hidden\">{{ '_COMMON._TABLE._THEAD.CHECK_LINE' | translate }}</span>\n              </label>\n            </div>\n          </th>\n        }\n\n        @for (column of columns(); track column.key) {\n           @if (!column.hidden) {\n            <th scope=\"col\" [class.p-0]=\"column.sort\">\n              @if (column.sort) {\n                <button class=\"d-flex-h gap-2xs\" [class]=\"getSortClass(column.key)\" (click)=\"setSortProperty(column.key)\">\n                  {{ column.label | translate}}\n                  <cw-icon\n                    [icon]=\"getSortIcon(column.key)\"\n                    [label]=\"'_COMMON._TABLE._SORT.LABEL' | translate\"\n                    [type]=\"iconType.default\"\n                    [iconSize]=\"iconSize['xs']\"></cw-icon>\n                </button>\n              }\n              @else {\n                {{ column.label | translate }}\n              }\n            </th>\n          }\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr>\n          <td colspan=\"100\">\n            <cw-loader></cw-loader>\n          </td>\n        </tr>\n      }\n      @else if (!data() || data().length === 0) {\n        <tr>\n          <td class=\"table-info no-result\" colspan=\"100\">\n            {{ '_COMMON._TABLE.NO_RESULT' | translate }}\n          </td>\n        </tr>\n      }\n      @else {\n        @for (row of data(); track row) {\n          <tr [class.tr-selected]=\"isSelected(row)\" [class]=\"getRowClass(row)\">\n            @if (checkbox()) {\n              <td>\n                <input class=\"field-check-input\" type=\"checkbox\" [checked]=\"isSelected(row)\" (change)=\"toggleRow(row)\" [id]=\"'check-' + row.id\"\n                [attr.aria-label]=\"'S\u00E9lectionner la ligne ' + row.id\">\n                <label class=\"visually-hidden\" [for]=\"'check-' + row.id\">S\u00E9lectionner la ligne {{row.id}}</label>\n              </td>\n            }\n            @for (column of columns(); track column.key) {\n              @if (!column.hidden) {\n                <td [class.text-end]=\"column.align === 'right'\" [class.text-center]=\"column.align === 'center'\"\n                  [class.td-actions]=\"column.type === 'actions'\">\n                  @switch (column.type) {\n                    @case ('link') {\n                      <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\">\n                        {{ column.translate ? (row[column.key] | translate) : row[column.key] }}\n                      </a>\n                    }\n                    @case ('badge') {\n                      <cw-badge\n                        [type]=\"getBadge(column, row[column.key]).type\"\n                        [label]=\"getBadge(column, row[column.key]).label ?? row[column.key]\"\n                        [withIcon]=\"getBadge(column, row[column.key]).withIcon\"\n                        [iconPosition]=\"getBadge(column, row[column.key]).iconPosition\"></cw-badge>\n                    }\n                    @case ('icon') {\n                      @if (isClickable(column)) {\n                        <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\" [attr.aria-label]=\"row[column.key].label\">\n                          <cw-icon\n                            [icon]=\"row[column.key].icon\"\n                            [label]=\"row[column.key].label\"\n                            [type]=\"iconType.default\"\n                            [iconSize]=\"iconSize['md']\"\n                            [iconCssClass]=\"row[column.key].iconCssClass\"\n                          ></cw-icon>\n                        </a>\n                      } @else {\n                        <cw-icon\n                          [icon]=\"row[column.key].icon\"\n                          [label]=\"row[column.key].label\"\n                          [type]=\"iconType.default\"\n                          [iconSize]=\"iconSize['md']\"\n                          [iconCssClass]=\"row[column.key].iconCssClass\"\n                        ></cw-icon>\n                      }\n                    }\n                    @case ('image') {\n                      @if (isClickable(column)) {\n                        <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\" [attr.aria-label]=\"row[column.key].label\">\n                          <cw-image\n                            [source]=\"row[column.key].source\"\n                            [alt]=\"row[column.key].label\"\n                            [isAriaHidden]=\"true\"\n                            [cssClass]=\"row[column.key].iconCssClass\"\n                            width=\"32\"\n                            height=\"32\"\n                          ></cw-image>\n                        </a>\n                      } @else {\n                        <cw-image\n                          [source]=\"row[column.key].source\"\n                          [alt]=\"row[column.key].label\"\n                          [isAriaHidden]=\"true\"\n                          [cssClass]=\"row[column.key].iconCssClass\"\n                          width=\"32\"\n                          height=\"32\"\n                        ></cw-image>\n                      }\n                    }\n                    @case ('check') {\n                      @if (isTruthy(row[column.key])) {\n                        <cw-icon\n                          [icon]=\"spriteIcon.checkCircle\"\n                          [label]=\"'_COMMON._PRO_SENTENCE.YES' | translate\"\n                          [type]=\"iconType.default\"\n                          iconCssClass=\"text-success\"\n                          [iconSize]=\"iconSize['md']\"></cw-icon>\n                      } @else {\n                        <cw-icon\n                          [icon]=\"spriteIcon.closeCircle\"\n                          [label]=\"'_COMMON._PRO_SENTENCE.NO' | translate\"\n                          [type]=\"iconType.default\"\n                          iconCssClass=\"text-danger\"\n                          [iconSize]=\"iconSize['md']\"></cw-icon>\n                      }\n                    }\n                    @case ('actions') {\n                      @if (usingRowActions) {\n                        @let actions = getResolvedActions(row);\n                        @if (actions.length > 0) {\n                          @if (!useDropdownActions()) {\n                            @for (action of actions; track $index) {\n                              <cw-button\n                                [type]=\"buttonType.ghost\"\n                                [label]=\"action.label\"\n                                [withIcon]=\"action.icon\"\n                                [link]=\"action.link\"\n                                [isDisabled]=\"action.disabled\"\n                                [cssClass]=\"actionCssClass(action)\"\n                                (btnAction)=\"onRowActionClick(action, row)\">\n                              </cw-button>\n                            }\n                          } @else {\n                            <cw-button\n                              [label]=\"'_COMMON._TABLE.ACTIONS_MENU'\"\n                              [withIcon]=\"spriteIcon.menuVertical\"\n                              [withOnlyIcon]=\"true\"\n                              [type]=\"buttonType.ghost\"\n                              [isDropdown]=\"true\"\n                              [hideCaret]=\"true\">\n                              <ul class=\"p-0 m-0\">\n                                @for (action of actions; track $index) {\n                                  <li>\n                                    @if (action.link) {\n                                      <cw-button\n                                        [type]=\"buttonType.ghost\"\n                                        [label]=\"action.label\"\n                                        [withIcon]=\"action.icon\"\n                                        [link]=\"action.link\"\n                                        [isDisabled]=\"action.disabled\"\n                                        [cssClass]=\"'dropdown-item ' + actionCssClass(action)\">\n                                      </cw-button>\n                                    } @else {\n                                      <cw-button\n                                        [type]=\"buttonType.ghost\"\n                                        [label]=\"action.label\"\n                                        [withIcon]=\"action.icon\"\n                                        [isDisabled]=\"action.disabled\"\n                                        [cssClass]=\"'dropdown-item ' + actionCssClass(action)\"\n                                        (btnAction)=\"onRowActionClick(action, row)\">\n                                      </cw-button>\n                                    }\n                                  </li>\n                                }\n                              </ul>\n                            </cw-button>\n                          }\n                        }\n                      } @else {\n                        <ng-container\n                          *ngTemplateOutlet=\"actionsTemplate(); context: { $implicit: row }\">\n                        </ng-container>\n                      }\n                    }\n                    @default {\n                      {{ column.translate ? (row[column.key] | translate) : row[column.key] }}\n                    }\n                  }\n                </td>\n              }\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (pagination()) {\n  <cw-pagination\n    [pagination]=\"pagination()!\"\n    (paginationChange)=\"paginationChange.emit($event)\">\n  </cw-pagination>\n}\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LoaderComponent, selector: "cw-loader", inputs: ["size", "displayText"] }, { kind: "component", type: BadgeComponent, selector: "cw-badge", inputs: ["type", "label", "withIcon", "iconPosition", "cssClass", "skeletonMode", "dataTest"] }, { kind: "component", type: ButtonComponent, selector: "cw-button", inputs: ["type", "label", "id", "link", "isDropdown", "hideCaret", "withIcon", "withOnlyIcon", "iconSize", "iconPosition", "dropdownPosition", "isMinWidth", "isDisabled", "isLoading", "cssClass", "dataTest", "skeletonMode", "withTooltip", "tooltipText", "tooltipTitle", "tooltipTrigger", "tooltipPosition", "tooltipType"], outputs: ["btnAction", "dropDownClicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "cw-pagination", inputs: ["pagination"], outputs: ["paginationChange"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }, { kind: "component", type: ImageComponent, selector: "cw-image", inputs: ["source", "alt", "isAriaHidden", "cssClass", "width", "height"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.20", type: TableComponent, isStandalone: true, selector: "cw-table", inputs: { checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, bulkActions: { classPropertyName: "bulkActions", publicName: "bulkActions", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, emptyStateNoData: { classPropertyName: "emptyStateNoData", publicName: "emptyStateNoData", isSignal: true, isRequired: false, transformFunction: null }, emptyStateNoResult: { classPropertyName: "emptyStateNoResult", publicName: "emptyStateNoResult", isSignal: true, isRequired: false, transformFunction: null }, isFiltered: { classPropertyName: "isFiltered", publicName: "isFiltered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick", sortChange: "sortChange", selectionChange: "selectionChange", paginationChange: "paginationChange", bulkDelete: "bulkDelete", bulkAction: "bulkAction" }, host: { classAttribute: "cw-table" }, queries: [{ propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (checkbox() && selectedRows().size > 0) {\n  <div class=\"table-selection-info mb-2 d-flex align-items-center gap-2 flex-wrap\">\n    <span>\n      {{ selectedRows().size }} {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEMS_CURRENT_PAGE' | translate }}\n    </span>\n    @for (action of bulkActions(); track $index) {\n      <cw-button\n        [type]=\"resolveVariant(action)\"\n        [label]=\"action.label\"\n        [withIcon]=\"action.icon\"\n        [isDisabled]=\"resolveDisabled(action)\"\n        (btnAction)=\"onBulkActionClick(action)\">\n      </cw-button>\n    }\n  </div>\n}\n\n<div class=\"table-responsive\">\n  <table class=\"table\">\n    <caption class=\"visually-hidden\" [innerHTML]=\"'_COMMON._TABLE.CAPTION' | translate: { label: title() } \"></caption>\n    <thead>\n      <tr>\n        @if(checkbox()) {\n          <th scope=\"col\" width=\"10\">\n            <div class=\"field-check\">\n              <input class=\"field-check-input\" type=\"checkbox\" id=\"checkme\" [checked]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\" (change)=\"toggleAll()\">\n              <label class=\"field-check-label\" for=\"checkme\">\n                <span class=\"visually-hidden\">{{ '_COMMON._TABLE._THEAD.CHECK_LINE' | translate }}</span>\n              </label>\n            </div>\n          </th>\n        }\n\n        @for (column of columns(); track column.key) {\n           @if (!column.hidden) {\n            <th scope=\"col\" [class.p-0]=\"column.sort\">\n              @if (column.sort) {\n                <button class=\"d-flex-h gap-2xs\" [class]=\"getSortClass(column.key)\" (click)=\"setSortProperty(column.key)\">\n                  {{ column.label | translate}}\n                  <cw-icon\n                    [icon]=\"getSortIcon(column.key)\"\n                    [label]=\"'_COMMON._TABLE._SORT.LABEL' | translate\"\n                    [type]=\"iconType.default\"\n                    [iconSize]=\"iconSize['xs']\"></cw-icon>\n                </button>\n              }\n              @else {\n                {{ column.label | translate }}\n              }\n            </th>\n          }\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr>\n          <td colspan=\"100\">\n            <cw-loader></cw-loader>\n          </td>\n        </tr>\n      }\n      @else if (!data() || data().length === 0) {\n        <tr>\n          <td class=\"table-info no-result\" colspan=\"100\">\n            @if (currentEmptyState(); as empty) {\n              <cw-empty-state\n                [illustration]=\"empty.illustration ?? (isFiltered() ? illustrationEnum.noResult : illustrationEnum.noData)\"\n                [imageSource]=\"empty.imageSource\"\n                [title]=\"empty.title\"\n                [description]=\"empty.description\"\n                [primaryButton]=\"empty.primaryButton\"\n                [secondaryButton]=\"empty.secondaryButton\"\n                (primaryClick)=\"empty.primaryButton?.click?.()\"\n                (secondaryClick)=\"empty.secondaryButton?.click?.()\">\n              </cw-empty-state>\n            } @else {\n              {{ '_COMMON._TABLE.NO_RESULT' | translate }}\n            }\n          </td>\n        </tr>\n      }\n      @else {\n        @for (row of data(); track row) {\n          <tr [class.tr-selected]=\"isSelected(row)\" [class]=\"getRowClass(row)\">\n            @if (checkbox()) {\n              <td>\n                <input class=\"field-check-input\" type=\"checkbox\" [checked]=\"isSelected(row)\" (change)=\"toggleRow(row)\" [id]=\"'check-' + row.id\"\n                [attr.aria-label]=\"'S\u00E9lectionner la ligne ' + row.id\">\n                <label class=\"visually-hidden\" [for]=\"'check-' + row.id\">S\u00E9lectionner la ligne {{row.id}}</label>\n              </td>\n            }\n            @for (column of columns(); track column.key) {\n              @if (!column.hidden) {\n                <td [class.text-end]=\"column.align === 'right'\" [class.text-center]=\"column.align === 'center'\"\n                  [class.td-actions]=\"column.type === 'actions'\">\n                  @switch (column.type) {\n                    @case ('link') {\n                      <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\">\n                        {{ column.translate ? (row[column.key] | translate) : row[column.key] }}\n                      </a>\n                    }\n                    @case ('badge') {\n                      <cw-badge\n                        [type]=\"getBadge(column, row[column.key]).type\"\n                        [label]=\"getBadge(column, row[column.key]).label ?? row[column.key]\"\n                        [withIcon]=\"getBadge(column, row[column.key]).withIcon\"\n                        [iconPosition]=\"getBadge(column, row[column.key]).iconPosition\"></cw-badge>\n                    }\n                    @case ('icon') {\n                      @if (isClickable(column)) {\n                        <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\" [attr.aria-label]=\"row[column.key].label\">\n                          <cw-icon\n                            [icon]=\"row[column.key].icon\"\n                            [label]=\"row[column.key].label\"\n                            [type]=\"iconType.default\"\n                            [iconSize]=\"iconSize['md']\"\n                            [iconCssClass]=\"row[column.key].iconCssClass\"\n                          ></cw-icon>\n                        </a>\n                      } @else {\n                        <cw-icon\n                          [icon]=\"row[column.key].icon\"\n                          [label]=\"row[column.key].label\"\n                          [type]=\"iconType.default\"\n                          [iconSize]=\"iconSize['md']\"\n                          [iconCssClass]=\"row[column.key].iconCssClass\"\n                        ></cw-icon>\n                      }\n                    }\n                    @case ('image') {\n                      @if (isClickable(column)) {\n                        <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\" [attr.aria-label]=\"row[column.key].label\">\n                          <cw-image\n                            [source]=\"row[column.key].source\"\n                            [alt]=\"row[column.key].label\"\n                            [isAriaHidden]=\"true\"\n                            [cssClass]=\"row[column.key].iconCssClass\"\n                            width=\"32\"\n                            height=\"32\"\n                          ></cw-image>\n                        </a>\n                      } @else {\n                        <cw-image\n                          [source]=\"row[column.key].source\"\n                          [alt]=\"row[column.key].label\"\n                          [isAriaHidden]=\"true\"\n                          [cssClass]=\"row[column.key].iconCssClass\"\n                          width=\"32\"\n                          height=\"32\"\n                        ></cw-image>\n                      }\n                    }\n                    @case ('check') {\n                      @if (isTruthy(row[column.key])) {\n                        <cw-icon\n                          [icon]=\"spriteIcon.checkCircle\"\n                          [label]=\"'_COMMON._PRO_SENTENCE.YES' | translate\"\n                          [type]=\"iconType.default\"\n                          iconCssClass=\"text-success\"\n                          [iconSize]=\"iconSize['md']\"></cw-icon>\n                      } @else {\n                        <cw-icon\n                          [icon]=\"spriteIcon.closeCircle\"\n                          [label]=\"'_COMMON._PRO_SENTENCE.NO' | translate\"\n                          [type]=\"iconType.default\"\n                          iconCssClass=\"text-danger\"\n                          [iconSize]=\"iconSize['md']\"></cw-icon>\n                      }\n                    }\n                    @case ('actions') {\n                      @if (usingRowActions) {\n                        @let actions = getResolvedActions(row);\n                        @if (actions.length > 0) {\n                          @if (!useDropdownActions()) {\n                            @for (action of actions; track $index) {\n                              <cw-button\n                                [type]=\"buttonType.ghost\"\n                                [label]=\"action.label\"\n                                [withIcon]=\"action.icon\"\n                                [link]=\"action.link\"\n                                [isDisabled]=\"action.disabled\"\n                                [cssClass]=\"actionCssClass(action)\"\n                                (btnAction)=\"onRowActionClick(action, row)\">\n                              </cw-button>\n                            }\n                          } @else {\n                            <cw-button\n                              [label]=\"'_COMMON._TABLE.ACTIONS_MENU'\"\n                              [withIcon]=\"spriteIcon.menuVertical\"\n                              [withOnlyIcon]=\"true\"\n                              [type]=\"buttonType.ghost\"\n                              [isDropdown]=\"true\"\n                              [hideCaret]=\"true\">\n                              <ul class=\"p-0 m-0\">\n                                @for (action of actions; track $index) {\n                                  <li>\n                                    @if (action.link) {\n                                      <cw-button\n                                        [type]=\"buttonType.ghost\"\n                                        [label]=\"action.label\"\n                                        [withIcon]=\"action.icon\"\n                                        [link]=\"action.link\"\n                                        [isDisabled]=\"action.disabled\"\n                                        [cssClass]=\"'dropdown-item ' + actionCssClass(action)\">\n                                      </cw-button>\n                                    } @else {\n                                      <cw-button\n                                        [type]=\"buttonType.ghost\"\n                                        [label]=\"action.label\"\n                                        [withIcon]=\"action.icon\"\n                                        [isDisabled]=\"action.disabled\"\n                                        [cssClass]=\"'dropdown-item ' + actionCssClass(action)\"\n                                        (btnAction)=\"onRowActionClick(action, row)\">\n                                      </cw-button>\n                                    }\n                                  </li>\n                                }\n                              </ul>\n                            </cw-button>\n                          }\n                        }\n                      } @else {\n                        <ng-container\n                          *ngTemplateOutlet=\"actionsTemplate(); context: { $implicit: row }\">\n                        </ng-container>\n                      }\n                    }\n                    @default {\n                      {{ column.translate ? (row[column.key] | translate) : row[column.key] }}\n                    }\n                  }\n                </td>\n              }\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (pagination()) {\n  <cw-pagination\n    [pagination]=\"pagination()!\"\n    (paginationChange)=\"paginationChange.emit($event)\">\n  </cw-pagination>\n}\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LoaderComponent, selector: "cw-loader", inputs: ["size", "displayText"] }, { kind: "component", type: BadgeComponent, selector: "cw-badge", inputs: ["type", "label", "withIcon", "iconPosition", "cssClass", "skeletonMode", "dataTest"] }, { kind: "component", type: ButtonComponent, selector: "cw-button", inputs: ["type", "label", "id", "link", "isDropdown", "hideCaret", "withIcon", "withOnlyIcon", "iconSize", "iconPosition", "dropdownPosition", "isMinWidth", "isDisabled", "isLoading", "cssClass", "dataTest", "skeletonMode", "withTooltip", "tooltipText", "tooltipTitle", "tooltipTrigger", "tooltipPosition", "tooltipType"], outputs: ["btnAction", "dropDownClicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "cw-pagination", inputs: ["pagination"], outputs: ["paginationChange"] }, { kind: "component", type: IconComponent, selector: "cw-icon", inputs: ["icon", "label", "type", "iconSize", "iconCssClass", "iconUiType", "iconColorCustom", "spritePath"] }, { kind: "component", type: ImageComponent, selector: "cw-image", inputs: ["source", "alt", "isAriaHidden", "cssClass", "width", "height"] }, { kind: "component", type: EmptyStateComponent, selector: "cw-empty-state", inputs: ["illustration", "illustrationBasePath", "imageSource", "imageAlt", "title", "description", "primaryButton", "secondaryButton", "dataTest"], outputs: ["primaryClick", "secondaryClick"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -747,9 +756,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.20", ngImpo
                         NgTemplateOutlet,
                         PaginationComponent,
                         IconComponent,
-                        ImageComponent
-                    ], template: "@if (checkbox() && selectedRows().size > 0) {\n  <div class=\"table-selection-info mb-2 d-flex align-items-center gap-2 flex-wrap\">\n    <span>\n      {{ selectedRows().size }} {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEMS_CURRENT_PAGE' | translate }}\n    </span>\n    @for (action of bulkActions(); track $index) {\n      <cw-button\n        [type]=\"resolveVariant(action)\"\n        [label]=\"action.label\"\n        [withIcon]=\"action.icon\"\n        [isDisabled]=\"resolveDisabled(action)\"\n        (btnAction)=\"onBulkActionClick(action)\">\n      </cw-button>\n    }\n  </div>\n}\n\n<div class=\"table-responsive\">\n  <table class=\"table\">\n    <caption class=\"visually-hidden\" [innerHTML]=\"'_COMMON._TABLE.CAPTION' | translate: { label: title() } \"></caption>\n    <thead>\n      <tr>\n        @if(checkbox()) {\n          <th scope=\"col\" width=\"10\">\n            <div class=\"field-check\">\n              <input class=\"field-check-input\" type=\"checkbox\" id=\"checkme\" [checked]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\" (change)=\"toggleAll()\">\n              <label class=\"field-check-label\" for=\"checkme\">\n                <span class=\"visually-hidden\">{{ '_COMMON._TABLE._THEAD.CHECK_LINE' | translate }}</span>\n              </label>\n            </div>\n          </th>\n        }\n\n        @for (column of columns(); track column.key) {\n           @if (!column.hidden) {\n            <th scope=\"col\" [class.p-0]=\"column.sort\">\n              @if (column.sort) {\n                <button class=\"d-flex-h gap-2xs\" [class]=\"getSortClass(column.key)\" (click)=\"setSortProperty(column.key)\">\n                  {{ column.label | translate}}\n                  <cw-icon\n                    [icon]=\"getSortIcon(column.key)\"\n                    [label]=\"'_COMMON._TABLE._SORT.LABEL' | translate\"\n                    [type]=\"iconType.default\"\n                    [iconSize]=\"iconSize['xs']\"></cw-icon>\n                </button>\n              }\n              @else {\n                {{ column.label | translate }}\n              }\n            </th>\n          }\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr>\n          <td colspan=\"100\">\n            <cw-loader></cw-loader>\n          </td>\n        </tr>\n      }\n      @else if (!data() || data().length === 0) {\n        <tr>\n          <td class=\"table-info no-result\" colspan=\"100\">\n            {{ '_COMMON._TABLE.NO_RESULT' | translate }}\n          </td>\n        </tr>\n      }\n      @else {\n        @for (row of data(); track row) {\n          <tr [class.tr-selected]=\"isSelected(row)\" [class]=\"getRowClass(row)\">\n            @if (checkbox()) {\n              <td>\n                <input class=\"field-check-input\" type=\"checkbox\" [checked]=\"isSelected(row)\" (change)=\"toggleRow(row)\" [id]=\"'check-' + row.id\"\n                [attr.aria-label]=\"'S\u00E9lectionner la ligne ' + row.id\">\n                <label class=\"visually-hidden\" [for]=\"'check-' + row.id\">S\u00E9lectionner la ligne {{row.id}}</label>\n              </td>\n            }\n            @for (column of columns(); track column.key) {\n              @if (!column.hidden) {\n                <td [class.text-end]=\"column.align === 'right'\" [class.text-center]=\"column.align === 'center'\"\n                  [class.td-actions]=\"column.type === 'actions'\">\n                  @switch (column.type) {\n                    @case ('link') {\n                      <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\">\n                        {{ column.translate ? (row[column.key] | translate) : row[column.key] }}\n                      </a>\n                    }\n                    @case ('badge') {\n                      <cw-badge\n                        [type]=\"getBadge(column, row[column.key]).type\"\n                        [label]=\"getBadge(column, row[column.key]).label ?? row[column.key]\"\n                        [withIcon]=\"getBadge(column, row[column.key]).withIcon\"\n                        [iconPosition]=\"getBadge(column, row[column.key]).iconPosition\"></cw-badge>\n                    }\n                    @case ('icon') {\n                      @if (isClickable(column)) {\n                        <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\" [attr.aria-label]=\"row[column.key].label\">\n                          <cw-icon\n                            [icon]=\"row[column.key].icon\"\n                            [label]=\"row[column.key].label\"\n                            [type]=\"iconType.default\"\n                            [iconSize]=\"iconSize['md']\"\n                            [iconCssClass]=\"row[column.key].iconCssClass\"\n                          ></cw-icon>\n                        </a>\n                      } @else {\n                        <cw-icon\n                          [icon]=\"row[column.key].icon\"\n                          [label]=\"row[column.key].label\"\n                          [type]=\"iconType.default\"\n                          [iconSize]=\"iconSize['md']\"\n                          [iconCssClass]=\"row[column.key].iconCssClass\"\n                        ></cw-icon>\n                      }\n                    }\n                    @case ('image') {\n                      @if (isClickable(column)) {\n                        <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\" [attr.aria-label]=\"row[column.key].label\">\n                          <cw-image\n                            [source]=\"row[column.key].source\"\n                            [alt]=\"row[column.key].label\"\n                            [isAriaHidden]=\"true\"\n                            [cssClass]=\"row[column.key].iconCssClass\"\n                            width=\"32\"\n                            height=\"32\"\n                          ></cw-image>\n                        </a>\n                      } @else {\n                        <cw-image\n                          [source]=\"row[column.key].source\"\n                          [alt]=\"row[column.key].label\"\n                          [isAriaHidden]=\"true\"\n                          [cssClass]=\"row[column.key].iconCssClass\"\n                          width=\"32\"\n                          height=\"32\"\n                        ></cw-image>\n                      }\n                    }\n                    @case ('check') {\n                      @if (isTruthy(row[column.key])) {\n                        <cw-icon\n                          [icon]=\"spriteIcon.checkCircle\"\n                          [label]=\"'_COMMON._PRO_SENTENCE.YES' | translate\"\n                          [type]=\"iconType.default\"\n                          iconCssClass=\"text-success\"\n                          [iconSize]=\"iconSize['md']\"></cw-icon>\n                      } @else {\n                        <cw-icon\n                          [icon]=\"spriteIcon.closeCircle\"\n                          [label]=\"'_COMMON._PRO_SENTENCE.NO' | translate\"\n                          [type]=\"iconType.default\"\n                          iconCssClass=\"text-danger\"\n                          [iconSize]=\"iconSize['md']\"></cw-icon>\n                      }\n                    }\n                    @case ('actions') {\n                      @if (usingRowActions) {\n                        @let actions = getResolvedActions(row);\n                        @if (actions.length > 0) {\n                          @if (!useDropdownActions()) {\n                            @for (action of actions; track $index) {\n                              <cw-button\n                                [type]=\"buttonType.ghost\"\n                                [label]=\"action.label\"\n                                [withIcon]=\"action.icon\"\n                                [link]=\"action.link\"\n                                [isDisabled]=\"action.disabled\"\n                                [cssClass]=\"actionCssClass(action)\"\n                                (btnAction)=\"onRowActionClick(action, row)\">\n                              </cw-button>\n                            }\n                          } @else {\n                            <cw-button\n                              [label]=\"'_COMMON._TABLE.ACTIONS_MENU'\"\n                              [withIcon]=\"spriteIcon.menuVertical\"\n                              [withOnlyIcon]=\"true\"\n                              [type]=\"buttonType.ghost\"\n                              [isDropdown]=\"true\"\n                              [hideCaret]=\"true\">\n                              <ul class=\"p-0 m-0\">\n                                @for (action of actions; track $index) {\n                                  <li>\n                                    @if (action.link) {\n                                      <cw-button\n                                        [type]=\"buttonType.ghost\"\n                                        [label]=\"action.label\"\n                                        [withIcon]=\"action.icon\"\n                                        [link]=\"action.link\"\n                                        [isDisabled]=\"action.disabled\"\n                                        [cssClass]=\"'dropdown-item ' + actionCssClass(action)\">\n                                      </cw-button>\n                                    } @else {\n                                      <cw-button\n                                        [type]=\"buttonType.ghost\"\n                                        [label]=\"action.label\"\n                                        [withIcon]=\"action.icon\"\n                                        [isDisabled]=\"action.disabled\"\n                                        [cssClass]=\"'dropdown-item ' + actionCssClass(action)\"\n                                        (btnAction)=\"onRowActionClick(action, row)\">\n                                      </cw-button>\n                                    }\n                                  </li>\n                                }\n                              </ul>\n                            </cw-button>\n                          }\n                        }\n                      } @else {\n                        <ng-container\n                          *ngTemplateOutlet=\"actionsTemplate(); context: { $implicit: row }\">\n                        </ng-container>\n                      }\n                    }\n                    @default {\n                      {{ column.translate ? (row[column.key] | translate) : row[column.key] }}\n                    }\n                  }\n                </td>\n              }\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (pagination()) {\n  <cw-pagination\n    [pagination]=\"pagination()!\"\n    (paginationChange)=\"paginationChange.emit($event)\">\n  </cw-pagination>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { checkbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkbox", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rowClassFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClassFn", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], bulkActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "bulkActions", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], paginationChange: [{ type: i0.Output, args: ["paginationChange"] }], bulkDelete: [{ type: i0.Output, args: ["bulkDelete"] }], bulkAction: [{ type: i0.Output, args: ["bulkAction"] }], actionsTemplate: [{ type: i0.ContentChild, args: ['actionsTemplate', { isSignal: true }] }] } });
+                        ImageComponent,
+                        EmptyStateComponent
+                    ], template: "@if (checkbox() && selectedRows().size > 0) {\n  <div class=\"table-selection-info mb-2 d-flex align-items-center gap-2 flex-wrap\">\n    <span>\n      {{ selectedRows().size }} {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEMS_CURRENT_PAGE' | translate }}\n    </span>\n    @for (action of bulkActions(); track $index) {\n      <cw-button\n        [type]=\"resolveVariant(action)\"\n        [label]=\"action.label\"\n        [withIcon]=\"action.icon\"\n        [isDisabled]=\"resolveDisabled(action)\"\n        (btnAction)=\"onBulkActionClick(action)\">\n      </cw-button>\n    }\n  </div>\n}\n\n<div class=\"table-responsive\">\n  <table class=\"table\">\n    <caption class=\"visually-hidden\" [innerHTML]=\"'_COMMON._TABLE.CAPTION' | translate: { label: title() } \"></caption>\n    <thead>\n      <tr>\n        @if(checkbox()) {\n          <th scope=\"col\" width=\"10\">\n            <div class=\"field-check\">\n              <input class=\"field-check-input\" type=\"checkbox\" id=\"checkme\" [checked]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\" (change)=\"toggleAll()\">\n              <label class=\"field-check-label\" for=\"checkme\">\n                <span class=\"visually-hidden\">{{ '_COMMON._TABLE._THEAD.CHECK_LINE' | translate }}</span>\n              </label>\n            </div>\n          </th>\n        }\n\n        @for (column of columns(); track column.key) {\n           @if (!column.hidden) {\n            <th scope=\"col\" [class.p-0]=\"column.sort\">\n              @if (column.sort) {\n                <button class=\"d-flex-h gap-2xs\" [class]=\"getSortClass(column.key)\" (click)=\"setSortProperty(column.key)\">\n                  {{ column.label | translate}}\n                  <cw-icon\n                    [icon]=\"getSortIcon(column.key)\"\n                    [label]=\"'_COMMON._TABLE._SORT.LABEL' | translate\"\n                    [type]=\"iconType.default\"\n                    [iconSize]=\"iconSize['xs']\"></cw-icon>\n                </button>\n              }\n              @else {\n                {{ column.label | translate }}\n              }\n            </th>\n          }\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr>\n          <td colspan=\"100\">\n            <cw-loader></cw-loader>\n          </td>\n        </tr>\n      }\n      @else if (!data() || data().length === 0) {\n        <tr>\n          <td class=\"table-info no-result\" colspan=\"100\">\n            @if (currentEmptyState(); as empty) {\n              <cw-empty-state\n                [illustration]=\"empty.illustration ?? (isFiltered() ? illustrationEnum.noResult : illustrationEnum.noData)\"\n                [imageSource]=\"empty.imageSource\"\n                [title]=\"empty.title\"\n                [description]=\"empty.description\"\n                [primaryButton]=\"empty.primaryButton\"\n                [secondaryButton]=\"empty.secondaryButton\"\n                (primaryClick)=\"empty.primaryButton?.click?.()\"\n                (secondaryClick)=\"empty.secondaryButton?.click?.()\">\n              </cw-empty-state>\n            } @else {\n              {{ '_COMMON._TABLE.NO_RESULT' | translate }}\n            }\n          </td>\n        </tr>\n      }\n      @else {\n        @for (row of data(); track row) {\n          <tr [class.tr-selected]=\"isSelected(row)\" [class]=\"getRowClass(row)\">\n            @if (checkbox()) {\n              <td>\n                <input class=\"field-check-input\" type=\"checkbox\" [checked]=\"isSelected(row)\" (change)=\"toggleRow(row)\" [id]=\"'check-' + row.id\"\n                [attr.aria-label]=\"'S\u00E9lectionner la ligne ' + row.id\">\n                <label class=\"visually-hidden\" [for]=\"'check-' + row.id\">S\u00E9lectionner la ligne {{row.id}}</label>\n              </td>\n            }\n            @for (column of columns(); track column.key) {\n              @if (!column.hidden) {\n                <td [class.text-end]=\"column.align === 'right'\" [class.text-center]=\"column.align === 'center'\"\n                  [class.td-actions]=\"column.type === 'actions'\">\n                  @switch (column.type) {\n                    @case ('link') {\n                      <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\">\n                        {{ column.translate ? (row[column.key] | translate) : row[column.key] }}\n                      </a>\n                    }\n                    @case ('badge') {\n                      <cw-badge\n                        [type]=\"getBadge(column, row[column.key]).type\"\n                        [label]=\"getBadge(column, row[column.key]).label ?? row[column.key]\"\n                        [withIcon]=\"getBadge(column, row[column.key]).withIcon\"\n                        [iconPosition]=\"getBadge(column, row[column.key]).iconPosition\"></cw-badge>\n                    }\n                    @case ('icon') {\n                      @if (isClickable(column)) {\n                        <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\" [attr.aria-label]=\"row[column.key].label\">\n                          <cw-icon\n                            [icon]=\"row[column.key].icon\"\n                            [label]=\"row[column.key].label\"\n                            [type]=\"iconType.default\"\n                            [iconSize]=\"iconSize['md']\"\n                            [iconCssClass]=\"row[column.key].iconCssClass\"\n                          ></cw-icon>\n                        </a>\n                      } @else {\n                        <cw-icon\n                          [icon]=\"row[column.key].icon\"\n                          [label]=\"row[column.key].label\"\n                          [type]=\"iconType.default\"\n                          [iconSize]=\"iconSize['md']\"\n                          [iconCssClass]=\"row[column.key].iconCssClass\"\n                        ></cw-icon>\n                      }\n                    }\n                    @case ('image') {\n                      @if (isClickable(column)) {\n                        <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\" [attr.aria-label]=\"row[column.key].label\">\n                          <cw-image\n                            [source]=\"row[column.key].source\"\n                            [alt]=\"row[column.key].label\"\n                            [isAriaHidden]=\"true\"\n                            [cssClass]=\"row[column.key].iconCssClass\"\n                            width=\"32\"\n                            height=\"32\"\n                          ></cw-image>\n                        </a>\n                      } @else {\n                        <cw-image\n                          [source]=\"row[column.key].source\"\n                          [alt]=\"row[column.key].label\"\n                          [isAriaHidden]=\"true\"\n                          [cssClass]=\"row[column.key].iconCssClass\"\n                          width=\"32\"\n                          height=\"32\"\n                        ></cw-image>\n                      }\n                    }\n                    @case ('check') {\n                      @if (isTruthy(row[column.key])) {\n                        <cw-icon\n                          [icon]=\"spriteIcon.checkCircle\"\n                          [label]=\"'_COMMON._PRO_SENTENCE.YES' | translate\"\n                          [type]=\"iconType.default\"\n                          iconCssClass=\"text-success\"\n                          [iconSize]=\"iconSize['md']\"></cw-icon>\n                      } @else {\n                        <cw-icon\n                          [icon]=\"spriteIcon.closeCircle\"\n                          [label]=\"'_COMMON._PRO_SENTENCE.NO' | translate\"\n                          [type]=\"iconType.default\"\n                          iconCssClass=\"text-danger\"\n                          [iconSize]=\"iconSize['md']\"></cw-icon>\n                      }\n                    }\n                    @case ('actions') {\n                      @if (usingRowActions) {\n                        @let actions = getResolvedActions(row);\n                        @if (actions.length > 0) {\n                          @if (!useDropdownActions()) {\n                            @for (action of actions; track $index) {\n                              <cw-button\n                                [type]=\"buttonType.ghost\"\n                                [label]=\"action.label\"\n                                [withIcon]=\"action.icon\"\n                                [link]=\"action.link\"\n                                [isDisabled]=\"action.disabled\"\n                                [cssClass]=\"actionCssClass(action)\"\n                                (btnAction)=\"onRowActionClick(action, row)\">\n                              </cw-button>\n                            }\n                          } @else {\n                            <cw-button\n                              [label]=\"'_COMMON._TABLE.ACTIONS_MENU'\"\n                              [withIcon]=\"spriteIcon.menuVertical\"\n                              [withOnlyIcon]=\"true\"\n                              [type]=\"buttonType.ghost\"\n                              [isDropdown]=\"true\"\n                              [hideCaret]=\"true\">\n                              <ul class=\"p-0 m-0\">\n                                @for (action of actions; track $index) {\n                                  <li>\n                                    @if (action.link) {\n                                      <cw-button\n                                        [type]=\"buttonType.ghost\"\n                                        [label]=\"action.label\"\n                                        [withIcon]=\"action.icon\"\n                                        [link]=\"action.link\"\n                                        [isDisabled]=\"action.disabled\"\n                                        [cssClass]=\"'dropdown-item ' + actionCssClass(action)\">\n                                      </cw-button>\n                                    } @else {\n                                      <cw-button\n                                        [type]=\"buttonType.ghost\"\n                                        [label]=\"action.label\"\n                                        [withIcon]=\"action.icon\"\n                                        [isDisabled]=\"action.disabled\"\n                                        [cssClass]=\"'dropdown-item ' + actionCssClass(action)\"\n                                        (btnAction)=\"onRowActionClick(action, row)\">\n                                      </cw-button>\n                                    }\n                                  </li>\n                                }\n                              </ul>\n                            </cw-button>\n                          }\n                        }\n                      } @else {\n                        <ng-container\n                          *ngTemplateOutlet=\"actionsTemplate(); context: { $implicit: row }\">\n                        </ng-container>\n                      }\n                    }\n                    @default {\n                      {{ column.translate ? (row[column.key] | translate) : row[column.key] }}\n                    }\n                  }\n                </td>\n              }\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (pagination()) {\n  <cw-pagination\n    [pagination]=\"pagination()!\"\n    (paginationChange)=\"paginationChange.emit($event)\">\n  </cw-pagination>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { checkbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkbox", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rowClassFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClassFn", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], bulkActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "bulkActions", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], emptyStateNoData: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateNoData", required: false }] }], emptyStateNoResult: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateNoResult", required: false }] }], isFiltered: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltered", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], paginationChange: [{ type: i0.Output, args: ["paginationChange"] }], bulkDelete: [{ type: i0.Output, args: ["bulkDelete"] }], bulkAction: [{ type: i0.Output, args: ["bulkAction"] }], actionsTemplate: [{ type: i0.ContentChild, args: ['actionsTemplate', { isSignal: true }] }] } });
 
 const RANGE_TYPES = new Set([
     FormFieldTypeEnum.dateToDate,
@@ -908,6 +918,58 @@ var PageHeaderActionEnum;
     PageHeaderActionEnum["import"] = "import";
 })(PageHeaderActionEnum || (PageHeaderActionEnum = {}));
 
+// Persistance de la visibilite des colonnes de `cw-table` (pilotee par `cw-page-header`).
+// Une SEULE cle localStorage pour N tableaux : objet indexe par `storageKey`.
+// On ne stocke QUE les cles des colonnes MASQUEES (eviter de surcharger le localStorage).
+//
+//   localStorage['cw-table-columns'] = {
+//     "publictransport/events": ["col1", "col2"],
+//     "users/list": ["createdAt"]
+//   }
+const STORAGE_KEY = 'cw-table-columns';
+/** Acces localStorage tolerant (SSR / quota / mode prive) : ne jette jamais. */
+function readStore() {
+    try {
+        if (typeof localStorage === 'undefined')
+            return {};
+        const raw = localStorage.getItem(STORAGE_KEY);
+        const parsed = raw ? JSON.parse(raw) : {};
+        return parsed && typeof parsed === 'object' ? parsed : {};
+    }
+    catch {
+        return {};
+    }
+}
+/**
+ * Cles des colonnes masquees memorisees pour ce tableau.
+ * - `null` : aucune entree => l'utilisateur n'a jamais personnalise, on garde les defauts du config.
+ * - `string[]` (meme vide) : etat autoritatif memorise (`[]` = tout visible, choisi par l'utilisateur).
+ */
+function loadHiddenColumns(storageKey) {
+    if (!storageKey)
+        return null;
+    const entry = readStore()[storageKey];
+    return Array.isArray(entry) ? entry : null;
+}
+/**
+ * Memorise les cles des colonnes masquees pour ce tableau.
+ * Ecrit toujours l'entree (meme vide) : sa presence marque « personnalise par l'utilisateur ».
+ */
+function saveHiddenColumns(storageKey, hiddenKeys) {
+    if (!storageKey)
+        return;
+    try {
+        if (typeof localStorage === 'undefined')
+            return;
+        const store = readStore();
+        store[storageKey] = hiddenKeys;
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(store));
+    }
+    catch {
+        /* localStorage indisponible : persistance silencieusement ignoree. */
+    }
+}
+
 class PageHeaderComponent {
     constructor() {
         this.location = inject(Location);
@@ -917,7 +979,16 @@ class PageHeaderComponent {
         this.actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
         this.isLoading = input({}, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.isDisabled = input({}, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+        // --- Menu « Colonnes » -------------------------------------------------
+        /** Colonnes du tableau associe. Fourni => le dropdown « Colonnes » apparait. */
+        this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        /** Identifiant stable du tableau pour la persistance localStorage (ex. 'users/list'). */
+        this.storageKey = input(...(ngDevMode ? [undefined, { debugName: "storageKey" }] : []));
+        /** Cle i18n du libelle du bouton « Colonnes ». */
+        this.columnsLabel = input('_COMMON._TABLE.COLUMNS', ...(ngDevMode ? [{ debugName: "columnsLabel" }] : []));
         this.action = output();
+        /** Emis quand la visibilite des colonnes change (colonnes avec `hidden` a jour). */
+        this.columnsChange = output();
         this.buttonType = BoButtonTypeEnum;
         this.iconSize = ButtonIconSizeEnum;
         this.spriteIcon = SpriteIconEnum;
@@ -929,6 +1000,53 @@ class PageHeaderComponent {
         this.showReset = computed(() => this.actions().includes(PageHeaderActionEnum.reset), ...(ngDevMode ? [{ debugName: "showReset" }] : []));
         this.showAdd = computed(() => this.actions().includes(PageHeaderActionEnum.add), ...(ngDevMode ? [{ debugName: "showAdd" }] : []));
         this.showSave = computed(() => this.actions().includes(PageHeaderActionEnum.save), ...(ngDevMode ? [{ debugName: "showSave" }] : []));
+        /** Colonnes masquables (hors `actions` et hors `hideable === false`). */
+        this.toggleableColumns = computed(() => this.columns().filter(c => c.type !== 'actions' && c.hideable !== false), ...(ngDevMode ? [{ debugName: "toggleableColumns" }] : []));
+        /** Le dropdown « Colonnes » n'apparait que s'il existe au moins une colonne masquable. */
+        this.showColumns = computed(() => this.toggleableColumns().length > 0, ...(ngDevMode ? [{ debugName: "showColumns" }] : []));
+        /** Nombre de colonnes masquables actuellement visibles. */
+        this.visibleToggleableCount = computed(() => this.toggleableColumns().filter(c => !c.hidden).length, ...(ngDevMode ? [{ debugName: "visibleToggleableCount" }] : []));
+        // Reconciliation au 1er rendu (navigateur) : si un etat est memorise, il prime
+        // sur les defauts du config et est emis une fois vers le parent.
+        afterNextRender(() => this.applyStoredVisibility());
+    }
+    /** Une colonne visible est « la derniere » si la masquer laisserait 0 colonne visible. */
+    isLastVisible(col) {
+        return !col.hidden && this.visibleToggleableCount() <= 1;
+    }
+    /** Coche/decoche une colonne : applique le garde-fou, persiste et emet. */
+    toggleColumn(col) {
+        const willHide = !col.hidden;
+        if (willHide && this.visibleToggleableCount() <= 1)
+            return; // garde-fou : min 1 visible
+        const updated = this.columns().map(c => (c.key === col.key ? { ...c, hidden: willHide } : c));
+        this.persistAndEmit(updated);
+    }
+    applyStoredVisibility() {
+        const key = this.storageKey();
+        if (!key)
+            return;
+        const stored = loadHiddenColumns(key);
+        if (!stored)
+            return; // jamais personnalise -> on garde les `hidden` du config
+        const hidden = new Set(stored);
+        const reconciled = this.columns().map(c => c.type === 'actions' || c.hideable === false ? c : { ...c, hidden: hidden.has(c.key) });
+        this.columnsChange.emit(this.ensureMinVisible(reconciled));
+    }
+    /** Garantit au moins une colonne masquable visible (re-affiche la 1re sinon). */
+    ensureMinVisible(cols) {
+        const toggleable = cols.filter(c => c.type !== 'actions' && c.hideable !== false);
+        if (toggleable.length === 0 || toggleable.some(c => !c.hidden))
+            return cols;
+        const firstKey = toggleable[0].key;
+        return cols.map(c => (c.key === firstKey ? { ...c, hidden: false } : c));
+    }
+    persistAndEmit(cols) {
+        const hiddenKeys = cols
+            .filter(c => c.hidden && c.type !== 'actions' && c.hideable !== false)
+            .map(c => c.key);
+        saveHiddenColumns(this.storageKey() ?? '', hiddenKeys);
+        this.columnsChange.emit(cols);
     }
     goBack() {
         this.location.back();
@@ -943,7 +1061,7 @@ class PageHeaderComponent {
         return !!this.isDisabled()[action];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.20", type: PageHeaderComponent, isStandalone: true, selector: "cw-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: "<div class=\"page-header d-flex-v gap-2xs\">\n  @if (showBack()) {\n    <cw-button [type]=\"buttonType.ghost\" [label]=\"'_COMMON._FORM.BACK'\" [withIcon]=\"spriteIcon.left1\"\n      (btnAction)=\"goBack()\" />\n  }\n  <div class=\"d-flex-h gap-md items-start justify-between flex-wrap\">\n    <div class=\"d-flex-v\">\n      <h1 class=\"page-header-title\">{{ title() | translate}}</h1>\n      @if (description(); as desc) {\n        <p class=\"fs-md page-header-description\" [innerHTML]=\"desc | translate\"></p>\n      }\n    </div>\n\n    <div class=\"page-header-actions d-flex-h gap-md flex-wrap items-center\">\n      @if (showImport()) {\n        <cw-button [type]=\"buttonType.secondary\" [label]=\"'_COMMON._ACTION.IMPORT'\"\n          [isDisabled]=\"disabled(actionEnum.import)\" [isLoading]=\"loading(actionEnum.import)\"\n          (btnAction)=\"emit(actionEnum.import)\">\n        </cw-button>\n      }\n\n      @if (showReset()) {\n        <cw-button [type]=\"buttonType.secondary\" [label]=\"'_COMMON._ACTION.RESET'\"\n          [isDisabled]=\"disabled(actionEnum.reset)\" [isLoading]=\"loading(actionEnum.reset)\"\n          (btnAction)=\"emit(actionEnum.reset)\">\n        </cw-button>\n      }\n\n      @if (hasExport()) {\n        <cw-button [type]=\"buttonType.secondary\" [label]=\"'_COMMON._ACTION.EXPORT'\" [isDropdown]=\"true\"\n          [isDisabled]=\"disabled(actionEnum.exportCurrent) && disabled(actionEnum.exportAll)\">\n          <ul>\n            <li>\n              @if (showExportCurrent()) {\n                <cw-button [type]=\"buttonType.ghost\" [label]=\"'_COMMON._ACTION.EXPORT_CURRENT'\"\n                  [isDisabled]=\"disabled(actionEnum.exportCurrent)\" (btnAction)=\"emit(actionEnum.exportCurrent)\">\n                </cw-button>\n              }\n            </li>\n            <li>\n              @if (showExportAll()) {\n                <cw-button [type]=\"buttonType.ghost\" [label]=\"'_COMMON._ACTION.EXPORT_ALL'\"\n                  [isDisabled]=\"disabled(actionEnum.exportAll)\" (btnAction)=\"emit(actionEnum.exportAll)\">\n                </cw-button>\n              }\n            </li>\n          </ul>\n        </cw-button>\n      }\n\n      <ng-content></ng-content>\n\n      @if (showAdd()) {\n        <cw-button [type]=\"buttonType.primary\" [label]=\"'_COMMON._ACTION.ADD'\" [withIcon]=\"spriteIcon.add\"\n          [isDisabled]=\"disabled(actionEnum.add)\" [isLoading]=\"loading(actionEnum.add)\"\n          (btnAction)=\"emit(actionEnum.add)\">\n        </cw-button>\n      }\n\n      @if (showSave()) {\n        <cw-button [type]=\"buttonType.primary\" [label]=\"'_COMMON._ACTION.SAVE'\" [isDisabled]=\"disabled(actionEnum.save)\"\n          [isLoading]=\"loading(actionEnum.save)\" (btnAction)=\"emit(actionEnum.save)\">\n        </cw-button>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "cw-button", inputs: ["type", "label", "id", "link", "isDropdown", "hideCaret", "withIcon", "withOnlyIcon", "iconSize", "iconPosition", "dropdownPosition", "isMinWidth", "isDisabled", "isLoading", "cssClass", "dataTest", "skeletonMode", "withTooltip", "tooltipText", "tooltipTitle", "tooltipTrigger", "tooltipPosition", "tooltipType"], outputs: ["btnAction", "dropDownClicked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.20", type: PageHeaderComponent, isStandalone: true, selector: "cw-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, columnsLabel: { classPropertyName: "columnsLabel", publicName: "columnsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", columnsChange: "columnsChange" }, ngImport: i0, template: "<div class=\"page-header d-flex-v gap-2xs\">\n  @if (showBack()) {\n    <cw-button [type]=\"buttonType.ghost\" [label]=\"'_COMMON._FORM.BACK'\" [withIcon]=\"spriteIcon.left1\"\n      (btnAction)=\"goBack()\" />\n  }\n  <div class=\"d-flex-h gap-md items-start justify-between flex-wrap\">\n    <div class=\"d-flex-v\">\n      <h1 class=\"page-header-title\">{{ title() | translate}}</h1>\n      @if (description(); as desc) {\n        <p class=\"fs-md page-header-description\" [innerHTML]=\"desc | translate\"></p>\n      }\n    </div>\n\n    <div class=\"page-header-actions d-flex-h gap-md flex-wrap items-center\">\n      @if (showColumns()) {\n        <cw-button [type]=\"buttonType.secondary\" [label]=\"columnsLabel()\" [withIcon]=\"spriteIcon.view\"\n          [isDropdown]=\"true\">\n          <ul class=\"page-header-columns-menu\">\n            @for (col of toggleableColumns(); track col.key) {\n              <li class=\"field-check\">\n                <input class=\"field-check-input\" type=\"checkbox\" [id]=\"'col-toggle-' + col.key\"\n                  [checked]=\"!col.hidden\" [disabled]=\"isLastVisible(col)\" (change)=\"toggleColumn(col)\">\n                <label class=\"field-check-label\" [for]=\"'col-toggle-' + col.key\">{{ col.label | translate }}</label>\n              </li>\n            }\n          </ul>\n        </cw-button>\n      }\n\n      @if (showImport()) {\n        <cw-button [type]=\"buttonType.secondary\" [label]=\"'_COMMON._ACTION.IMPORT'\"\n          [isDisabled]=\"disabled(actionEnum.import)\" [isLoading]=\"loading(actionEnum.import)\"\n          (btnAction)=\"emit(actionEnum.import)\">\n        </cw-button>\n      }\n\n      @if (showReset()) {\n        <cw-button [type]=\"buttonType.secondary\" [label]=\"'_COMMON._ACTION.RESET'\"\n          [isDisabled]=\"disabled(actionEnum.reset)\" [isLoading]=\"loading(actionEnum.reset)\"\n          (btnAction)=\"emit(actionEnum.reset)\">\n        </cw-button>\n      }\n\n      @if (hasExport()) {\n        <cw-button [type]=\"buttonType.secondary\" [label]=\"'_COMMON._ACTION.EXPORT'\" [isDropdown]=\"true\"\n          [isDisabled]=\"disabled(actionEnum.exportCurrent) && disabled(actionEnum.exportAll)\">\n          <ul>\n            <li>\n              @if (showExportCurrent()) {\n                <cw-button [type]=\"buttonType.ghost\" [label]=\"'_COMMON._ACTION.EXPORT_CURRENT'\"\n                  [isDisabled]=\"disabled(actionEnum.exportCurrent)\" (btnAction)=\"emit(actionEnum.exportCurrent)\">\n                </cw-button>\n              }\n            </li>\n            <li>\n              @if (showExportAll()) {\n                <cw-button [type]=\"buttonType.ghost\" [label]=\"'_COMMON._ACTION.EXPORT_ALL'\"\n                  [isDisabled]=\"disabled(actionEnum.exportAll)\" (btnAction)=\"emit(actionEnum.exportAll)\">\n                </cw-button>\n              }\n            </li>\n          </ul>\n        </cw-button>\n      }\n\n      <ng-content></ng-content>\n\n      @if (showAdd()) {\n        <cw-button [type]=\"buttonType.primary\" [label]=\"'_COMMON._ACTION.ADD'\" [withIcon]=\"spriteIcon.add\"\n          [isDisabled]=\"disabled(actionEnum.add)\" [isLoading]=\"loading(actionEnum.add)\"\n          (btnAction)=\"emit(actionEnum.add)\">\n        </cw-button>\n      }\n\n      @if (showSave()) {\n        <cw-button [type]=\"buttonType.primary\" [label]=\"'_COMMON._ACTION.SAVE'\" [isDisabled]=\"disabled(actionEnum.save)\"\n          [isLoading]=\"loading(actionEnum.save)\" (btnAction)=\"emit(actionEnum.save)\">\n        </cw-button>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "cw-button", inputs: ["type", "label", "id", "link", "isDropdown", "hideCaret", "withIcon", "withOnlyIcon", "iconSize", "iconPosition", "dropdownPosition", "isMinWidth", "isDisabled", "isLoading", "cssClass", "dataTest", "skeletonMode", "withTooltip", "tooltipText", "tooltipTitle", "tooltipTrigger", "tooltipPosition", "tooltipType"], outputs: ["btnAction", "dropDownClicked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
@@ -951,8 +1069,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.20", ngImpo
                         ButtonComponent,
                         DropdownItemDirective,
                         TranslateModule
-                    ], template: "<div class=\"page-header d-flex-v gap-2xs\">\n  @if (showBack()) {\n    <cw-button [type]=\"buttonType.ghost\" [label]=\"'_COMMON._FORM.BACK'\" [withIcon]=\"spriteIcon.left1\"\n      (btnAction)=\"goBack()\" />\n  }\n  <div class=\"d-flex-h gap-md items-start justify-between flex-wrap\">\n    <div class=\"d-flex-v\">\n      <h1 class=\"page-header-title\">{{ title() | translate}}</h1>\n      @if (description(); as desc) {\n        <p class=\"fs-md page-header-description\" [innerHTML]=\"desc | translate\"></p>\n      }\n    </div>\n\n    <div class=\"page-header-actions d-flex-h gap-md flex-wrap items-center\">\n      @if (showImport()) {\n        <cw-button [type]=\"buttonType.secondary\" [label]=\"'_COMMON._ACTION.IMPORT'\"\n          [isDisabled]=\"disabled(actionEnum.import)\" [isLoading]=\"loading(actionEnum.import)\"\n          (btnAction)=\"emit(actionEnum.import)\">\n        </cw-button>\n      }\n\n      @if (showReset()) {\n        <cw-button [type]=\"buttonType.secondary\" [label]=\"'_COMMON._ACTION.RESET'\"\n          [isDisabled]=\"disabled(actionEnum.reset)\" [isLoading]=\"loading(actionEnum.reset)\"\n          (btnAction)=\"emit(actionEnum.reset)\">\n        </cw-button>\n      }\n\n      @if (hasExport()) {\n        <cw-button [type]=\"buttonType.secondary\" [label]=\"'_COMMON._ACTION.EXPORT'\" [isDropdown]=\"true\"\n          [isDisabled]=\"disabled(actionEnum.exportCurrent) && disabled(actionEnum.exportAll)\">\n          <ul>\n            <li>\n              @if (showExportCurrent()) {\n                <cw-button [type]=\"buttonType.ghost\" [label]=\"'_COMMON._ACTION.EXPORT_CURRENT'\"\n                  [isDisabled]=\"disabled(actionEnum.exportCurrent)\" (btnAction)=\"emit(actionEnum.exportCurrent)\">\n                </cw-button>\n              }\n            </li>\n            <li>\n              @if (showExportAll()) {\n                <cw-button [type]=\"buttonType.ghost\" [label]=\"'_COMMON._ACTION.EXPORT_ALL'\"\n                  [isDisabled]=\"disabled(actionEnum.exportAll)\" (btnAction)=\"emit(actionEnum.exportAll)\">\n                </cw-button>\n              }\n            </li>\n          </ul>\n        </cw-button>\n      }\n\n      <ng-content></ng-content>\n\n      @if (showAdd()) {\n        <cw-button [type]=\"buttonType.primary\" [label]=\"'_COMMON._ACTION.ADD'\" [withIcon]=\"spriteIcon.add\"\n          [isDisabled]=\"disabled(actionEnum.add)\" [isLoading]=\"loading(actionEnum.add)\"\n          (btnAction)=\"emit(actionEnum.add)\">\n        </cw-button>\n      }\n\n      @if (showSave()) {\n        <cw-button [type]=\"buttonType.primary\" [label]=\"'_COMMON._ACTION.SAVE'\" [isDisabled]=\"disabled(actionEnum.save)\"\n          [isLoading]=\"loading(actionEnum.save)\" (btnAction)=\"emit(actionEnum.save)\">\n        </cw-button>\n      }\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
+                    ], template: "<div class=\"page-header d-flex-v gap-2xs\">\n  @if (showBack()) {\n    <cw-button [type]=\"buttonType.ghost\" [label]=\"'_COMMON._FORM.BACK'\" [withIcon]=\"spriteIcon.left1\"\n      (btnAction)=\"goBack()\" />\n  }\n  <div class=\"d-flex-h gap-md items-start justify-between flex-wrap\">\n    <div class=\"d-flex-v\">\n      <h1 class=\"page-header-title\">{{ title() | translate}}</h1>\n      @if (description(); as desc) {\n        <p class=\"fs-md page-header-description\" [innerHTML]=\"desc | translate\"></p>\n      }\n    </div>\n\n    <div class=\"page-header-actions d-flex-h gap-md flex-wrap items-center\">\n      @if (showColumns()) {\n        <cw-button [type]=\"buttonType.secondary\" [label]=\"columnsLabel()\" [withIcon]=\"spriteIcon.view\"\n          [isDropdown]=\"true\">\n          <ul class=\"page-header-columns-menu\">\n            @for (col of toggleableColumns(); track col.key) {\n              <li class=\"field-check\">\n                <input class=\"field-check-input\" type=\"checkbox\" [id]=\"'col-toggle-' + col.key\"\n                  [checked]=\"!col.hidden\" [disabled]=\"isLastVisible(col)\" (change)=\"toggleColumn(col)\">\n                <label class=\"field-check-label\" [for]=\"'col-toggle-' + col.key\">{{ col.label | translate }}</label>\n              </li>\n            }\n          </ul>\n        </cw-button>\n      }\n\n      @if (showImport()) {\n        <cw-button [type]=\"buttonType.secondary\" [label]=\"'_COMMON._ACTION.IMPORT'\"\n          [isDisabled]=\"disabled(actionEnum.import)\" [isLoading]=\"loading(actionEnum.import)\"\n          (btnAction)=\"emit(actionEnum.import)\">\n        </cw-button>\n      }\n\n      @if (showReset()) {\n        <cw-button [type]=\"buttonType.secondary\" [label]=\"'_COMMON._ACTION.RESET'\"\n          [isDisabled]=\"disabled(actionEnum.reset)\" [isLoading]=\"loading(actionEnum.reset)\"\n          (btnAction)=\"emit(actionEnum.reset)\">\n        </cw-button>\n      }\n\n      @if (hasExport()) {\n        <cw-button [type]=\"buttonType.secondary\" [label]=\"'_COMMON._ACTION.EXPORT'\" [isDropdown]=\"true\"\n          [isDisabled]=\"disabled(actionEnum.exportCurrent) && disabled(actionEnum.exportAll)\">\n          <ul>\n            <li>\n              @if (showExportCurrent()) {\n                <cw-button [type]=\"buttonType.ghost\" [label]=\"'_COMMON._ACTION.EXPORT_CURRENT'\"\n                  [isDisabled]=\"disabled(actionEnum.exportCurrent)\" (btnAction)=\"emit(actionEnum.exportCurrent)\">\n                </cw-button>\n              }\n            </li>\n            <li>\n              @if (showExportAll()) {\n                <cw-button [type]=\"buttonType.ghost\" [label]=\"'_COMMON._ACTION.EXPORT_ALL'\"\n                  [isDisabled]=\"disabled(actionEnum.exportAll)\" (btnAction)=\"emit(actionEnum.exportAll)\">\n                </cw-button>\n              }\n            </li>\n          </ul>\n        </cw-button>\n      }\n\n      <ng-content></ng-content>\n\n      @if (showAdd()) {\n        <cw-button [type]=\"buttonType.primary\" [label]=\"'_COMMON._ACTION.ADD'\" [withIcon]=\"spriteIcon.add\"\n          [isDisabled]=\"disabled(actionEnum.add)\" [isLoading]=\"loading(actionEnum.add)\"\n          (btnAction)=\"emit(actionEnum.add)\">\n        </cw-button>\n      }\n\n      @if (showSave()) {\n        <cw-button [type]=\"buttonType.primary\" [label]=\"'_COMMON._ACTION.SAVE'\" [isDisabled]=\"disabled(actionEnum.save)\"\n          [isLoading]=\"loading(actionEnum.save)\" (btnAction)=\"emit(actionEnum.save)\">\n        </cw-button>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], columnsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], columnsChange: [{ type: i0.Output, args: ["columnsChange"] }] } });
 
 // Modele du composant `cw-progress-bar` — types alignes sur le DS (BOU)
 // pages Figma `Progressbar / md` et `Progressbar / sm`.
@@ -1118,5 +1236,5 @@ function buildFilterParams(filters, keyMap) {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayAdapter, CustomListComponent, DragNDropListComponent, DragNDropNestedListComponent, FilterBarComponent, FormArrayAdapter, PageHeaderActionEnum, PageHeaderComponent, PaginationComponent, ProgressBarComponent, ProgressBarSizeEnum, ProgressBarTypeEnum, TableComponent, WizardStepComponent, WizardStepperComponent, buildFilterParams };
+export { ArrayAdapter, CustomListComponent, DragNDropListComponent, DragNDropNestedListComponent, FilterBarComponent, FormArrayAdapter, PageHeaderActionEnum, PageHeaderComponent, PaginationComponent, ProgressBarComponent, ProgressBarSizeEnum, ProgressBarTypeEnum, TableComponent, WizardStepComponent, WizardStepperComponent, buildFilterParams, loadHiddenColumns, saveHiddenColumns };
 //# sourceMappingURL=cityway-bo-ui.mjs.map