@cityway/bo-ui 1.0.10-beta019 → 1.0.10-beta021

package/fesm2022/cityway-bo-ui.mjs

@@ -10,6 +10,7 @@ import { CardComponent, SpriteIconEnum, FormFieldTypeEnum, BoButtonTypeEnum, But
 import * as i1$2 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormGroup } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, ActivatedRoute } from '@angular/router';
 import { debounceTime } from 'rxjs';
 import { HttpParams } from '@angular/common/http';
 
@@ -343,7 +344,7 @@ class PaginationComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.20", type: PaginationComponent, isStandalone: true, selector: "cw-pagination", inputs: { pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { paginationChange: "paginationChange" }, ngImport: i0, template: "@if (pagination().totalPages > 0) {\r\n<div class=\"pagination d-flex-h gap-md justify-between fs fs-sm\">\r\n\r\n  <!-- LEFT PART -->\r\n  <div class=\"d-flex-h gap-sm\">\r\n    {{ '_COMMON._PAGINATION.RESULT_P' | translate: {total: pagination().totalItems } }}\r\n    -\r\n    {{ '_COMMON._PAGINATION.DISPLAY' | translate }}\r\n\r\n    <cw-form-field\r\n      [label]=\"'_COMMON._PAGINATION.ITEMS_PER_PAGE'\"\r\n      [type]=\"typeField.select\"\r\n      [control]=\"itemsPerPageControl\"\r\n      [options]=\"pageSizesOptions\"\r\n      [displayLabel]=\"false\"\r\n      [clearable]=\"false\">\r\n    </cw-form-field>\r\n\r\n    {{ '_COMMON._PAGINATION.ITEMS_PER_PAGE' | translate }}\r\n  </div>\r\n\r\n  <!-- PAGINATION -->\r\n  <ul class=\"list-unstyled d-flex-h gap-none\">\r\n\r\n    <!-- PREVIOUS -->\r\n    <li>\r\n      <cw-button\r\n        [type]=\"typeButton.ghost\"\r\n        [withOnlyIcon]=\"true\"\r\n        [withIcon]=\"spriteIcon.nextLeft\"\r\n        [isDisabled]=\"pagination().currentPage <= 1\"\r\n        [iconSize]=\"buttonIconSize.small\"\r\n        cssClass=\"btn-pagination\"\r\n        (btnAction)=\"emit(pagination().currentPage - 1)\">\r\n      </cw-button>\r\n    </li>\r\n\r\n    <!-- PAGES -->\r\n    @for (item of visiblePages(); track item) {\r\n\r\n      <!-- NUMBER -->\r\n      @if (typeof item === 'number') {\r\n        <li>\r\n          <cw-button\r\n            [type]=\"typeButton.ghost\"\r\n            [label]=\"item.toString()\"\r\n            [cssClass]=\"item === pagination().currentPage ? 'btn-pagination btn-pagination-active' : 'btn-pagination'\"\r\n            (btnAction)=\"emit(item)\">\r\n          </cw-button>\r\n        </li>\r\n      }\r\n\r\n      <!-- JUMP PREV -->\r\n      @else if (item.type === 'jump-prev') {\r\n        <li>\r\n          <cw-button\r\n            [type]=\"typeButton.ghost\"\r\n            label=\"...\"\r\n            cssClass=\"btn-pagination\"\r\n            (btnAction)=\"emit(item.page)\">\r\n          </cw-button>\r\n        </li>\r\n      }\r\n\r\n      <!-- JUMP NEXT -->\r\n      @else if (item.type === 'jump-next') {\r\n        <li>\r\n          <cw-button\r\n            [type]=\"typeButton.ghost\"\r\n            label=\"...\"\r\n            cssClass=\"btn-pagination\"\r\n            (btnAction)=\"emit(item.page)\">\r\n          </cw-button>\r\n        </li>\r\n      }\r\n    }\r\n\r\n    <!-- NEXT -->\r\n    <li>\r\n      <cw-button\r\n        [type]=\"typeButton.ghost\"\r\n        [withOnlyIcon]=\"true\"\r\n        [withIcon]=\"spriteIcon.nextRight\"\r\n        [isDisabled]=\"pagination().currentPage >= pagination().totalPages\"\r\n        [iconSize]=\"buttonIconSize.small\"\r\n        cssClass=\"btn-pagination\"\r\n        (btnAction)=\"emit(pagination().currentPage + 1)\">\r\n      </cw-button>\r\n    </li>\r\n\r\n  </ul>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ButtonComponent, selector: "cw-button", inputs: ["type", "label", "id", "isDropdown", "withIcon", "withOnlyIcon", "iconSize", "iconPosition", "dropdownPosition", "isMinWidth", "isDisabled", "isLoading", "cssClass", "dataTest", "skeletonMode", "withTooltip", "tooltipText", "tooltipTitle", "tooltipTrigger", "tooltipPosition", "tooltipType"], outputs: ["btnAction", "dropDownClicked"] }, { kind: "component", type: FormFieldComponent, selector: "cw-form-field", inputs: ["control", "formGroup", "type", "label", "displayLabel", "name", "placeholder", "options", "rangeOptions", "validationOptions", "errorMessages", "isRequired", "help", "tooltip", "addonLeft", "addonRight", "isInAddon", "isReadonly", "isDisabled", "sliderValue", "sliderOptions", "cssClass", "skeletonMode", "clearable", "appendTo", "indeterminate"], outputs: ["refreshEvent", "textChanged", "valueChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.20", type: PaginationComponent, isStandalone: true, selector: "cw-pagination", inputs: { pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { paginationChange: "paginationChange" }, ngImport: i0, template: "@if (pagination().totalPages > 0) {\r\n<div class=\"pagination d-flex-h gap-md justify-between fs fs-sm\">\r\n\r\n  <!-- LEFT PART -->\r\n  <div class=\"d-flex-h gap-sm\">\r\n    {{ '_COMMON._PAGINATION.RESULT_P' | translate: {total: pagination().totalItems } }}\r\n    -\r\n    {{ '_COMMON._PAGINATION.DISPLAY' | translate }}\r\n\r\n    <cw-form-field\r\n      [label]=\"'_COMMON._PAGINATION.ITEMS_PER_PAGE'\"\r\n      [type]=\"typeField.select\"\r\n      [control]=\"itemsPerPageControl\"\r\n      [options]=\"pageSizesOptions\"\r\n      [displayLabel]=\"false\"\r\n      [clearable]=\"false\">\r\n    </cw-form-field>\r\n\r\n    {{ '_COMMON._PAGINATION.ITEMS_PER_PAGE' | translate }}\r\n  </div>\r\n\r\n  <!-- PAGINATION -->\r\n  <ul class=\"list-unstyled d-flex-h gap-none\">\r\n\r\n    <!-- PREVIOUS -->\r\n    <li>\r\n      <cw-button\r\n        [type]=\"typeButton.ghost\"\r\n        [withOnlyIcon]=\"true\"\r\n        [withIcon]=\"spriteIcon.nextLeft\"\r\n        [isDisabled]=\"pagination().currentPage <= 1\"\r\n        [iconSize]=\"buttonIconSize.small\"\r\n        cssClass=\"btn-pagination\"\r\n        (btnAction)=\"emit(pagination().currentPage - 1)\">\r\n      </cw-button>\r\n    </li>\r\n\r\n    <!-- PAGES -->\r\n    @for (item of visiblePages(); track item) {\r\n\r\n      <!-- NUMBER -->\r\n      @if (typeof item === 'number') {\r\n        <li>\r\n          <cw-button\r\n            [type]=\"typeButton.ghost\"\r\n            [label]=\"item.toString()\"\r\n            [cssClass]=\"item === pagination().currentPage ? 'btn-pagination btn-pagination-active' : 'btn-pagination'\"\r\n            (btnAction)=\"emit(item)\">\r\n          </cw-button>\r\n        </li>\r\n      }\r\n\r\n      <!-- JUMP PREV -->\r\n      @else if (item.type === 'jump-prev') {\r\n        <li>\r\n          <cw-button\r\n            [type]=\"typeButton.ghost\"\r\n            label=\"...\"\r\n            cssClass=\"btn-pagination\"\r\n            (btnAction)=\"emit(item.page)\">\r\n          </cw-button>\r\n        </li>\r\n      }\r\n\r\n      <!-- JUMP NEXT -->\r\n      @else if (item.type === 'jump-next') {\r\n        <li>\r\n          <cw-button\r\n            [type]=\"typeButton.ghost\"\r\n            label=\"...\"\r\n            cssClass=\"btn-pagination\"\r\n            (btnAction)=\"emit(item.page)\">\r\n          </cw-button>\r\n        </li>\r\n      }\r\n    }\r\n\r\n    <!-- NEXT -->\r\n    <li>\r\n      <cw-button\r\n        [type]=\"typeButton.ghost\"\r\n        [withOnlyIcon]=\"true\"\r\n        [withIcon]=\"spriteIcon.nextRight\"\r\n        [isDisabled]=\"pagination().currentPage >= pagination().totalPages\"\r\n        [iconSize]=\"buttonIconSize.small\"\r\n        cssClass=\"btn-pagination\"\r\n        (btnAction)=\"emit(pagination().currentPage + 1)\">\r\n      </cw-button>\r\n    </li>\r\n\r\n  </ul>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { 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: "component", type: FormFieldComponent, selector: "cw-form-field", inputs: ["control", "formGroup", "type", "label", "displayLabel", "name", "placeholder", "autocomplete", "options", "rangeOptions", "validationOptions", "autocompleteOptions", "errorMessages", "isRequired", "help", "tooltip", "addonLeft", "addonRight", "isInAddon", "isReadonly", "isDisabled", "sliderValue", "sliderOptions", "cssClass", "skeletonMode", "clearable", "appendTo", "initialCountry", "indeterminate"], outputs: ["refreshEvent", "textChanged", "valueChange", "phoneRegionChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
@@ -361,7 +362,7 @@ class TableComponent {
         this.rowClassFn = input(undefined, ...(ngDevMode ? [{ debugName: "rowClassFn" }] : []));
         this.pagination = input(undefined, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
         this.bulkActions = input([], ...(ngDevMode ? [{ debugName: "bulkActions" }] : []));
-        this.rowClick = output();
+        this.rowActions = input(undefined, ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
         this.cellClick = output();
         this.sortChange = output();
         this.selectionChange = output();
@@ -375,6 +376,7 @@ class TableComponent {
         this.iconUiType = IconUiTypeEnum;
         this.iconSize = IconSizeEnum;
         this.spriteIcon = SpriteIconEnum;
+        this.buttonType = BoButtonTypeEnum;
         this.currentSortKey = signal(null, ...(ngDevMode ? [{ debugName: "currentSortKey" }] : []));
         this.currentSortDirection = signal('asc', ...(ngDevMode ? [{ debugName: "currentSortDirection" }] : []));
         this.selectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
@@ -386,6 +388,28 @@ class TableComponent {
             return this.selectedRows().size > 0 && !this.allSelected();
         }, ...(ngDevMode ? [{ debugName: "someSelected" }] : []));
         this.defaultLabelFn = (row) => row?.name ?? row?.label ?? row?.title ?? String(row?.id ?? row);
+        /**
+         * Nombre maximum d'actions visibles parmi toutes les lignes.
+         * Sert à décider d'un affichage UNIFORME : la bascule inline/dropdown
+         * est globale au tableau, pas calculée ligne par ligne.
+         */
+        this.maxVisibleActions = computed(() => {
+            if (!this.rowActions())
+                return 0;
+            return this.data().reduce((max, row) => Math.max(max, this.getResolvedActions(row).length), 0);
+        }, ...(ngDevMode ? [{ debugName: "maxVisibleActions" }] : []));
+        /**
+         * Vrai si le tableau doit afficher les actions en dropdown.
+         * Dès qu'une seule ligne dépasse le seuil, TOUTES les lignes
+         * basculent en dropdown pour un rendu uniforme.
+         */
+        this.useDropdownActions = computed(() => this.maxVisibleActions() > this.getOverflowThreshold(), ...(ngDevMode ? [{ debugName: "useDropdownActions" }] : []));
+        effect(() => {
+            if (this.rowActions() && this.actionsTemplate()) {
+                // eslint-disable-next-line no-console
+                console.warn('[cw-table] `rowActions` et `#actionsTemplate` sont fournis simultanément. `actionsTemplate` est ignoré.');
+            }
+        });
     }
     ngOnInit() {
         const defaultColumn = this.columns().find(c => c.defaultSort);
@@ -426,9 +450,6 @@ class TableComponent {
     }
     onCellClick(row, column) {
         this.cellClick.emit({ row, column });
-        if (column.type === 'link') {
-            this.rowClick.emit(row);
-        }
     }
     isClickable(column) {
         return column.type === 'link' || !!column.clickable;
@@ -493,8 +514,80 @@ class TableComponent {
             this.bulkAction.emit({ id: action.id, rows });
         }
     }
+    /** Booléen indiquant si l'API déclarative `rowActions` est utilisée. */
+    get usingRowActions() {
+        return !!this.rowActions();
+    }
+    /** Résout la liste d'actions visibles pour un row donné, en appliquant show/disabled/showDisabled. */
+    getResolvedActions(row) {
+        const config = this.rowActions();
+        if (!config)
+            return [];
+        const ordered = [];
+        if (config.edit)
+            ordered.push({ descriptor: config.edit, defaultLabel: '_COMMON._ACTION.EDIT', forcedVariant: 'primary' });
+        for (const action of config.customActions ?? []) {
+            ordered.push({ descriptor: action });
+        }
+        if (config.delete)
+            ordered.push({ descriptor: config.delete, defaultLabel: '_COMMON._ACTION.DELETE', forcedVariant: 'danger' });
+        const showDisabled = config.showDisabled === true;
+        const resolved = [];
+        for (const entry of ordered) {
+            const { descriptor, defaultLabel, forcedVariant } = entry;
+            if (!this.evalShow(descriptor, row))
+                continue;
+            const disabled = this.evalDisabled(descriptor, row);
+            if (disabled && !showDisabled)
+                continue;
+            resolved.push({
+                label: this.evalLabel(descriptor, row, defaultLabel),
+                disabled,
+                variant: forcedVariant ?? descriptor.variant ?? 'default',
+                icon: descriptor.icon,
+                link: this.evalLink(descriptor, row),
+                click: descriptor.click
+            });
+        }
+        return resolved;
+    }
+    getOverflowThreshold() {
+        return this.rowActions()?.overflowThreshold ?? 2;
+    }
+    onRowActionClick(action, row) {
+        if (action.disabled || action.link)
+            return;
+        action.click?.(row);
+    }
+    actionCssClass(action) {
+        switch (action.variant) {
+            case 'danger': return 'text-danger';
+            case 'primary': return 'text-primary';
+            default: return '';
+        }
+    }
+    evalShow(descriptor, row) {
+        if (descriptor.show === undefined)
+            return true;
+        return typeof descriptor.show === 'function' ? !!descriptor.show(row) : !!descriptor.show;
+    }
+    evalDisabled(descriptor, row) {
+        if (descriptor.disabled === undefined)
+            return false;
+        return typeof descriptor.disabled === 'function' ? !!descriptor.disabled(row) : !!descriptor.disabled;
+    }
+    evalLabel(descriptor, row, fallback) {
+        if (descriptor.label === undefined || descriptor.label === null)
+            return fallback ?? '';
+        return typeof descriptor.label === 'function' ? descriptor.label(row) : descriptor.label;
+    }
+    evalLink(descriptor, row) {
+        if (descriptor.link === undefined)
+            return undefined;
+        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 } }, outputs: { rowClick: "rowClick", cellClick: "cellClick", sortChange: "sortChange", selectionChange: "selectionChange", paginationChange: "paginationChange", bulkDelete: "bulkDelete", bulkAction: "bulkAction" }, 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\" appDoubleScroll>\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['2xs']\"></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-ations]=\"column.type === 'actions'\">\n                  @switch (column.type) {\n                    @case ('link') {\n                      <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\">\n                        {{ row[column.key] | translate }}\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.sm\"></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.sm\"></cw-icon>\n                      }\n                    }\n                    @case ('actions') {\n                      <ng-container\n                        *ngTemplateOutlet=\"actionsTemplate(); context: { $implicit: row }\">\n                      </ng-container>\n                    }\n                    @default {\n                      {{ row[column.key] | translate }}\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: "directive", type: DoubleScrollDirective, selector: "[appDoubleScroll]" }, { kind: "component", type: LoaderComponent, selector: "cw-loader" }, { 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", "isDropdown", "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 } }, outputs: { cellClick: "cellClick", sortChange: "sortChange", selectionChange: "selectionChange", paginationChange: "paginationChange", bulkDelete: "bulkDelete", bulkAction: "bulkAction" }, 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['2xs']\"></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-ations]=\"column.type === 'actions'\">\n                  @switch (column.type) {\n                    @case ('link') {\n                      <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\">\n                        {{ row[column.key] | translate }}\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.sm\"></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.sm\"></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                      {{ row[column.key] | translate }}\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" }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -508,8 +601,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.20", ngImpo
                         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\" appDoubleScroll>\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['2xs']\"></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-ations]=\"column.type === 'actions'\">\n                  @switch (column.type) {\n                    @case ('link') {\n                      <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\">\n                        {{ row[column.key] | translate }}\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.sm\"></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.sm\"></cw-icon>\n                      }\n                    }\n                    @case ('actions') {\n                      <ng-container\n                        *ngTemplateOutlet=\"actionsTemplate(); context: { $implicit: row }\">\n                      </ng-container>\n                    }\n                    @default {\n                      {{ row[column.key] | translate }}\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" }]
-        }], 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 }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], 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 }] }] } });
+                    ], 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['2xs']\"></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-ations]=\"column.type === 'actions'\">\n                  @switch (column.type) {\n                    @case ('link') {\n                      <a href=\"javascript:void(0)\" (click)=\"onCellClick(row, column)\">\n                        {{ row[column.key] | translate }}\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.sm\"></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.sm\"></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                      {{ row[column.key] | translate }}\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 }] }] } });
 
 const RANGE_TYPES = new Set([
     FormFieldTypeEnum.dateToDate,
@@ -519,8 +612,12 @@ const RANGE_TYPES = new Set([
 class FilterBarComponent {
     constructor() {
         this.destroyRef = inject(DestroyRef);
+        this.router = inject(Router, { optional: true });
+        this.route = inject(ActivatedRoute, { optional: true });
         this.filters = input.required(...(ngDevMode ? [{ debugName: "filters" }] : []));
         this.manual = input(false, ...(ngDevMode ? [{ debugName: "manual" }] : []));
+        /** Synchronise l'état appliqué des filtres avec les query params de l'URL (mémorisation / partage). */
+        this.syncUrl = input(false, ...(ngDevMode ? [{ debugName: "syncUrl" }] : []));
         this.applyLabel = input('_COMMON._ACTION.FILTER', ...(ngDevMode ? [{ debugName: "applyLabel" }] : []));
         this.resetLabel = input('_COMMON._ACTION.RESET', ...(ngDevMode ? [{ debugName: "resetLabel" }] : []));
         this.filtersApplied = output();
@@ -535,18 +632,21 @@ class FilterBarComponent {
     buildForm(configs) {
         const group = {};
         const defaults = {};
+        const urlValues = this.readUrlValues(configs);
         for (const field of configs) {
             if (RANGE_TYPES.has(field.type)) {
                 const def = field.defaultValue ?? { start: '', end: '' };
+                const init = urlValues[field.key] ?? def;
                 group[field.key] = new FormGroup({
-                    start: new FormControl(def.start ?? ''),
-                    end: new FormControl(def.end ?? '')
+                    start: new FormControl(init.start ?? ''),
+                    end: new FormControl(init.end ?? '')
                 });
                 defaults[field.key] = { ...def };
             }
             else {
                 const def = field.defaultValue ?? '';
-                group[field.key] = new FormControl(def);
+                const init = urlValues[field.key] ?? def;
+                group[field.key] = new FormControl(init);
                 defaults[field.key] = def;
             }
         }
@@ -555,8 +655,66 @@ class FilterBarComponent {
         if (!this.manual()) {
             this.filterForm.valueChanges
                 .pipe(debounceTime(300), takeUntilDestroyed(this.destroyRef))
-                .subscribe(values => this.filtersApplied.emit(values));
+                .subscribe(values => {
+                this.filtersApplied.emit(values);
+                this.syncFiltersToUrl(values);
+            });
         }
+        // Restaure le filtrage présent dans l'URL au chargement.
+        if (Object.keys(urlValues).length > 0) {
+            this.filtersApplied.emit(this.filterForm.value);
+        }
+    }
+    /** Lit les valeurs de filtre présentes dans les query params de l'URL. */
+    readUrlValues(configs) {
+        const values = {};
+        if (!this.syncUrl() || !this.route)
+            return values;
+        const params = this.route.snapshot.queryParamMap;
+        for (const field of configs) {
+            if (RANGE_TYPES.has(field.type)) {
+                const start = params.get(`${field.key}.start`);
+                const end = params.get(`${field.key}.end`);
+                if (start !== null || end !== null) {
+                    values[field.key] = { start: start ?? '', end: end ?? '' };
+                }
+            }
+            else {
+                const value = params.get(field.key);
+                if (value !== null) {
+                    values[field.key] = value;
+                }
+            }
+        }
+        return values;
+    }
+    /** Reporte l'état appliqué des filtres dans les query params (replaceUrl, sans polluer l'historique). */
+    syncFiltersToUrl(values) {
+        if (!this.syncUrl() || !this.router || !this.route)
+            return;
+        const queryParams = {};
+        for (const field of this.filters()) {
+            const value = values[field.key];
+            if (RANGE_TYPES.has(field.type)) {
+                queryParams[`${field.key}.start`] = this.toParam(value?.start);
+                queryParams[`${field.key}.end`] = this.toParam(value?.end);
+            }
+            else {
+                queryParams[field.key] = this.toParam(value);
+            }
+        }
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams,
+            queryParamsHandling: 'merge',
+            replaceUrl: true
+        });
+    }
+    /** Normalise une valeur en param d'URL ; les valeurs vides sont retirées (null). */
+    toParam(value) {
+        if (value === null || value === undefined || value === '')
+            return null;
+        return String(value);
     }
     getControl(key) {
         return this.filterForm.get(key);
@@ -567,17 +725,21 @@ class FilterBarComponent {
         return typeof field.options === 'function' ? field.options() : field.options;
     }
     apply() {
-        this.filtersApplied.emit(this.filterForm.value);
+        const values = this.filterForm.value;
+        this.filtersApplied.emit(values);
+        this.syncFiltersToUrl(values);
     }
     reset() {
         this.filterForm.reset(this.defaults);
         this.filtersReset.emit();
         if (this.manual()) {
-            this.filtersApplied.emit(this.filterForm.value);
+            const values = this.filterForm.value;
+            this.filtersApplied.emit(values);
+            this.syncFiltersToUrl(values);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: FilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.20", type: FilterBarComponent, isStandalone: true, selector: "cw-filter-bar", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: true, transformFunction: null }, manual: { classPropertyName: "manual", publicName: "manual", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersApplied: "filtersApplied", filtersReset: "filtersReset" }, ngImport: i0, template: "<form [formGroup]=\"filterForm\" (ngSubmit)=\"apply()\" class=\"filter-bar\">\r\n  <div class=\"d-flex-h flex-wrap gap-md\">\r\n    @for (field of filters(); track field.key) {\r\n      <div class=\"filter-field\" [class]=\"field.colClass ?? ''\">\r\n        <cw-form-field\r\n          [label]=\"field.label | translate\"\r\n          [displayLabel]=\"false\"\r\n          [type]=\"field.type\"\r\n          [placeholder]=\"(field.placeholder ?? '') | translate\"\r\n          [options]=\"resolveOptions(field)\"\r\n          [control]=\"getControl(field.key)\"\r\n          [clearable]=\"false\">\r\n        </cw-form-field>\r\n      </div>\r\n    }\r\n    <div class=\"d-flex-h gap-md\">\r\n      @if (manual()) {\r\n        <cw-button\r\n          [label]=\"applyLabel() | translate\"\r\n          [type]=\"uiType.link\"\r\n          (btnAction)=\"apply()\">\r\n        </cw-button>\r\n      }\r\n      <cw-button\r\n        [label]=\"resetLabel() | translate\"\r\n        [type]=\"uiType.link\"\r\n        (btnAction)=\"reset()\">\r\n      </cw-button>\r\n    </div>\r\n  </div>\r\n</form>\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "cw-form-field", inputs: ["control", "formGroup", "type", "label", "displayLabel", "name", "placeholder", "options", "rangeOptions", "validationOptions", "errorMessages", "isRequired", "help", "tooltip", "addonLeft", "addonRight", "isInAddon", "isReadonly", "isDisabled", "sliderValue", "sliderOptions", "cssClass", "skeletonMode", "clearable", "appendTo", "indeterminate"], outputs: ["refreshEvent", "textChanged", "valueChange"] }, { kind: "component", type: ButtonComponent, selector: "cw-button", inputs: ["type", "label", "id", "isDropdown", "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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.20", type: FilterBarComponent, isStandalone: true, selector: "cw-filter-bar", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: true, transformFunction: null }, manual: { classPropertyName: "manual", publicName: "manual", isSignal: true, isRequired: false, transformFunction: null }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersApplied: "filtersApplied", filtersReset: "filtersReset" }, ngImport: i0, template: "<form [formGroup]=\"filterForm\" (ngSubmit)=\"apply()\" class=\"filter-bar\">\r\n  <div class=\"d-flex-h flex-wrap gap-md\">\r\n    @for (field of filters(); track field.key) {\r\n      <div class=\"filter-field\" [class]=\"field.colClass ?? ''\">\r\n        <cw-form-field\r\n          [label]=\"field.label | translate\"\r\n          [displayLabel]=\"false\"\r\n          [type]=\"field.type\"\r\n          [placeholder]=\"(field.placeholder ?? '') | translate\"\r\n          [options]=\"resolveOptions(field)\"\r\n          [control]=\"getControl(field.key)\"\r\n          [clearable]=\"false\">\r\n        </cw-form-field>\r\n      </div>\r\n    }\r\n    <div class=\"d-flex-h gap-md\">\r\n      @if (manual()) {\r\n        <cw-button\r\n          [label]=\"applyLabel() | translate\"\r\n          [type]=\"uiType.link\"\r\n          (btnAction)=\"apply()\">\r\n        </cw-button>\r\n      }\r\n      <cw-button\r\n        [label]=\"resetLabel() | translate\"\r\n        [type]=\"uiType.link\"\r\n        (btnAction)=\"reset()\">\r\n      </cw-button>\r\n    </div>\r\n  </div>\r\n</form>\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "cw-form-field", inputs: ["control", "formGroup", "type", "label", "displayLabel", "name", "placeholder", "autocomplete", "options", "rangeOptions", "validationOptions", "autocompleteOptions", "errorMessages", "isRequired", "help", "tooltip", "addonLeft", "addonRight", "isInAddon", "isReadonly", "isDisabled", "sliderValue", "sliderOptions", "cssClass", "skeletonMode", "clearable", "appendTo", "initialCountry", "indeterminate"], outputs: ["refreshEvent", "textChanged", "valueChange", "phoneRegionChange"] }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: FilterBarComponent, decorators: [{
             type: Component,
@@ -587,7 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.20", ngImpo
                         ButtonComponent,
                         TranslateModule
                     ], template: "<form [formGroup]=\"filterForm\" (ngSubmit)=\"apply()\" class=\"filter-bar\">\r\n  <div class=\"d-flex-h flex-wrap gap-md\">\r\n    @for (field of filters(); track field.key) {\r\n      <div class=\"filter-field\" [class]=\"field.colClass ?? ''\">\r\n        <cw-form-field\r\n          [label]=\"field.label | translate\"\r\n          [displayLabel]=\"false\"\r\n          [type]=\"field.type\"\r\n          [placeholder]=\"(field.placeholder ?? '') | translate\"\r\n          [options]=\"resolveOptions(field)\"\r\n          [control]=\"getControl(field.key)\"\r\n          [clearable]=\"false\">\r\n        </cw-form-field>\r\n      </div>\r\n    }\r\n    <div class=\"d-flex-h gap-md\">\r\n      @if (manual()) {\r\n        <cw-button\r\n          [label]=\"applyLabel() | translate\"\r\n          [type]=\"uiType.link\"\r\n          (btnAction)=\"apply()\">\r\n        </cw-button>\r\n      }\r\n      <cw-button\r\n        [label]=\"resetLabel() | translate\"\r\n        [type]=\"uiType.link\"\r\n        (btnAction)=\"reset()\">\r\n      </cw-button>\r\n    </div>\r\n  </div>\r\n</form>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: true }] }], manual: [{ type: i0.Input, args: [{ isSignal: true, alias: "manual", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], filtersApplied: [{ type: i0.Output, args: ["filtersApplied"] }], filtersReset: [{ type: i0.Output, args: ["filtersReset"] }] } });
+        }], ctorParameters: () => [], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: true }] }], manual: [{ type: i0.Input, args: [{ isSignal: true, alias: "manual", required: false }] }], syncUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncUrl", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], filtersApplied: [{ type: i0.Output, args: ["filtersApplied"] }], filtersReset: [{ type: i0.Output, args: ["filtersReset"] }] } });
 
 var PageHeaderActionEnum;
 (function (PageHeaderActionEnum) {
@@ -634,7 +796,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 text-light\" [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.link\" [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.link\" [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", "isDropdown", "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 } }, 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 text-light\" [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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.20", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
@@ -642,7 +804,7 @@ 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 text-light\" [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.link\" [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.link\" [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" }]
+                    ], 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 text-light\" [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"] }] } });
 
 function buildFilterParams(filters, keyMap) {