@tsi-developpement/tsi-shared-ui 1.11.13 → 1.11.15

package/fesm2022/tsi-developpement-tsi-shared-ui.mjs

@@ -64,9 +64,9 @@ import listPlugin from '@fullcalendar/list';
 import multiMonthPlugin from '@fullcalendar/multimonth';
 import * as i6$3 from '@fullcalendar/angular';
 import { FullCalendarModule } from '@fullcalendar/angular';
-import * as i5$1 from 'primeng/toolbar';
+import * as i6$4 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
-import * as i5$2 from 'primeng/treetable';
+import * as i5$1 from 'primeng/treetable';
 import { TreeTableModule } from 'primeng/treetable';
 import * as i15 from 'primeng/splitbutton';
 import { SplitButtonModule } from 'primeng/splitbutton';
@@ -85,7 +85,7 @@ import * as i8$1 from 'primeng/fieldset';
 import { FieldsetModule } from 'primeng/fieldset';
 import * as i4$2 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
-import * as i5$3 from 'primeng/progressbar';
+import * as i5$2 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
 import * as i10 from 'primeng/divider';
 import { DividerModule } from 'primeng/divider';
@@ -290,6 +290,7 @@ const AdministrationSegments = {
     getStatusColorDetailsByBusinessClassName: 'getStatusColorDetailsByBusinessClassName',
     getNombreFichierJointById: 'GetNombreFichierJointById',
     getWorkflowEtatByClassNameAndDescriminator: 'GetWorkflowEtatByClassNameAndDescriminator',
+    getWorkflowEtatSuivantsByClassNameAndDescriminator: 'GetWorkflowEtatSuivantsByClassNameAndDescriminator',
     getWorkflowByClasseAndDescriminator: 'GetWorkflowByClasseAndDescriminator',
     formulaire: 'Formulaire',
     formulaireData: 'FormulaireData',
@@ -303,6 +304,7 @@ const AdministrationSegments = {
     getParametreApplicationParamBase: 'GetParametreApplicationParamBase',
     getAllWorkflowEtatSuivantByWorkflowEtatId: 'getAllWorkflowEtatSuivantByWorkflowEtatId',
     updateWorkflowEtatFromKanbanView: 'UpdateWorkflowEtatFromKanbanView',
+    updateMultipleWorkflowEtatFromKanbanView: 'UpdateMultipleWorkflowEtatFromKanbanView',
     mailing: "Mailing",
     sendMailMessage: 'SendMail',
     actionCRM: 'actionCRM',
@@ -416,11 +418,13 @@ const AdministrationEndpoints = {
     getAllTypeFichierMinimalByClasse: (classe) => `${Segment.base}/${AdministrationSegments.typeFichier}/${AdministrationSegments.allMinimalByClasse}/${classe}`,
     getTypeFichierMinimal: () => `${Segment.base}/${AdministrationSegments.typeFichier}/${AdministrationSegments.minimal}`,
     getWorkflowEtatByClassNameAndDescriminator: (className, descriminatorValue, filterByUserRights) => `${Segment.base}/${AdministrationSegments.workflowEtat}/${AdministrationSegments.getWorkflowEtatByClassNameAndDescriminator}/${className}${descriminatorValue !== undefined && descriminatorValue != null ? `/${descriminatorValue}` : ""}${filterByUserRights ? '?filterByUserRights=true' : ''}`,
+    getWorkflowEtatSuivantsByClassNameAndDescriminator: (className, descriminatorValue) => `${Segment.base}/${AdministrationSegments.workflowEtat}/${AdministrationSegments.getWorkflowEtatSuivantsByClassNameAndDescriminator}/${className}${descriminatorValue !== undefined && descriminatorValue != null ? `/${descriminatorValue}` : ""}`,
     getWorkflowByClasseAndDescriminator: (classe, descriminatorValue) => `${Segment.base}/${AdministrationSegments.workflow}/${AdministrationSegments.getWorkflowByClasseAndDescriminator}/${classe}${descriminatorValue !== undefined && descriminatorValue != null ? `/${descriminatorValue}` : ""}`,
     getcolonnesPersonnalisee: (businessClass, occurence) => `${Segment.base}/${AdministrationSegments.colonnePersonnalisee}/${AdministrationSegments.getColonnePersonnalisee}/${businessClass}${occurence != null && occurence != undefined ? '/' + occurence : ''}`,
     createOrUpdateFormulaireData: () => `${Segment.base}/${AdministrationSegments.colonnePersonnaliseeData}`,
     getAllWorkflowEtatSuivantByWorkflowEtatId: (id) => `${Segment.base}/${AdministrationSegments.workflowEtatSuivant}/${AdministrationSegments.getAllWorkflowEtatSuivantByWorkflowEtatId}/${id}`,
     updateWorkflowEtatFromKanbanView: () => `${Segment.base}/${AdministrationSegments.workflowInstance}/${AdministrationSegments.updateWorkflowEtatFromKanbanView}`,
+    updateMultipleWorkflowEtatFromKanbanView: () => `${Segment.base}/${AdministrationSegments.workflowInstance}/${AdministrationSegments.updateMultipleWorkflowEtatFromKanbanView}`,
     sendMailMessage: () => `${Segment.base}/${AdministrationSegments.mailing}/${AdministrationSegments.sendMailMessage}`,
     // FormulaireData
     getFormulaireDataColumnsDefinition: (id) => `${Segment.base}/${AdministrationSegments.formulaireData}/${AdministrationSegments.columnsDefinition}/${id}`,
@@ -2176,6 +2180,11 @@ class WorkflowResponse {
 }
 class WorkflowEtatKanbanRequest {
 }
+class WorkflowEtatKanbanMultipleRequest {
+    constructor() {
+        this.uidObjets = [];
+    }
+}
 
 class EntityInfo {
     constructor() {
@@ -2438,6 +2447,9 @@ class WorkflowConfigurationService {
     getWorkflowEtatByClassNameAndDescriminator(className, descriminatorValue, filterByUserRights) {
         return this._httpClient.get(AdministrationEndpoints.getWorkflowEtatByClassNameAndDescriminator(className, descriminatorValue, filterByUserRights));
     }
+    getWorkflowEtatSuivantsByClassNameAndDescriminator(className, descriminatorValue) {
+        return this._httpClient.get(AdministrationEndpoints.getWorkflowEtatSuivantsByClassNameAndDescriminator(className, descriminatorValue));
+    }
     getWorkflowByClasseAndDescriminator(classe, descriminatorValue) {
         return this._httpClient.get(AdministrationEndpoints.getWorkflowByClasseAndDescriminator(classe, descriminatorValue));
     }
@@ -2461,6 +2473,9 @@ class WorkflowConfigurationService {
     updateWorkflowEtatFromKanbanView(request) {
         return this._httpClient.post(AdministrationEndpoints.updateWorkflowEtatFromKanbanView(), request);
     }
+    updateMultipleWorkflowEtatFromKanbanView(request) {
+        return this._httpClient.post(AdministrationEndpoints.updateMultipleWorkflowEtatFromKanbanView(), request);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WorkflowConfigurationService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WorkflowConfigurationService, providedIn: 'root' }); }
 }
@@ -11053,18 +11068,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Description: Displays a Kanban board view for TSI entities using the workflow etat value.
  */
 class TsiKanbanWorkflowEtatComponent extends AppBaseComponent {
+    set cardBusinessClass(value) {
+        this._cardBusinessClass = value;
+        this.loadEntityInfoAndWorkflowEtats();
+    }
+    get cardBusinessClass() { return this._cardBusinessClass; }
+    set descriminatorValue(value) {
+        this._descriminatorValue = value;
+        if (this.entityInfo && this.hasDiscriminator) {
+            this.loadWorkflowEtatsAndSuivants(value);
+        }
+    }
+    get descriminatorValue() { return this._descriminatorValue; }
     set page(value) {
         this._page = value;
         this.handlePageChange(value);
     }
     get page() { return this._page; }
-    constructor(cdr, _workflowConfigurationService, _entityConfig, _localize, _notificationService) {
+    constructor(cdr, _workflowConfigurationService, _entityConfig, _localize, _notificationService, _confirmationService, _messageService) {
         super();
         this.cdr = cdr;
         this._workflowConfigurationService = _workflowConfigurationService;
         this._entityConfig = _entityConfig;
         this._localize = _localize;
         this._notificationService = _notificationService;
+        this._confirmationService = _confirmationService;
+        this._messageService = _messageService;
         this.buttonClicked = new EventEmitter();
         this.callSearch = new EventEmitter();
         // Columns whose per-column summary should be displayed in the Kanban header, formatted
@@ -11086,6 +11115,13 @@ class TsiKanbanWorkflowEtatComponent extends AppBaseComponent {
         this.rows = 10;
         this.totalCount = 0;
         this.isLoading = false;
+        // Bulk selection: restricted to a single workflow-etat column (current page only).
+        // Dragging any selected card onto another column moves the whole selection.
+        this.selectedCardUids = new Set();
+        this.selectionColumnKey = null;
+        // Allowed next workflow etats per workflow etat, loaded once at init; null if unavailable (the backend still checks every move).
+        this.allowedTargetsByWorkflowEtat = null;
+        this.isBulkDragging = false;
         this.workFlowEtatNomLabels = [];
         this.workFlowEtatNomLabels = [
             {
@@ -11095,8 +11131,6 @@ class TsiKanbanWorkflowEtatComponent extends AppBaseComponent {
         ];
     }
     async ngOnInit() {
-        await this.getWorkflowEtat(this.descriminatorValue);
-        await this.getEntityInfo();
         this.page$.subscribe(async (page) => {
             if (page) {
                 this.isLoading = !!page.loading;
@@ -11104,10 +11138,19 @@ class TsiKanbanWorkflowEtatComponent extends AppBaseComponent {
             }
         });
     }
-    dragStart(_, card) {
+    dragStart(event, card) {
         this.draggedCard = card;
+        // Dragging a selected card while several are selected drags the whole selection;
+        // dragging an unselected card (or a single selection) keeps the existing single move.
+        this.isBulkDragging = this.selectedCount > 1 && this.isCardSelected(card);
+        if (this.isBulkDragging && this.bulkDragPreview && event.dataTransfer) {
+            event.dataTransfer.setDragImage(this.bulkDragPreview.nativeElement, 24, 24);
+        }
+    }
+    dragEnd() {
+        this.draggedCard = null;
+        this.isBulkDragging = false;
     }
-    dragEnd() { this.draggedCard = null; }
     allowDrop(event) { event.preventDefault(); }
     trackByWorkflowEtat(index, status) { return status.key; }
     trackByCard(index, card) { return card.uid; }
@@ -11119,12 +11162,23 @@ class TsiKanbanWorkflowEtatComponent extends AppBaseComponent {
             this._notificationService.error("shared_tsi_component_grid_kanban_workflowEtat_view_sans_workflow_forbidden");
             return;
         }
+        if (this.isBulkDragging) {
+            this.dropSelection(newKey);
+            this.draggedCard = null;
+            this.isBulkDragging = false;
+            return;
+        }
         const card = this.draggedCard;
         const previousWorkflowEtat = this.draggedCard.status;
         if (previousWorkflowEtat == null) {
             this._notificationService.error("shared_tsi_component_grid_kanban_workflowEtat_view_no_workflow");
             return;
         }
+        if (previousWorkflowEtat !== newKey && !this.isAllowedDropTarget(newKey)) {
+            this._notificationService.error('shared_tsi_component_grid_kanban_workflowEtat_view_workflow_etat_suivant_error');
+            this.draggedCard = null;
+            return;
+        }
         if (this.draggedCard.status !== newKey && this.cardBusinessClass) {
             this.isLoading = true;
             let request = new WorkflowEtatKanbanRequest();
@@ -11138,6 +11192,7 @@ class TsiKanbanWorkflowEtatComponent extends AppBaseComponent {
             this._workflowConfigurationService.updateWorkflowEtatFromKanbanView(request).subscribe({
                 next: (data) => {
                     card.status = newKey;
+                    this.removeFromSelection(card.uid);
                     this.updateCardMap();
                     this.isLoading = false;
                 },
@@ -11153,10 +11208,70 @@ class TsiKanbanWorkflowEtatComponent extends AppBaseComponent {
         this.draggedCard = null;
     }
     onPageChange(event) {
+        this.clearSelection();
         this.first = event.first ?? 0;
         this.rows = event.rows ?? 10;
         this.callSearch.emit({ skipCount: this.first, maxResultCount: this.rows });
     }
+    get selectedCount() {
+        return this.selectedCardUids.size;
+    }
+    // First selected cards, shown as a stack in the bulk drag image.
+    get selectedCardsPreview() {
+        return this.cards.filter(c => this.isCardSelected(c)).slice(0, 3);
+    }
+    isCardSelected(card) {
+        return !!card.uid && this.selectedCardUids.has(card.uid);
+    }
+    // Selecting a card in another column restarts the selection in that column.
+    toggleCardSelection(columnKey, card) {
+        if (!card.uid) {
+            return;
+        }
+        if (this.selectionColumnKey !== columnKey) {
+            this.startSelection(columnKey);
+        }
+        if (this.selectedCardUids.has(card.uid)) {
+            this.removeFromSelection(card.uid);
+            return;
+        }
+        this.selectedCardUids.add(card.uid);
+    }
+    isColumnPageFullySelected(columnKey) {
+        const columnCards = this.cardMapByWorkflowEtat.get(columnKey) ?? [];
+        return this.selectionColumnKey === columnKey
+            && columnCards.length > 0
+            && columnCards.every(c => this.isCardSelected(c));
+    }
+    toggleSelectAllColumnPage(columnKey) {
+        if (this.isColumnPageFullySelected(columnKey)) {
+            this.clearSelection();
+            return;
+        }
+        if (this.selectionColumnKey !== columnKey) {
+            this.startSelection(columnKey);
+        }
+        (this.cardMapByWorkflowEtat.get(columnKey) ?? []).forEach(c => {
+            if (c.uid) {
+                this.selectedCardUids.add(c.uid);
+            }
+        });
+    }
+    clearSelection() {
+        this.selectedCardUids.clear();
+        this.selectionColumnKey = null;
+    }
+    // Used while dragging (one card or a selection), to highlight allowed / forbidden drop columns.
+    isAllowedDropTarget(columnKey) {
+        const sourceKey = this.draggedCard?.status ?? null;
+        if (columnKey === null || sourceKey === null || columnKey === sourceKey) {
+            return false;
+        }
+        if (this.allowedTargetsByWorkflowEtat === null) {
+            return true;
+        }
+        return this.allowedTargetsByWorkflowEtat.get(sourceKey)?.has(columnKey) ?? false;
+    }
     getWorkflowEtatClass(card) {
         const index = this.workFlowEtatNomLabels.findIndex(l => l.key === card.status);
         return `workflowEtatColor-${index >= 0 ? index : 'default'}`;
@@ -11220,6 +11335,8 @@ class TsiKanbanWorkflowEtatComponent extends AppBaseComponent {
         this.buttonClicked.emit({ field: mode, key: uid, selectKeyOnly: true });
     }
     async handlePageChange(page) {
+        // A reload replaces the cards: previously selected uids are no longer reliable.
+        this.clearSelection();
         if (page?.groups) {
             await this.handleGroupedPage(page);
             return;
@@ -11274,9 +11391,99 @@ class TsiKanbanWorkflowEtatComponent extends AppBaseComponent {
         this.cards = await this.mapItemsToCards(groups.flatMap(g => g.items ?? []));
         this.updateCardMap();
     }
+    startSelection(columnKey) {
+        this.clearSelection();
+        this.selectionColumnKey = columnKey;
+    }
+    removeFromSelection(uid) {
+        if (uid) {
+            this.selectedCardUids.delete(uid);
+        }
+        if (this.selectedCardUids.size === 0) {
+            this.clearSelection();
+        }
+    }
+    // Drop of a dragged selection: same guards as the single move, then one confirmation for the batch.
+    dropSelection(targetKey) {
+        if (targetKey === this.selectionColumnKey || !this.cardBusinessClass) {
+            return;
+        }
+        if (!this.isAllowedDropTarget(targetKey)) {
+            this._notificationService.error('shared_tsi_component_grid_kanban_workflowEtat_view_workflow_etat_suivant_error');
+            return;
+        }
+        const confirmMessage = this._localize.transform('shared_tsi_component_grid_kanban_workflowEtat_view_bulk_confirm')
+            .replace('{0}', `${this.selectedCount}`)
+            .replace('{1}', this.getLocalizedWorkflowEtat(this.selectionColumnKey))
+            .replace('{2}', this.getLocalizedWorkflowEtat(targetKey));
+        this._confirmationService.confirm(confirmMessage, undefined, (confirmed) => {
+            if (confirmed) {
+                this.executeBulkMove(targetKey);
+            }
+        });
+    }
+    executeBulkMove(targetKey) {
+        const request = new WorkflowEtatKanbanMultipleRequest();
+        request.businessClass = this.cardBusinessClass;
+        request.workFlowEtat = this.selectionColumnKey ?? undefined;
+        request.workFlowEtatSuivant = targetKey;
+        request.uidObjets = [...this.selectedCardUids];
+        request.discriminatorClassName = this.entityInfo?.discriminatorClassName;
+        request.discriminatorPropertyName = this.entityInfo?.discriminatorPropertyName;
+        request.discriminatorValue = this.descriminatorValue;
+        this.isLoading = true;
+        this._workflowConfigurationService.updateMultipleWorkflowEtatFromKanbanView(request).subscribe({
+            next: (response) => {
+                this.showBulkMoveFailures(response);
+                this.clearSelection();
+                this.isLoading = false;
+                this.callSearch.emit({ skipCount: this.first, maxResultCount: this.rows });
+            },
+            error: (error) => {
+                this._notificationService.error(error?.error);
+                this.isLoading = false;
+            }
+        });
+    }
+    // Only failures are reported; successfully moved cards need no feedback.
+    showBulkMoveFailures(response) {
+        if (!response?.failed?.length) {
+            return;
+        }
+        const titleByUid = new Map(this.cards.map(c => [c.uid, c.headerTitle]));
+        const failureLines = response.failed.map(f => `${titleByUid.get(f.uidObjet) || f.uidObjet} : ${this._localize.transform(f.errorMessage)}`);
+        this._messageService.error(`${response.failedCount} / ${response.total} ${this._localize.transform('shared_tsi_component_grid_kanban_workflowEtat_view_bulk_failed')}`, failureLines);
+    }
     async getEntityInfo() {
         this.entityInfo = await this._entityConfig.getEntityInfoFromCache(this.cardBusinessClass);
     }
+    get hasDiscriminator() {
+        return !!(this.entityInfo?.discriminatorClassName || this.entityInfo?.discriminatorPropertyName);
+    }
+    // Entity info first: it tells whether the workflow etats depend on a discriminator value.
+    async loadEntityInfoAndWorkflowEtats() {
+        if (!this._cardBusinessClass) {
+            return;
+        }
+        await this.getEntityInfo();
+        if (!this.hasDiscriminator) {
+            await this.loadWorkflowEtatsAndSuivants();
+        }
+        else if (this._descriminatorValue) {
+            await this.loadWorkflowEtatsAndSuivants(this._descriminatorValue);
+        }
+    }
+    async loadWorkflowEtatsAndSuivants(descriminatorValue) {
+        await Promise.all([
+            this.getWorkflowEtat(descriminatorValue),
+            this.getWorkflowEtatSuivants(descriminatorValue),
+        ]);
+        // A page may have arrived before the columns were known: re-bucket its cards into them.
+        const page = this.page$?.value ?? this._page;
+        if (page) {
+            await this.handlePageChange(page);
+        }
+    }
     getColKeys() {
         return {
             photo: this.entityInfo?.cardHeaderPhotoColumn?.toLowerCase() ?? '',
@@ -11345,13 +11552,26 @@ class TsiKanbanWorkflowEtatComponent extends AppBaseComponent {
             console.error('erreur getWorkflowEtatByClassNameAndDescriminator : ', error);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiKanbanWorkflowEtatComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: WorkflowConfigurationService }, { token: EntityConfigurationService }, { token: LocalizePipe }, { token: TsiNotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiKanbanWorkflowEtatComponent, selector: "Tsi-kanban-workflow-etat", inputs: { cardBusinessClass: "cardBusinessClass", header: "header", id: "id", page$: "page$", descriminatorValue: "descriminatorValue", summaryColumns: "summaryColumns", overflowActionsMenu: "overflowActionsMenu", selectKeyOnly: "selectKeyOnly", key: "key", page: "page" }, outputs: { buttonClicked: "buttonClicked", callSearch: "callSearch" }, usesInheritance: true, ngImport: i0, template: "<div class=\"card flex justify-content-center\">\r\n  <p-paginator\r\n    [first]=\"first\"\r\n    [rows]=\"rows\"\r\n    [totalRecords]=\"totalCount\"\r\n    [rowsPerPageOptions]=\"[1, 10, 25, 50]\"\r\n    (onPageChange)=\"onPageChange($event)\"\r\n    [showCurrentPageReport]=\"true\"\r\n    currentPageReportTemplate=\"{{ 'Showing' | localize }} {first} {{'to' | localize}} {last} {{ 'of' | localize }} {totalRecords}\">\r\n  </p-paginator>\r\n</div>\r\n\r\n<div class=\"kanban-board flex gap-4 overflow-auto\">\r\n  <div *ngFor=\"let workflowEtat of displayedWorkFlowEtatLabels; trackBy: trackByWorkflowEtat\"\r\n       class=\"kanban-column flex flex-column border-round surface-0 shadow-2\"\r\n       (dragover)=\"allowDrop($event)\"\r\n       (drop)=\"drop($event, workflowEtat.key)\">\r\n       \r\n    <div class=\"column-header p-3 border-bottom-1 surface-border font-semibold\">\r\n      {{ workflowEtat.localized }}\r\n      <span class=\"text-sm font-normal text-gray-500\">\r\n        ({{ getColumnCount(workflowEtat.key) }})\r\n      </span>\r\n      <div class=\"text-xs font-normal text-gray-500\" *ngIf=\"hasColumnSummaries\">\r\n        <div *ngFor=\"let sumCol of summaryColumns\" class=\"flex align-items-center gap-1\">\r\n          <span>{{ (sumCol.header ?? sumCol.field) | localize }}:</span>\r\n          <ng-container [ngSwitch]=\"sumCol.type\">\r\n            <Tsi-Currency-Societe-Display *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Currency-Societe-Display>\r\n            <Tsi-Integer-Display *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Integer-Display>\r\n            <Tsi-Rate-Display *ngSwitchCase=\"displayTypes.RATE_DISPLAY\"\r\n              [isFraction]=\"sumCol.isFraction ?? false\" [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Rate-Display>\r\n            <Tsi-Decimal-Display *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\"\r\n              [formatDecimal]=\"sumCol.formatDecimal\" [numOfDecimal]=\"sumCol.numOfDecimal\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Decimal-Display>\r\n            <Tsi-Currency-Other-Display *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\"\r\n              [currency]=\"sumCol.currencyOtherCode\" [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Currency-Other-Display>\r\n            <span *ngSwitchDefault>{{ getColumnSummaryValue(workflowEtat.key, sumCol.field) }}</span>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"column-cards flex-1 overflow-auto p-3\">\r\n      <div *ngFor=\"let card of cardMapByWorkflowEtat.get(workflowEtat.key); trackBy: trackByCard\"\r\n           class=\"kanban-card p-3 border-round bg-white mb-3 shadow-1\"\r\n           [ngClass]=\"getWorkflowEtatClass(card)\"\r\n           draggable=\"true\"\r\n           (dragstart)=\"dragStart($event, card)\"\r\n           (dragend)=\"dragEnd()\">\r\n           \r\n        <div class=\"font-bold mb-2\">{{ card.headerTitle }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">{{ card.description }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">\r\n          <span class=\"font-semibold\">{{ 'shared_tsi_component_grid_kanban_workflowEtat_view_workflow_etat' | localize }}:</span>\r\n          <span>{{ getLocalizedWorkflowEtat(card.status) }}</span>\r\n        </div>\r\n\r\n        <p-menu appendTo=\"body\" #menuMoreActions\r\n             [model]=\"overflowActionsMenu\"\r\n             [popup]=\"true\" styleClass=\"overflow-menu\"\r\n             [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n          <ng-template pTemplate=\"item\" let-menuItem>\r\n            <a pRipple class=\"flex align-items-center p-menuitem-link\"\r\n              [ngClass]=\"menuItem.styleClass\"\r\n              (click)=\"onOverflowActionClicked(card, menuItem)\">\r\n              <i *ngIf=\"menuItem.id === 'notes'\" class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                [ngClass]=\"menuItem.iconStyleClass\" pBadge severity=\"danger\"\r\n                [value]=\"card.fullRecord.notesCount\"\r\n                [badgeDisabled]=\"card.fullRecord.notesCount == null\" badgePosition=\"top-right\">\r\n              </i>\r\n\r\n              <i *ngIf=\"menuItem.id !== 'notes'\" class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                [ngClass]=\"menuItem.iconStyleClass\">\r\n              </i>\r\n\r\n              <span class=\"menu-label\">\r\n                {{ menuItem.label | localize }}\r\n              </span>\r\n            </a>\r\n          </ng-template>\r\n        </p-menu>\r\n\r\n        <div class=\"flex justify-content-end align-items-center mt-1 gap-2 p-0\">\r\n          <Tsi-Button [styleClass]=\"'p-button-rounded p-button-text p-0-5'\" type=\"button\" icon=\"pi pi-pencil\"\r\n            (click)=\"edit(card.uid)\">\r\n          </Tsi-Button>\r\n          <p-button type=\"button\" icon=\"pi pi-ellipsis-v\" styleClass=\"overflow-btn\"\r\n            (onClick)=\"overflowColumnClicked(menuMoreActions, $event, card)\">\r\n          </p-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"isLoading\">\r\n  <div class=\"spinner-wrapper\">\r\n    <app-spinner></app-spinner>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;padding:1rem}[draggable=true]{-webkit-user-select:none;user-select:none}.kanban-board{height:calc(100vh - 100px);padding:1rem}.kanban-column{width:300px;max-height:100%;display:flex;flex-direction:column;background-color:#f8f9fa}.column-header{font-size:1rem;font-weight:700;background-color:#fff;border-radius:6px 6px 0 0}.column-cards{overflow-y:auto;flex:1}.kanban-card{border-left:4px solid;cursor:move;transition:border-color .3s ease}.workflowEtatColor-0{border-left-color:#7269ef}.workflowEtatColor-1{border-left-color:#00c853}.workflowEtatColor-2{border-left-color:#ffab00}.workflowEtatColor-3{border-left-color:#d50000}.workflowEtatColor-4{border-left-color:#ff33a8}.workflowEtatColor-5{border-left-color:#3357ff}.workflowEtatColor-6{border-left-color:#ff8c00}.workflowEtatColor-7{border-left-color:indigo}.workflowEtatColor-8{border-left-color:#33ff57}.workflowEtatColor-9{border-left-color:#ff5733}.workflowEtatColor-10{border-left-color:khaki}[class*=workflowEtatColor-]{border-left-style:solid;border-left-width:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i2$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i11$2.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["currency", "inputData"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    async getWorkflowEtatSuivants(descriminatorValue) {
+        if (!this.cardBusinessClass) {
+            return;
+        }
+        try {
+            const response = await firstValueFrom(this._workflowConfigurationService.getWorkflowEtatSuivantsByClassNameAndDescriminator(this.cardBusinessClass, descriminatorValue));
+            this.allowedTargetsByWorkflowEtat = new Map(Object.entries(response ?? {})
+                .map(([workflowEtat, suivants]) => [workflowEtat, new Set(suivants)]));
+        }
+        catch (error) {
+            console.error('erreur getWorkflowEtatSuivantsByClassNameAndDescriminator : ', error);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiKanbanWorkflowEtatComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: WorkflowConfigurationService }, { token: EntityConfigurationService }, { token: LocalizePipe }, { token: TsiNotificationService }, { token: TsiConfirmationService }, { token: TsiMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiKanbanWorkflowEtatComponent, selector: "Tsi-kanban-workflow-etat", inputs: { cardBusinessClass: "cardBusinessClass", header: "header", id: "id", page$: "page$", descriminatorValue: "descriminatorValue", summaryColumns: "summaryColumns", overflowActionsMenu: "overflowActionsMenu", selectKeyOnly: "selectKeyOnly", key: "key", page: "page" }, outputs: { buttonClicked: "buttonClicked", callSearch: "callSearch" }, viewQueries: [{ propertyName: "bulkDragPreview", first: true, predicate: ["bulkDragPreview"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"card flex justify-content-center\">\r\n  <p-paginator [first]=\"first\" [rows]=\"rows\" [totalRecords]=\"totalCount\" [rowsPerPageOptions]=\"[1, 10, 25, 50]\"\r\n    (onPageChange)=\"onPageChange($event)\" [showCurrentPageReport]=\"true\"\r\n    currentPageReportTemplate=\"{{ 'Showing' | localize }} {first} {{'to' | localize}} {last} {{ 'of' | localize }} {totalRecords}\">\r\n  </p-paginator>\r\n</div>\r\n\r\n<div *ngIf=\"selectedCount > 0\" class=\"kanban-bulk-bar flex flex-wrap align-items-center gap-3 p-2 mx-3 border-round\">\r\n  <span class=\"font-semibold\">\r\n    {{ selectedCount }} {{ 'shared_tsi_component_grid_kanban_workflowEtat_view_bulk_selected' | localize }}\r\n  </span>\r\n  <span class=\"text-sm text-gray-600\">\r\n    <i class=\"pi pi-arrows-h mr-1\"></i>{{ 'shared_tsi_component_grid_kanban_workflowEtat_view_bulk_drag_hint' | localize\r\n    }}\r\n  </span>\r\n  <p-button icon=\"pi pi-times\" styleClass=\"p-button-text\"\r\n    [label]=\"'shared_tsi_component_grid_kanban_workflowEtat_view_bulk_clear_selection' | localize\"\r\n    [disabled]=\"isLoading\" (onClick)=\"clearSelection()\">\r\n  </p-button>\r\n</div>\r\n\r\n<div class=\"kanban-board flex gap-4 overflow-auto\">\r\n  <div *ngFor=\"let workflowEtat of displayedWorkFlowEtatLabels; trackBy: trackByWorkflowEtat\"\r\n    class=\"kanban-column flex flex-column border-round surface-0 shadow-2\"\r\n    [class.kanban-column-drop-allowed]=\"draggedCard && isAllowedDropTarget(workflowEtat.key)\"\r\n    [class.kanban-column-drop-forbidden]=\"draggedCard && workflowEtat.key !== draggedCard.status && !isAllowedDropTarget(workflowEtat.key)\"\r\n    (dragover)=\"allowDrop($event)\" (drop)=\"drop($event, workflowEtat.key)\">\r\n\r\n    <div class=\"column-header p-3 border-bottom-1 surface-border font-semibold\">\r\n      {{ workflowEtat.localized }}\r\n      <span class=\"text-sm font-normal text-gray-500\">\r\n        ({{ getColumnCount(workflowEtat.key) }})\r\n      </span>\r\n      <div *ngIf=\"workflowEtat.key !== null && selectionColumnKey === workflowEtat.key\"\r\n        class=\"flex align-items-center gap-2 mt-2 text-sm font-normal\">\r\n        <p-checkbox [binary]=\"true\" [ngModel]=\"isColumnPageFullySelected(workflowEtat.key)\"\r\n          (onChange)=\"toggleSelectAllColumnPage(workflowEtat.key)\" [disabled]=\"isLoading\">\r\n        </p-checkbox>\r\n        <span>{{ 'shared_tsi_component_grid_kanban_workflowEtat_view_bulk_select_all_page' | localize }}</span>\r\n      </div>\r\n      <div class=\"text-xs font-normal text-gray-500\" *ngIf=\"hasColumnSummaries\">\r\n        <div *ngFor=\"let sumCol of summaryColumns\" class=\"flex align-items-center gap-1\">\r\n          <span>{{ (sumCol.header ?? sumCol.field) | localize }}:</span>\r\n          <ng-container [ngSwitch]=\"sumCol.type\">\r\n            <Tsi-Currency-Societe-Display *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Currency-Societe-Display>\r\n            <Tsi-Integer-Display *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Integer-Display>\r\n            <Tsi-Rate-Display *ngSwitchCase=\"displayTypes.RATE_DISPLAY\" [isFraction]=\"sumCol.isFraction ?? false\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Rate-Display>\r\n            <Tsi-Decimal-Display *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\" [formatDecimal]=\"sumCol.formatDecimal\"\r\n              [numOfDecimal]=\"sumCol.numOfDecimal\" [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Decimal-Display>\r\n            <Tsi-Currency-Other-Display *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\"\r\n              [currency]=\"sumCol.currencyOtherCode\" [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Currency-Other-Display>\r\n            <span *ngSwitchDefault>{{ getColumnSummaryValue(workflowEtat.key, sumCol.field) }}</span>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"column-cards flex-1 overflow-auto p-3\">\r\n      <div *ngFor=\"let card of cardMapByWorkflowEtat.get(workflowEtat.key); trackBy: trackByCard\"\r\n        class=\"kanban-card p-3 border-round bg-white mb-3 shadow-1\" [ngClass]=\"getWorkflowEtatClass(card)\"\r\n        [class.kanban-card-selected]=\"isCardSelected(card)\"\r\n        [class.kanban-card-drag-source]=\"isBulkDragging && isCardSelected(card)\" draggable=\"true\"\r\n        (dragstart)=\"dragStart($event, card)\" (dragend)=\"dragEnd()\">\r\n\r\n        <div class=\"flex align-items-center gap-2 mb-2\">\r\n          <p-checkbox *ngIf=\"workflowEtat.key !== null\" [binary]=\"true\" [ngModel]=\"isCardSelected(card)\"\r\n            (onChange)=\"toggleCardSelection(workflowEtat.key, card)\" [disabled]=\"isLoading\">\r\n          </p-checkbox>\r\n          <div class=\"font-bold\">{{ card.headerTitle }}</div>\r\n        </div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">{{ card.description }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">\r\n          <span class=\"font-semibold\">{{ 'shared_tsi_component_grid_kanban_workflowEtat_view_workflow_etat' | localize\r\n            }}:</span>\r\n          <span>{{ getLocalizedWorkflowEtat(card.status) }}</span>\r\n        </div>\r\n\r\n        <p-menu appendTo=\"body\" #menuMoreActions [model]=\"overflowActionsMenu\" [popup]=\"true\" styleClass=\"overflow-menu\"\r\n          [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n          <ng-template pTemplate=\"item\" let-menuItem>\r\n            <a pRipple class=\"flex align-items-center p-menuitem-link\" [ngClass]=\"menuItem.styleClass\"\r\n              (click)=\"onOverflowActionClicked(card, menuItem)\">\r\n              <i *ngIf=\"menuItem.id === 'notes'\" class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                [ngClass]=\"menuItem.iconStyleClass\" pBadge severity=\"danger\" [value]=\"card.fullRecord.notesCount\"\r\n                [badgeDisabled]=\"card.fullRecord.notesCount == null\" badgePosition=\"top-right\">\r\n              </i>\r\n\r\n              <i *ngIf=\"menuItem.id !== 'notes'\" class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                [ngClass]=\"menuItem.iconStyleClass\">\r\n              </i>\r\n\r\n              <span class=\"menu-label\">\r\n                {{ menuItem.label | localize }}\r\n              </span>\r\n            </a>\r\n          </ng-template>\r\n        </p-menu>\r\n\r\n        <div class=\"flex justify-content-end align-items-center mt-1 gap-2 p-0\">\r\n          <Tsi-Button [styleClass]=\"'p-button-rounded p-button-text p-0-5'\" type=\"button\" icon=\"pi pi-pencil\"\r\n            (click)=\"edit(card.uid)\">\r\n          </Tsi-Button>\r\n          <p-button type=\"button\" icon=\"pi pi-ellipsis-v\" styleClass=\"overflow-btn\"\r\n            (onClick)=\"overflowColumnClicked(menuMoreActions, $event, card)\">\r\n          </p-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div #bulkDragPreview *ngIf=\"selectedCount > 1\" class=\"kanban-bulk-drag-preview\" aria-hidden=\"true\">\r\n  <div class=\"kanban-bulk-drag-preview-badge\">\r\n    {{ selectedCount }} {{ 'shared_tsi_component_grid_kanban_workflowEtat_view_bulk_selected' | localize }}\r\n  </div>\r\n  <div *ngFor=\"let previewCard of selectedCardsPreview\" class=\"kanban-bulk-drag-preview-card\"\r\n    [ngClass]=\"getWorkflowEtatClass(previewCard)\">\r\n    {{ previewCard.headerTitle }}\r\n  </div>\r\n  <div *ngIf=\"selectedCount > selectedCardsPreview.length\" class=\"kanban-bulk-drag-preview-more\">\r\n    + {{ selectedCount - selectedCardsPreview.length }}\r\n  </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"isLoading\">\r\n  <div class=\"spinner-wrapper\">\r\n    <app-spinner></app-spinner>\r\n  </div>\r\n</div>", styles: [":host{display:block;padding:1rem}[draggable=true]{-webkit-user-select:none;user-select:none}.kanban-board{height:calc(100vh - 100px);padding:1rem}.kanban-column{width:300px;max-height:100%;display:flex;flex-direction:column;background-color:#f8f9fa}.column-header{font-size:1rem;font-weight:700;background-color:#fff;border-radius:6px 6px 0 0}.column-cards{overflow-y:auto;flex:1}.kanban-card{border-left:4px solid;cursor:move;transition:border-color .3s ease}.kanban-card-selected{outline:2px solid var(--primary-color);outline-offset:-2px}.kanban-card-drag-source{opacity:.4}.kanban-bulk-drag-preview{position:fixed;top:-1000px;left:-1000px;width:260px;padding:.5rem;pointer-events:none}.kanban-bulk-drag-preview-badge{display:inline-block;margin-bottom:.5rem;padding:.25rem .75rem;border-radius:1rem;background-color:var(--primary-color);color:var(--primary-color-text);font-weight:600;font-size:.85rem}.kanban-bulk-drag-preview-card{position:relative;padding:.75rem;border-radius:6px;background-color:#fff;box-shadow:0 2px 6px #0003;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kanban-bulk-drag-preview-card+.kanban-bulk-drag-preview-card{margin-top:-.75rem}.kanban-bulk-drag-preview-more{margin-top:.5rem;font-size:.85rem;color:var(--text-color-secondary)}.kanban-bulk-bar{background-color:var(--surface-100)}.kanban-column-drop-allowed{outline:2px dashed var(--green-500);outline-offset:-2px}.kanban-column-drop-forbidden{opacity:.5}.workflowEtatColor-0{border-left-color:#7269ef}.workflowEtatColor-1{border-left-color:#00c853}.workflowEtatColor-2{border-left-color:#ffab00}.workflowEtatColor-3{border-left-color:#d50000}.workflowEtatColor-4{border-left-color:#ff33a8}.workflowEtatColor-5{border-left-color:#3357ff}.workflowEtatColor-6{border-left-color:#ff8c00}.workflowEtatColor-7{border-left-color:indigo}.workflowEtatColor-8{border-left-color:#33ff57}.workflowEtatColor-9{border-left-color:#ff5733}.workflowEtatColor-10{border-left-color:khaki}[class*=workflowEtatColor-]{border-left-style:solid;border-left-width:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i2$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i11$2.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["currency", "inputData"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiKanbanWorkflowEtatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Tsi-kanban-workflow-etat', template: "<div class=\"card flex justify-content-center\">\r\n  <p-paginator\r\n    [first]=\"first\"\r\n    [rows]=\"rows\"\r\n    [totalRecords]=\"totalCount\"\r\n    [rowsPerPageOptions]=\"[1, 10, 25, 50]\"\r\n    (onPageChange)=\"onPageChange($event)\"\r\n    [showCurrentPageReport]=\"true\"\r\n    currentPageReportTemplate=\"{{ 'Showing' | localize }} {first} {{'to' | localize}} {last} {{ 'of' | localize }} {totalRecords}\">\r\n  </p-paginator>\r\n</div>\r\n\r\n<div class=\"kanban-board flex gap-4 overflow-auto\">\r\n  <div *ngFor=\"let workflowEtat of displayedWorkFlowEtatLabels; trackBy: trackByWorkflowEtat\"\r\n       class=\"kanban-column flex flex-column border-round surface-0 shadow-2\"\r\n       (dragover)=\"allowDrop($event)\"\r\n       (drop)=\"drop($event, workflowEtat.key)\">\r\n       \r\n    <div class=\"column-header p-3 border-bottom-1 surface-border font-semibold\">\r\n      {{ workflowEtat.localized }}\r\n      <span class=\"text-sm font-normal text-gray-500\">\r\n        ({{ getColumnCount(workflowEtat.key) }})\r\n      </span>\r\n      <div class=\"text-xs font-normal text-gray-500\" *ngIf=\"hasColumnSummaries\">\r\n        <div *ngFor=\"let sumCol of summaryColumns\" class=\"flex align-items-center gap-1\">\r\n          <span>{{ (sumCol.header ?? sumCol.field) | localize }}:</span>\r\n          <ng-container [ngSwitch]=\"sumCol.type\">\r\n            <Tsi-Currency-Societe-Display *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Currency-Societe-Display>\r\n            <Tsi-Integer-Display *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Integer-Display>\r\n            <Tsi-Rate-Display *ngSwitchCase=\"displayTypes.RATE_DISPLAY\"\r\n              [isFraction]=\"sumCol.isFraction ?? false\" [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Rate-Display>\r\n            <Tsi-Decimal-Display *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\"\r\n              [formatDecimal]=\"sumCol.formatDecimal\" [numOfDecimal]=\"sumCol.numOfDecimal\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Decimal-Display>\r\n            <Tsi-Currency-Other-Display *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\"\r\n              [currency]=\"sumCol.currencyOtherCode\" [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Currency-Other-Display>\r\n            <span *ngSwitchDefault>{{ getColumnSummaryValue(workflowEtat.key, sumCol.field) }}</span>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"column-cards flex-1 overflow-auto p-3\">\r\n      <div *ngFor=\"let card of cardMapByWorkflowEtat.get(workflowEtat.key); trackBy: trackByCard\"\r\n           class=\"kanban-card p-3 border-round bg-white mb-3 shadow-1\"\r\n           [ngClass]=\"getWorkflowEtatClass(card)\"\r\n           draggable=\"true\"\r\n           (dragstart)=\"dragStart($event, card)\"\r\n           (dragend)=\"dragEnd()\">\r\n           \r\n        <div class=\"font-bold mb-2\">{{ card.headerTitle }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">{{ card.description }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">\r\n          <span class=\"font-semibold\">{{ 'shared_tsi_component_grid_kanban_workflowEtat_view_workflow_etat' | localize }}:</span>\r\n          <span>{{ getLocalizedWorkflowEtat(card.status) }}</span>\r\n        </div>\r\n\r\n        <p-menu appendTo=\"body\" #menuMoreActions\r\n             [model]=\"overflowActionsMenu\"\r\n             [popup]=\"true\" styleClass=\"overflow-menu\"\r\n             [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n          <ng-template pTemplate=\"item\" let-menuItem>\r\n            <a pRipple class=\"flex align-items-center p-menuitem-link\"\r\n              [ngClass]=\"menuItem.styleClass\"\r\n              (click)=\"onOverflowActionClicked(card, menuItem)\">\r\n              <i *ngIf=\"menuItem.id === 'notes'\" class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                [ngClass]=\"menuItem.iconStyleClass\" pBadge severity=\"danger\"\r\n                [value]=\"card.fullRecord.notesCount\"\r\n                [badgeDisabled]=\"card.fullRecord.notesCount == null\" badgePosition=\"top-right\">\r\n              </i>\r\n\r\n              <i *ngIf=\"menuItem.id !== 'notes'\" class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                [ngClass]=\"menuItem.iconStyleClass\">\r\n              </i>\r\n\r\n              <span class=\"menu-label\">\r\n                {{ menuItem.label | localize }}\r\n              </span>\r\n            </a>\r\n          </ng-template>\r\n        </p-menu>\r\n\r\n        <div class=\"flex justify-content-end align-items-center mt-1 gap-2 p-0\">\r\n          <Tsi-Button [styleClass]=\"'p-button-rounded p-button-text p-0-5'\" type=\"button\" icon=\"pi pi-pencil\"\r\n            (click)=\"edit(card.uid)\">\r\n          </Tsi-Button>\r\n          <p-button type=\"button\" icon=\"pi pi-ellipsis-v\" styleClass=\"overflow-btn\"\r\n            (onClick)=\"overflowColumnClicked(menuMoreActions, $event, card)\">\r\n          </p-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"isLoading\">\r\n  <div class=\"spinner-wrapper\">\r\n    <app-spinner></app-spinner>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;padding:1rem}[draggable=true]{-webkit-user-select:none;user-select:none}.kanban-board{height:calc(100vh - 100px);padding:1rem}.kanban-column{width:300px;max-height:100%;display:flex;flex-direction:column;background-color:#f8f9fa}.column-header{font-size:1rem;font-weight:700;background-color:#fff;border-radius:6px 6px 0 0}.column-cards{overflow-y:auto;flex:1}.kanban-card{border-left:4px solid;cursor:move;transition:border-color .3s ease}.workflowEtatColor-0{border-left-color:#7269ef}.workflowEtatColor-1{border-left-color:#00c853}.workflowEtatColor-2{border-left-color:#ffab00}.workflowEtatColor-3{border-left-color:#d50000}.workflowEtatColor-4{border-left-color:#ff33a8}.workflowEtatColor-5{border-left-color:#3357ff}.workflowEtatColor-6{border-left-color:#ff8c00}.workflowEtatColor-7{border-left-color:indigo}.workflowEtatColor-8{border-left-color:#33ff57}.workflowEtatColor-9{border-left-color:#ff5733}.workflowEtatColor-10{border-left-color:khaki}[class*=workflowEtatColor-]{border-left-style:solid;border-left-width:4px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: WorkflowConfigurationService }, { type: EntityConfigurationService }, { type: LocalizePipe }, { type: TsiNotificationService }], propDecorators: { buttonClicked: [{
+            args: [{ selector: 'Tsi-kanban-workflow-etat', template: "<div class=\"card flex justify-content-center\">\r\n  <p-paginator [first]=\"first\" [rows]=\"rows\" [totalRecords]=\"totalCount\" [rowsPerPageOptions]=\"[1, 10, 25, 50]\"\r\n    (onPageChange)=\"onPageChange($event)\" [showCurrentPageReport]=\"true\"\r\n    currentPageReportTemplate=\"{{ 'Showing' | localize }} {first} {{'to' | localize}} {last} {{ 'of' | localize }} {totalRecords}\">\r\n  </p-paginator>\r\n</div>\r\n\r\n<div *ngIf=\"selectedCount > 0\" class=\"kanban-bulk-bar flex flex-wrap align-items-center gap-3 p-2 mx-3 border-round\">\r\n  <span class=\"font-semibold\">\r\n    {{ selectedCount }} {{ 'shared_tsi_component_grid_kanban_workflowEtat_view_bulk_selected' | localize }}\r\n  </span>\r\n  <span class=\"text-sm text-gray-600\">\r\n    <i class=\"pi pi-arrows-h mr-1\"></i>{{ 'shared_tsi_component_grid_kanban_workflowEtat_view_bulk_drag_hint' | localize\r\n    }}\r\n  </span>\r\n  <p-button icon=\"pi pi-times\" styleClass=\"p-button-text\"\r\n    [label]=\"'shared_tsi_component_grid_kanban_workflowEtat_view_bulk_clear_selection' | localize\"\r\n    [disabled]=\"isLoading\" (onClick)=\"clearSelection()\">\r\n  </p-button>\r\n</div>\r\n\r\n<div class=\"kanban-board flex gap-4 overflow-auto\">\r\n  <div *ngFor=\"let workflowEtat of displayedWorkFlowEtatLabels; trackBy: trackByWorkflowEtat\"\r\n    class=\"kanban-column flex flex-column border-round surface-0 shadow-2\"\r\n    [class.kanban-column-drop-allowed]=\"draggedCard && isAllowedDropTarget(workflowEtat.key)\"\r\n    [class.kanban-column-drop-forbidden]=\"draggedCard && workflowEtat.key !== draggedCard.status && !isAllowedDropTarget(workflowEtat.key)\"\r\n    (dragover)=\"allowDrop($event)\" (drop)=\"drop($event, workflowEtat.key)\">\r\n\r\n    <div class=\"column-header p-3 border-bottom-1 surface-border font-semibold\">\r\n      {{ workflowEtat.localized }}\r\n      <span class=\"text-sm font-normal text-gray-500\">\r\n        ({{ getColumnCount(workflowEtat.key) }})\r\n      </span>\r\n      <div *ngIf=\"workflowEtat.key !== null && selectionColumnKey === workflowEtat.key\"\r\n        class=\"flex align-items-center gap-2 mt-2 text-sm font-normal\">\r\n        <p-checkbox [binary]=\"true\" [ngModel]=\"isColumnPageFullySelected(workflowEtat.key)\"\r\n          (onChange)=\"toggleSelectAllColumnPage(workflowEtat.key)\" [disabled]=\"isLoading\">\r\n        </p-checkbox>\r\n        <span>{{ 'shared_tsi_component_grid_kanban_workflowEtat_view_bulk_select_all_page' | localize }}</span>\r\n      </div>\r\n      <div class=\"text-xs font-normal text-gray-500\" *ngIf=\"hasColumnSummaries\">\r\n        <div *ngFor=\"let sumCol of summaryColumns\" class=\"flex align-items-center gap-1\">\r\n          <span>{{ (sumCol.header ?? sumCol.field) | localize }}:</span>\r\n          <ng-container [ngSwitch]=\"sumCol.type\">\r\n            <Tsi-Currency-Societe-Display *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Currency-Societe-Display>\r\n            <Tsi-Integer-Display *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Integer-Display>\r\n            <Tsi-Rate-Display *ngSwitchCase=\"displayTypes.RATE_DISPLAY\" [isFraction]=\"sumCol.isFraction ?? false\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Rate-Display>\r\n            <Tsi-Decimal-Display *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\" [formatDecimal]=\"sumCol.formatDecimal\"\r\n              [numOfDecimal]=\"sumCol.numOfDecimal\" [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Decimal-Display>\r\n            <Tsi-Currency-Other-Display *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\"\r\n              [currency]=\"sumCol.currencyOtherCode\" [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Currency-Other-Display>\r\n            <span *ngSwitchDefault>{{ getColumnSummaryValue(workflowEtat.key, sumCol.field) }}</span>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"column-cards flex-1 overflow-auto p-3\">\r\n      <div *ngFor=\"let card of cardMapByWorkflowEtat.get(workflowEtat.key); trackBy: trackByCard\"\r\n        class=\"kanban-card p-3 border-round bg-white mb-3 shadow-1\" [ngClass]=\"getWorkflowEtatClass(card)\"\r\n        [class.kanban-card-selected]=\"isCardSelected(card)\"\r\n        [class.kanban-card-drag-source]=\"isBulkDragging && isCardSelected(card)\" draggable=\"true\"\r\n        (dragstart)=\"dragStart($event, card)\" (dragend)=\"dragEnd()\">\r\n\r\n        <div class=\"flex align-items-center gap-2 mb-2\">\r\n          <p-checkbox *ngIf=\"workflowEtat.key !== null\" [binary]=\"true\" [ngModel]=\"isCardSelected(card)\"\r\n            (onChange)=\"toggleCardSelection(workflowEtat.key, card)\" [disabled]=\"isLoading\">\r\n          </p-checkbox>\r\n          <div class=\"font-bold\">{{ card.headerTitle }}</div>\r\n        </div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">{{ card.description }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">\r\n          <span class=\"font-semibold\">{{ 'shared_tsi_component_grid_kanban_workflowEtat_view_workflow_etat' | localize\r\n            }}:</span>\r\n          <span>{{ getLocalizedWorkflowEtat(card.status) }}</span>\r\n        </div>\r\n\r\n        <p-menu appendTo=\"body\" #menuMoreActions [model]=\"overflowActionsMenu\" [popup]=\"true\" styleClass=\"overflow-menu\"\r\n          [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n          <ng-template pTemplate=\"item\" let-menuItem>\r\n            <a pRipple class=\"flex align-items-center p-menuitem-link\" [ngClass]=\"menuItem.styleClass\"\r\n              (click)=\"onOverflowActionClicked(card, menuItem)\">\r\n              <i *ngIf=\"menuItem.id === 'notes'\" class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                [ngClass]=\"menuItem.iconStyleClass\" pBadge severity=\"danger\" [value]=\"card.fullRecord.notesCount\"\r\n                [badgeDisabled]=\"card.fullRecord.notesCount == null\" badgePosition=\"top-right\">\r\n              </i>\r\n\r\n              <i *ngIf=\"menuItem.id !== 'notes'\" class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                [ngClass]=\"menuItem.iconStyleClass\">\r\n              </i>\r\n\r\n              <span class=\"menu-label\">\r\n                {{ menuItem.label | localize }}\r\n              </span>\r\n            </a>\r\n          </ng-template>\r\n        </p-menu>\r\n\r\n        <div class=\"flex justify-content-end align-items-center mt-1 gap-2 p-0\">\r\n          <Tsi-Button [styleClass]=\"'p-button-rounded p-button-text p-0-5'\" type=\"button\" icon=\"pi pi-pencil\"\r\n            (click)=\"edit(card.uid)\">\r\n          </Tsi-Button>\r\n          <p-button type=\"button\" icon=\"pi pi-ellipsis-v\" styleClass=\"overflow-btn\"\r\n            (onClick)=\"overflowColumnClicked(menuMoreActions, $event, card)\">\r\n          </p-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div #bulkDragPreview *ngIf=\"selectedCount > 1\" class=\"kanban-bulk-drag-preview\" aria-hidden=\"true\">\r\n  <div class=\"kanban-bulk-drag-preview-badge\">\r\n    {{ selectedCount }} {{ 'shared_tsi_component_grid_kanban_workflowEtat_view_bulk_selected' | localize }}\r\n  </div>\r\n  <div *ngFor=\"let previewCard of selectedCardsPreview\" class=\"kanban-bulk-drag-preview-card\"\r\n    [ngClass]=\"getWorkflowEtatClass(previewCard)\">\r\n    {{ previewCard.headerTitle }}\r\n  </div>\r\n  <div *ngIf=\"selectedCount > selectedCardsPreview.length\" class=\"kanban-bulk-drag-preview-more\">\r\n    + {{ selectedCount - selectedCardsPreview.length }}\r\n  </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"isLoading\">\r\n  <div class=\"spinner-wrapper\">\r\n    <app-spinner></app-spinner>\r\n  </div>\r\n</div>", styles: [":host{display:block;padding:1rem}[draggable=true]{-webkit-user-select:none;user-select:none}.kanban-board{height:calc(100vh - 100px);padding:1rem}.kanban-column{width:300px;max-height:100%;display:flex;flex-direction:column;background-color:#f8f9fa}.column-header{font-size:1rem;font-weight:700;background-color:#fff;border-radius:6px 6px 0 0}.column-cards{overflow-y:auto;flex:1}.kanban-card{border-left:4px solid;cursor:move;transition:border-color .3s ease}.kanban-card-selected{outline:2px solid var(--primary-color);outline-offset:-2px}.kanban-card-drag-source{opacity:.4}.kanban-bulk-drag-preview{position:fixed;top:-1000px;left:-1000px;width:260px;padding:.5rem;pointer-events:none}.kanban-bulk-drag-preview-badge{display:inline-block;margin-bottom:.5rem;padding:.25rem .75rem;border-radius:1rem;background-color:var(--primary-color);color:var(--primary-color-text);font-weight:600;font-size:.85rem}.kanban-bulk-drag-preview-card{position:relative;padding:.75rem;border-radius:6px;background-color:#fff;box-shadow:0 2px 6px #0003;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kanban-bulk-drag-preview-card+.kanban-bulk-drag-preview-card{margin-top:-.75rem}.kanban-bulk-drag-preview-more{margin-top:.5rem;font-size:.85rem;color:var(--text-color-secondary)}.kanban-bulk-bar{background-color:var(--surface-100)}.kanban-column-drop-allowed{outline:2px dashed var(--green-500);outline-offset:-2px}.kanban-column-drop-forbidden{opacity:.5}.workflowEtatColor-0{border-left-color:#7269ef}.workflowEtatColor-1{border-left-color:#00c853}.workflowEtatColor-2{border-left-color:#ffab00}.workflowEtatColor-3{border-left-color:#d50000}.workflowEtatColor-4{border-left-color:#ff33a8}.workflowEtatColor-5{border-left-color:#3357ff}.workflowEtatColor-6{border-left-color:#ff8c00}.workflowEtatColor-7{border-left-color:indigo}.workflowEtatColor-8{border-left-color:#33ff57}.workflowEtatColor-9{border-left-color:#ff5733}.workflowEtatColor-10{border-left-color:khaki}[class*=workflowEtatColor-]{border-left-style:solid;border-left-width:4px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: WorkflowConfigurationService }, { type: EntityConfigurationService }, { type: LocalizePipe }, { type: TsiNotificationService }, { type: TsiConfirmationService }, { type: TsiMessageService }], propDecorators: { buttonClicked: [{
                 type: Output
             }], callSearch: [{
                 type: Output
@@ -11375,6 +11595,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], page: [{
                 type: Input
+            }], bulkDragPreview: [{
+                type: ViewChild,
+                args: ['bulkDragPreview']
             }] } });
 
 class DisplayNestedPropComponent {
@@ -12077,25 +12300,18 @@ class TsiGenericGridComponent {
             }
         });
     }
+    /** Fixed width of the multiple-selection checkbox column (ngStyle ignores `!important`). */
+    static { this.CHECKBOX_COL_WIDTH_PX = 40; }
     getCheckboxStyle() {
-        if (this.isRtlMode) {
-            return {
-                right: `0px`,
-                position: 'sticky',
-                backgroundColor: 'white',
-                "width": '2.5rem !important',
-                "min-width": '2.5rem !important',
-            };
-        }
-        else {
-            return {
-                left: `0px`,
-                position: 'sticky',
-                backgroundColor: 'white',
-                "width": '2.5rem !important',
-                "min-width": '2.5rem !important',
-            };
-        }
+        const width = `${TsiGenericGridComponent.CHECKBOX_COL_WIDTH_PX}px`;
+        return {
+            [this.isRtlMode ? 'right' : 'left']: `0px`,
+            position: 'sticky',
+            backgroundColor: 'white',
+            "width": width,
+            "min-width": width,
+            "max-width": width,
+        };
     }
     getTheStyle(column, columnOrder) {
         const START = 9;
@@ -12107,7 +12323,7 @@ class TsiGenericGridComponent {
         if (column.isFrozen == true) {
             let elementPosition = 0;
             if (this.selectionMode == this.multipleGridSelectionMode) {
-                elementPosition = 30 + elementPosition + (columnOrder ?? 0) * 60;
+                elementPosition = TsiGenericGridComponent.CHECKBOX_COL_WIDTH_PX + (columnOrder ?? 0) * GAP;
             }
             else {
                 if (columnOrder === 0) {
@@ -12118,24 +12334,11 @@ class TsiGenericGridComponent {
                 }
                 elementPosition = START + FIRST_GAP + (columnOrder - 1) * GAP;
             }
-            if (this.isRtlMode) {
-                return {
-                    right: `${elementPosition}px`,
-                    position: 'sticky',
-                    backgroundColor: 'white',
-                    "width": '2.5rem !important',
-                    "min-width": '2.5rem !important',
-                };
-            }
-            else {
-                return {
-                    left: `${elementPosition}px`,
-                    position: 'sticky',
-                    backgroundColor: 'white',
-                    "width": '2.5rem !important',
-                    "min-width": '2.5rem !important',
-                };
-            }
+            return {
+                [this.isRtlMode ? 'right' : 'left']: `${elementPosition}px`,
+                position: 'sticky',
+                backgroundColor: 'white',
+            };
         }
         return {};
     }
@@ -13311,7 +13514,7 @@ class TsiGenericGridComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiGenericGridComponent, deps: [{ token: StatusColorService }, { token: GenericFichierService }, { token: HtmlTemplateGeneratorService }, { token: i1$2.DatePipe }, { token: TsiNotificationService }, { token: LocalizePipe }, { token: LayoutHelperService }, { token: LayoutService }, { token: i2$1.PrimeNGConfig }, { token: AppSettingsService }, { token: ErrorResponseManagerService }, { token: i0.EnvironmentInjector }, { token: i1$3.DynamicDialogConfig }, { token: i1$3.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: { cudComponent: "cudComponent", modalSize: "modalSize", showInfoButton: "showInfoButton", showDownloadButton: "showDownloadButton", showUploadButton: "showUploadButton", showNoteButton: "showNoteButton", showActionButton: "showActionButton", sizingMode: "sizingMode", formName: "formName", id: "id", pagedRequest: "pagedRequest", configuration: "configuration", page: "page", key: "key", columns: "columns", isSearchButtonDisabled: "isSearchButtonDisabled", filteredColumns: "filteredColumns", gridData: "gridData", isTableLoading: "isTableLoading", parent: "parent", showSearchBox: "showSearchBox", showActionColumn: "showActionColumn", showHeaderFilters: "showHeaderFilters", showFilterButton: "showFilterButton", isGridDataPagedInApi: "isGridDataPagedInApi", header: "header", ShowFilterColumns: "ShowFilterColumns", showImportExportButton: "showImportExportButton", crudService: "crudService", searchFields: "searchFields", sortMode: "sortMode", filtersHtmlTemplate: "filtersHtmlTemplate", presentationSettings: "presentationSettings", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", searchOnInit: "searchOnInit", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showSearchField: "showSearchField", showCalenderView: "showCalenderView", calenderSchema: "calenderSchema", showCardView: "showCardView", showKanbanView: "showKanbanView", showKanbanViewOfWorkFlowEtat: "showKanbanViewOfWorkFlowEtat", page$: "page$", checkedByField: "checkedByField", selectAll: "selectAll", targetBusinessClass: "targetBusinessClass", descriminatorValue: "descriminatorValue", businessClass: "businessClass", groupBy: "groupBy", entityInfo: "entityInfo" }, outputs: { onSave: "onSave", editRow: "editRow", deleteRow: "deleteRow", load: "load", buttonColumnClicked: "buttonColumnClicked", filtersHtmlTemplateChange: "filtersHtmlTemplateChange", selectedItemsChange: "selectedItemsChange", searchFieldsValueChanged: "searchFieldsValueChanged", calendarEventClick: "calendarEventClick", statusFilterChanged: "statusFilterChanged" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableHeaderCheckbox", first: true, predicate: ["tableHeaderCheckbox"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n\r\n  <div class=\"col-12\" [@slideInOut]=\"showSearchField ? 'in' : 'out'\" *ngIf=\"showGlobalSearch\">\r\n    <tsi-search-box \r\n      [isRtlMode]=\"isRtlMode\" \r\n      [(searchFields)]=\"searchFields\" \r\n      [businessClass]=\"businessClass\"\r\n      [entityInfo]=\"entityInfo\"\r\n      [statusMetadata]=\"statusMetadata\"\r\n      [descriminatorValue]=\"descriminatorValue\"\r\n      (searchFieldsChange)=\"searchFieldsValueChanges($event)\" \r\n      (keywordValueChanged)=\"keywordValueChanged($event)\"\r\n      (searchFieldsApplied)=\"search($event)\"\r\n      (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n      (workflowEtatFilterChanged)=\"onWorkflowEtatFilterChanged($event)\"\r\n      (comboBoxLabelChanged)=\"comboBoxLabelChanged($event)\">\r\n    </tsi-search-box>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === false && _showCardView === false && _showKanbanView === false\" class=\"col-12\">\r\n    \r\n    <p-table #dt\r\n      [lazy]=\"isGridDataPagedInApi\"\r\n      [lazyLoadOnInit]=\"searchOnInit\" \r\n      [totalRecords]=\"page.totalCount\" \r\n      [loading]=\"page.loading\" \r\n      [reorderableColumns]=\"true\"\r\n      [resizableColumns]=\"true\" \r\n      [columns]=\"selectedColumns\" \r\n      [value]=\"page.items\"\r\n      [paginator]=\"true\" \r\n      [scrollable]=\"true\" \r\n      [(rows)]=\"page.pageSize\"\r\n      [showCurrentPageReport]=\"true\" \r\n      [globalFilterFields]=\"fields()\" \r\n      [tableStyle]=\"tableStyle\"\r\n      [rowsPerPageOptions]=\"[1, 10, 25, 50, 100]\" \r\n      [sortMode]=\"sortMode\"\r\n      [multiSortMeta]=\"sortMetas\" \r\n      [selectAll]=\"selectAll\"\r\n      [selectionMode]=\"selectionMode\" \r\n      [(selection)]=\"selection\" \r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      (onRowUnselect)=\"onSelectedItemsChanged()\"\r\n      (selectAllChange)=\"onSelectAllChange($event)\" \r\n      (onRowSelect)=\"onSelectedItemsChanged()\"\r\n      (onColResize)=\"onColResize($event)\"\r\n      columnResizeMode=\"expand\"\r\n      dataKey=\"{{ key }}\" \r\n      scrollHeight=\"600px\" \r\n      [styleClass]=\"'p-datatable-gridlines' + (stripedRows ? ' p-datatable-striped' : '')\"\r\n      currentPageReportTemplate=\"{{ 'Showing' | localize }} {{getFirstElementIndex()}} {{\r\n        'to' | localize\r\n      }} {last} {{ 'of' | localize }} \r\n      {totalRecords} {{ 'entries' | localize }}\" \r\n      >\r\n\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex justify-content-between align-items-center flex-wrap gap-2\">\r\n          <div class=\"ml-2 font-semibold\">\r\n            <span class=\"font-bold\" >{{ header | localize }}</span>\r\n            ({{ page.totalCount }} {{ 'records_label' | localize }})\r\n          </div>\r\n\r\n          <div class=\"flex align-items-center gap-3 caption-paginator\">\r\n            <p-paginator\r\n              [first]=\"dt.first ?? 0\"\r\n              [rows]=\"dt.rows\"\r\n              [totalRecords]=\"dt.totalRecords\"\r\n              [rowsPerPageOptions]=\"[1, 10, 25, 50, 100]\"\r\n              [showCurrentPageReport]=\"true\"\r\n              [currentPageReportTemplate]=\"('Showing' | localize) + ' ' + getFirstElementIndex() + ' ' + ('to' | localize) + ' {last} ' + ('of' | localize) + ' {totalRecords} ' + ('entries' | localize)\"\r\n              (onPageChange)=\"dt.onPageChange({ first: $event.first ?? 1, rows: $event.rows ?? 1 })\">\r\n            </p-paginator>\r\n          </div>\r\n\r\n          <div class=\"p-1 flex align-items-center\">\r\n            <div *ngIf=\"showFilterButton\" presentationDesignerBase=\"grid_toggle_header_filters\">\r\n              <Tsi-Button [icon]=\"filterIcon\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"filterTooltip\"\r\n                styleClass=\"p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"toggleHeaderFilters()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showHeaderFilters\" presentationDesignerBase=\"grid_toggle_header_filter_mode\">\r\n              <Tsi-Button [icon]=\"filterModeIcon\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n                [tooltipText]=\"filterModeTooltip\" [styleClass]=\"'ml-1 p-button-primary p-button-icon-only'\"\r\n                (click)=\"toggleHeaderFiltersMode()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div presentationDesignerBase=\"grid_clear_filter_button\">\r\n              <Tsi-Button [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"'icon-clear-filter'\"\r\n                styleClass=\"ml-1 p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"onClearFilters()\" icon=\"pi pi-eraser\">\r\n              </Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showExportButton\" presentationDesignerBase=\"grid_export_button\">\r\n              <Tsi-Button icon=\"p-button-icon pi pi-file-excel\" (onClick)=\"exportExcel()\"\r\n                styleClass=\"p-element p-button-success hover:shadow-6 ml-2 p-1 p-button p-component p-button-icon-only\"\r\n                [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"XLS\"></Tsi-Button>\r\n            </div>\r\n\r\n            <p-multiSelect class=\"ml-1\" [options]=\"columns\" [ngModel]=\"selectedColumns\" optionLabel=\"translatedHeader\"\r\n              selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" [style]=\"{ 'min-width': '180px' }\"\r\n              placeholder=\"{{ 'choose_columns' | localize }}\" (ngModelChange)=\"onSelectedColumnsChange($event)\">\r\n            </p-multiSelect>\r\n          </div>\r\n\r\n          <!-- <div> -->\r\n          <!-- <button *ngIf=\"showGlobalSearch\" type=\"button\" pButton pRipple icon=\"pi pi-search\" (click)=\"search()\"></button> -->\r\n          <!-- </div> -->\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          <th [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\"\r\n            [ngClass]=\"page.loading ? 'no-z-index' : 'z-1'\" *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n            <div class=\"flex align-items-center justify-content-center\">\r\n              <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </div>\r\n          </th>\r\n          \r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <th *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\"\r\n              scope=\"col\" [attr.data-field]=\"col.field\" [style]=\"col.style\" pTooltip=\"{{ col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n              [pSortableColumn]=\"(!col.isButton || !isOverflowColumn(col.field) || !(col.type == displayTypes.IMAGE_DISPLAY)) ? \r\n              col.field : null\"\r\n              [pResizableColumnDisabled]=\"col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)\"\r\n              [tooltipDisabled]=\"col.isButton || isOverflowColumn(col.field)\" \r\n              [pReorderableColumnDisabled]=\"col.isButton || isOverflowColumn(col.field)\" pReorderableColumn\r\n              pResizableColumn [ngStyle]=\"getHeaderColumnStyle(col)\"\r\n              [class.disabled-column]=\"col.isButton || isOverflowColumn(col.field) || col.type === displayTypes.IMAGE_DISPLAY\"\r\n              [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n              [ngClass]=\"[\r\n                getHeaderClassColor(col.type),\r\n                (col.isButton || isOverflowColumn(col.field)) ? 'w-1rem' : '',\r\n                (col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)) ? 'non-resizable-column' : '',\r\n                ]\">\r\n\r\n              <ng-container *ngIf=\"notInSpecifiedColumn(col.field)\">\r\n                <span>\r\n                  <table class=\"p-0 m-0\">\r\n                    <tr>\r\n                      <td class=\"col p-0 m-0\" [ngClass]=\"{'w-1rem': col.isButton}\">\r\n                          {{ col.header | localize }}\r\n                      </td>\r\n                      <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\">\r\n                        <p-sortIcon \r\n                          *ngIf=\"col.type !== displayTypes.IMAGE_DISPLAY\"\r\n                          class=\"w-1rem m-0 p-0\"\r\n                          field=\"{{ col.field }}\"\r\n                          ></p-sortIcon>\r\n                      </td>\r\n                    </tr>\r\n                  </table>\r\n                </span>\r\n              </ng-container>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n\r\n        <tr *ngIf=\"showHeaderFilters\">\r\n          <!-- <th scope=\"col\" style=\"width:3rem\"></th>\r\n                        <th scope=\"col\" style=\"width:3rem\"></th> -->\r\n          <th [ngClass]=\"page.loading ? 'no-z-index' : ''\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n            style=\"width: 4rem\"></th>\r\n\r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <ng-container *ngIf=\"col.actionDisplay != actionPlacement.Overflow\">\r\n              <th style=\"overflow: inherit\" scope=\"col\">\r\n                <ng-container *ngIf=\"!col.isButton && col.field != overflowColumnField ; else filterLessColumn\">\r\n                  <ng-container [ngSwitch]=\"col.type\">\r\n\r\n                    <!-- DATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDate [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDate.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDate.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DATETIME -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATETIME_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDateTime [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDateTime.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDateTime.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY SOCIETE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Societe-Input #currSocieteInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currSocieteInput.inputField)\">\r\n                          </Tsi-Currency-Societe-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY OTHER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Other-Input #currOtherInput [inputField]=\"value\" [currency]=\"col.currencyOtherCode\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currOtherInput.inputField)\">\r\n                          </Tsi-Currency-Other-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- INTEGER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Integer #integerInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(integerInput.inputField)\">\r\n                          </Tsi-Integer>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DECIMAL -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Decimal-Input #decimalInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(decimalInput.inputField)\">\r\n                          </Tsi-Decimal-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- RATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.RATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Rate-Input #rateInput [inputField]=\"value\" [isFraction]=\"col.isFraction\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(rateInput.inputField)\">\r\n                          </Tsi-Rate-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DEFAULT (text, boolean, or any unhandled type) -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <p-columnFilter [type]=\"col.filterInputType\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [minFractionDigits]=\"col.numOfDecimal\" [maxFractionDigits]=\"col.numOfDecimal\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-template #filterLessColumn></ng-template>\r\n              </th>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </tr>\r\n        \r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n\r\n        <!-- CASE : multiple selection -->\r\n        <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\" *ngIf=\"\r\n            selectionMode == multipleGridSelectionMode;\r\n            else notMultipleSelectionModeBlock\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event,item)\" (dragenter)=\"onDragEnter($event)\"\r\n                    (dragleave)=\"onDragLeave($event)\">\r\n          <td [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\">\r\n              <div class=\"flex align-items-center justify-content-center\">\r\n                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n              </div>\r\n          </td>\r\n          <!-- <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n                            (click)=\"edit(item)\"></button>\r\n                    </div>\r\n                </td>\r\n                <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n                            class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n                    </div>\r\n                </td> -->\r\n                \r\n          <ng-container *ngFor=\"let col of columns\">\r\n\r\n            <td  *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\" [class.tsi-col-wrap]=\"shouldWrapColumn(col)\" [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n              >\r\n\r\n              <!-- style=\"height: min-content; margin-left: -.5rem;\" -->\r\n              <!-- Tsi-Currency-Societe-Input -->\r\n\r\n              <div *ngIf=\"\r\n                  col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                  else currencyOtherOutputBlock\r\n                \">\r\n                <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                </Tsi-Currency-Societe-Display>\r\n              </div>\r\n\r\n              <!-- Tsi-Currency-Other-Input -->\r\n              <ng-template #currencyOtherOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                    else datePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Date-Picker -->\r\n              <ng-template #datePickerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DATE_DISPLAY;\r\n                    else dateTimePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Date-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n              <!-- Tsi-CheckBox -->\r\n              <ng-template #checkBoxOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                    else decimalOutputBlock\r\n                  \">\r\n                  <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Checkbox-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Decimal-Input -->\r\n              <ng-template #decimalOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DECIMAL_DISPLAY;\r\n                    else integerOutputBlock\r\n                  \">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Integer -->\r\n              <ng-template #integerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.INTEGER_DISPLAY;\r\n                    else rateOutputBlock\r\n                  \">\r\n                  <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Integer-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Rate-Input -->\r\n              <ng-template #rateOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.RATE_DISPLAY;\r\n                    else displayNestedPropOutputBlock\r\n                  \">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Rate-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayNestedPropOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                    else displayStatusColorBlock\r\n                  \">\r\n                  <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                    [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                  </Tsi-Display-Nested-Prop>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusColorBlock>\r\n                <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                  </div> \r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusValueColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                          class=\"px-2 py-1 font-bold status-badge\"\r\n                          [style.background-color]=\"opt.colorHex\"\r\n                          [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                          [ngClass]=\"{\r\n                              'text-black bg-white': !opt.colorHex,\r\n                              'text-white': opt.colorHex\r\n                            }\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                          class=\"px-2 py-1 font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-status-column -->\r\n              <ng-template #displayStatusColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n\r\n                        <span\r\n                          *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                          class=\"font-bold status-badge\"\r\n                          [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                          [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                          [style.padding-top]=\"'0.1rem'\"\r\n                          [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n                          class=\"font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayButtonBlock>\r\n                <ng-container *ngIf=\"col.isButton; else displayImage\" >\r\n                  <div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n                    <Tsi-Button  [styleClass]=\"col.styleClass\" type=\"button\"\r\n                      icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                      [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n                      (click)=\"buttonClicked(item, col.field)\" ></Tsi-Button>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-image -->\r\n              <ng-template #displayImage>\r\n                <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                  <div class=\"h-2rem\">\r\n                    <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                      [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                      [width]=\"'100%'\" [height]=\"'100%'\">\r\n                    </tsi-image-display>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-icon (file-type logo) -->\r\n              <ng-template #displayIconBlock>\r\n                <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                  <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                    <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                      [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                      style=\"font-size: 1.25rem\"></i>\r\n                    <span>{{ item[col.field] }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-text-eye -->\r\n              <ng-template #displayTextEyeBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.TEXT_DISPLAY;\r\n                    else moreActionsBlock\r\n                  \">\r\n                  <span class=\"p-2 inline-block\">\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n\r\n              <!-- more actions -->\r\n                  <ng-template #moreActionsBlock>\r\n                    <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n                      <p-menu \r\n                        appendTo=\"body\" \r\n                        #menuMoreActions \r\n                        [model]=\"overflowActionsMenu\" \r\n                        [popup]=\"true\"\r\n                        styleClass=\"overflow-menu\"\r\n                        [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n                        \r\n                        <ng-template pTemplate=\"item\" let-menuItem>\r\n                          <a \r\n                            pRipple \r\n                            class=\"flex align-items-center p-menuitem-link\"\r\n                            [ngClass]=\"menuItem.styleClass\"\r\n                            (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n                            <i\r\n                              *ngIf=\"menuItem.id === 'notes'\"\r\n                              class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\"\r\n                              pBadge\r\n                              severity=\"danger\"\r\n                              [value]=\"item.notesCount\"\r\n                              [badgeDisabled]=\"item.notesCount == null\"\r\n                              badgePosition=\"top-right\">\r\n                            </i>\r\n\r\n                            <i\r\n                              *ngIf=\"menuItem.id !== 'notes'\"\r\n                              class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\">\r\n                            </i>\r\n\r\n                            <span class=\"menu-label\">\r\n                              {{ menuItem.label | localize }}\r\n                            </span>\r\n                          </a>\r\n                        </ng-template>\r\n                      </p-menu>\r\n                      <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <p-button \r\n                          type=\"button\"\r\n                          icon=\"{{col.buttonIcon}}\"\r\n                          styleClass=\"{{col.styleClass}} overflow-btn\"\r\n                          (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n                        </p-button>  \r\n                      </div>\r\n                      \r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n              <!-- Tsi-Text-Box -->\r\n              <ng-template #defaultTextOutputBlock>\r\n                <ng-container>\r\n                  <span class=\"p-2 inline-block\">\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n                    class=\"drag-message cursor-follow\">\r\n                    {{ \"Jointure\" | localize }}\r\n                  </div>\r\n        </tr>\r\n                          \r\n        <!-- CASE : single or none selection -->\r\n        <ng-template #notMultipleSelectionModeBlock>\r\n          <ng-container>\r\n            <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\"\r\n              [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"index\" id=\"tsi-grid-row-{{index}}\">\r\n\r\n              <ng-container *ngFor=\"let col of columns\">\r\n\r\n                <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\"\r\n                  [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n                  style=\"height: min-content;\"\r\n                  [ngClass]=\"{\r\n                    'w-1rem': col.isButton,\r\n                    'bg-white': col.isButton\r\n                  }\">\r\n\r\n                  <div *ngIf=\"\r\n                      col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                      else currencyOtherOutputBlock\r\n                    \">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </div>\r\n\r\n                  <!-- Tsi-Currency-Other-Input -->\r\n                  <ng-template #currencyOtherOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                        else datePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Currency-Other-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #datePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATE_DISPLAY;\r\n                        else dateTimePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <!-- Tsi-CheckBox -->\r\n                  <ng-template #checkBoxOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                        else decimalOutputBlock\r\n                      \">\r\n                      <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Checkbox-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Decimal-Input -->\r\n                  <ng-template #decimalOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DECIMAL_DISPLAY;\r\n                        else integerOutputBlock\r\n                      \">\r\n                      <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                        [numOfDecimal]=\"col.numOfDecimal\">\r\n                      </Tsi-Decimal-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Integer -->\r\n                  <ng-template #integerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.INTEGER_DISPLAY;\r\n                        else rateOutputBlock\r\n                      \">\r\n                      <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Integer-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Rate-Input -->\r\n                  <ng-template #rateOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.RATE_DISPLAY;\r\n                        else displayNestedPropOutputBlock\r\n                      \">\r\n                      <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Rate-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayNestedPropOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                        else displayStatusColorBlock\r\n                      \">\r\n                      <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                        [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                      </Tsi-Display-Nested-Prop>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <ng-template #displayStatusColorBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <ng-template #displayStatusValueColumnBlock>\r\n                      <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                        <div class=\"align-items-center justify-content-center p-2\">\r\n                          <!--<p-tag \r\n                              [value]=\"item[col.field]\"\r\n                              [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                          </p-tag>-->\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                                class=\"px-2 py-1 font-bold status-badge\"\r\n                                [style.background-color]=\"opt.colorHex\"\r\n                                [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                                [ngClass]=\"{\r\n                                    'text-black bg-white': !opt.colorHex,\r\n                                    'text-white': opt.colorHex\r\n                                  }\"\r\n                                >\r\n                                {{ opt.translatedLabel }}\r\n                              </span>\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                                class=\"px-2 py-1 font-bold status-badge\">\r\n                                {{ item[col.field] }}\r\n                              </span>\r\n                        </div>\r\n                      </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-status-prop -->\r\n                  <ng-template #displayStatusColumnBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                        <!--<p-tag \r\n                          [value]=\"item[col.field]\"\r\n                          [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                        </p-tag>-->\r\n\r\n                        <span\r\n                            *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                            class=\"status-badge font-bold\"\r\n                            [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                            [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                            [style.padding-top]=\"'0.1rem'\"\r\n                            [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                            {{ opt.translatedLabel }}\r\n                          </span>\r\n                          <span\r\n                            *ngIf=\"statusMetadata &&  !getStatusOption(item[col.field])\"\r\n                            class=\"status-badge font-bold\">\r\n                            {{ item[col.field] }}\r\n                        </span>\r\n                        \r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                  \r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayButtonBlock>\r\n                    <ng-container *ngIf=\"col.isButton; else displayImage\">\r\n                      <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n                        [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n                        class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n                        <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n                          [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                          (click)=\"buttonClicked(item, col.field)\"\r\n                          [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-image -->\r\n                  <ng-template #displayImage>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                      <div class=\"h-2rem\">\r\n                        <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                          [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                          [width]=\"'100%'\" [height]=\"'100%'\">\r\n                        </tsi-image-display>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-icon (file-type logo) -->\r\n                  <ng-template #displayIconBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                      <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                        <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                          [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                          style=\"font-size: 1.25rem\"></i>\r\n                        <span>{{ item[col.field] }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-text-eye -->\r\n                  <ng-template #displayTextEyeBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.TEXT_DISPLAY;\r\n                        else moreActionsBlock\r\n                      \">\r\n                      <span class=\"p-2 inline-block\">\r\n                        <span class=\"cursor-pointer pi pi-eye\" (click)=\"eyeClicked(item[col.field])\"></span>\r\n                        {{ truncateString(item[col.field], 50) }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- more actions -->\r\n                  <ng-template #moreActionsBlock>\r\n                    <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n                      <p-menu \r\n                        appendTo=\"body\" \r\n                        #menuMoreActions \r\n                        [model]=\"overflowActionsMenu\" \r\n                        [popup]=\"true\"\r\n                        styleClass=\"overflow-menu\"\r\n                        [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n                        \r\n                        <ng-template pTemplate=\"item\" let-menuItem>\r\n                          <a \r\n                            pRipple \r\n                            class=\"flex align-items-center p-menuitem-link\"\r\n                            [ngClass]=\"menuItem.styleClass\"\r\n                            (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n                            <i\r\n                              *ngIf=\"menuItem.id === 'notes'\"\r\n                              class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\"\r\n                              pBadge\r\n                              severity=\"danger\"\r\n                              [value]=\"item.notesCount\"\r\n                              [badgeDisabled]=\"item.notesCount == null\"\r\n                              badgePosition=\"top-right\">\r\n                            </i>\r\n\r\n                            <i\r\n                              *ngIf=\"menuItem.id !== 'notes'\"\r\n                              class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\">\r\n                            </i>\r\n\r\n                            <span class=\"menu-label\">\r\n                              {{ menuItem.label | localize }}\r\n                            </span>\r\n                          </a>\r\n                        </ng-template>\r\n                      </p-menu>\r\n                      <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <p-button \r\n                          type=\"button\"\r\n                          icon=\"{{col.buttonIcon}}\"\r\n                          styleClass=\"{{col.styleClass}} overflow-btn\"\r\n                          (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n                        </p-button>  \r\n                      </div>\r\n                      \r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Text-Box -->\r\n                  <ng-template #defaultTextOutputBlock>\r\n                    <ng-container>\r\n                      <span class=\"p-2 inline-block\">\r\n                        {{ item[col.field] }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                </td>\r\n\r\n              </ng-container>\r\n            </tr>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"footer\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == multipleGridSelectionMode\"></td>\r\n\r\n          <ng-container *ngFor=\"let col of selectedColumns\">\r\n            <td class=\"pr-0\" *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\">\r\n              <div *ngIf=\"col.showSummary\">\r\n                <!-- CURRENCY_SOCIETE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                  <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Societe-Display>\r\n                </div>\r\n\r\n                <!-- INTEGER_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.INTEGER_DISPLAY\">\r\n                  <Tsi-Integer-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Integer-Display>\r\n                </div>\r\n\r\n                <!-- RATE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.RATE_DISPLAY\">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction ?? false\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Rate-Display>\r\n                </div>\r\n\r\n                <!-- DECIMAL_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY\">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col.field)\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </div>\r\n\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </div>\r\n              </div>\r\n            </td>\r\n          </ng-container>  \r\n        </tr>\r\n      </ng-template>\r\n      \r\n      <ng-template pTemplate=\"summary\">\r\n        <span *ngIf=\"colorful\">\r\n          <span>View Grid</span>\r\n          <span class=\"pl-2\">| SearchOnInit : {{ searchOnInit }}</span>\r\n          <span class=\"pl-2\">| Pagination In Api : {{ isGridDataPagedInApi }}</span>\r\n        </span>\r\n      </ng-template>\r\n    </p-table>\r\n\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === true\" class=\"col-12\">\r\n    <tsi-calender \r\n  [schema]=\"calenderSchema\" \r\n  [eventsData]=\"page.items\" \r\n  [crudService]=\"crudService\"\r\n  [showInfoButton]=\"showInfoButton\"\r\n  [showDownloadButton]=\"showDownloadButton\"\r\n  [showUploadButton]=\"showUploadButton\"\r\n  [showNoteButton]=\"showNoteButton\"\r\n  [showActionButton]=\"showActionButton\"\r\n  [entityInfo]=\"entityInfo\"\r\n  [filterStartDate]=\"getCalenderFilterValue(calenderSchema?.start)\"\r\n  [filterEndDate]=\"getCalenderFilterValue(calenderSchema?.end)\"\r\n  (dateRangeChange)=\"handleDateRangeChange($event)\"\r\n  (viewTypeChange)=\"handleCalenderViewTypeChange($event)\"\r\n  (eventClick)=\"handleCalendarEventClick($event)\">\r\n</tsi-calender>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCardView === true\" class=\"col-12\">\r\n    <Tsi-card-list [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\"[selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\">\r\n    </Tsi-card-list>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && !_showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\" [crudService]=\"crudService\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\"\r\n      [summaryColumns]=\"kanbanSummaryColumns\">\r\n    </Tsi-kanban>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && _showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban-workflow-etat [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" [descriminatorValue]=\"descriminatorValue\" (callSearch)=\"callSearchHandler($event)\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\"\r\n      [summaryColumns]=\"kanbanSummaryColumns\">\r\n    </Tsi-kanban-workflow-etat>\r\n  </div>\r\n\r\n  <div *ngIf=\"isAdvancedSearch && selectionMode == multipleGridSelectionMode\">\r\n    <Tsi-Modal-Footer [showSaveAndCloseButton]=\"false\" (onSaveClick)=\"onConfirmSelection()\" (onCancelClick)=\"onCancelSelection()\" />\r\n  </div>\r\n</div>", styles: [".p-button.p-button-icon-only.p-button-rounded{border-radius:50%;height:1rem}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.p-inputgroup.rtl-mode .p-inputgroup-addon:last-child,.p-inputgroup.rtl-mode button:last-child,.p-inputgroup.rtl-mode input:last-child,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:6px 0 0 6px/6px 0px 0px 6px!important}.p-inputgroup.ltr-mode .p-inputgroup-addon:last-child,.p-inputgroup.ltr-mode button:last-child,.p-inputgroup.ltr-mode input:last-child,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:0 6px 6px 0/0px 6px 6px 0px!important}.p-paginator .p-dropdown{height:auto;border:none;border-bottom:1px solid}:host ::ng-deep .p-datatable .p-paginator-bottom{display:none}:host ::ng-deep .caption-paginator .p-paginator{background:transparent;border:none;padding:0}.p-datatable .frozen-column{position:sticky;left:0;z-index:1;background:#fff}.frozen-column-ltr-mode{min-width:2rem;position:sticky;left:0;background-color:#fff}.frozen-column-rtl-mode{min-width:2rem;position:sticky;right:0;background-color:#fff}.disabled-column{background-color:#f5f5f5;color:#d3d3d3;pointer-events:none}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:max-content;width:100%;text-align:center;white-space:nowrap;border-radius:.4rem;padding:.1rem .2rem;font-weight:600;line-height:1.2;color:#fff;box-shadow:0 1px 2px #0000000d;transition:all .2s ease-in-out;cursor:default;transform-origin:top center;border-top-left-radius:inherit;border-bottom-right-radius:inherit}.status-badge:hover{transform:scale(1.06);box-shadow:0 2px 4px #0000001a;filter:brightness(1.2)}td span,td div{padding:0 .5rem}.tsi-col-wrap,.tsi-col-wrap>span:not(.status-badge),.tsi-col-wrap>div:not(.status-badge){white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}td.tsi-col-wrap>span:not(.status-badge),td.tsi-col-wrap>div:not(.status-badge){display:inline-block}.custom-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.button-icon{width:1.5rem;height:1.5rem}.custom-button:hover{background-color:#f0f0f0}table{width:100%!important}.right-to-left{text-align:start}::ng-deep th.non-resizable-column .p-column-resizer{display:none!important;pointer-events:none!important}::ng-deep .cursor-follow{position:fixed;background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.85rem;z-index:1000;pointer-events:none;white-space:nowrap}::ng-deep .overflow-menu.p-menu-overlay{border-radius:8px;border:none;padding:.4rem;min-width:0!important;background:#fff;box-shadow:0 8px 24px #0000001f;animation:fadeScaleIn .12s ease-out}::ng-deep .overflow-menu .p-menuitem-link{overflow:visible!important;position:relative;padding:0}::ng-deep .overflow-menu-item{padding:.55rem .75rem;border-radius:8px;gap:.5rem;font-size:.85rem;white-space:nowrap;transition:all .15s ease}::ng-deep .overflow-menu-item:hover{background-color:#f5f7fa}::ng-deep .menu-icon{font-size:.9rem;width:18px;text-align:center;opacity:.8}::ng-deep .menu-label{font-weight:400}::ng-deep .overflow-btn{width:28px;height:28px;padding:0}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}::ng-deep .overflow-menu .p-badge{font-size:.55rem;min-width:.9rem;height:.9rem;line-height:.9rem;font-family:inherit}::ng-deep .badge-icon.has-badge{transition:transform .2s ease-in-out;display:inline-block;position:relative;z-index:2}::ng-deep .badge-icon.has-badge:hover{transform:scale(1.4);z-index:10}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i6.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i6.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i11$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i2$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i11$2.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherInputComponent, selector: "Tsi-Currency-Other-Input", inputs: ["currency", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiCurrencySocieteInputComponent, selector: "Tsi-Currency-Societe-Input", inputs: ["class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiDecimalInputComponent, selector: "Tsi-Decimal-Input", inputs: ["numOfDecimal", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiRateInputComponent, selector: "Tsi-Rate-Input", inputs: ["required", "isFraction", "numOfDecimal"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiCheckboxDisplayComponent, selector: "Tsi-Checkbox-Display", inputs: ["inputData"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["currency", "inputData"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDateDisplayComponent, selector: "Tsi-Date-Display", inputs: ["inputData", "showTime"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: TsiModalFooterComponent, selector: "Tsi-Modal-Footer", inputs: ["cancelDisabled", "saveDisabled", "cancelLabel", "saveLabel", "isConsult", "isDuplicate", "isOnlyCreate", "additionalButtonLabel", "additionalButtonIcon", "additionalButtonDisabled", "showAdditionalButton", "showSaveAndCloseButton", "mode"], outputs: ["onCancelClick", "onSaveClick", "onAdditionalButtonClick"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: TsiSearchBoxComponent, selector: "tsi-search-box", inputs: ["searchFields", "businessClass", "descriminatorValue", "isRtlMode", "isSearchButtonDisabled", "entityInfo", "statusMetadata"], outputs: ["searchFieldsChange", "searchFieldsApplied", "keywordValueChanged", "statusFilterChanged", "workflowEtatFilterChanged", "comboBoxLabelChanged"] }, { kind: "component", type: TsiCardListComponent, selector: "Tsi-card-list", inputs: ["cardBusinessClass", "header", "id", "page", "page$", "overflowActionsMenu", "selectKeyOnly", "key"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiImageDisplayComponent, selector: "tsi-image-display", inputs: ["src", "alt", "width", "height", "isRounded", "headerTitles"] }, { kind: "component", type: TsiKanbanComponent, selector: "Tsi-kanban", inputs: ["cardBusinessClass", "header", "id", "page$", "crudService", "overflowActionsMenu", "selectKeyOnly", "key", "summaryColumns", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiCalenderComponent, selector: "tsi-calender", inputs: ["crudService", "schema", "eventsData", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton", "filterStartDate", "filterEndDate", "entityInfo"], outputs: ["eventClick", "dateRangeChange", "viewTypeChange"] }, { kind: "component", type: TsiKanbanWorkflowEtatComponent, selector: "Tsi-kanban-workflow-etat", inputs: ["cardBusinessClass", "header", "id", "page$", "descriminatorValue", "summaryColumns", "overflowActionsMenu", "selectKeyOnly", "key", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]:not(tsi-tab-panel)", inputs: ["presentationDesigner", "presentationDesignerBase"] }, { kind: "component", type: DisplayNestedPropComponent, selector: "Tsi-Display-Nested-Prop", inputs: ["id", "displayValue", "sourceUrl"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: { cudComponent: "cudComponent", modalSize: "modalSize", showInfoButton: "showInfoButton", showDownloadButton: "showDownloadButton", showUploadButton: "showUploadButton", showNoteButton: "showNoteButton", showActionButton: "showActionButton", sizingMode: "sizingMode", formName: "formName", id: "id", pagedRequest: "pagedRequest", configuration: "configuration", page: "page", key: "key", columns: "columns", isSearchButtonDisabled: "isSearchButtonDisabled", filteredColumns: "filteredColumns", gridData: "gridData", isTableLoading: "isTableLoading", parent: "parent", showSearchBox: "showSearchBox", showActionColumn: "showActionColumn", showHeaderFilters: "showHeaderFilters", showFilterButton: "showFilterButton", isGridDataPagedInApi: "isGridDataPagedInApi", header: "header", ShowFilterColumns: "ShowFilterColumns", showImportExportButton: "showImportExportButton", crudService: "crudService", searchFields: "searchFields", sortMode: "sortMode", filtersHtmlTemplate: "filtersHtmlTemplate", presentationSettings: "presentationSettings", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", searchOnInit: "searchOnInit", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showSearchField: "showSearchField", showCalenderView: "showCalenderView", calenderSchema: "calenderSchema", showCardView: "showCardView", showKanbanView: "showKanbanView", showKanbanViewOfWorkFlowEtat: "showKanbanViewOfWorkFlowEtat", page$: "page$", checkedByField: "checkedByField", selectAll: "selectAll", targetBusinessClass: "targetBusinessClass", descriminatorValue: "descriminatorValue", businessClass: "businessClass", groupBy: "groupBy", entityInfo: "entityInfo" }, outputs: { onSave: "onSave", editRow: "editRow", deleteRow: "deleteRow", load: "load", buttonColumnClicked: "buttonColumnClicked", filtersHtmlTemplateChange: "filtersHtmlTemplateChange", selectedItemsChange: "selectedItemsChange", searchFieldsValueChanged: "searchFieldsValueChanged", calendarEventClick: "calendarEventClick", statusFilterChanged: "statusFilterChanged" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableHeaderCheckbox", first: true, predicate: ["tableHeaderCheckbox"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n\r\n  <div class=\"col-12\" [@slideInOut]=\"showSearchField ? 'in' : 'out'\" *ngIf=\"showGlobalSearch\">\r\n    <tsi-search-box \r\n      [isRtlMode]=\"isRtlMode\" \r\n      [(searchFields)]=\"searchFields\" \r\n      [businessClass]=\"businessClass\"\r\n      [entityInfo]=\"entityInfo\"\r\n      [statusMetadata]=\"statusMetadata\"\r\n      [descriminatorValue]=\"descriminatorValue\"\r\n      (searchFieldsChange)=\"searchFieldsValueChanges($event)\" \r\n      (keywordValueChanged)=\"keywordValueChanged($event)\"\r\n      (searchFieldsApplied)=\"search($event)\"\r\n      (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n      (workflowEtatFilterChanged)=\"onWorkflowEtatFilterChanged($event)\"\r\n      (comboBoxLabelChanged)=\"comboBoxLabelChanged($event)\">\r\n    </tsi-search-box>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === false && _showCardView === false && _showKanbanView === false\" class=\"col-12\">\r\n    \r\n    <p-table #dt\r\n      [lazy]=\"isGridDataPagedInApi\"\r\n      [lazyLoadOnInit]=\"searchOnInit\" \r\n      [totalRecords]=\"page.totalCount\" \r\n      [loading]=\"page.loading\" \r\n      [reorderableColumns]=\"true\"\r\n      [resizableColumns]=\"true\" \r\n      [columns]=\"selectedColumns\" \r\n      [value]=\"page.items\"\r\n      [paginator]=\"true\" \r\n      [scrollable]=\"true\" \r\n      [(rows)]=\"page.pageSize\"\r\n      [showCurrentPageReport]=\"true\" \r\n      [globalFilterFields]=\"fields()\" \r\n      [tableStyle]=\"tableStyle\"\r\n      [rowsPerPageOptions]=\"[1, 10, 25, 50, 100]\" \r\n      [sortMode]=\"sortMode\"\r\n      [multiSortMeta]=\"sortMetas\" \r\n      [selectAll]=\"selectAll\"\r\n      [selectionMode]=\"selectionMode\" \r\n      [(selection)]=\"selection\" \r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      (onRowUnselect)=\"onSelectedItemsChanged()\"\r\n      (selectAllChange)=\"onSelectAllChange($event)\" \r\n      (onRowSelect)=\"onSelectedItemsChanged()\"\r\n      (onColResize)=\"onColResize($event)\"\r\n      columnResizeMode=\"expand\"\r\n      dataKey=\"{{ key }}\" \r\n      scrollHeight=\"600px\" \r\n      [styleClass]=\"'p-datatable-gridlines' + (stripedRows ? ' p-datatable-striped' : '')\"\r\n      currentPageReportTemplate=\"{{ 'Showing' | localize }} {{getFirstElementIndex()}} {{\r\n        'to' | localize\r\n      }} {last} {{ 'of' | localize }} \r\n      {totalRecords} {{ 'entries' | localize }}\" \r\n      >\r\n\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex justify-content-between align-items-center flex-wrap gap-2\">\r\n          <div class=\"ml-2 font-semibold\">\r\n            <span class=\"font-bold\" >{{ header | localize }}</span>\r\n            ({{ page.totalCount }} {{ 'records_label' | localize }})\r\n          </div>\r\n\r\n          <div class=\"flex align-items-center gap-3 caption-paginator\">\r\n            <p-paginator\r\n              [first]=\"dt.first ?? 0\"\r\n              [rows]=\"dt.rows\"\r\n              [totalRecords]=\"dt.totalRecords\"\r\n              [rowsPerPageOptions]=\"[1, 10, 25, 50, 100]\"\r\n              [showCurrentPageReport]=\"true\"\r\n              [currentPageReportTemplate]=\"('Showing' | localize) + ' ' + getFirstElementIndex() + ' ' + ('to' | localize) + ' {last} ' + ('of' | localize) + ' {totalRecords} ' + ('entries' | localize)\"\r\n              (onPageChange)=\"dt.onPageChange({ first: $event.first ?? 1, rows: $event.rows ?? 1 })\">\r\n            </p-paginator>\r\n          </div>\r\n\r\n          <div class=\"p-1 flex align-items-center\">\r\n            <div *ngIf=\"showFilterButton\" presentationDesignerBase=\"grid_toggle_header_filters\">\r\n              <Tsi-Button [icon]=\"filterIcon\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"filterTooltip\"\r\n                styleClass=\"p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"toggleHeaderFilters()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showHeaderFilters\" presentationDesignerBase=\"grid_toggle_header_filter_mode\">\r\n              <Tsi-Button [icon]=\"filterModeIcon\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n                [tooltipText]=\"filterModeTooltip\" [styleClass]=\"'ml-1 p-button-primary p-button-icon-only'\"\r\n                (click)=\"toggleHeaderFiltersMode()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div presentationDesignerBase=\"grid_clear_filter_button\">\r\n              <Tsi-Button [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"'icon-clear-filter'\"\r\n                styleClass=\"ml-1 p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"onClearFilters()\" icon=\"pi pi-eraser\">\r\n              </Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showExportButton\" presentationDesignerBase=\"grid_export_button\">\r\n              <Tsi-Button icon=\"p-button-icon pi pi-file-excel\" (onClick)=\"exportExcel()\"\r\n                styleClass=\"p-element p-button-success hover:shadow-6 ml-2 p-1 p-button p-component p-button-icon-only\"\r\n                [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"XLS\"></Tsi-Button>\r\n            </div>\r\n\r\n            <p-multiSelect class=\"ml-1\" [options]=\"columns\" [ngModel]=\"selectedColumns\" optionLabel=\"translatedHeader\"\r\n              selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" [style]=\"{ 'min-width': '180px' }\"\r\n              placeholder=\"{{ 'choose_columns' | localize }}\" (ngModelChange)=\"onSelectedColumnsChange($event)\">\r\n            </p-multiSelect>\r\n          </div>\r\n\r\n          <!-- <div> -->\r\n          <!-- <button *ngIf=\"showGlobalSearch\" type=\"button\" pButton pRipple icon=\"pi pi-search\" (click)=\"search()\"></button> -->\r\n          <!-- </div> -->\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          <th [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\"\r\n            [ngClass]=\"page.loading ? 'no-z-index' : 'z-1'\" *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n            <div class=\"flex align-items-center justify-content-center\">\r\n              <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </div>\r\n          </th>\r\n          \r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <th *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\"\r\n              scope=\"col\" [attr.data-field]=\"col.field\" [style]=\"col.style\" pTooltip=\"{{ col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n              [pSortableColumn]=\"(!col.isButton || !isOverflowColumn(col.field) || !(col.type == displayTypes.IMAGE_DISPLAY)) ? \r\n              col.field : null\"\r\n              [pResizableColumnDisabled]=\"col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)\"\r\n              [tooltipDisabled]=\"col.isButton || isOverflowColumn(col.field)\" \r\n              [pReorderableColumnDisabled]=\"col.isButton || isOverflowColumn(col.field)\" pReorderableColumn\r\n              pResizableColumn [ngStyle]=\"getHeaderColumnStyle(col)\"\r\n              [class.disabled-column]=\"col.isButton || isOverflowColumn(col.field) || col.type === displayTypes.IMAGE_DISPLAY\"\r\n              [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n              [ngClass]=\"[\r\n                getHeaderClassColor(col.type),\r\n                (col.isButton || isOverflowColumn(col.field)) ? 'w-1rem' : '',\r\n                (col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)) ? 'non-resizable-column' : '',\r\n                ]\">\r\n\r\n              <ng-container *ngIf=\"notInSpecifiedColumn(col.field)\">\r\n                <span>\r\n                  <table class=\"p-0 m-0\">\r\n                    <tr>\r\n                      <td class=\"col p-0 m-0\" [ngClass]=\"{'w-1rem': col.isButton}\">\r\n                          {{ col.header | localize }}\r\n                      </td>\r\n                      <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\">\r\n                        <p-sortIcon \r\n                          *ngIf=\"col.type !== displayTypes.IMAGE_DISPLAY\"\r\n                          class=\"w-1rem m-0 p-0\"\r\n                          field=\"{{ col.field }}\"\r\n                          ></p-sortIcon>\r\n                      </td>\r\n                    </tr>\r\n                  </table>\r\n                </span>\r\n              </ng-container>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n\r\n        <tr *ngIf=\"showHeaderFilters\">\r\n          <!-- <th scope=\"col\" style=\"width:3rem\"></th>\r\n                        <th scope=\"col\" style=\"width:3rem\"></th> -->\r\n          <th [ngClass]=\"page.loading ? 'no-z-index' : ''\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n            style=\"width: 4rem\"></th>\r\n\r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <ng-container *ngIf=\"col.actionDisplay != actionPlacement.Overflow\">\r\n              <th style=\"overflow: inherit\" scope=\"col\">\r\n                <ng-container *ngIf=\"!col.isButton && col.field != overflowColumnField ; else filterLessColumn\">\r\n                  <ng-container [ngSwitch]=\"col.type\">\r\n\r\n                    <!-- DATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDate [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDate.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDate.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DATETIME -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATETIME_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDateTime [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDateTime.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDateTime.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY SOCIETE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Societe-Input #currSocieteInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currSocieteInput.inputField)\">\r\n                          </Tsi-Currency-Societe-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY OTHER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Other-Input #currOtherInput [inputField]=\"value\" [currency]=\"col.currencyOtherCode\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currOtherInput.inputField)\">\r\n                          </Tsi-Currency-Other-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- INTEGER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Integer #integerInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(integerInput.inputField)\">\r\n                          </Tsi-Integer>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DECIMAL -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Decimal-Input #decimalInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(decimalInput.inputField)\">\r\n                          </Tsi-Decimal-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- RATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.RATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Rate-Input #rateInput [inputField]=\"value\" [isFraction]=\"col.isFraction\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(rateInput.inputField)\">\r\n                          </Tsi-Rate-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DEFAULT (text, boolean, or any unhandled type) -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <p-columnFilter [type]=\"col.filterInputType\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [minFractionDigits]=\"col.numOfDecimal\" [maxFractionDigits]=\"col.numOfDecimal\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-template #filterLessColumn></ng-template>\r\n              </th>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </tr>\r\n        \r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n\r\n        <!-- CASE : multiple selection -->\r\n        <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\" *ngIf=\"\r\n            selectionMode == multipleGridSelectionMode;\r\n            else notMultipleSelectionModeBlock\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event,item)\" (dragenter)=\"onDragEnter($event)\"\r\n                    (dragleave)=\"onDragLeave($event)\">\r\n          <td [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\">\r\n              <div class=\"flex align-items-center justify-content-center\">\r\n                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n              </div>\r\n          </td>\r\n          <!-- <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n                            (click)=\"edit(item)\"></button>\r\n                    </div>\r\n                </td>\r\n                <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n                            class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n                    </div>\r\n                </td> -->\r\n                \r\n          <ng-container *ngFor=\"let col of columns\">\r\n\r\n            <td  *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\" [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n              style=\"height: min-content;\"\r\n              [ngClass]=\"{\r\n                'no-z-index': page.loading,\r\n                'w-1rem': col.isButton,\r\n                'bg-white': col.isButton\r\n              }\">\r\n\r\n              <!-- style=\"height: min-content; margin-left: -.5rem;\" -->\r\n              <!-- Tsi-Currency-Societe-Input -->\r\n\r\n              <div *ngIf=\"\r\n                  col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                  else currencyOtherOutputBlock\r\n                \">\r\n                <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                </Tsi-Currency-Societe-Display>\r\n              </div>\r\n\r\n              <!-- Tsi-Currency-Other-Input -->\r\n              <ng-template #currencyOtherOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                    else datePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Date-Picker -->\r\n              <ng-template #datePickerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DATE_DISPLAY;\r\n                    else dateTimePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Date-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n              <!-- Tsi-CheckBox -->\r\n              <ng-template #checkBoxOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                    else decimalOutputBlock\r\n                  \">\r\n                  <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Checkbox-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Decimal-Input -->\r\n              <ng-template #decimalOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DECIMAL_DISPLAY;\r\n                    else integerOutputBlock\r\n                  \">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Integer -->\r\n              <ng-template #integerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.INTEGER_DISPLAY;\r\n                    else rateOutputBlock\r\n                  \">\r\n                  <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Integer-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Rate-Input -->\r\n              <ng-template #rateOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.RATE_DISPLAY;\r\n                    else displayNestedPropOutputBlock\r\n                  \">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Rate-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayNestedPropOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                    else displayStatusColorBlock\r\n                  \">\r\n                  <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                    [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                  </Tsi-Display-Nested-Prop>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusColorBlock>\r\n                <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                  </div> \r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusValueColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                          class=\"px-2 py-1 font-bold status-badge\"\r\n                          [style.background-color]=\"opt.colorHex\"\r\n                          [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                          [ngClass]=\"{\r\n                              'text-black bg-white': !opt.colorHex,\r\n                              'text-white': opt.colorHex\r\n                            }\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                          class=\"px-2 py-1 font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-status-column -->\r\n              <ng-template #displayStatusColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n\r\n                        <span\r\n                          *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                          class=\"font-bold status-badge\"\r\n                          [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                          [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                          [style.padding-top]=\"'0.1rem'\"\r\n                          [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n                          class=\"font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayButtonBlock>\r\n                <ng-container *ngIf=\"col.isButton; else displayImage\" >\r\n                  <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n                    [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n                    class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n                    <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n                      [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                      (click)=\"buttonClicked(item, col.field)\"\r\n                      [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-image -->\r\n              <ng-template #displayImage>\r\n                <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                  <div class=\"h-2rem\">\r\n                    <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                      [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                      [width]=\"'100%'\" [height]=\"'100%'\">\r\n                    </tsi-image-display>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-icon (file-type logo) -->\r\n              <ng-template #displayIconBlock>\r\n                <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                  <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                    <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                      [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                      style=\"font-size: 1.25rem\"></i>\r\n                    <span>{{ item[col.field] }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-text-eye -->\r\n              <ng-template #displayTextEyeBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.TEXT_DISPLAY;\r\n                    else moreActionsBlock\r\n                  \">\r\n                  <span class=\"p-2 inline-block\">\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n\r\n              <!-- more actions -->\r\n                  <ng-template #moreActionsBlock>\r\n                    <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n                      <p-menu \r\n                        appendTo=\"body\" \r\n                        #menuMoreActions \r\n                        [model]=\"overflowActionsMenu\" \r\n                        [popup]=\"true\"\r\n                        styleClass=\"overflow-menu\"\r\n                        [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n                        \r\n                        <ng-template pTemplate=\"item\" let-menuItem>\r\n                          <a \r\n                            pRipple \r\n                            class=\"flex align-items-center p-menuitem-link\"\r\n                            [ngClass]=\"menuItem.styleClass\"\r\n                            (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n                            <i\r\n                              *ngIf=\"menuItem.id === 'notes'\"\r\n                              class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\"\r\n                              pBadge\r\n                              severity=\"danger\"\r\n                              [value]=\"item.notesCount\"\r\n                              [badgeDisabled]=\"item.notesCount == null\"\r\n                              badgePosition=\"top-right\">\r\n                            </i>\r\n\r\n                            <i\r\n                              *ngIf=\"menuItem.id !== 'notes'\"\r\n                              class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\">\r\n                            </i>\r\n\r\n                            <span class=\"menu-label\">\r\n                              {{ menuItem.label | localize }}\r\n                            </span>\r\n                          </a>\r\n                        </ng-template>\r\n                      </p-menu>\r\n                      <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <p-button \r\n                          type=\"button\"\r\n                          icon=\"{{col.buttonIcon}}\"\r\n                          styleClass=\"{{col.styleClass}} overflow-btn\"\r\n                          (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n                        </p-button>  \r\n                      </div>\r\n                      \r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n              <!-- Tsi-Text-Box -->\r\n              <ng-template #defaultTextOutputBlock>\r\n                <ng-container>\r\n                  <span class=\"p-2 inline-block\">\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n                    class=\"drag-message cursor-follow\">\r\n                    {{ \"Jointure\" | localize }}\r\n                  </div>\r\n        </tr>\r\n                          \r\n        <!-- CASE : single or none selection -->\r\n        <ng-template #notMultipleSelectionModeBlock>\r\n          <ng-container>\r\n            <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\"\r\n              [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"index\" id=\"tsi-grid-row-{{index}}\">\r\n\r\n              <ng-container *ngFor=\"let col of columns\">\r\n\r\n                <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\"\r\n                  [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n                  style=\"height: min-content;\"\r\n                  [ngClass]=\"{\r\n                    'w-1rem': col.isButton,\r\n                    'bg-white': col.isButton\r\n                  }\">\r\n\r\n                  <div *ngIf=\"\r\n                      col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                      else currencyOtherOutputBlock\r\n                    \">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </div>\r\n\r\n                  <!-- Tsi-Currency-Other-Input -->\r\n                  <ng-template #currencyOtherOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                        else datePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Currency-Other-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #datePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATE_DISPLAY;\r\n                        else dateTimePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <!-- Tsi-CheckBox -->\r\n                  <ng-template #checkBoxOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                        else decimalOutputBlock\r\n                      \">\r\n                      <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Checkbox-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Decimal-Input -->\r\n                  <ng-template #decimalOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DECIMAL_DISPLAY;\r\n                        else integerOutputBlock\r\n                      \">\r\n                      <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                        [numOfDecimal]=\"col.numOfDecimal\">\r\n                      </Tsi-Decimal-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Integer -->\r\n                  <ng-template #integerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.INTEGER_DISPLAY;\r\n                        else rateOutputBlock\r\n                      \">\r\n                      <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Integer-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Rate-Input -->\r\n                  <ng-template #rateOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.RATE_DISPLAY;\r\n                        else displayNestedPropOutputBlock\r\n                      \">\r\n                      <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Rate-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayNestedPropOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                        else displayStatusColorBlock\r\n                      \">\r\n                      <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                        [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                      </Tsi-Display-Nested-Prop>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <ng-template #displayStatusColorBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <ng-template #displayStatusValueColumnBlock>\r\n                      <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                        <div class=\"align-items-center justify-content-center p-2\">\r\n                          <!--<p-tag \r\n                              [value]=\"item[col.field]\"\r\n                              [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                          </p-tag>-->\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                                class=\"px-2 py-1 font-bold status-badge\"\r\n                                [style.background-color]=\"opt.colorHex\"\r\n                                [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                                [ngClass]=\"{\r\n                                    'text-black bg-white': !opt.colorHex,\r\n                                    'text-white': opt.colorHex\r\n                                  }\"\r\n                                >\r\n                                {{ opt.translatedLabel }}\r\n                              </span>\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                                class=\"px-2 py-1 font-bold status-badge\">\r\n                                {{ item[col.field] }}\r\n                              </span>\r\n                        </div>\r\n                      </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-status-prop -->\r\n                  <ng-template #displayStatusColumnBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                        <!--<p-tag \r\n                          [value]=\"item[col.field]\"\r\n                          [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                        </p-tag>-->\r\n\r\n                        <span\r\n                            *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                            class=\"status-badge font-bold\"\r\n                            [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                            [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                            [style.padding-top]=\"'0.1rem'\"\r\n                            [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                            {{ opt.translatedLabel }}\r\n                          </span>\r\n                          <span\r\n                            *ngIf=\"statusMetadata &&  !getStatusOption(item[col.field])\"\r\n                            class=\"status-badge font-bold\">\r\n                            {{ item[col.field] }}\r\n                        </span>\r\n                        \r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                  \r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayButtonBlock>\r\n                    <ng-container *ngIf=\"col.isButton; else displayImage\">\r\n                      <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n                        [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n                        class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n                        <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n                          [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                          (click)=\"buttonClicked(item, col.field)\"\r\n                          [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-image -->\r\n                  <ng-template #displayImage>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                      <div class=\"h-2rem\">\r\n                        <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                          [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                          [width]=\"'100%'\" [height]=\"'100%'\">\r\n                        </tsi-image-display>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-icon (file-type logo) -->\r\n                  <ng-template #displayIconBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                      <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                        <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                          [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                          style=\"font-size: 1.25rem\"></i>\r\n                        <span>{{ item[col.field] }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-text-eye -->\r\n                  <ng-template #displayTextEyeBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.TEXT_DISPLAY;\r\n                        else moreActionsBlock\r\n                      \">\r\n                      <span class=\"p-2 inline-block\">\r\n                        <span class=\"cursor-pointer pi pi-eye\" (click)=\"eyeClicked(item[col.field])\"></span>\r\n                        {{ truncateString(item[col.field], 50) }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- more actions -->\r\n                  <ng-template #moreActionsBlock>\r\n                    <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n                      <p-menu \r\n                        appendTo=\"body\" \r\n                        #menuMoreActions \r\n                        [model]=\"overflowActionsMenu\" \r\n                        [popup]=\"true\"\r\n                        styleClass=\"overflow-menu\"\r\n                        [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n                        \r\n                        <ng-template pTemplate=\"item\" let-menuItem>\r\n                          <a \r\n                            pRipple \r\n                            class=\"flex align-items-center p-menuitem-link\"\r\n                            [ngClass]=\"menuItem.styleClass\"\r\n                            (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n                            <i\r\n                              *ngIf=\"menuItem.id === 'notes'\"\r\n                              class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\"\r\n                              pBadge\r\n                              severity=\"danger\"\r\n                              [value]=\"item.notesCount\"\r\n                              [badgeDisabled]=\"item.notesCount == null\"\r\n                              badgePosition=\"top-right\">\r\n                            </i>\r\n\r\n                            <i\r\n                              *ngIf=\"menuItem.id !== 'notes'\"\r\n                              class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\">\r\n                            </i>\r\n\r\n                            <span class=\"menu-label\">\r\n                              {{ menuItem.label | localize }}\r\n                            </span>\r\n                          </a>\r\n                        </ng-template>\r\n                      </p-menu>\r\n                      <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <p-button \r\n                          type=\"button\"\r\n                          icon=\"{{col.buttonIcon}}\"\r\n                          styleClass=\"{{col.styleClass}} overflow-btn\"\r\n                          (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n                        </p-button>  \r\n                      </div>\r\n                      \r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Text-Box -->\r\n                  <ng-template #defaultTextOutputBlock>\r\n                    <ng-container>\r\n                      <span class=\"p-2 inline-block\">\r\n                        {{ item[col.field] }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                </td>\r\n\r\n              </ng-container>\r\n            </tr>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"footer\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == multipleGridSelectionMode\"></td>\r\n\r\n          <ng-container *ngFor=\"let col of selectedColumns\">\r\n            <td class=\"pr-0\" *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\">\r\n              <div *ngIf=\"col.showSummary\">\r\n                <!-- CURRENCY_SOCIETE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                  <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Societe-Display>\r\n                </div>\r\n\r\n                <!-- INTEGER_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.INTEGER_DISPLAY\">\r\n                  <Tsi-Integer-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Integer-Display>\r\n                </div>\r\n\r\n                <!-- RATE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.RATE_DISPLAY\">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction ?? false\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Rate-Display>\r\n                </div>\r\n\r\n                <!-- DECIMAL_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY\">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col.field)\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </div>\r\n\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </div>\r\n              </div>\r\n            </td>\r\n          </ng-container>  \r\n        </tr>\r\n      </ng-template>\r\n      \r\n      <ng-template pTemplate=\"summary\">\r\n        <span *ngIf=\"colorful\">\r\n          <span>View Grid</span>\r\n          <span class=\"pl-2\">| SearchOnInit : {{ searchOnInit }}</span>\r\n          <span class=\"pl-2\">| Pagination In Api : {{ isGridDataPagedInApi }}</span>\r\n        </span>\r\n      </ng-template>\r\n    </p-table>\r\n\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === true\" class=\"col-12\">\r\n    <tsi-calender \r\n  [schema]=\"calenderSchema\" \r\n  [eventsData]=\"page.items\" \r\n  [crudService]=\"crudService\"\r\n  [showInfoButton]=\"showInfoButton\"\r\n  [showDownloadButton]=\"showDownloadButton\"\r\n  [showUploadButton]=\"showUploadButton\"\r\n  [showNoteButton]=\"showNoteButton\"\r\n  [showActionButton]=\"showActionButton\"\r\n  [entityInfo]=\"entityInfo\"\r\n  [filterStartDate]=\"getCalenderFilterValue(calenderSchema?.start)\"\r\n  [filterEndDate]=\"getCalenderFilterValue(calenderSchema?.end)\"\r\n  (dateRangeChange)=\"handleDateRangeChange($event)\"\r\n  (viewTypeChange)=\"handleCalenderViewTypeChange($event)\"\r\n  (eventClick)=\"handleCalendarEventClick($event)\">\r\n</tsi-calender>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCardView === true\" class=\"col-12\">\r\n    <Tsi-card-list [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\"[selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\">\r\n    </Tsi-card-list>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && !_showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\" [crudService]=\"crudService\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\"\r\n      [summaryColumns]=\"kanbanSummaryColumns\">\r\n    </Tsi-kanban>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && _showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban-workflow-etat [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" [descriminatorValue]=\"descriminatorValue\" (callSearch)=\"callSearchHandler($event)\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\"\r\n      [summaryColumns]=\"kanbanSummaryColumns\">\r\n    </Tsi-kanban-workflow-etat>\r\n  </div>\r\n\r\n  <div *ngIf=\"isAdvancedSearch && selectionMode == multipleGridSelectionMode\">\r\n    <Tsi-Modal-Footer [showSaveAndCloseButton]=\"false\" (onSaveClick)=\"onConfirmSelection()\" (onCancelClick)=\"onCancelSelection()\" />\r\n  </div>\r\n</div>", styles: [".p-button.p-button-icon-only.p-button-rounded{border-radius:50%;height:1rem}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.p-inputgroup.rtl-mode .p-inputgroup-addon:last-child,.p-inputgroup.rtl-mode button:last-child,.p-inputgroup.rtl-mode input:last-child,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:6px 0 0 6px/6px 0px 0px 6px!important}.p-inputgroup.ltr-mode .p-inputgroup-addon:last-child,.p-inputgroup.ltr-mode button:last-child,.p-inputgroup.ltr-mode input:last-child,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:0 6px 6px 0/0px 6px 6px 0px!important}.p-paginator .p-dropdown{height:auto;border:none;border-bottom:1px solid}:host ::ng-deep .p-datatable .p-paginator-bottom{display:none}:host ::ng-deep .caption-paginator .p-paginator{background:transparent;border:none;padding:0}.p-datatable .frozen-column{position:sticky;left:0;z-index:1;background:#fff}.frozen-column-ltr-mode{min-width:2rem;position:sticky;left:0;background-color:#fff}.frozen-column-rtl-mode{min-width:2rem;position:sticky;right:0;background-color:#fff}.disabled-column{background-color:#f5f5f5;color:#d3d3d3;pointer-events:none}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:max-content;width:100%;text-align:center;white-space:nowrap;border-radius:.4rem;padding:.1rem .2rem;font-weight:600;line-height:1.2;color:#fff;box-shadow:0 1px 2px #0000000d;transition:all .2s ease-in-out;cursor:default;transform-origin:top center;border-top-left-radius:inherit;border-bottom-right-radius:inherit}.status-badge:hover{transform:scale(1.06);box-shadow:0 2px 4px #0000001a;filter:brightness(1.2)}td span,td div{padding:0 .5rem}.tsi-col-wrap,.tsi-col-wrap>span:not(.status-badge),.tsi-col-wrap>div:not(.status-badge){white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}td.tsi-col-wrap>span:not(.status-badge),td.tsi-col-wrap>div:not(.status-badge){display:inline-block}.custom-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.button-icon{width:1.5rem;height:1.5rem}.custom-button:hover{background-color:#f0f0f0}table{width:100%!important}.right-to-left{text-align:start}::ng-deep th.non-resizable-column .p-column-resizer{display:none!important;pointer-events:none!important}::ng-deep .cursor-follow{position:fixed;background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.85rem;z-index:1000;pointer-events:none;white-space:nowrap}::ng-deep .overflow-menu.p-menu-overlay{border-radius:8px;border:none;padding:.4rem;min-width:0!important;background:#fff;box-shadow:0 8px 24px #0000001f;animation:fadeScaleIn .12s ease-out}::ng-deep .overflow-menu .p-menuitem-link{overflow:visible!important;position:relative;padding:0}::ng-deep .overflow-menu-item{padding:.55rem .75rem;border-radius:8px;gap:.5rem;font-size:.85rem;white-space:nowrap;transition:all .15s ease}::ng-deep .overflow-menu-item:hover{background-color:#f5f7fa}::ng-deep .menu-icon{font-size:.9rem;width:18px;text-align:center;opacity:.8}::ng-deep .menu-label{font-weight:400}::ng-deep .overflow-btn{width:28px;height:28px;padding:0}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}::ng-deep .overflow-menu .p-badge{font-size:.55rem;min-width:.9rem;height:.9rem;line-height:.9rem;font-family:inherit}::ng-deep .badge-icon.has-badge{transition:transform .2s ease-in-out;display:inline-block;position:relative;z-index:2}::ng-deep .badge-icon.has-badge:hover{transform:scale(1.4);z-index:10}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i6.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i6.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i11$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i2$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i11$2.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherInputComponent, selector: "Tsi-Currency-Other-Input", inputs: ["currency", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiCurrencySocieteInputComponent, selector: "Tsi-Currency-Societe-Input", inputs: ["class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiDecimalInputComponent, selector: "Tsi-Decimal-Input", inputs: ["numOfDecimal", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiRateInputComponent, selector: "Tsi-Rate-Input", inputs: ["required", "isFraction", "numOfDecimal"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiCheckboxDisplayComponent, selector: "Tsi-Checkbox-Display", inputs: ["inputData"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["currency", "inputData"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDateDisplayComponent, selector: "Tsi-Date-Display", inputs: ["inputData", "showTime"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: TsiModalFooterComponent, selector: "Tsi-Modal-Footer", inputs: ["cancelDisabled", "saveDisabled", "cancelLabel", "saveLabel", "isConsult", "isDuplicate", "isOnlyCreate", "additionalButtonLabel", "additionalButtonIcon", "additionalButtonDisabled", "showAdditionalButton", "showSaveAndCloseButton", "mode"], outputs: ["onCancelClick", "onSaveClick", "onAdditionalButtonClick"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: TsiSearchBoxComponent, selector: "tsi-search-box", inputs: ["searchFields", "businessClass", "descriminatorValue", "isRtlMode", "isSearchButtonDisabled", "entityInfo", "statusMetadata"], outputs: ["searchFieldsChange", "searchFieldsApplied", "keywordValueChanged", "statusFilterChanged", "workflowEtatFilterChanged", "comboBoxLabelChanged"] }, { kind: "component", type: TsiCardListComponent, selector: "Tsi-card-list", inputs: ["cardBusinessClass", "header", "id", "page", "page$", "overflowActionsMenu", "selectKeyOnly", "key"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiImageDisplayComponent, selector: "tsi-image-display", inputs: ["src", "alt", "width", "height", "isRounded", "headerTitles"] }, { kind: "component", type: TsiKanbanComponent, selector: "Tsi-kanban", inputs: ["cardBusinessClass", "header", "id", "page$", "crudService", "overflowActionsMenu", "selectKeyOnly", "key", "summaryColumns", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiCalenderComponent, selector: "tsi-calender", inputs: ["crudService", "schema", "eventsData", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton", "filterStartDate", "filterEndDate", "entityInfo"], outputs: ["eventClick", "dateRangeChange", "viewTypeChange"] }, { kind: "component", type: TsiKanbanWorkflowEtatComponent, selector: "Tsi-kanban-workflow-etat", inputs: ["cardBusinessClass", "header", "id", "page$", "descriminatorValue", "summaryColumns", "overflowActionsMenu", "selectKeyOnly", "key", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]:not(tsi-tab-panel)", inputs: ["presentationDesigner", "presentationDesignerBase"] }, { kind: "component", type: DisplayNestedPropComponent, selector: "Tsi-Display-Nested-Prop", inputs: ["id", "displayValue", "sourceUrl"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('slideInOut', [
                 state('in', style({
                     height: '*',
@@ -13361,7 +13564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                                 animate('600ms cubic-bezier(0.25, 0.8, 0.25, 1)')
                             ])
                         ])
-                    ], template: "<div class=\"grid\">\r\n\r\n  <div class=\"col-12\" [@slideInOut]=\"showSearchField ? 'in' : 'out'\" *ngIf=\"showGlobalSearch\">\r\n    <tsi-search-box \r\n      [isRtlMode]=\"isRtlMode\" \r\n      [(searchFields)]=\"searchFields\" \r\n      [businessClass]=\"businessClass\"\r\n      [entityInfo]=\"entityInfo\"\r\n      [statusMetadata]=\"statusMetadata\"\r\n      [descriminatorValue]=\"descriminatorValue\"\r\n      (searchFieldsChange)=\"searchFieldsValueChanges($event)\" \r\n      (keywordValueChanged)=\"keywordValueChanged($event)\"\r\n      (searchFieldsApplied)=\"search($event)\"\r\n      (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n      (workflowEtatFilterChanged)=\"onWorkflowEtatFilterChanged($event)\"\r\n      (comboBoxLabelChanged)=\"comboBoxLabelChanged($event)\">\r\n    </tsi-search-box>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === false && _showCardView === false && _showKanbanView === false\" class=\"col-12\">\r\n    \r\n    <p-table #dt\r\n      [lazy]=\"isGridDataPagedInApi\"\r\n      [lazyLoadOnInit]=\"searchOnInit\" \r\n      [totalRecords]=\"page.totalCount\" \r\n      [loading]=\"page.loading\" \r\n      [reorderableColumns]=\"true\"\r\n      [resizableColumns]=\"true\" \r\n      [columns]=\"selectedColumns\" \r\n      [value]=\"page.items\"\r\n      [paginator]=\"true\" \r\n      [scrollable]=\"true\" \r\n      [(rows)]=\"page.pageSize\"\r\n      [showCurrentPageReport]=\"true\" \r\n      [globalFilterFields]=\"fields()\" \r\n      [tableStyle]=\"tableStyle\"\r\n      [rowsPerPageOptions]=\"[1, 10, 25, 50, 100]\" \r\n      [sortMode]=\"sortMode\"\r\n      [multiSortMeta]=\"sortMetas\" \r\n      [selectAll]=\"selectAll\"\r\n      [selectionMode]=\"selectionMode\" \r\n      [(selection)]=\"selection\" \r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      (onRowUnselect)=\"onSelectedItemsChanged()\"\r\n      (selectAllChange)=\"onSelectAllChange($event)\" \r\n      (onRowSelect)=\"onSelectedItemsChanged()\"\r\n      (onColResize)=\"onColResize($event)\"\r\n      columnResizeMode=\"expand\"\r\n      dataKey=\"{{ key }}\" \r\n      scrollHeight=\"600px\" \r\n      [styleClass]=\"'p-datatable-gridlines' + (stripedRows ? ' p-datatable-striped' : '')\"\r\n      currentPageReportTemplate=\"{{ 'Showing' | localize }} {{getFirstElementIndex()}} {{\r\n        'to' | localize\r\n      }} {last} {{ 'of' | localize }} \r\n      {totalRecords} {{ 'entries' | localize }}\" \r\n      >\r\n\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex justify-content-between align-items-center flex-wrap gap-2\">\r\n          <div class=\"ml-2 font-semibold\">\r\n            <span class=\"font-bold\" >{{ header | localize }}</span>\r\n            ({{ page.totalCount }} {{ 'records_label' | localize }})\r\n          </div>\r\n\r\n          <div class=\"flex align-items-center gap-3 caption-paginator\">\r\n            <p-paginator\r\n              [first]=\"dt.first ?? 0\"\r\n              [rows]=\"dt.rows\"\r\n              [totalRecords]=\"dt.totalRecords\"\r\n              [rowsPerPageOptions]=\"[1, 10, 25, 50, 100]\"\r\n              [showCurrentPageReport]=\"true\"\r\n              [currentPageReportTemplate]=\"('Showing' | localize) + ' ' + getFirstElementIndex() + ' ' + ('to' | localize) + ' {last} ' + ('of' | localize) + ' {totalRecords} ' + ('entries' | localize)\"\r\n              (onPageChange)=\"dt.onPageChange({ first: $event.first ?? 1, rows: $event.rows ?? 1 })\">\r\n            </p-paginator>\r\n          </div>\r\n\r\n          <div class=\"p-1 flex align-items-center\">\r\n            <div *ngIf=\"showFilterButton\" presentationDesignerBase=\"grid_toggle_header_filters\">\r\n              <Tsi-Button [icon]=\"filterIcon\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"filterTooltip\"\r\n                styleClass=\"p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"toggleHeaderFilters()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showHeaderFilters\" presentationDesignerBase=\"grid_toggle_header_filter_mode\">\r\n              <Tsi-Button [icon]=\"filterModeIcon\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n                [tooltipText]=\"filterModeTooltip\" [styleClass]=\"'ml-1 p-button-primary p-button-icon-only'\"\r\n                (click)=\"toggleHeaderFiltersMode()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div presentationDesignerBase=\"grid_clear_filter_button\">\r\n              <Tsi-Button [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"'icon-clear-filter'\"\r\n                styleClass=\"ml-1 p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"onClearFilters()\" icon=\"pi pi-eraser\">\r\n              </Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showExportButton\" presentationDesignerBase=\"grid_export_button\">\r\n              <Tsi-Button icon=\"p-button-icon pi pi-file-excel\" (onClick)=\"exportExcel()\"\r\n                styleClass=\"p-element p-button-success hover:shadow-6 ml-2 p-1 p-button p-component p-button-icon-only\"\r\n                [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"XLS\"></Tsi-Button>\r\n            </div>\r\n\r\n            <p-multiSelect class=\"ml-1\" [options]=\"columns\" [ngModel]=\"selectedColumns\" optionLabel=\"translatedHeader\"\r\n              selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" [style]=\"{ 'min-width': '180px' }\"\r\n              placeholder=\"{{ 'choose_columns' | localize }}\" (ngModelChange)=\"onSelectedColumnsChange($event)\">\r\n            </p-multiSelect>\r\n          </div>\r\n\r\n          <!-- <div> -->\r\n          <!-- <button *ngIf=\"showGlobalSearch\" type=\"button\" pButton pRipple icon=\"pi pi-search\" (click)=\"search()\"></button> -->\r\n          <!-- </div> -->\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          <th [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\"\r\n            [ngClass]=\"page.loading ? 'no-z-index' : 'z-1'\" *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n            <div class=\"flex align-items-center justify-content-center\">\r\n              <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </div>\r\n          </th>\r\n          \r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <th *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\"\r\n              scope=\"col\" [attr.data-field]=\"col.field\" [style]=\"col.style\" pTooltip=\"{{ col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n              [pSortableColumn]=\"(!col.isButton || !isOverflowColumn(col.field) || !(col.type == displayTypes.IMAGE_DISPLAY)) ? \r\n              col.field : null\"\r\n              [pResizableColumnDisabled]=\"col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)\"\r\n              [tooltipDisabled]=\"col.isButton || isOverflowColumn(col.field)\" \r\n              [pReorderableColumnDisabled]=\"col.isButton || isOverflowColumn(col.field)\" pReorderableColumn\r\n              pResizableColumn [ngStyle]=\"getHeaderColumnStyle(col)\"\r\n              [class.disabled-column]=\"col.isButton || isOverflowColumn(col.field) || col.type === displayTypes.IMAGE_DISPLAY\"\r\n              [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n              [ngClass]=\"[\r\n                getHeaderClassColor(col.type),\r\n                (col.isButton || isOverflowColumn(col.field)) ? 'w-1rem' : '',\r\n                (col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)) ? 'non-resizable-column' : '',\r\n                ]\">\r\n\r\n              <ng-container *ngIf=\"notInSpecifiedColumn(col.field)\">\r\n                <span>\r\n                  <table class=\"p-0 m-0\">\r\n                    <tr>\r\n                      <td class=\"col p-0 m-0\" [ngClass]=\"{'w-1rem': col.isButton}\">\r\n                          {{ col.header | localize }}\r\n                      </td>\r\n                      <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\">\r\n                        <p-sortIcon \r\n                          *ngIf=\"col.type !== displayTypes.IMAGE_DISPLAY\"\r\n                          class=\"w-1rem m-0 p-0\"\r\n                          field=\"{{ col.field }}\"\r\n                          ></p-sortIcon>\r\n                      </td>\r\n                    </tr>\r\n                  </table>\r\n                </span>\r\n              </ng-container>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n\r\n        <tr *ngIf=\"showHeaderFilters\">\r\n          <!-- <th scope=\"col\" style=\"width:3rem\"></th>\r\n                        <th scope=\"col\" style=\"width:3rem\"></th> -->\r\n          <th [ngClass]=\"page.loading ? 'no-z-index' : ''\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n            style=\"width: 4rem\"></th>\r\n\r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <ng-container *ngIf=\"col.actionDisplay != actionPlacement.Overflow\">\r\n              <th style=\"overflow: inherit\" scope=\"col\">\r\n                <ng-container *ngIf=\"!col.isButton && col.field != overflowColumnField ; else filterLessColumn\">\r\n                  <ng-container [ngSwitch]=\"col.type\">\r\n\r\n                    <!-- DATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDate [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDate.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDate.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DATETIME -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATETIME_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDateTime [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDateTime.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDateTime.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY SOCIETE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Societe-Input #currSocieteInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currSocieteInput.inputField)\">\r\n                          </Tsi-Currency-Societe-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY OTHER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Other-Input #currOtherInput [inputField]=\"value\" [currency]=\"col.currencyOtherCode\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currOtherInput.inputField)\">\r\n                          </Tsi-Currency-Other-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- INTEGER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Integer #integerInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(integerInput.inputField)\">\r\n                          </Tsi-Integer>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DECIMAL -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Decimal-Input #decimalInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(decimalInput.inputField)\">\r\n                          </Tsi-Decimal-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- RATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.RATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Rate-Input #rateInput [inputField]=\"value\" [isFraction]=\"col.isFraction\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(rateInput.inputField)\">\r\n                          </Tsi-Rate-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DEFAULT (text, boolean, or any unhandled type) -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <p-columnFilter [type]=\"col.filterInputType\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [minFractionDigits]=\"col.numOfDecimal\" [maxFractionDigits]=\"col.numOfDecimal\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-template #filterLessColumn></ng-template>\r\n              </th>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </tr>\r\n        \r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n\r\n        <!-- CASE : multiple selection -->\r\n        <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\" *ngIf=\"\r\n            selectionMode == multipleGridSelectionMode;\r\n            else notMultipleSelectionModeBlock\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event,item)\" (dragenter)=\"onDragEnter($event)\"\r\n                    (dragleave)=\"onDragLeave($event)\">\r\n          <td [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\">\r\n              <div class=\"flex align-items-center justify-content-center\">\r\n                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n              </div>\r\n          </td>\r\n          <!-- <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n                            (click)=\"edit(item)\"></button>\r\n                    </div>\r\n                </td>\r\n                <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n                            class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n                    </div>\r\n                </td> -->\r\n                \r\n          <ng-container *ngFor=\"let col of columns\">\r\n\r\n            <td  *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\" [class.tsi-col-wrap]=\"shouldWrapColumn(col)\" [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n              >\r\n\r\n              <!-- style=\"height: min-content; margin-left: -.5rem;\" -->\r\n              <!-- Tsi-Currency-Societe-Input -->\r\n\r\n              <div *ngIf=\"\r\n                  col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                  else currencyOtherOutputBlock\r\n                \">\r\n                <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                </Tsi-Currency-Societe-Display>\r\n              </div>\r\n\r\n              <!-- Tsi-Currency-Other-Input -->\r\n              <ng-template #currencyOtherOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                    else datePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Date-Picker -->\r\n              <ng-template #datePickerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DATE_DISPLAY;\r\n                    else dateTimePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Date-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n              <!-- Tsi-CheckBox -->\r\n              <ng-template #checkBoxOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                    else decimalOutputBlock\r\n                  \">\r\n                  <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Checkbox-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Decimal-Input -->\r\n              <ng-template #decimalOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DECIMAL_DISPLAY;\r\n                    else integerOutputBlock\r\n                  \">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Integer -->\r\n              <ng-template #integerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.INTEGER_DISPLAY;\r\n                    else rateOutputBlock\r\n                  \">\r\n                  <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Integer-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Rate-Input -->\r\n              <ng-template #rateOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.RATE_DISPLAY;\r\n                    else displayNestedPropOutputBlock\r\n                  \">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Rate-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayNestedPropOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                    else displayStatusColorBlock\r\n                  \">\r\n                  <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                    [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                  </Tsi-Display-Nested-Prop>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusColorBlock>\r\n                <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                  </div> \r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusValueColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                          class=\"px-2 py-1 font-bold status-badge\"\r\n                          [style.background-color]=\"opt.colorHex\"\r\n                          [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                          [ngClass]=\"{\r\n                              'text-black bg-white': !opt.colorHex,\r\n                              'text-white': opt.colorHex\r\n                            }\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                          class=\"px-2 py-1 font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-status-column -->\r\n              <ng-template #displayStatusColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n\r\n                        <span\r\n                          *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                          class=\"font-bold status-badge\"\r\n                          [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                          [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                          [style.padding-top]=\"'0.1rem'\"\r\n                          [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n                          class=\"font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayButtonBlock>\r\n                <ng-container *ngIf=\"col.isButton; else displayImage\" >\r\n                  <div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n                    <Tsi-Button  [styleClass]=\"col.styleClass\" type=\"button\"\r\n                      icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                      [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n                      (click)=\"buttonClicked(item, col.field)\" ></Tsi-Button>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-image -->\r\n              <ng-template #displayImage>\r\n                <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                  <div class=\"h-2rem\">\r\n                    <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                      [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                      [width]=\"'100%'\" [height]=\"'100%'\">\r\n                    </tsi-image-display>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-icon (file-type logo) -->\r\n              <ng-template #displayIconBlock>\r\n                <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                  <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                    <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                      [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                      style=\"font-size: 1.25rem\"></i>\r\n                    <span>{{ item[col.field] }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-text-eye -->\r\n              <ng-template #displayTextEyeBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.TEXT_DISPLAY;\r\n                    else moreActionsBlock\r\n                  \">\r\n                  <span class=\"p-2 inline-block\">\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n\r\n              <!-- more actions -->\r\n                  <ng-template #moreActionsBlock>\r\n                    <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n                      <p-menu \r\n                        appendTo=\"body\" \r\n                        #menuMoreActions \r\n                        [model]=\"overflowActionsMenu\" \r\n                        [popup]=\"true\"\r\n                        styleClass=\"overflow-menu\"\r\n                        [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n                        \r\n                        <ng-template pTemplate=\"item\" let-menuItem>\r\n                          <a \r\n                            pRipple \r\n                            class=\"flex align-items-center p-menuitem-link\"\r\n                            [ngClass]=\"menuItem.styleClass\"\r\n                            (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n                            <i\r\n                              *ngIf=\"menuItem.id === 'notes'\"\r\n                              class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\"\r\n                              pBadge\r\n                              severity=\"danger\"\r\n                              [value]=\"item.notesCount\"\r\n                              [badgeDisabled]=\"item.notesCount == null\"\r\n                              badgePosition=\"top-right\">\r\n                            </i>\r\n\r\n                            <i\r\n                              *ngIf=\"menuItem.id !== 'notes'\"\r\n                              class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\">\r\n                            </i>\r\n\r\n                            <span class=\"menu-label\">\r\n                              {{ menuItem.label | localize }}\r\n                            </span>\r\n                          </a>\r\n                        </ng-template>\r\n                      </p-menu>\r\n                      <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <p-button \r\n                          type=\"button\"\r\n                          icon=\"{{col.buttonIcon}}\"\r\n                          styleClass=\"{{col.styleClass}} overflow-btn\"\r\n                          (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n                        </p-button>  \r\n                      </div>\r\n                      \r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n              <!-- Tsi-Text-Box -->\r\n              <ng-template #defaultTextOutputBlock>\r\n                <ng-container>\r\n                  <span class=\"p-2 inline-block\">\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n                    class=\"drag-message cursor-follow\">\r\n                    {{ \"Jointure\" | localize }}\r\n                  </div>\r\n        </tr>\r\n                          \r\n        <!-- CASE : single or none selection -->\r\n        <ng-template #notMultipleSelectionModeBlock>\r\n          <ng-container>\r\n            <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\"\r\n              [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"index\" id=\"tsi-grid-row-{{index}}\">\r\n\r\n              <ng-container *ngFor=\"let col of columns\">\r\n\r\n                <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\"\r\n                  [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n                  style=\"height: min-content;\"\r\n                  [ngClass]=\"{\r\n                    'w-1rem': col.isButton,\r\n                    'bg-white': col.isButton\r\n                  }\">\r\n\r\n                  <div *ngIf=\"\r\n                      col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                      else currencyOtherOutputBlock\r\n                    \">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </div>\r\n\r\n                  <!-- Tsi-Currency-Other-Input -->\r\n                  <ng-template #currencyOtherOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                        else datePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Currency-Other-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #datePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATE_DISPLAY;\r\n                        else dateTimePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <!-- Tsi-CheckBox -->\r\n                  <ng-template #checkBoxOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                        else decimalOutputBlock\r\n                      \">\r\n                      <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Checkbox-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Decimal-Input -->\r\n                  <ng-template #decimalOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DECIMAL_DISPLAY;\r\n                        else integerOutputBlock\r\n                      \">\r\n                      <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                        [numOfDecimal]=\"col.numOfDecimal\">\r\n                      </Tsi-Decimal-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Integer -->\r\n                  <ng-template #integerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.INTEGER_DISPLAY;\r\n                        else rateOutputBlock\r\n                      \">\r\n                      <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Integer-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Rate-Input -->\r\n                  <ng-template #rateOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.RATE_DISPLAY;\r\n                        else displayNestedPropOutputBlock\r\n                      \">\r\n                      <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Rate-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayNestedPropOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                        else displayStatusColorBlock\r\n                      \">\r\n                      <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                        [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                      </Tsi-Display-Nested-Prop>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <ng-template #displayStatusColorBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <ng-template #displayStatusValueColumnBlock>\r\n                      <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                        <div class=\"align-items-center justify-content-center p-2\">\r\n                          <!--<p-tag \r\n                              [value]=\"item[col.field]\"\r\n                              [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                          </p-tag>-->\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                                class=\"px-2 py-1 font-bold status-badge\"\r\n                                [style.background-color]=\"opt.colorHex\"\r\n                                [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                                [ngClass]=\"{\r\n                                    'text-black bg-white': !opt.colorHex,\r\n                                    'text-white': opt.colorHex\r\n                                  }\"\r\n                                >\r\n                                {{ opt.translatedLabel }}\r\n                              </span>\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                                class=\"px-2 py-1 font-bold status-badge\">\r\n                                {{ item[col.field] }}\r\n                              </span>\r\n                        </div>\r\n                      </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-status-prop -->\r\n                  <ng-template #displayStatusColumnBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                        <!--<p-tag \r\n                          [value]=\"item[col.field]\"\r\n                          [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                        </p-tag>-->\r\n\r\n                        <span\r\n                            *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                            class=\"status-badge font-bold\"\r\n                            [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                            [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                            [style.padding-top]=\"'0.1rem'\"\r\n                            [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                            {{ opt.translatedLabel }}\r\n                          </span>\r\n                          <span\r\n                            *ngIf=\"statusMetadata &&  !getStatusOption(item[col.field])\"\r\n                            class=\"status-badge font-bold\">\r\n                            {{ item[col.field] }}\r\n                        </span>\r\n                        \r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                  \r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayButtonBlock>\r\n                    <ng-container *ngIf=\"col.isButton; else displayImage\">\r\n                      <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n                        [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n                        class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n                        <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n                          [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                          (click)=\"buttonClicked(item, col.field)\"\r\n                          [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-image -->\r\n                  <ng-template #displayImage>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                      <div class=\"h-2rem\">\r\n                        <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                          [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                          [width]=\"'100%'\" [height]=\"'100%'\">\r\n                        </tsi-image-display>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-icon (file-type logo) -->\r\n                  <ng-template #displayIconBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                      <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                        <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                          [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                          style=\"font-size: 1.25rem\"></i>\r\n                        <span>{{ item[col.field] }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-text-eye -->\r\n                  <ng-template #displayTextEyeBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.TEXT_DISPLAY;\r\n                        else moreActionsBlock\r\n                      \">\r\n                      <span class=\"p-2 inline-block\">\r\n                        <span class=\"cursor-pointer pi pi-eye\" (click)=\"eyeClicked(item[col.field])\"></span>\r\n                        {{ truncateString(item[col.field], 50) }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- more actions -->\r\n                  <ng-template #moreActionsBlock>\r\n                    <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n                      <p-menu \r\n                        appendTo=\"body\" \r\n                        #menuMoreActions \r\n                        [model]=\"overflowActionsMenu\" \r\n                        [popup]=\"true\"\r\n                        styleClass=\"overflow-menu\"\r\n                        [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n                        \r\n                        <ng-template pTemplate=\"item\" let-menuItem>\r\n                          <a \r\n                            pRipple \r\n                            class=\"flex align-items-center p-menuitem-link\"\r\n                            [ngClass]=\"menuItem.styleClass\"\r\n                            (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n                            <i\r\n                              *ngIf=\"menuItem.id === 'notes'\"\r\n                              class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\"\r\n                              pBadge\r\n                              severity=\"danger\"\r\n                              [value]=\"item.notesCount\"\r\n                              [badgeDisabled]=\"item.notesCount == null\"\r\n                              badgePosition=\"top-right\">\r\n                            </i>\r\n\r\n                            <i\r\n                              *ngIf=\"menuItem.id !== 'notes'\"\r\n                              class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\">\r\n                            </i>\r\n\r\n                            <span class=\"menu-label\">\r\n                              {{ menuItem.label | localize }}\r\n                            </span>\r\n                          </a>\r\n                        </ng-template>\r\n                      </p-menu>\r\n                      <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <p-button \r\n                          type=\"button\"\r\n                          icon=\"{{col.buttonIcon}}\"\r\n                          styleClass=\"{{col.styleClass}} overflow-btn\"\r\n                          (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n                        </p-button>  \r\n                      </div>\r\n                      \r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Text-Box -->\r\n                  <ng-template #defaultTextOutputBlock>\r\n                    <ng-container>\r\n                      <span class=\"p-2 inline-block\">\r\n                        {{ item[col.field] }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                </td>\r\n\r\n              </ng-container>\r\n            </tr>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"footer\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == multipleGridSelectionMode\"></td>\r\n\r\n          <ng-container *ngFor=\"let col of selectedColumns\">\r\n            <td class=\"pr-0\" *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\">\r\n              <div *ngIf=\"col.showSummary\">\r\n                <!-- CURRENCY_SOCIETE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                  <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Societe-Display>\r\n                </div>\r\n\r\n                <!-- INTEGER_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.INTEGER_DISPLAY\">\r\n                  <Tsi-Integer-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Integer-Display>\r\n                </div>\r\n\r\n                <!-- RATE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.RATE_DISPLAY\">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction ?? false\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Rate-Display>\r\n                </div>\r\n\r\n                <!-- DECIMAL_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY\">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col.field)\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </div>\r\n\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </div>\r\n              </div>\r\n            </td>\r\n          </ng-container>  \r\n        </tr>\r\n      </ng-template>\r\n      \r\n      <ng-template pTemplate=\"summary\">\r\n        <span *ngIf=\"colorful\">\r\n          <span>View Grid</span>\r\n          <span class=\"pl-2\">| SearchOnInit : {{ searchOnInit }}</span>\r\n          <span class=\"pl-2\">| Pagination In Api : {{ isGridDataPagedInApi }}</span>\r\n        </span>\r\n      </ng-template>\r\n    </p-table>\r\n\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === true\" class=\"col-12\">\r\n    <tsi-calender \r\n  [schema]=\"calenderSchema\" \r\n  [eventsData]=\"page.items\" \r\n  [crudService]=\"crudService\"\r\n  [showInfoButton]=\"showInfoButton\"\r\n  [showDownloadButton]=\"showDownloadButton\"\r\n  [showUploadButton]=\"showUploadButton\"\r\n  [showNoteButton]=\"showNoteButton\"\r\n  [showActionButton]=\"showActionButton\"\r\n  [entityInfo]=\"entityInfo\"\r\n  [filterStartDate]=\"getCalenderFilterValue(calenderSchema?.start)\"\r\n  [filterEndDate]=\"getCalenderFilterValue(calenderSchema?.end)\"\r\n  (dateRangeChange)=\"handleDateRangeChange($event)\"\r\n  (viewTypeChange)=\"handleCalenderViewTypeChange($event)\"\r\n  (eventClick)=\"handleCalendarEventClick($event)\">\r\n</tsi-calender>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCardView === true\" class=\"col-12\">\r\n    <Tsi-card-list [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\"[selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\">\r\n    </Tsi-card-list>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && !_showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\" [crudService]=\"crudService\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\"\r\n      [summaryColumns]=\"kanbanSummaryColumns\">\r\n    </Tsi-kanban>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && _showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban-workflow-etat [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" [descriminatorValue]=\"descriminatorValue\" (callSearch)=\"callSearchHandler($event)\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\"\r\n      [summaryColumns]=\"kanbanSummaryColumns\">\r\n    </Tsi-kanban-workflow-etat>\r\n  </div>\r\n\r\n  <div *ngIf=\"isAdvancedSearch && selectionMode == multipleGridSelectionMode\">\r\n    <Tsi-Modal-Footer [showSaveAndCloseButton]=\"false\" (onSaveClick)=\"onConfirmSelection()\" (onCancelClick)=\"onCancelSelection()\" />\r\n  </div>\r\n</div>", styles: [".p-button.p-button-icon-only.p-button-rounded{border-radius:50%;height:1rem}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.p-inputgroup.rtl-mode .p-inputgroup-addon:last-child,.p-inputgroup.rtl-mode button:last-child,.p-inputgroup.rtl-mode input:last-child,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:6px 0 0 6px/6px 0px 0px 6px!important}.p-inputgroup.ltr-mode .p-inputgroup-addon:last-child,.p-inputgroup.ltr-mode button:last-child,.p-inputgroup.ltr-mode input:last-child,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:0 6px 6px 0/0px 6px 6px 0px!important}.p-paginator .p-dropdown{height:auto;border:none;border-bottom:1px solid}:host ::ng-deep .p-datatable .p-paginator-bottom{display:none}:host ::ng-deep .caption-paginator .p-paginator{background:transparent;border:none;padding:0}.p-datatable .frozen-column{position:sticky;left:0;z-index:1;background:#fff}.frozen-column-ltr-mode{min-width:2rem;position:sticky;left:0;background-color:#fff}.frozen-column-rtl-mode{min-width:2rem;position:sticky;right:0;background-color:#fff}.disabled-column{background-color:#f5f5f5;color:#d3d3d3;pointer-events:none}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:max-content;width:100%;text-align:center;white-space:nowrap;border-radius:.4rem;padding:.1rem .2rem;font-weight:600;line-height:1.2;color:#fff;box-shadow:0 1px 2px #0000000d;transition:all .2s ease-in-out;cursor:default;transform-origin:top center;border-top-left-radius:inherit;border-bottom-right-radius:inherit}.status-badge:hover{transform:scale(1.06);box-shadow:0 2px 4px #0000001a;filter:brightness(1.2)}td span,td div{padding:0 .5rem}.tsi-col-wrap,.tsi-col-wrap>span:not(.status-badge),.tsi-col-wrap>div:not(.status-badge){white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}td.tsi-col-wrap>span:not(.status-badge),td.tsi-col-wrap>div:not(.status-badge){display:inline-block}.custom-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.button-icon{width:1.5rem;height:1.5rem}.custom-button:hover{background-color:#f0f0f0}table{width:100%!important}.right-to-left{text-align:start}::ng-deep th.non-resizable-column .p-column-resizer{display:none!important;pointer-events:none!important}::ng-deep .cursor-follow{position:fixed;background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.85rem;z-index:1000;pointer-events:none;white-space:nowrap}::ng-deep .overflow-menu.p-menu-overlay{border-radius:8px;border:none;padding:.4rem;min-width:0!important;background:#fff;box-shadow:0 8px 24px #0000001f;animation:fadeScaleIn .12s ease-out}::ng-deep .overflow-menu .p-menuitem-link{overflow:visible!important;position:relative;padding:0}::ng-deep .overflow-menu-item{padding:.55rem .75rem;border-radius:8px;gap:.5rem;font-size:.85rem;white-space:nowrap;transition:all .15s ease}::ng-deep .overflow-menu-item:hover{background-color:#f5f7fa}::ng-deep .menu-icon{font-size:.9rem;width:18px;text-align:center;opacity:.8}::ng-deep .menu-label{font-weight:400}::ng-deep .overflow-btn{width:28px;height:28px;padding:0}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}::ng-deep .overflow-menu .p-badge{font-size:.55rem;min-width:.9rem;height:.9rem;line-height:.9rem;font-family:inherit}::ng-deep .badge-icon.has-badge{transition:transform .2s ease-in-out;display:inline-block;position:relative;z-index:2}::ng-deep .badge-icon.has-badge:hover{transform:scale(1.4);z-index:10}\n"] }]
+                    ], template: "<div class=\"grid\">\r\n\r\n  <div class=\"col-12\" [@slideInOut]=\"showSearchField ? 'in' : 'out'\" *ngIf=\"showGlobalSearch\">\r\n    <tsi-search-box \r\n      [isRtlMode]=\"isRtlMode\" \r\n      [(searchFields)]=\"searchFields\" \r\n      [businessClass]=\"businessClass\"\r\n      [entityInfo]=\"entityInfo\"\r\n      [statusMetadata]=\"statusMetadata\"\r\n      [descriminatorValue]=\"descriminatorValue\"\r\n      (searchFieldsChange)=\"searchFieldsValueChanges($event)\" \r\n      (keywordValueChanged)=\"keywordValueChanged($event)\"\r\n      (searchFieldsApplied)=\"search($event)\"\r\n      (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n      (workflowEtatFilterChanged)=\"onWorkflowEtatFilterChanged($event)\"\r\n      (comboBoxLabelChanged)=\"comboBoxLabelChanged($event)\">\r\n    </tsi-search-box>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === false && _showCardView === false && _showKanbanView === false\" class=\"col-12\">\r\n    \r\n    <p-table #dt\r\n      [lazy]=\"isGridDataPagedInApi\"\r\n      [lazyLoadOnInit]=\"searchOnInit\" \r\n      [totalRecords]=\"page.totalCount\" \r\n      [loading]=\"page.loading\" \r\n      [reorderableColumns]=\"true\"\r\n      [resizableColumns]=\"true\" \r\n      [columns]=\"selectedColumns\" \r\n      [value]=\"page.items\"\r\n      [paginator]=\"true\" \r\n      [scrollable]=\"true\" \r\n      [(rows)]=\"page.pageSize\"\r\n      [showCurrentPageReport]=\"true\" \r\n      [globalFilterFields]=\"fields()\" \r\n      [tableStyle]=\"tableStyle\"\r\n      [rowsPerPageOptions]=\"[1, 10, 25, 50, 100]\" \r\n      [sortMode]=\"sortMode\"\r\n      [multiSortMeta]=\"sortMetas\" \r\n      [selectAll]=\"selectAll\"\r\n      [selectionMode]=\"selectionMode\" \r\n      [(selection)]=\"selection\" \r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      (onRowUnselect)=\"onSelectedItemsChanged()\"\r\n      (selectAllChange)=\"onSelectAllChange($event)\" \r\n      (onRowSelect)=\"onSelectedItemsChanged()\"\r\n      (onColResize)=\"onColResize($event)\"\r\n      columnResizeMode=\"expand\"\r\n      dataKey=\"{{ key }}\" \r\n      scrollHeight=\"600px\" \r\n      [styleClass]=\"'p-datatable-gridlines' + (stripedRows ? ' p-datatable-striped' : '')\"\r\n      currentPageReportTemplate=\"{{ 'Showing' | localize }} {{getFirstElementIndex()}} {{\r\n        'to' | localize\r\n      }} {last} {{ 'of' | localize }} \r\n      {totalRecords} {{ 'entries' | localize }}\" \r\n      >\r\n\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex justify-content-between align-items-center flex-wrap gap-2\">\r\n          <div class=\"ml-2 font-semibold\">\r\n            <span class=\"font-bold\" >{{ header | localize }}</span>\r\n            ({{ page.totalCount }} {{ 'records_label' | localize }})\r\n          </div>\r\n\r\n          <div class=\"flex align-items-center gap-3 caption-paginator\">\r\n            <p-paginator\r\n              [first]=\"dt.first ?? 0\"\r\n              [rows]=\"dt.rows\"\r\n              [totalRecords]=\"dt.totalRecords\"\r\n              [rowsPerPageOptions]=\"[1, 10, 25, 50, 100]\"\r\n              [showCurrentPageReport]=\"true\"\r\n              [currentPageReportTemplate]=\"('Showing' | localize) + ' ' + getFirstElementIndex() + ' ' + ('to' | localize) + ' {last} ' + ('of' | localize) + ' {totalRecords} ' + ('entries' | localize)\"\r\n              (onPageChange)=\"dt.onPageChange({ first: $event.first ?? 1, rows: $event.rows ?? 1 })\">\r\n            </p-paginator>\r\n          </div>\r\n\r\n          <div class=\"p-1 flex align-items-center\">\r\n            <div *ngIf=\"showFilterButton\" presentationDesignerBase=\"grid_toggle_header_filters\">\r\n              <Tsi-Button [icon]=\"filterIcon\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"filterTooltip\"\r\n                styleClass=\"p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"toggleHeaderFilters()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showHeaderFilters\" presentationDesignerBase=\"grid_toggle_header_filter_mode\">\r\n              <Tsi-Button [icon]=\"filterModeIcon\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n                [tooltipText]=\"filterModeTooltip\" [styleClass]=\"'ml-1 p-button-primary p-button-icon-only'\"\r\n                (click)=\"toggleHeaderFiltersMode()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div presentationDesignerBase=\"grid_clear_filter_button\">\r\n              <Tsi-Button [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"'icon-clear-filter'\"\r\n                styleClass=\"ml-1 p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"onClearFilters()\" icon=\"pi pi-eraser\">\r\n              </Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showExportButton\" presentationDesignerBase=\"grid_export_button\">\r\n              <Tsi-Button icon=\"p-button-icon pi pi-file-excel\" (onClick)=\"exportExcel()\"\r\n                styleClass=\"p-element p-button-success hover:shadow-6 ml-2 p-1 p-button p-component p-button-icon-only\"\r\n                [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"XLS\"></Tsi-Button>\r\n            </div>\r\n\r\n            <p-multiSelect class=\"ml-1\" [options]=\"columns\" [ngModel]=\"selectedColumns\" optionLabel=\"translatedHeader\"\r\n              selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" [style]=\"{ 'min-width': '180px' }\"\r\n              placeholder=\"{{ 'choose_columns' | localize }}\" (ngModelChange)=\"onSelectedColumnsChange($event)\">\r\n            </p-multiSelect>\r\n          </div>\r\n\r\n          <!-- <div> -->\r\n          <!-- <button *ngIf=\"showGlobalSearch\" type=\"button\" pButton pRipple icon=\"pi pi-search\" (click)=\"search()\"></button> -->\r\n          <!-- </div> -->\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          <th [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\"\r\n            [ngClass]=\"page.loading ? 'no-z-index' : 'z-1'\" *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n            <div class=\"flex align-items-center justify-content-center\">\r\n              <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </div>\r\n          </th>\r\n          \r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <th *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\"\r\n              scope=\"col\" [attr.data-field]=\"col.field\" [style]=\"col.style\" pTooltip=\"{{ col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n              [pSortableColumn]=\"(!col.isButton || !isOverflowColumn(col.field) || !(col.type == displayTypes.IMAGE_DISPLAY)) ? \r\n              col.field : null\"\r\n              [pResizableColumnDisabled]=\"col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)\"\r\n              [tooltipDisabled]=\"col.isButton || isOverflowColumn(col.field)\" \r\n              [pReorderableColumnDisabled]=\"col.isButton || isOverflowColumn(col.field)\" pReorderableColumn\r\n              pResizableColumn [ngStyle]=\"getHeaderColumnStyle(col)\"\r\n              [class.disabled-column]=\"col.isButton || isOverflowColumn(col.field) || col.type === displayTypes.IMAGE_DISPLAY\"\r\n              [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n              [ngClass]=\"[\r\n                getHeaderClassColor(col.type),\r\n                (col.isButton || isOverflowColumn(col.field)) ? 'w-1rem' : '',\r\n                (col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)) ? 'non-resizable-column' : '',\r\n                ]\">\r\n\r\n              <ng-container *ngIf=\"notInSpecifiedColumn(col.field)\">\r\n                <span>\r\n                  <table class=\"p-0 m-0\">\r\n                    <tr>\r\n                      <td class=\"col p-0 m-0\" [ngClass]=\"{'w-1rem': col.isButton}\">\r\n                          {{ col.header | localize }}\r\n                      </td>\r\n                      <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\">\r\n                        <p-sortIcon \r\n                          *ngIf=\"col.type !== displayTypes.IMAGE_DISPLAY\"\r\n                          class=\"w-1rem m-0 p-0\"\r\n                          field=\"{{ col.field }}\"\r\n                          ></p-sortIcon>\r\n                      </td>\r\n                    </tr>\r\n                  </table>\r\n                </span>\r\n              </ng-container>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n\r\n        <tr *ngIf=\"showHeaderFilters\">\r\n          <!-- <th scope=\"col\" style=\"width:3rem\"></th>\r\n                        <th scope=\"col\" style=\"width:3rem\"></th> -->\r\n          <th [ngClass]=\"page.loading ? 'no-z-index' : ''\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n            style=\"width: 4rem\"></th>\r\n\r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <ng-container *ngIf=\"col.actionDisplay != actionPlacement.Overflow\">\r\n              <th style=\"overflow: inherit\" scope=\"col\">\r\n                <ng-container *ngIf=\"!col.isButton && col.field != overflowColumnField ; else filterLessColumn\">\r\n                  <ng-container [ngSwitch]=\"col.type\">\r\n\r\n                    <!-- DATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDate [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDate.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDate.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DATETIME -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATETIME_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDateTime [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDateTime.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDateTime.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY SOCIETE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Societe-Input #currSocieteInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currSocieteInput.inputField)\">\r\n                          </Tsi-Currency-Societe-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY OTHER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Other-Input #currOtherInput [inputField]=\"value\" [currency]=\"col.currencyOtherCode\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currOtherInput.inputField)\">\r\n                          </Tsi-Currency-Other-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- INTEGER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Integer #integerInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(integerInput.inputField)\">\r\n                          </Tsi-Integer>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DECIMAL -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Decimal-Input #decimalInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(decimalInput.inputField)\">\r\n                          </Tsi-Decimal-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- RATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.RATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Rate-Input #rateInput [inputField]=\"value\" [isFraction]=\"col.isFraction\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(rateInput.inputField)\">\r\n                          </Tsi-Rate-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DEFAULT (text, boolean, or any unhandled type) -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <p-columnFilter [type]=\"col.filterInputType\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [minFractionDigits]=\"col.numOfDecimal\" [maxFractionDigits]=\"col.numOfDecimal\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-template #filterLessColumn></ng-template>\r\n              </th>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </tr>\r\n        \r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n\r\n        <!-- CASE : multiple selection -->\r\n        <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\" *ngIf=\"\r\n            selectionMode == multipleGridSelectionMode;\r\n            else notMultipleSelectionModeBlock\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event,item)\" (dragenter)=\"onDragEnter($event)\"\r\n                    (dragleave)=\"onDragLeave($event)\">\r\n          <td [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\">\r\n              <div class=\"flex align-items-center justify-content-center\">\r\n                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n              </div>\r\n          </td>\r\n          <!-- <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n                            (click)=\"edit(item)\"></button>\r\n                    </div>\r\n                </td>\r\n                <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n                            class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n                    </div>\r\n                </td> -->\r\n                \r\n          <ng-container *ngFor=\"let col of columns\">\r\n\r\n            <td  *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\" [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n              style=\"height: min-content;\"\r\n              [ngClass]=\"{\r\n                'no-z-index': page.loading,\r\n                'w-1rem': col.isButton,\r\n                'bg-white': col.isButton\r\n              }\">\r\n\r\n              <!-- style=\"height: min-content; margin-left: -.5rem;\" -->\r\n              <!-- Tsi-Currency-Societe-Input -->\r\n\r\n              <div *ngIf=\"\r\n                  col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                  else currencyOtherOutputBlock\r\n                \">\r\n                <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                </Tsi-Currency-Societe-Display>\r\n              </div>\r\n\r\n              <!-- Tsi-Currency-Other-Input -->\r\n              <ng-template #currencyOtherOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                    else datePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Date-Picker -->\r\n              <ng-template #datePickerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DATE_DISPLAY;\r\n                    else dateTimePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Date-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n              <!-- Tsi-CheckBox -->\r\n              <ng-template #checkBoxOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                    else decimalOutputBlock\r\n                  \">\r\n                  <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Checkbox-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Decimal-Input -->\r\n              <ng-template #decimalOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DECIMAL_DISPLAY;\r\n                    else integerOutputBlock\r\n                  \">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Integer -->\r\n              <ng-template #integerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.INTEGER_DISPLAY;\r\n                    else rateOutputBlock\r\n                  \">\r\n                  <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Integer-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Rate-Input -->\r\n              <ng-template #rateOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.RATE_DISPLAY;\r\n                    else displayNestedPropOutputBlock\r\n                  \">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Rate-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayNestedPropOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                    else displayStatusColorBlock\r\n                  \">\r\n                  <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                    [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                  </Tsi-Display-Nested-Prop>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusColorBlock>\r\n                <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                  </div> \r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusValueColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                          class=\"px-2 py-1 font-bold status-badge\"\r\n                          [style.background-color]=\"opt.colorHex\"\r\n                          [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                          [ngClass]=\"{\r\n                              'text-black bg-white': !opt.colorHex,\r\n                              'text-white': opt.colorHex\r\n                            }\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                          class=\"px-2 py-1 font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-status-column -->\r\n              <ng-template #displayStatusColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n\r\n                        <span\r\n                          *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                          class=\"font-bold status-badge\"\r\n                          [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                          [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                          [style.padding-top]=\"'0.1rem'\"\r\n                          [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n                          class=\"font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayButtonBlock>\r\n                <ng-container *ngIf=\"col.isButton; else displayImage\" >\r\n                  <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n                    [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n                    class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n                    <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n                      [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                      (click)=\"buttonClicked(item, col.field)\"\r\n                      [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-image -->\r\n              <ng-template #displayImage>\r\n                <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                  <div class=\"h-2rem\">\r\n                    <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                      [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                      [width]=\"'100%'\" [height]=\"'100%'\">\r\n                    </tsi-image-display>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-icon (file-type logo) -->\r\n              <ng-template #displayIconBlock>\r\n                <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                  <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                    <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                      [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                      style=\"font-size: 1.25rem\"></i>\r\n                    <span>{{ item[col.field] }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-text-eye -->\r\n              <ng-template #displayTextEyeBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.TEXT_DISPLAY;\r\n                    else moreActionsBlock\r\n                  \">\r\n                  <span class=\"p-2 inline-block\">\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n\r\n              <!-- more actions -->\r\n                  <ng-template #moreActionsBlock>\r\n                    <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n                      <p-menu \r\n                        appendTo=\"body\" \r\n                        #menuMoreActions \r\n                        [model]=\"overflowActionsMenu\" \r\n                        [popup]=\"true\"\r\n                        styleClass=\"overflow-menu\"\r\n                        [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n                        \r\n                        <ng-template pTemplate=\"item\" let-menuItem>\r\n                          <a \r\n                            pRipple \r\n                            class=\"flex align-items-center p-menuitem-link\"\r\n                            [ngClass]=\"menuItem.styleClass\"\r\n                            (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n                            <i\r\n                              *ngIf=\"menuItem.id === 'notes'\"\r\n                              class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\"\r\n                              pBadge\r\n                              severity=\"danger\"\r\n                              [value]=\"item.notesCount\"\r\n                              [badgeDisabled]=\"item.notesCount == null\"\r\n                              badgePosition=\"top-right\">\r\n                            </i>\r\n\r\n                            <i\r\n                              *ngIf=\"menuItem.id !== 'notes'\"\r\n                              class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\">\r\n                            </i>\r\n\r\n                            <span class=\"menu-label\">\r\n                              {{ menuItem.label | localize }}\r\n                            </span>\r\n                          </a>\r\n                        </ng-template>\r\n                      </p-menu>\r\n                      <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <p-button \r\n                          type=\"button\"\r\n                          icon=\"{{col.buttonIcon}}\"\r\n                          styleClass=\"{{col.styleClass}} overflow-btn\"\r\n                          (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n                        </p-button>  \r\n                      </div>\r\n                      \r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n              <!-- Tsi-Text-Box -->\r\n              <ng-template #defaultTextOutputBlock>\r\n                <ng-container>\r\n                  <span class=\"p-2 inline-block\">\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n                    class=\"drag-message cursor-follow\">\r\n                    {{ \"Jointure\" | localize }}\r\n                  </div>\r\n        </tr>\r\n                          \r\n        <!-- CASE : single or none selection -->\r\n        <ng-template #notMultipleSelectionModeBlock>\r\n          <ng-container>\r\n            <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\"\r\n              [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"index\" id=\"tsi-grid-row-{{index}}\">\r\n\r\n              <ng-container *ngFor=\"let col of columns\">\r\n\r\n                <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\"\r\n                  [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n                  style=\"height: min-content;\"\r\n                  [ngClass]=\"{\r\n                    'w-1rem': col.isButton,\r\n                    'bg-white': col.isButton\r\n                  }\">\r\n\r\n                  <div *ngIf=\"\r\n                      col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                      else currencyOtherOutputBlock\r\n                    \">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </div>\r\n\r\n                  <!-- Tsi-Currency-Other-Input -->\r\n                  <ng-template #currencyOtherOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                        else datePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Currency-Other-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #datePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATE_DISPLAY;\r\n                        else dateTimePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <!-- Tsi-CheckBox -->\r\n                  <ng-template #checkBoxOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                        else decimalOutputBlock\r\n                      \">\r\n                      <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Checkbox-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Decimal-Input -->\r\n                  <ng-template #decimalOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DECIMAL_DISPLAY;\r\n                        else integerOutputBlock\r\n                      \">\r\n                      <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                        [numOfDecimal]=\"col.numOfDecimal\">\r\n                      </Tsi-Decimal-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Integer -->\r\n                  <ng-template #integerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.INTEGER_DISPLAY;\r\n                        else rateOutputBlock\r\n                      \">\r\n                      <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Integer-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Rate-Input -->\r\n                  <ng-template #rateOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.RATE_DISPLAY;\r\n                        else displayNestedPropOutputBlock\r\n                      \">\r\n                      <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Rate-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayNestedPropOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                        else displayStatusColorBlock\r\n                      \">\r\n                      <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                        [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                      </Tsi-Display-Nested-Prop>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <ng-template #displayStatusColorBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <ng-template #displayStatusValueColumnBlock>\r\n                      <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                        <div class=\"align-items-center justify-content-center p-2\">\r\n                          <!--<p-tag \r\n                              [value]=\"item[col.field]\"\r\n                              [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                          </p-tag>-->\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                                class=\"px-2 py-1 font-bold status-badge\"\r\n                                [style.background-color]=\"opt.colorHex\"\r\n                                [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                                [ngClass]=\"{\r\n                                    'text-black bg-white': !opt.colorHex,\r\n                                    'text-white': opt.colorHex\r\n                                  }\"\r\n                                >\r\n                                {{ opt.translatedLabel }}\r\n                              </span>\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                                class=\"px-2 py-1 font-bold status-badge\">\r\n                                {{ item[col.field] }}\r\n                              </span>\r\n                        </div>\r\n                      </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-status-prop -->\r\n                  <ng-template #displayStatusColumnBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                        <!--<p-tag \r\n                          [value]=\"item[col.field]\"\r\n                          [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                        </p-tag>-->\r\n\r\n                        <span\r\n                            *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                            class=\"status-badge font-bold\"\r\n                            [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                            [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                            [style.padding-top]=\"'0.1rem'\"\r\n                            [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                            {{ opt.translatedLabel }}\r\n                          </span>\r\n                          <span\r\n                            *ngIf=\"statusMetadata &&  !getStatusOption(item[col.field])\"\r\n                            class=\"status-badge font-bold\">\r\n                            {{ item[col.field] }}\r\n                        </span>\r\n                        \r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                  \r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayButtonBlock>\r\n                    <ng-container *ngIf=\"col.isButton; else displayImage\">\r\n                      <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n                        [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n                        class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n                        <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n                          [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                          (click)=\"buttonClicked(item, col.field)\"\r\n                          [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-image -->\r\n                  <ng-template #displayImage>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                      <div class=\"h-2rem\">\r\n                        <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                          [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                          [width]=\"'100%'\" [height]=\"'100%'\">\r\n                        </tsi-image-display>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-icon (file-type logo) -->\r\n                  <ng-template #displayIconBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                      <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                        <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                          [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                          style=\"font-size: 1.25rem\"></i>\r\n                        <span>{{ item[col.field] }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-text-eye -->\r\n                  <ng-template #displayTextEyeBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.TEXT_DISPLAY;\r\n                        else moreActionsBlock\r\n                      \">\r\n                      <span class=\"p-2 inline-block\">\r\n                        <span class=\"cursor-pointer pi pi-eye\" (click)=\"eyeClicked(item[col.field])\"></span>\r\n                        {{ truncateString(item[col.field], 50) }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- more actions -->\r\n                  <ng-template #moreActionsBlock>\r\n                    <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n                      <p-menu \r\n                        appendTo=\"body\" \r\n                        #menuMoreActions \r\n                        [model]=\"overflowActionsMenu\" \r\n                        [popup]=\"true\"\r\n                        styleClass=\"overflow-menu\"\r\n                        [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n                        \r\n                        <ng-template pTemplate=\"item\" let-menuItem>\r\n                          <a \r\n                            pRipple \r\n                            class=\"flex align-items-center p-menuitem-link\"\r\n                            [ngClass]=\"menuItem.styleClass\"\r\n                            (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n                            <i\r\n                              *ngIf=\"menuItem.id === 'notes'\"\r\n                              class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\"\r\n                              pBadge\r\n                              severity=\"danger\"\r\n                              [value]=\"item.notesCount\"\r\n                              [badgeDisabled]=\"item.notesCount == null\"\r\n                              badgePosition=\"top-right\">\r\n                            </i>\r\n\r\n                            <i\r\n                              *ngIf=\"menuItem.id !== 'notes'\"\r\n                              class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\">\r\n                            </i>\r\n\r\n                            <span class=\"menu-label\">\r\n                              {{ menuItem.label | localize }}\r\n                            </span>\r\n                          </a>\r\n                        </ng-template>\r\n                      </p-menu>\r\n                      <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <p-button \r\n                          type=\"button\"\r\n                          icon=\"{{col.buttonIcon}}\"\r\n                          styleClass=\"{{col.styleClass}} overflow-btn\"\r\n                          (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n                        </p-button>  \r\n                      </div>\r\n                      \r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Text-Box -->\r\n                  <ng-template #defaultTextOutputBlock>\r\n                    <ng-container>\r\n                      <span class=\"p-2 inline-block\">\r\n                        {{ item[col.field] }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                </td>\r\n\r\n              </ng-container>\r\n            </tr>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"footer\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == multipleGridSelectionMode\"></td>\r\n\r\n          <ng-container *ngFor=\"let col of selectedColumns\">\r\n            <td class=\"pr-0\" *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\">\r\n              <div *ngIf=\"col.showSummary\">\r\n                <!-- CURRENCY_SOCIETE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                  <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Societe-Display>\r\n                </div>\r\n\r\n                <!-- INTEGER_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.INTEGER_DISPLAY\">\r\n                  <Tsi-Integer-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Integer-Display>\r\n                </div>\r\n\r\n                <!-- RATE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.RATE_DISPLAY\">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction ?? false\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Rate-Display>\r\n                </div>\r\n\r\n                <!-- DECIMAL_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY\">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col.field)\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </div>\r\n\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </div>\r\n              </div>\r\n            </td>\r\n          </ng-container>  \r\n        </tr>\r\n      </ng-template>\r\n      \r\n      <ng-template pTemplate=\"summary\">\r\n        <span *ngIf=\"colorful\">\r\n          <span>View Grid</span>\r\n          <span class=\"pl-2\">| SearchOnInit : {{ searchOnInit }}</span>\r\n          <span class=\"pl-2\">| Pagination In Api : {{ isGridDataPagedInApi }}</span>\r\n        </span>\r\n      </ng-template>\r\n    </p-table>\r\n\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === true\" class=\"col-12\">\r\n    <tsi-calender \r\n  [schema]=\"calenderSchema\" \r\n  [eventsData]=\"page.items\" \r\n  [crudService]=\"crudService\"\r\n  [showInfoButton]=\"showInfoButton\"\r\n  [showDownloadButton]=\"showDownloadButton\"\r\n  [showUploadButton]=\"showUploadButton\"\r\n  [showNoteButton]=\"showNoteButton\"\r\n  [showActionButton]=\"showActionButton\"\r\n  [entityInfo]=\"entityInfo\"\r\n  [filterStartDate]=\"getCalenderFilterValue(calenderSchema?.start)\"\r\n  [filterEndDate]=\"getCalenderFilterValue(calenderSchema?.end)\"\r\n  (dateRangeChange)=\"handleDateRangeChange($event)\"\r\n  (viewTypeChange)=\"handleCalenderViewTypeChange($event)\"\r\n  (eventClick)=\"handleCalendarEventClick($event)\">\r\n</tsi-calender>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCardView === true\" class=\"col-12\">\r\n    <Tsi-card-list [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\"[selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\">\r\n    </Tsi-card-list>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && !_showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\" [crudService]=\"crudService\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\"\r\n      [summaryColumns]=\"kanbanSummaryColumns\">\r\n    </Tsi-kanban>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && _showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban-workflow-etat [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" [descriminatorValue]=\"descriminatorValue\" (callSearch)=\"callSearchHandler($event)\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\"\r\n      [summaryColumns]=\"kanbanSummaryColumns\">\r\n    </Tsi-kanban-workflow-etat>\r\n  </div>\r\n\r\n  <div *ngIf=\"isAdvancedSearch && selectionMode == multipleGridSelectionMode\">\r\n    <Tsi-Modal-Footer [showSaveAndCloseButton]=\"false\" (onSaveClick)=\"onConfirmSelection()\" (onCancelClick)=\"onCancelSelection()\" />\r\n  </div>\r\n</div>", styles: [".p-button.p-button-icon-only.p-button-rounded{border-radius:50%;height:1rem}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.p-inputgroup.rtl-mode .p-inputgroup-addon:last-child,.p-inputgroup.rtl-mode button:last-child,.p-inputgroup.rtl-mode input:last-child,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:6px 0 0 6px/6px 0px 0px 6px!important}.p-inputgroup.ltr-mode .p-inputgroup-addon:last-child,.p-inputgroup.ltr-mode button:last-child,.p-inputgroup.ltr-mode input:last-child,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:0 6px 6px 0/0px 6px 6px 0px!important}.p-paginator .p-dropdown{height:auto;border:none;border-bottom:1px solid}:host ::ng-deep .p-datatable .p-paginator-bottom{display:none}:host ::ng-deep .caption-paginator .p-paginator{background:transparent;border:none;padding:0}.p-datatable .frozen-column{position:sticky;left:0;z-index:1;background:#fff}.frozen-column-ltr-mode{min-width:2rem;position:sticky;left:0;background-color:#fff}.frozen-column-rtl-mode{min-width:2rem;position:sticky;right:0;background-color:#fff}.disabled-column{background-color:#f5f5f5;color:#d3d3d3;pointer-events:none}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:max-content;width:100%;text-align:center;white-space:nowrap;border-radius:.4rem;padding:.1rem .2rem;font-weight:600;line-height:1.2;color:#fff;box-shadow:0 1px 2px #0000000d;transition:all .2s ease-in-out;cursor:default;transform-origin:top center;border-top-left-radius:inherit;border-bottom-right-radius:inherit}.status-badge:hover{transform:scale(1.06);box-shadow:0 2px 4px #0000001a;filter:brightness(1.2)}td span,td div{padding:0 .5rem}.tsi-col-wrap,.tsi-col-wrap>span:not(.status-badge),.tsi-col-wrap>div:not(.status-badge){white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}td.tsi-col-wrap>span:not(.status-badge),td.tsi-col-wrap>div:not(.status-badge){display:inline-block}.custom-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.button-icon{width:1.5rem;height:1.5rem}.custom-button:hover{background-color:#f0f0f0}table{width:100%!important}.right-to-left{text-align:start}::ng-deep th.non-resizable-column .p-column-resizer{display:none!important;pointer-events:none!important}::ng-deep .cursor-follow{position:fixed;background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.85rem;z-index:1000;pointer-events:none;white-space:nowrap}::ng-deep .overflow-menu.p-menu-overlay{border-radius:8px;border:none;padding:.4rem;min-width:0!important;background:#fff;box-shadow:0 8px 24px #0000001f;animation:fadeScaleIn .12s ease-out}::ng-deep .overflow-menu .p-menuitem-link{overflow:visible!important;position:relative;padding:0}::ng-deep .overflow-menu-item{padding:.55rem .75rem;border-radius:8px;gap:.5rem;font-size:.85rem;white-space:nowrap;transition:all .15s ease}::ng-deep .overflow-menu-item:hover{background-color:#f5f7fa}::ng-deep .menu-icon{font-size:.9rem;width:18px;text-align:center;opacity:.8}::ng-deep .menu-label{font-weight:400}::ng-deep .overflow-btn{width:28px;height:28px;padding:0}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}::ng-deep .overflow-menu .p-badge{font-size:.55rem;min-width:.9rem;height:.9rem;line-height:.9rem;font-family:inherit}::ng-deep .badge-icon.has-badge{transition:transform .2s ease-in-out;display:inline-block;position:relative;z-index:2}::ng-deep .badge-icon.has-badge:hover{transform:scale(1.4);z-index:10}\n"] }]
         }], ctorParameters: () => [{ type: StatusColorService }, { type: GenericFichierService }, { type: HtmlTemplateGeneratorService }, { type: i1$2.DatePipe }, { type: TsiNotificationService }, { type: LocalizePipe }, { type: LayoutHelperService }, { type: LayoutService }, { type: i2$1.PrimeNGConfig }, { type: AppSettingsService }, { type: ErrorResponseManagerService }, { type: i0.EnvironmentInjector }, { type: i1$3.DynamicDialogConfig }, { type: i1$3.DynamicDialogRef }], propDecorators: { cudComponent: [{
                 type: Input
             }], modalSize: [{
@@ -14223,6 +14426,16 @@ class TsiViewGridComponent {
     get page() {
         return this._page;
     }
+    get businessClass() {
+        return this._businessClass;
+    }
+    set businessClass(value) {
+        if (value === this._businessClass) {
+            return;
+        }
+        this._businessClass = value;
+        this._loadEntityInfo();
+    }
     set columns(value) {
         this._columns = value ?? [];
     }
@@ -14269,10 +14482,11 @@ class TsiViewGridComponent {
     }
     //#region Outputs
     //#endregion
-    constructor(_errorResponseManagerService, _tsiModalService, _cdr) {
+    constructor(_errorResponseManagerService, _tsiModalService, _cdr, _entityConfigService) {
         this._errorResponseManagerService = _errorResponseManagerService;
         this._tsiModalService = _tsiModalService;
         this._cdr = _cdr;
+        this._entityConfigService = _entityConfigService;
         this._formEndpoint = undefined;
         this.tooltipPosition = TooltipPosition;
         this.pagedRequest = {
@@ -14429,6 +14643,20 @@ class TsiViewGridComponent {
         this.selectedItemsChange.emit(event);
     }
     //#region private methods
+    async _loadEntityInfo() {
+        if (!this._businessClass) {
+            return;
+        }
+        try {
+            this.entityInfo = await this._entityConfigService.getEntityInfoFromCache(this._businessClass);
+            if (!this.entityInfo) {
+                console.warn(`No entity info found for ${this._businessClass}`);
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
     _setformEndpointBody() {
         let ox = this._clonePagedRequest(this.pagedRequest);
         ox['getAllData'] = true;
@@ -14546,13 +14774,13 @@ class TsiViewGridComponent {
             // break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiViewGridComponent, deps: [{ token: ErrorResponseManagerService }, { token: TsiModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiViewGridComponent, selector: "tsi-view-grid", inputs: { columns: "columns", gridConfiguration: "gridConfiguration", viewComponent: "viewComponent", crudService: "crudService", header: "header", modalSize: "modalSize", showConsultButton: "showConsultButton", showSearchField: "showSearchField", searchFields: "searchFields", formEndpoint: "formEndpoint", formName: "formName", id: "id", showImportExportButton: "showImportExportButton", targetBusinessClass: "targetBusinessClass", getDataFromApi: "getDataFromApi", gridData: "gridData", isSearchButtonDisabled: "isSearchButtonDisabled", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", key: "key", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showCalenderView: "showCalenderView", showHeaderFilters: "showHeaderFilters", showFilterButton: "showFilterButton", selectAll: "selectAll", checkedByField: "checkedByField", sortMode: "sortMode", sizingMode: "sizingMode", searchOnInit: "searchOnInit" }, outputs: { summariesChange: "summariesChange", selectedItemsChange: "selectedItemsChange", buttonColumnClicked: "buttonColumnClicked", searchFieldsValueChanged: "searchFieldsValueChanged", getAllPagedResultChanged: "getAllPagedResultChanged" }, viewQueries: [{ propertyName: "genericGridComponent", first: true, predicate: TsiGenericGridComponent, descendants: true }], ngImport: i0, template: "<div class=\"card\">\r\n  \r\n  <p-toolbar *ngIf=\"formEndpoint\" styleClass=\"border-radius-7 mb-1 flex align-items-center gap-2\">\r\n    <ng-template pTemplate=\"left\">\r\n      <div class=\"flex gap-2 ml-2\">\r\n        <Tsi-Button  icon=\"pi pi-sliders-h\" [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_tsi_component_grid_menu_view\" *ngIf=\"searchFields\"\r\n        styleClass=\"h-2rem hover:shadow-6 p-button-icon-only {{showSearchField ? 'p-button-secondary' : 'p-button-success'}}\" \r\n          (click)=\"displaySearchFields()\">\r\n        </Tsi-Button>\r\n        <Tsi-Button icon=\"p-button-icon pi pi-calendar {{showCalenderView ? 'pi pi-align-justify' : 'pi pi-calendar'}}\" \r\n        styleClass=\"p-element p-button-primary hover:shadow-6 h-2rem p-button p-component p-button-icon-only\" (click)=\"toggleCalenderView()\" \r\n        tooltipText=\"{{(showCalenderView ? 'shared_tsi_component_grid_list_view' : 'shared_tsi_component_grid_calender_view') | localize}}\" [tooltipPosition]=\"tooltipPosition.Top\"></Tsi-Button>\r\n      </div>\r\n    </ng-template>\r\n    \r\n    <ng-template pTemplate=\"right\">\r\n        <app-reporting *ngIf=\"formEndpoint || businessClass\"\r\n          [formEndpoint]=\"formEndpoint\"\r\n          [formName]=\"formName\"\r\n          [formEndpointBody]=\"formEndpointBody\"\r\n          [isFormEndpointPaged]=\"true\"\r\n          [showImportExportButton]=\"showImportExportButton\"\r\n          (refreshData)=\"refresh($event)\"\r\n          [filtersHtmlTemplate]=\"filtersHtmlTemplate\"\r\n          [businessClass]=\"businessClass\"\r\n          [pagedRequest]=\"pagedRequest\"\r\n          [configModeButtonId]=\"configModeButtonId\"\r\n          [showNoteButton]=\"false\"\r\n          [showActionButton]=\"false\"\r\n          [showInfoButton]=\"false\"\r\n          [showUploadButton]=\"false\"\r\n          [selectedItemUids]=\"selectedItems\"\r\n          ></app-reporting>\r\n    </ng-template>\r\n  </p-toolbar>\r\n  \r\n  <div>\r\n\r\n    <Tsi-Generic-Grid \r\n      [formName]=\"formName\" \r\n      [header]=\"header\" \r\n      [page]=\"page\" \r\n      [pagedRequest]=\"pagedRequest\" \r\n      [columns]=\"columns\"\r\n      [searchFields]=\"searchFields\" \r\n      [showSearchField]=\"showSearchField\" \r\n      (load)=\"load($event)\"\r\n      (searchFieldsValueChanged)=\"searchFieldsValueChanges($event)\"\r\n      (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n      [(filtersHtmlTemplate)]=\"filtersHtmlTemplate\"\r\n      [selectKeyOnly]=\"selectKeyOnly\"\r\n      [selectionMode]=\"selectionMode\"\r\n      [showImportExportButton]=\"showImportExportButton\"\r\n      [key]=\"key\"\r\n      [crudService]=\"crudService\"\r\n      [(selectedItems)]=\"selectedItems\"\r\n      (selectedItemsChange)=\"onSelectedItemsChange($event)\"\r\n      [isGridDataPagedInApi]=\"getDataFromApi\"\r\n      [searchOnInit]=\"searchOnInit\"\r\n      [showExportButton]=\"showExportButton\"\r\n      [showHeaderFilters]=\"showHeaderFilters\"\r\n      [showFilterButton]=\"showFilterButton\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\r\n      [showCalenderView]=\"showCalenderView\"\r\n      (calendarEventClick)=\"handleCalendarEventClick($event)\"\r\n      [selectAll]=\"selectAll\"\r\n      [checkedByField]=\"checkedByField\"\r\n      [targetBusinessClass]=\"targetBusinessClass\"\r\n      [sortMode]=\"sortMode\"\r\n      [sizingMode]=\"sizingMode\"\r\n      ></Tsi-Generic-Grid>\r\n  </div>\r\n</div>", styles: [".hide-search-fields{background-color:#64748b!important;border-color:#64748b!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: ["cudComponent", "modalSize", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton", "sizingMode", "formName", "id", "pagedRequest", "configuration", "page", "key", "columns", "isSearchButtonDisabled", "filteredColumns", "gridData", "isTableLoading", "parent", "showSearchBox", "showActionColumn", "showHeaderFilters", "showFilterButton", "isGridDataPagedInApi", "header", "ShowFilterColumns", "showImportExportButton", "crudService", "searchFields", "sortMode", "filtersHtmlTemplate", "presentationSettings", "selectKeyOnly", "selectionMode", "selectedItems", "searchOnInit", "showGlobalSearch", "showExportButton", "showSearchField", "showCalenderView", "calenderSchema", "showCardView", "showKanbanView", "showKanbanViewOfWorkFlowEtat", "page$", "checkedByField", "selectAll", "targetBusinessClass", "descriminatorValue", "businessClass", "groupBy", "entityInfo"], outputs: ["onSave", "editRow", "deleteRow", "load", "buttonColumnClicked", "filtersHtmlTemplateChange", "selectedItemsChange", "searchFieldsValueChanged", "calendarEventClick", "statusFilterChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: ReportingComponent, selector: "app-reporting", inputs: ["showImportExportButton", "showNoteButton", "showInfoButton", "showUploadButton", "showActionButton", "isReportingToolbarDisabled", "formName", "formEndpoint", "formEndpointBody", "isFormEndpointPaged", "filtersHtmlTemplate", "optionalEndpoints", "businessClass", "mode", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "showManageWorkflowButton", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode", "openWorkflow"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiViewGridComponent, deps: [{ token: ErrorResponseManagerService }, { token: TsiModalService }, { token: i0.ChangeDetectorRef }, { token: EntityConfigurationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiViewGridComponent, selector: "tsi-view-grid", inputs: { columns: "columns", gridConfiguration: "gridConfiguration", viewComponent: "viewComponent", crudService: "crudService", header: "header", modalSize: "modalSize", showConsultButton: "showConsultButton", showSearchField: "showSearchField", searchFields: "searchFields", formEndpoint: "formEndpoint", formName: "formName", id: "id", showImportExportButton: "showImportExportButton", targetBusinessClass: "targetBusinessClass", getDataFromApi: "getDataFromApi", gridData: "gridData", isSearchButtonDisabled: "isSearchButtonDisabled", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", key: "key", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showCalenderView: "showCalenderView", showHeaderFilters: "showHeaderFilters", showFilterButton: "showFilterButton", selectAll: "selectAll", checkedByField: "checkedByField", sortMode: "sortMode", sizingMode: "sizingMode", searchOnInit: "searchOnInit" }, outputs: { summariesChange: "summariesChange", selectedItemsChange: "selectedItemsChange", buttonColumnClicked: "buttonColumnClicked", searchFieldsValueChanged: "searchFieldsValueChanged", getAllPagedResultChanged: "getAllPagedResultChanged" }, viewQueries: [{ propertyName: "genericGridComponent", first: true, predicate: TsiGenericGridComponent, descendants: true }], ngImport: i0, template: "<div class=\"card\">\r\n  \r\n  <p-toolbar *ngIf=\"formEndpoint\" styleClass=\"border-radius-7 mb-1 flex align-items-center gap-2\">\r\n    <ng-template pTemplate=\"left\">\r\n      <div class=\"flex gap-2 ml-2\">\r\n        <Tsi-Button  icon=\"pi pi-sliders-h\" [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_tsi_component_grid_menu_view\" *ngIf=\"searchFields\"\r\n        styleClass=\"h-2rem hover:shadow-6 p-button-icon-only {{showSearchField ? 'p-button-secondary' : 'p-button-success'}}\" \r\n          (click)=\"displaySearchFields()\">\r\n        </Tsi-Button>\r\n        <Tsi-Button icon=\"p-button-icon pi pi-calendar {{showCalenderView ? 'pi pi-align-justify' : 'pi pi-calendar'}}\" \r\n        styleClass=\"p-element p-button-primary hover:shadow-6 h-2rem p-button p-component p-button-icon-only\" (click)=\"toggleCalenderView()\" \r\n        tooltipText=\"{{(showCalenderView ? 'shared_tsi_component_grid_list_view' : 'shared_tsi_component_grid_calender_view') | localize}}\" [tooltipPosition]=\"tooltipPosition.Top\"></Tsi-Button>\r\n      </div>\r\n    </ng-template>\r\n    \r\n    <ng-template pTemplate=\"right\">\r\n        <app-reporting *ngIf=\"formEndpoint || businessClass\"\r\n          [formEndpoint]=\"formEndpoint\"\r\n          [formName]=\"formName\"\r\n          [formEndpointBody]=\"formEndpointBody\"\r\n          [isFormEndpointPaged]=\"true\"\r\n          [showImportExportButton]=\"showImportExportButton\"\r\n          (refreshData)=\"refresh($event)\"\r\n          [filtersHtmlTemplate]=\"filtersHtmlTemplate\"\r\n          [businessClass]=\"businessClass\"\r\n          [pagedRequest]=\"pagedRequest\"\r\n          [configModeButtonId]=\"configModeButtonId\"\r\n          [showNoteButton]=\"false\"\r\n          [showActionButton]=\"false\"\r\n          [showInfoButton]=\"false\"\r\n          [showUploadButton]=\"false\"\r\n          [selectedItemUids]=\"selectedItems\"\r\n          ></app-reporting>\r\n    </ng-template>\r\n  </p-toolbar>\r\n  \r\n  <div>\r\n\r\n    <Tsi-Generic-Grid \r\n      [formName]=\"formName\" \r\n      [header]=\"header\" \r\n      [page]=\"page\" \r\n      [pagedRequest]=\"pagedRequest\" \r\n      [columns]=\"columns\"\r\n      [searchFields]=\"searchFields\" \r\n      [showSearchField]=\"showSearchField\" \r\n      (load)=\"load($event)\"\r\n      (searchFieldsValueChanged)=\"searchFieldsValueChanges($event)\"\r\n      (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n      [(filtersHtmlTemplate)]=\"filtersHtmlTemplate\"\r\n      [selectKeyOnly]=\"selectKeyOnly\"\r\n      [selectionMode]=\"selectionMode\"\r\n      [showImportExportButton]=\"showImportExportButton\"\r\n      [key]=\"key\"\r\n      [crudService]=\"crudService\"\r\n      [(selectedItems)]=\"selectedItems\"\r\n      (selectedItemsChange)=\"onSelectedItemsChange($event)\"\r\n      [isGridDataPagedInApi]=\"getDataFromApi\"\r\n      [searchOnInit]=\"searchOnInit\"\r\n      [showExportButton]=\"showExportButton\"\r\n      [showHeaderFilters]=\"showHeaderFilters\"\r\n      [showFilterButton]=\"showFilterButton\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\r\n      [showCalenderView]=\"showCalenderView\"\r\n      (calendarEventClick)=\"handleCalendarEventClick($event)\"\r\n      [selectAll]=\"selectAll\"\r\n      [checkedByField]=\"checkedByField\"\r\n      [targetBusinessClass]=\"targetBusinessClass\"\r\n      [businessClass]=\"businessClass\"\r\n      [entityInfo]=\"entityInfo\"\r\n      [sortMode]=\"sortMode\"\r\n      [sizingMode]=\"sizingMode\"\r\n      ></Tsi-Generic-Grid>\r\n  </div>\r\n</div>", styles: [".hide-search-fields{background-color:#64748b!important;border-color:#64748b!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$4.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: ["cudComponent", "modalSize", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton", "sizingMode", "formName", "id", "pagedRequest", "configuration", "page", "key", "columns", "isSearchButtonDisabled", "filteredColumns", "gridData", "isTableLoading", "parent", "showSearchBox", "showActionColumn", "showHeaderFilters", "showFilterButton", "isGridDataPagedInApi", "header", "ShowFilterColumns", "showImportExportButton", "crudService", "searchFields", "sortMode", "filtersHtmlTemplate", "presentationSettings", "selectKeyOnly", "selectionMode", "selectedItems", "searchOnInit", "showGlobalSearch", "showExportButton", "showSearchField", "showCalenderView", "calenderSchema", "showCardView", "showKanbanView", "showKanbanViewOfWorkFlowEtat", "page$", "checkedByField", "selectAll", "targetBusinessClass", "descriminatorValue", "businessClass", "groupBy", "entityInfo"], outputs: ["onSave", "editRow", "deleteRow", "load", "buttonColumnClicked", "filtersHtmlTemplateChange", "selectedItemsChange", "searchFieldsValueChanged", "calendarEventClick", "statusFilterChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: ReportingComponent, selector: "app-reporting", inputs: ["showImportExportButton", "showNoteButton", "showInfoButton", "showUploadButton", "showActionButton", "isReportingToolbarDisabled", "formName", "formEndpoint", "formEndpointBody", "isFormEndpointPaged", "filtersHtmlTemplate", "optionalEndpoints", "businessClass", "mode", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "showManageWorkflowButton", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode", "openWorkflow"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiViewGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tsi-view-grid', template: "<div class=\"card\">\r\n  \r\n  <p-toolbar *ngIf=\"formEndpoint\" styleClass=\"border-radius-7 mb-1 flex align-items-center gap-2\">\r\n    <ng-template pTemplate=\"left\">\r\n      <div class=\"flex gap-2 ml-2\">\r\n        <Tsi-Button  icon=\"pi pi-sliders-h\" [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_tsi_component_grid_menu_view\" *ngIf=\"searchFields\"\r\n        styleClass=\"h-2rem hover:shadow-6 p-button-icon-only {{showSearchField ? 'p-button-secondary' : 'p-button-success'}}\" \r\n          (click)=\"displaySearchFields()\">\r\n        </Tsi-Button>\r\n        <Tsi-Button icon=\"p-button-icon pi pi-calendar {{showCalenderView ? 'pi pi-align-justify' : 'pi pi-calendar'}}\" \r\n        styleClass=\"p-element p-button-primary hover:shadow-6 h-2rem p-button p-component p-button-icon-only\" (click)=\"toggleCalenderView()\" \r\n        tooltipText=\"{{(showCalenderView ? 'shared_tsi_component_grid_list_view' : 'shared_tsi_component_grid_calender_view') | localize}}\" [tooltipPosition]=\"tooltipPosition.Top\"></Tsi-Button>\r\n      </div>\r\n    </ng-template>\r\n    \r\n    <ng-template pTemplate=\"right\">\r\n        <app-reporting *ngIf=\"formEndpoint || businessClass\"\r\n          [formEndpoint]=\"formEndpoint\"\r\n          [formName]=\"formName\"\r\n          [formEndpointBody]=\"formEndpointBody\"\r\n          [isFormEndpointPaged]=\"true\"\r\n          [showImportExportButton]=\"showImportExportButton\"\r\n          (refreshData)=\"refresh($event)\"\r\n          [filtersHtmlTemplate]=\"filtersHtmlTemplate\"\r\n          [businessClass]=\"businessClass\"\r\n          [pagedRequest]=\"pagedRequest\"\r\n          [configModeButtonId]=\"configModeButtonId\"\r\n          [showNoteButton]=\"false\"\r\n          [showActionButton]=\"false\"\r\n          [showInfoButton]=\"false\"\r\n          [showUploadButton]=\"false\"\r\n          [selectedItemUids]=\"selectedItems\"\r\n          ></app-reporting>\r\n    </ng-template>\r\n  </p-toolbar>\r\n  \r\n  <div>\r\n\r\n    <Tsi-Generic-Grid \r\n      [formName]=\"formName\" \r\n      [header]=\"header\" \r\n      [page]=\"page\" \r\n      [pagedRequest]=\"pagedRequest\" \r\n      [columns]=\"columns\"\r\n      [searchFields]=\"searchFields\" \r\n      [showSearchField]=\"showSearchField\" \r\n      (load)=\"load($event)\"\r\n      (searchFieldsValueChanged)=\"searchFieldsValueChanges($event)\"\r\n      (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n      [(filtersHtmlTemplate)]=\"filtersHtmlTemplate\"\r\n      [selectKeyOnly]=\"selectKeyOnly\"\r\n      [selectionMode]=\"selectionMode\"\r\n      [showImportExportButton]=\"showImportExportButton\"\r\n      [key]=\"key\"\r\n      [crudService]=\"crudService\"\r\n      [(selectedItems)]=\"selectedItems\"\r\n      (selectedItemsChange)=\"onSelectedItemsChange($event)\"\r\n      [isGridDataPagedInApi]=\"getDataFromApi\"\r\n      [searchOnInit]=\"searchOnInit\"\r\n      [showExportButton]=\"showExportButton\"\r\n      [showHeaderFilters]=\"showHeaderFilters\"\r\n      [showFilterButton]=\"showFilterButton\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\r\n      [showCalenderView]=\"showCalenderView\"\r\n      (calendarEventClick)=\"handleCalendarEventClick($event)\"\r\n      [selectAll]=\"selectAll\"\r\n      [checkedByField]=\"checkedByField\"\r\n      [targetBusinessClass]=\"targetBusinessClass\"\r\n      [sortMode]=\"sortMode\"\r\n      [sizingMode]=\"sizingMode\"\r\n      ></Tsi-Generic-Grid>\r\n  </div>\r\n</div>", styles: [".hide-search-fields{background-color:#64748b!important;border-color:#64748b!important}\n"] }]
-        }], ctorParameters: () => [{ type: ErrorResponseManagerService }, { type: TsiModalService }, { type: i0.ChangeDetectorRef }], propDecorators: { genericGridComponent: [{
+            args: [{ selector: 'tsi-view-grid', template: "<div class=\"card\">\r\n  \r\n  <p-toolbar *ngIf=\"formEndpoint\" styleClass=\"border-radius-7 mb-1 flex align-items-center gap-2\">\r\n    <ng-template pTemplate=\"left\">\r\n      <div class=\"flex gap-2 ml-2\">\r\n        <Tsi-Button  icon=\"pi pi-sliders-h\" [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_tsi_component_grid_menu_view\" *ngIf=\"searchFields\"\r\n        styleClass=\"h-2rem hover:shadow-6 p-button-icon-only {{showSearchField ? 'p-button-secondary' : 'p-button-success'}}\" \r\n          (click)=\"displaySearchFields()\">\r\n        </Tsi-Button>\r\n        <Tsi-Button icon=\"p-button-icon pi pi-calendar {{showCalenderView ? 'pi pi-align-justify' : 'pi pi-calendar'}}\" \r\n        styleClass=\"p-element p-button-primary hover:shadow-6 h-2rem p-button p-component p-button-icon-only\" (click)=\"toggleCalenderView()\" \r\n        tooltipText=\"{{(showCalenderView ? 'shared_tsi_component_grid_list_view' : 'shared_tsi_component_grid_calender_view') | localize}}\" [tooltipPosition]=\"tooltipPosition.Top\"></Tsi-Button>\r\n      </div>\r\n    </ng-template>\r\n    \r\n    <ng-template pTemplate=\"right\">\r\n        <app-reporting *ngIf=\"formEndpoint || businessClass\"\r\n          [formEndpoint]=\"formEndpoint\"\r\n          [formName]=\"formName\"\r\n          [formEndpointBody]=\"formEndpointBody\"\r\n          [isFormEndpointPaged]=\"true\"\r\n          [showImportExportButton]=\"showImportExportButton\"\r\n          (refreshData)=\"refresh($event)\"\r\n          [filtersHtmlTemplate]=\"filtersHtmlTemplate\"\r\n          [businessClass]=\"businessClass\"\r\n          [pagedRequest]=\"pagedRequest\"\r\n          [configModeButtonId]=\"configModeButtonId\"\r\n          [showNoteButton]=\"false\"\r\n          [showActionButton]=\"false\"\r\n          [showInfoButton]=\"false\"\r\n          [showUploadButton]=\"false\"\r\n          [selectedItemUids]=\"selectedItems\"\r\n          ></app-reporting>\r\n    </ng-template>\r\n  </p-toolbar>\r\n  \r\n  <div>\r\n\r\n    <Tsi-Generic-Grid \r\n      [formName]=\"formName\" \r\n      [header]=\"header\" \r\n      [page]=\"page\" \r\n      [pagedRequest]=\"pagedRequest\" \r\n      [columns]=\"columns\"\r\n      [searchFields]=\"searchFields\" \r\n      [showSearchField]=\"showSearchField\" \r\n      (load)=\"load($event)\"\r\n      (searchFieldsValueChanged)=\"searchFieldsValueChanges($event)\"\r\n      (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n      [(filtersHtmlTemplate)]=\"filtersHtmlTemplate\"\r\n      [selectKeyOnly]=\"selectKeyOnly\"\r\n      [selectionMode]=\"selectionMode\"\r\n      [showImportExportButton]=\"showImportExportButton\"\r\n      [key]=\"key\"\r\n      [crudService]=\"crudService\"\r\n      [(selectedItems)]=\"selectedItems\"\r\n      (selectedItemsChange)=\"onSelectedItemsChange($event)\"\r\n      [isGridDataPagedInApi]=\"getDataFromApi\"\r\n      [searchOnInit]=\"searchOnInit\"\r\n      [showExportButton]=\"showExportButton\"\r\n      [showHeaderFilters]=\"showHeaderFilters\"\r\n      [showFilterButton]=\"showFilterButton\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\r\n      [showCalenderView]=\"showCalenderView\"\r\n      (calendarEventClick)=\"handleCalendarEventClick($event)\"\r\n      [selectAll]=\"selectAll\"\r\n      [checkedByField]=\"checkedByField\"\r\n      [targetBusinessClass]=\"targetBusinessClass\"\r\n      [businessClass]=\"businessClass\"\r\n      [entityInfo]=\"entityInfo\"\r\n      [sortMode]=\"sortMode\"\r\n      [sizingMode]=\"sizingMode\"\r\n      ></Tsi-Generic-Grid>\r\n  </div>\r\n</div>", styles: [".hide-search-fields{background-color:#64748b!important;border-color:#64748b!important}\n"] }]
+        }], ctorParameters: () => [{ type: ErrorResponseManagerService }, { type: TsiModalService }, { type: i0.ChangeDetectorRef }, { type: EntityConfigurationService }], propDecorators: { genericGridComponent: [{
                 type: ViewChild,
                 args: [TsiGenericGridComponent]
             }], columns: [{
@@ -14767,7 +14995,7 @@ class TsiLogEventHistoryComponent {
         return value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiLogEventHistoryComponent, deps: [{ token: JournalisationApplicationService }, { token: i1$3.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiLogEventHistoryComponent, selector: "app-tsi-log-event-history", providers: [...appProviders], ngImport: i0, template: "<p-header class=\"p-dialog-header absolute top-0 left-0 mb-4\">\r\n{{ 'administration_administration_ficheJournalApplication' | localize}}\r\n</p-header>\r\n\r\n<div class=\"card\">\r\n    <fieldset [disabled]=\"true\">\r\n\r\n        <div class=\"grid\">\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_dateEvent'\"></Tsi-Label>\r\n                    <Tsi-Date-Picker class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [inputField]=\"journalApplication.dateEvent\">\r\n                    </Tsi-Date-Picker>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_dataBaseName'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [(inputField)]=\"journalApplication.dataBaseName\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"grid\">\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_userNameEvent'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [(inputField)]=\"journalApplication.userNameEvent\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_tableName'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\" [(inputField)]=\"journalApplication.tableName\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"grid\">\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_textEvent'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\" [(inputField)]=\"journalApplication.textEvent\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_observation'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [(inputField)]=\"journalApplication.observation\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </fieldset>\r\n\r\n    <div class=\"grid\">\r\n\r\n        <div class=\"col-12\">\r\n\r\n            <div class=\"card\">\r\n\r\n                <p-treeTable [value]=\"filteredMergedTree\" class=\"compact-table\" [columns]=\"cols\" [scrollable]=\"true\"\r\n                    [tableStyle]=\"{ 'min-width': '50rem' }\">\r\n                    <ng-template pTemplate=\"caption\">\r\n                        <div class=\"text-xl font-bold\">\r\n                            {{ 'tsi_log_event_history_modifications' | localize }}\r\n                        </div>\r\n\r\n                        <div class=\"grid\">\r\n                                <Tsi-Label class=\"col-4\" [labelValue]=\"'Afficher seulement les champs modifi\u00E9s'\"></Tsi-Label>\r\n                                <Tsi-CheckBox \r\n                                    class=\"col-4\" \r\n                                    [inputName]=\"'Logged'\" \r\n                                    [isBinary]=\"true\"\r\n                                    (checkedChange)=\"updateDisplayedTree($event)\" \r\n                                    [(inputField)]=\"showOnlyModifiedFields\"\r\n                                    [checked]=\"false\"\r\n                                    [infoText]=\"'Afficher seulement les champs modifi\u00E9s'\"\r\n                                    >\r\n                                </Tsi-CheckBox>\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                    <ng-template pTemplate=\"header\" let-columns>\r\n                        <tr>\r\n                            <th *ngFor=\"let col of columns\" class=\"bold-header\">{{ col.header }}</th>\r\n                        </tr>\r\n                    </ng-template>\r\n\r\n                    <ng-template pTemplate=\"body\" let-rowNode let-rowData=\"rowData\" let-columns=\"columns\">\r\n                        <tr [ttRow]=\"rowNode\" [ngClass]=\"{ 'has-children': rowNode.node?.children?.length > 0 }\">\r\n                            <td *ngFor=\"let col of columns; let i = index\">\r\n                                <p-treeTableToggler [rowNode]=\"rowNode\" *ngIf=\"i === 0\" />\r\n\r\n                                <ng-container [ngSwitch]=\"col.field\">\r\n                                    <span *ngSwitchCase=\"'label'\">\r\n                                        {{ rowNode.node?.label }}\r\n                                    </span>\r\n\r\n                                    <ng-container *ngSwitchCase=\"'oldData'\">\r\n                                        <ng-container *ngIf=\"isBoolean(rowNode.node?.oldData?.value); else oldText\">\r\n                                            <Tsi-Checkbox-Display [inputData]=\"isChecked(rowNode.node?.oldData?.value)\"></Tsi-Checkbox-Display>\r\n                                        </ng-container>\r\n                                        <ng-template #oldText>\r\n                                            {{ rowNode.node?.oldData?.value }}\r\n                                        </ng-template>\r\n                                    </ng-container>\r\n\r\n                                    <ng-container *ngSwitchCase=\"'newData'\">\r\n\r\n                                        <ng-container *ngIf=\"isBoolean(rowNode.node?.newData?.value); else newText\">\r\n                                            <span [ngClass]=\"{ 'changed': rowNode.node?.oldData?.value !== rowNode.node?.newData?.value }\">\r\n                                                <Tsi-Checkbox-Display [inputData]=\"isChecked(rowNode.node?.newData?.value)\"></Tsi-Checkbox-Display>\r\n                                            </span>\r\n                                        </ng-container>\r\n                                        <ng-template #newText>\r\n                                            <span [ngClass]=\"{ 'changed': rowNode.node?.oldData?.value !== rowNode.node?.newData?.value }\">\r\n                                                {{ rowNode.node?.newData?.value }}\r\n                                            </span>\r\n                                        </ng-template>\r\n                                    </ng-container>\r\n\r\n                                </ng-container>\r\n                            </td>\r\n                        </tr>\r\n                    </ng-template>\r\n                </p-treeTable>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".gray-key{color:gray}.label-parent{color:#007bff;font-weight:700}.value-changed{background-color:#ffe6e6;color:#b30000;font-weight:700}.changed{color:#43a047;font-weight:700}::ng-deep .compact-table .p-treetable-tbody>tr>td,::ng-deep .compact-table .p-treetable-thead>tr>th{padding:0rem!important}::ng-deep .compact-table .p-treetable-toggler{margin-right:0rem}::ng-deep .compact-table span{margin:0;padding:0}.bold-header{font-weight:700}::ng-deep .has-children{background-color:#f0f8ff;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.Header, selector: "p-header" }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$2.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i5$2.TreeTableToggler, selector: "p-treeTableToggler", inputs: ["rowNode"] }, { kind: "directive", type: i5$2.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: TsiCheckboxComponent, selector: "Tsi-CheckBox", inputs: ["class", "isBinary", "checked", "tooltipText", "tooltipPosition"], outputs: ["inputFieldChange", "checkedChange"] }, { kind: "component", type: TsiDatePickerComponent, selector: "Tsi-Date-Picker", inputs: ["required", "showTime", "showButtonBar"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiTextBoxComponent, selector: "Tsi-Text-Box", inputs: ["textBoxType", "autocomplete"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiCheckboxDisplayComponent, selector: "Tsi-Checkbox-Display", inputs: ["inputData"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiLogEventHistoryComponent, selector: "app-tsi-log-event-history", providers: [...appProviders], ngImport: i0, template: "<p-header class=\"p-dialog-header absolute top-0 left-0 mb-4\">\r\n{{ 'administration_administration_ficheJournalApplication' | localize}}\r\n</p-header>\r\n\r\n<div class=\"card\">\r\n    <fieldset [disabled]=\"true\">\r\n\r\n        <div class=\"grid\">\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_dateEvent'\"></Tsi-Label>\r\n                    <Tsi-Date-Picker class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [inputField]=\"journalApplication.dateEvent\">\r\n                    </Tsi-Date-Picker>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_dataBaseName'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [(inputField)]=\"journalApplication.dataBaseName\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"grid\">\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_userNameEvent'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [(inputField)]=\"journalApplication.userNameEvent\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_tableName'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\" [(inputField)]=\"journalApplication.tableName\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"grid\">\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_textEvent'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\" [(inputField)]=\"journalApplication.textEvent\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_observation'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [(inputField)]=\"journalApplication.observation\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </fieldset>\r\n\r\n    <div class=\"grid\">\r\n\r\n        <div class=\"col-12\">\r\n\r\n            <div class=\"card\">\r\n\r\n                <p-treeTable [value]=\"filteredMergedTree\" class=\"compact-table\" [columns]=\"cols\" [scrollable]=\"true\"\r\n                    [tableStyle]=\"{ 'min-width': '50rem' }\">\r\n                    <ng-template pTemplate=\"caption\">\r\n                        <div class=\"text-xl font-bold\">\r\n                            {{ 'tsi_log_event_history_modifications' | localize }}\r\n                        </div>\r\n\r\n                        <div class=\"grid\">\r\n                                <Tsi-Label class=\"col-4\" [labelValue]=\"'Afficher seulement les champs modifi\u00E9s'\"></Tsi-Label>\r\n                                <Tsi-CheckBox \r\n                                    class=\"col-4\" \r\n                                    [inputName]=\"'Logged'\" \r\n                                    [isBinary]=\"true\"\r\n                                    (checkedChange)=\"updateDisplayedTree($event)\" \r\n                                    [(inputField)]=\"showOnlyModifiedFields\"\r\n                                    [checked]=\"false\"\r\n                                    [infoText]=\"'Afficher seulement les champs modifi\u00E9s'\"\r\n                                    >\r\n                                </Tsi-CheckBox>\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                    <ng-template pTemplate=\"header\" let-columns>\r\n                        <tr>\r\n                            <th *ngFor=\"let col of columns\" class=\"bold-header\">{{ col.header }}</th>\r\n                        </tr>\r\n                    </ng-template>\r\n\r\n                    <ng-template pTemplate=\"body\" let-rowNode let-rowData=\"rowData\" let-columns=\"columns\">\r\n                        <tr [ttRow]=\"rowNode\" [ngClass]=\"{ 'has-children': rowNode.node?.children?.length > 0 }\">\r\n                            <td *ngFor=\"let col of columns; let i = index\">\r\n                                <p-treeTableToggler [rowNode]=\"rowNode\" *ngIf=\"i === 0\" />\r\n\r\n                                <ng-container [ngSwitch]=\"col.field\">\r\n                                    <span *ngSwitchCase=\"'label'\">\r\n                                        {{ rowNode.node?.label }}\r\n                                    </span>\r\n\r\n                                    <ng-container *ngSwitchCase=\"'oldData'\">\r\n                                        <ng-container *ngIf=\"isBoolean(rowNode.node?.oldData?.value); else oldText\">\r\n                                            <Tsi-Checkbox-Display [inputData]=\"isChecked(rowNode.node?.oldData?.value)\"></Tsi-Checkbox-Display>\r\n                                        </ng-container>\r\n                                        <ng-template #oldText>\r\n                                            {{ rowNode.node?.oldData?.value }}\r\n                                        </ng-template>\r\n                                    </ng-container>\r\n\r\n                                    <ng-container *ngSwitchCase=\"'newData'\">\r\n\r\n                                        <ng-container *ngIf=\"isBoolean(rowNode.node?.newData?.value); else newText\">\r\n                                            <span [ngClass]=\"{ 'changed': rowNode.node?.oldData?.value !== rowNode.node?.newData?.value }\">\r\n                                                <Tsi-Checkbox-Display [inputData]=\"isChecked(rowNode.node?.newData?.value)\"></Tsi-Checkbox-Display>\r\n                                            </span>\r\n                                        </ng-container>\r\n                                        <ng-template #newText>\r\n                                            <span [ngClass]=\"{ 'changed': rowNode.node?.oldData?.value !== rowNode.node?.newData?.value }\">\r\n                                                {{ rowNode.node?.newData?.value }}\r\n                                            </span>\r\n                                        </ng-template>\r\n                                    </ng-container>\r\n\r\n                                </ng-container>\r\n                            </td>\r\n                        </tr>\r\n                    </ng-template>\r\n                </p-treeTable>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".gray-key{color:gray}.label-parent{color:#007bff;font-weight:700}.value-changed{background-color:#ffe6e6;color:#b30000;font-weight:700}.changed{color:#43a047;font-weight:700}::ng-deep .compact-table .p-treetable-tbody>tr>td,::ng-deep .compact-table .p-treetable-thead>tr>th{padding:0rem!important}::ng-deep .compact-table .p-treetable-toggler{margin-right:0rem}::ng-deep .compact-table span{margin:0;padding:0}.bold-header{font-weight:700}::ng-deep .has-children{background-color:#f0f8ff;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.Header, selector: "p-header" }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i5$1.TreeTableToggler, selector: "p-treeTableToggler", inputs: ["rowNode"] }, { kind: "directive", type: i5$1.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: TsiCheckboxComponent, selector: "Tsi-CheckBox", inputs: ["class", "isBinary", "checked", "tooltipText", "tooltipPosition"], outputs: ["inputFieldChange", "checkedChange"] }, { kind: "component", type: TsiDatePickerComponent, selector: "Tsi-Date-Picker", inputs: ["required", "showTime", "showButtonBar"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiTextBoxComponent, selector: "Tsi-Text-Box", inputs: ["textBoxType", "autocomplete"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiCheckboxDisplayComponent, selector: "Tsi-Checkbox-Display", inputs: ["inputData"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiLogEventHistoryComponent, decorators: [{
             type: Component,
@@ -15917,7 +16145,7 @@ class TsiGenericCrudComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiGenericCrudComponent, deps: [{ token: TsiNotificationService }, { token: i2$1.MessageService }, { token: TsiModalService }, { token: i0.ChangeDetectorRef }, { token: LocalizePipe }, { token: DialogDataService }, { token: UploadGenericFichierService }, { token: RecordInfoPopupService }, { token: WorkflowConfigurationService }, { token: EntityConfigurationService }, { token: NoteService }, { token: i0.EnvironmentInjector }, { token: DiscriminatorService }, { token: ColonnePersonnaliseeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiGenericCrudComponent, selector: "Tsi-Generic-Crud", inputs: { entityInfo: "entityInfo", modalData: "modalData", columns: "columns", gridConfiguration: "gridConfiguration", cudComponent: "cudComponent", crudService: "crudService", header: "header", modalSize: "modalSize", descriminatorValue: "descriminatorValue", presentationSettings: "presentationSettings", preventAddEvent: "preventAddEvent", formEndpoint: "formEndpoint", formName: "formName", isSearchButtonDisabled: "isSearchButtonDisabled", showHeaderFilters: "showHeaderFilters", showEditButton: "showEditButton", showDeleteButton: "showDeleteButton", showAddButton: "showAddButton", showConsultButton: "showConsultButton", showUploadButton: "showUploadButton", showNoteButton: "showNoteButton", showDownloadButton: "showDownloadButton", showInfoButton: "showInfoButton", showDuplicateButton: "showDuplicateButton", showFormButton: "showFormButton", showCalenderView: "showCalenderView", showCardView: "showCardView", showImportFromOutlookButton: "showImportFromOutlookButton", showKanbanView: "showKanbanView", showKanbanViewOfWorkFlowEtat: "showKanbanViewOfWorkFlowEtat", showSearchField: "showSearchField", searchFields: "searchFields", calenderSchema: "calenderSchema", showActionButton: "showActionButton", sizingMode: "sizingMode", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", key: "key", id: "id", businessClass: "businessClass", searchOnInit: "searchOnInit", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showReporting: "showReporting", extraData: "extraData" }, outputs: { selectedItemsChange: "selectedItemsChange", searchFieldsValueChanged: "searchFieldsValueChanged", buttonColumnClicked: "buttonColumnClicked", onImportFromOutlookClicked: "onImportFromOutlookClicked" }, host: { listeners: { "window:keydown": "handleKeyDown($event)" } }, providers: [TsiNotificationService], viewQueries: [{ propertyName: "genericGridComponent", first: true, predicate: TsiGenericGridComponent, descendants: true }], ngImport: i0, template: "<div class=\"card\">\r\n  \r\n  <p-toolbar styleClass=\"border-radius-7 mb-1 flex align-items-center gap-2 no-pad\" \r\n    *ngIf=\"(showAddButton || searchFields || formEndpoint || businessClass) && showReporting\">\r\n\r\n    <ng-template pTemplate=\"left\">\r\n      <div class=\"flex gap-2 mx-2\">\r\n        <div *ngIf=\"showAddButton\" presentationDesignerBase=\"add_button\">\r\n          <Tsi-Button icon=\"pi pi-plus\" \r\n            [tooltipPosition]=\"tooltipPosition.Top\" \r\n            tooltipText=\"shared_tsi_component_add_view\" \r\n            styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\" \r\n            (click)=\"openNew()\">\r\n          </Tsi-Button>\r\n        </div>\r\n        <div *ngIf=\"searchFields\" presentationDesignerBase=\"show_search_fields_button\">\r\n          <Tsi-Button icon=\"pi pi-sliders-h\"\r\n            [tooltipPosition]=\"tooltipPosition.Top\"\r\n            tooltipText=\"shared_tsi_component_menu\"\r\n            styleClass=\"h-2rem p-button-icon-only hover:shadow-6 {{ showSearchField ? 'p-button-secondary' : 'p-button-success' }}\"\r\n            (click)=\"displaySearchFields()\">\r\n          </Tsi-Button>\r\n        </div>\r\n\r\n        <div *ngIf=\"showImportFromOutlookButton\" presentationDesignerBase=\"importFromOutlook_button\">\r\n          <Tsi-Button icon=\"pi pi-envelope\" \r\n            [tooltipPosition]=\"tooltipPosition.Top\" \r\n            tooltipText=\"shared_tsi_component_import_from_outlook\" \r\n            styleClass=\"p-button-info hover:shadow-6 h-2rem p-button-icon-only\" \r\n            (click)=\"onImportClicked()\"> \r\n          </Tsi-Button>\r\n        </div>\r\n\r\n        <div  presentationDesignerBase=\"toggle_actions_view_button\">\r\n          <p-splitButton\r\n            [icon]=\"currentIcon\"\r\n            [model]=\"viewOptions\"\r\n            (onClick)=\"handleActionViewClick()\"\r\n            [tooltip]=\"currentTooltip | localize\"\r\n            class=\"p-button-icon-only p-button-rounded p-button-primary h-2rem hover:shadow-6\"\r\n          />\r\n          <!-- <Tsi-Button\r\n            [icon]=\"currentIcon\"\r\n            styleClass=\"p-element p-button-primary  h-2rem p-button p-component p-button-icon-only\"\r\n            (click)=\"handleActionViewClick()\"\r\n            [tooltipPosition]=\"tooltipPosition.Top\"\r\n            [tooltipText]=\"currentTooltip | localize\">\r\n          </Tsi-Button> -->\r\n        </div>\r\n\r\n        \r\n\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"right\">\r\n        <app-reporting *ngIf=\"(formEndpoint || businessClass)\" \r\n          [formEndpoint]=\"formEndpoint\" \r\n          [formName]=\"formName\"\r\n          [formEndpointBody]=\"formEndpointBody\" \r\n          [isFormEndpointPaged]=\"true\"\r\n          [businessClass]=\"businessClass\"\r\n          [reportDiscriminator]=\"descriminatorValue\"\r\n          (refreshData)=\"refresh($event)\"\r\n          [filtersHtmlTemplate]=\"filtersHtmlTemplate\"\r\n          [pagedRequest]=\"pagedRequest\"\r\n          [cudComponent]=\"cudComponent\" \r\n          [configModeButtonId]=\"configModeButtonId\"\r\n          [showNoteButton]=\"false\"\r\n          [showActionButton]=\"false\"\r\n          [showInfoButton]=\"false\"\r\n          [showUploadButton]=\"false\"\r\n        ></app-reporting>\r\n    </ng-template>\r\n  </p-toolbar>\r\n\r\n  <div>\r\n\r\n    <Tsi-Generic-Grid\r\n      [formName]=\"formName\"\r\n      [crudService]=\"crudService\"\r\n      [showSearchField]=\"showSearchField\"\r\n      [searchFields]=\"searchFields\"\r\n      [descriminatorValue]=\"descriminatorValue\"\r\n      [header]=\"header\"\r\n      [page]=\"page\"\r\n      [pagedRequest]=\"pagedRequest\"\r\n      [columns]=\"selectedColumns\"\r\n      [showHeaderFilters]=\"showHeaderFilters\"\r\n      [(filtersHtmlTemplate)]=\"filtersHtmlTemplate\"\r\n      [presentationSettings]=\"presentationSettings\"\r\n      (load)=\"load($event)\"\r\n      (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n      [selectKeyOnly]=\"selectKeyOnly\"\r\n      [selectionMode]=\"selectionMode\"\r\n      [key]=\"key\"\r\n      [(selectedItems)]=\"selectedItems\"\r\n      (selectedItemsChange)=\"onSelectedItemsChange($event)\"\r\n      (searchFieldsValueChanged)=\"searchFieldValueChanges($event)\"\r\n      [searchOnInit]=\"searchOnInit\"\r\n      [showExportButton]=\"showExportButton\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\r\n      [showCalenderView]=\"showCalenderView\"\r\n      [showCardView]=\"showCardView\"\r\n      [showKanbanView]=\"showKanbanView\"\r\n      [showKanbanViewOfWorkFlowEtat]=\"showKanbanViewOfWorkFlowEtat\"\r\n      [businessClass]=\"businessClass\"\r\n      [groupBy]=\"groupBy\"\r\n      [cudComponent]=\"cudComponent\"\r\n      [modalSize]=\"modalSize\" \r\n      [id]=\"id\"\r\n      [page$]=\"page$\"\r\n      [entityInfo]=\"entityInfo\"\r\n      (calendarEventClick)=\"handleCalendarEventClick($event)\"\r\n      (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n      [showInfoButton]=\"true\"\r\n      [showDownloadButton]=\"true\"\r\n      [showUploadButton]=\"true\"\r\n      [showNoteButton]=\"true\"\r\n      [showActionButton]=\"true\"\r\n      [sizingMode]=\"sizingMode\"\r\n    ></Tsi-Generic-Grid>\r\n  </div>\r\n  \r\n</div>\r\n", styles: [".p-button{padding:.1rem!important}.tlbar{border:1px solid gainsboro;padding:2px;background:#f8f9fa}.hide-search-fields{background-color:#64748b!important;border-color:#64748b!important}::ng-deep .no-pad{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i15.SplitButton, selector: "p-splitButton", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "style", "styleClass", "menuStyle", "menuStyleClass", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "component", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: ["cudComponent", "modalSize", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton", "sizingMode", "formName", "id", "pagedRequest", "configuration", "page", "key", "columns", "isSearchButtonDisabled", "filteredColumns", "gridData", "isTableLoading", "parent", "showSearchBox", "showActionColumn", "showHeaderFilters", "showFilterButton", "isGridDataPagedInApi", "header", "ShowFilterColumns", "showImportExportButton", "crudService", "searchFields", "sortMode", "filtersHtmlTemplate", "presentationSettings", "selectKeyOnly", "selectionMode", "selectedItems", "searchOnInit", "showGlobalSearch", "showExportButton", "showSearchField", "showCalenderView", "calenderSchema", "showCardView", "showKanbanView", "showKanbanViewOfWorkFlowEtat", "page$", "checkedByField", "selectAll", "targetBusinessClass", "descriminatorValue", "businessClass", "groupBy", "entityInfo"], outputs: ["onSave", "editRow", "deleteRow", "load", "buttonColumnClicked", "filtersHtmlTemplateChange", "selectedItemsChange", "searchFieldsValueChanged", "calendarEventClick", "statusFilterChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: ReportingComponent, selector: "app-reporting", inputs: ["showImportExportButton", "showNoteButton", "showInfoButton", "showUploadButton", "showActionButton", "isReportingToolbarDisabled", "formName", "formEndpoint", "formEndpointBody", "isFormEndpointPaged", "filtersHtmlTemplate", "optionalEndpoints", "businessClass", "mode", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "showManageWorkflowButton", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode", "openWorkflow"] }, { kind: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]:not(tsi-tab-panel)", inputs: ["presentationDesigner", "presentationDesignerBase"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiGenericCrudComponent, selector: "Tsi-Generic-Crud", inputs: { entityInfo: "entityInfo", modalData: "modalData", columns: "columns", gridConfiguration: "gridConfiguration", cudComponent: "cudComponent", crudService: "crudService", header: "header", modalSize: "modalSize", descriminatorValue: "descriminatorValue", presentationSettings: "presentationSettings", preventAddEvent: "preventAddEvent", formEndpoint: "formEndpoint", formName: "formName", isSearchButtonDisabled: "isSearchButtonDisabled", showHeaderFilters: "showHeaderFilters", showEditButton: "showEditButton", showDeleteButton: "showDeleteButton", showAddButton: "showAddButton", showConsultButton: "showConsultButton", showUploadButton: "showUploadButton", showNoteButton: "showNoteButton", showDownloadButton: "showDownloadButton", showInfoButton: "showInfoButton", showDuplicateButton: "showDuplicateButton", showFormButton: "showFormButton", showCalenderView: "showCalenderView", showCardView: "showCardView", showImportFromOutlookButton: "showImportFromOutlookButton", showKanbanView: "showKanbanView", showKanbanViewOfWorkFlowEtat: "showKanbanViewOfWorkFlowEtat", showSearchField: "showSearchField", searchFields: "searchFields", calenderSchema: "calenderSchema", showActionButton: "showActionButton", sizingMode: "sizingMode", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", key: "key", id: "id", businessClass: "businessClass", searchOnInit: "searchOnInit", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showReporting: "showReporting", extraData: "extraData" }, outputs: { selectedItemsChange: "selectedItemsChange", searchFieldsValueChanged: "searchFieldsValueChanged", buttonColumnClicked: "buttonColumnClicked", onImportFromOutlookClicked: "onImportFromOutlookClicked" }, host: { listeners: { "window:keydown": "handleKeyDown($event)" } }, providers: [TsiNotificationService], viewQueries: [{ propertyName: "genericGridComponent", first: true, predicate: TsiGenericGridComponent, descendants: true }], ngImport: i0, template: "<div class=\"card\">\r\n  \r\n  <p-toolbar styleClass=\"border-radius-7 mb-1 flex align-items-center gap-2 no-pad\" \r\n    *ngIf=\"(showAddButton || searchFields || formEndpoint || businessClass) && showReporting\">\r\n\r\n    <ng-template pTemplate=\"left\">\r\n      <div class=\"flex gap-2 mx-2\">\r\n        <div *ngIf=\"showAddButton\" presentationDesignerBase=\"add_button\">\r\n          <Tsi-Button icon=\"pi pi-plus\" \r\n            [tooltipPosition]=\"tooltipPosition.Top\" \r\n            tooltipText=\"shared_tsi_component_add_view\" \r\n            styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\" \r\n            (click)=\"openNew()\">\r\n          </Tsi-Button>\r\n        </div>\r\n        <div *ngIf=\"searchFields\" presentationDesignerBase=\"show_search_fields_button\">\r\n          <Tsi-Button icon=\"pi pi-sliders-h\"\r\n            [tooltipPosition]=\"tooltipPosition.Top\"\r\n            tooltipText=\"shared_tsi_component_menu\"\r\n            styleClass=\"h-2rem p-button-icon-only hover:shadow-6 {{ showSearchField ? 'p-button-secondary' : 'p-button-success' }}\"\r\n            (click)=\"displaySearchFields()\">\r\n          </Tsi-Button>\r\n        </div>\r\n\r\n        <div *ngIf=\"showImportFromOutlookButton\" presentationDesignerBase=\"importFromOutlook_button\">\r\n          <Tsi-Button icon=\"pi pi-envelope\" \r\n            [tooltipPosition]=\"tooltipPosition.Top\" \r\n            tooltipText=\"shared_tsi_component_import_from_outlook\" \r\n            styleClass=\"p-button-info hover:shadow-6 h-2rem p-button-icon-only\" \r\n            (click)=\"onImportClicked()\"> \r\n          </Tsi-Button>\r\n        </div>\r\n\r\n        <div  presentationDesignerBase=\"toggle_actions_view_button\">\r\n          <p-splitButton\r\n            [icon]=\"currentIcon\"\r\n            [model]=\"viewOptions\"\r\n            (onClick)=\"handleActionViewClick()\"\r\n            [tooltip]=\"currentTooltip | localize\"\r\n            class=\"p-button-icon-only p-button-rounded p-button-primary h-2rem hover:shadow-6\"\r\n          />\r\n          <!-- <Tsi-Button\r\n            [icon]=\"currentIcon\"\r\n            styleClass=\"p-element p-button-primary  h-2rem p-button p-component p-button-icon-only\"\r\n            (click)=\"handleActionViewClick()\"\r\n            [tooltipPosition]=\"tooltipPosition.Top\"\r\n            [tooltipText]=\"currentTooltip | localize\">\r\n          </Tsi-Button> -->\r\n        </div>\r\n\r\n        \r\n\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"right\">\r\n        <app-reporting *ngIf=\"(formEndpoint || businessClass)\" \r\n          [formEndpoint]=\"formEndpoint\" \r\n          [formName]=\"formName\"\r\n          [formEndpointBody]=\"formEndpointBody\" \r\n          [isFormEndpointPaged]=\"true\"\r\n          [businessClass]=\"businessClass\"\r\n          [reportDiscriminator]=\"descriminatorValue\"\r\n          (refreshData)=\"refresh($event)\"\r\n          [filtersHtmlTemplate]=\"filtersHtmlTemplate\"\r\n          [pagedRequest]=\"pagedRequest\"\r\n          [cudComponent]=\"cudComponent\" \r\n          [configModeButtonId]=\"configModeButtonId\"\r\n          [showNoteButton]=\"false\"\r\n          [showActionButton]=\"false\"\r\n          [showInfoButton]=\"false\"\r\n          [showUploadButton]=\"false\"\r\n        ></app-reporting>\r\n    </ng-template>\r\n  </p-toolbar>\r\n\r\n  <div>\r\n\r\n    <Tsi-Generic-Grid\r\n      [formName]=\"formName\"\r\n      [crudService]=\"crudService\"\r\n      [showSearchField]=\"showSearchField\"\r\n      [searchFields]=\"searchFields\"\r\n      [descriminatorValue]=\"descriminatorValue\"\r\n      [header]=\"header\"\r\n      [page]=\"page\"\r\n      [pagedRequest]=\"pagedRequest\"\r\n      [columns]=\"selectedColumns\"\r\n      [showHeaderFilters]=\"showHeaderFilters\"\r\n      [(filtersHtmlTemplate)]=\"filtersHtmlTemplate\"\r\n      [presentationSettings]=\"presentationSettings\"\r\n      (load)=\"load($event)\"\r\n      (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n      [selectKeyOnly]=\"selectKeyOnly\"\r\n      [selectionMode]=\"selectionMode\"\r\n      [key]=\"key\"\r\n      [(selectedItems)]=\"selectedItems\"\r\n      (selectedItemsChange)=\"onSelectedItemsChange($event)\"\r\n      (searchFieldsValueChanged)=\"searchFieldValueChanges($event)\"\r\n      [searchOnInit]=\"searchOnInit\"\r\n      [showExportButton]=\"showExportButton\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\r\n      [showCalenderView]=\"showCalenderView\"\r\n      [showCardView]=\"showCardView\"\r\n      [showKanbanView]=\"showKanbanView\"\r\n      [showKanbanViewOfWorkFlowEtat]=\"showKanbanViewOfWorkFlowEtat\"\r\n      [businessClass]=\"businessClass\"\r\n      [groupBy]=\"groupBy\"\r\n      [cudComponent]=\"cudComponent\"\r\n      [modalSize]=\"modalSize\" \r\n      [id]=\"id\"\r\n      [page$]=\"page$\"\r\n      [entityInfo]=\"entityInfo\"\r\n      (calendarEventClick)=\"handleCalendarEventClick($event)\"\r\n      (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n      [showInfoButton]=\"true\"\r\n      [showDownloadButton]=\"true\"\r\n      [showUploadButton]=\"true\"\r\n      [showNoteButton]=\"true\"\r\n      [showActionButton]=\"true\"\r\n      [sizingMode]=\"sizingMode\"\r\n    ></Tsi-Generic-Grid>\r\n  </div>\r\n  \r\n</div>\r\n", styles: [".p-button{padding:.1rem!important}.tlbar{border:1px solid gainsboro;padding:2px;background:#f8f9fa}.hide-search-fields{background-color:#64748b!important;border-color:#64748b!important}::ng-deep .no-pad{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$4.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i15.SplitButton, selector: "p-splitButton", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "style", "styleClass", "menuStyle", "menuStyleClass", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "component", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: ["cudComponent", "modalSize", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton", "sizingMode", "formName", "id", "pagedRequest", "configuration", "page", "key", "columns", "isSearchButtonDisabled", "filteredColumns", "gridData", "isTableLoading", "parent", "showSearchBox", "showActionColumn", "showHeaderFilters", "showFilterButton", "isGridDataPagedInApi", "header", "ShowFilterColumns", "showImportExportButton", "crudService", "searchFields", "sortMode", "filtersHtmlTemplate", "presentationSettings", "selectKeyOnly", "selectionMode", "selectedItems", "searchOnInit", "showGlobalSearch", "showExportButton", "showSearchField", "showCalenderView", "calenderSchema", "showCardView", "showKanbanView", "showKanbanViewOfWorkFlowEtat", "page$", "checkedByField", "selectAll", "targetBusinessClass", "descriminatorValue", "businessClass", "groupBy", "entityInfo"], outputs: ["onSave", "editRow", "deleteRow", "load", "buttonColumnClicked", "filtersHtmlTemplateChange", "selectedItemsChange", "searchFieldsValueChanged", "calendarEventClick", "statusFilterChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: ReportingComponent, selector: "app-reporting", inputs: ["showImportExportButton", "showNoteButton", "showInfoButton", "showUploadButton", "showActionButton", "isReportingToolbarDisabled", "formName", "formEndpoint", "formEndpointBody", "isFormEndpointPaged", "filtersHtmlTemplate", "optionalEndpoints", "businessClass", "mode", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "showManageWorkflowButton", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode", "openWorkflow"] }, { kind: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]:not(tsi-tab-panel)", inputs: ["presentationDesigner", "presentationDesignerBase"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiGenericCrudComponent, decorators: [{
             type: Component,
@@ -17729,7 +17957,7 @@ class TsiFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiFormComponent, deps: [{ token: EntityStatusService }, { token: StatusColorService }, { token: GenericFichierService }, { token: ErrorResponseManagerService }, { token: TsiConfirmationService }, { token: TsiNotificationService }, { token: i0.ChangeDetectorRef }, { token: LayoutHelperService }, { token: WorkflowConfigurationService }, { token: ColonnePersonnaliseeService }, { token: FormStateService }, { token: i1$3.DynamicDialogRef }, { token: i1$3.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiFormComponent, selector: "tsi-form", inputs: { class: "class", autocomplete: "autocomplete", optionalEndpoints: "optionalEndpoints", disabled: "disabled", isLoading: "isLoading", modalSize: "modalSize", showManageWorkflowButton: "showManageWorkflowButton", formEndpoint: "formEndpoint", formName: "formName", isReportingToolbarDisabled: "isReportingToolbarDisabled", isCreateOnly: "isCreateOnly", statusInputDisabled: "statusInputDisabled" }, outputs: { onSave: "onSave", openWorkflow: "openWorkflow", onSubmit: "onSubmit", onSubmitFormWorkflowConfiguration: "onSubmitFormWorkflowConfiguration", formRefChange: "formRefChange", onStatusChange: "onStatusChange" }, queries: [{ propertyName: "modalHeaderComp", first: true, predicate: TsiModalHeaderComponent, descendants: true }, { propertyName: "modalFooterComp", first: true, predicate: TsiModalFooterComponent, descendants: true }], viewQueries: [{ propertyName: "formRef", first: true, predicate: ["formRef"], descendants: true }, { propertyName: "reportingApp", first: true, predicate: ["reportingApp"], descendants: true }, { propertyName: "toolbarTemplateRef", first: true, predicate: ["toolbarTemplate"], descendants: true }, { propertyName: "dynamicToolbarContainers", predicate: ["dynamicToolbarContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dynamicFootersContainers", predicate: ["dynamicFooterContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<form class=\"form-horizontal\" autocomplete=\"off\" (ngSubmit)=\"handleFormSubmit($event)\" #formRef=\"ngForm\">\r\n  <ng-template #toolbarTemplate>\r\n    <p-toolbar *ngIf=\"formEndpoint\" styleClass=\"mb-1 gap-2\" class=\"w-full\" (dragover)=\"onDragOver($event)\"\r\n      (drop)=\"onDrop($event)\" (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\">\r\n\r\n      <ng-template pTemplate=\"left\">\r\n        <div class=\"mt-1 ml-2\">\r\n          {{ inputTitle }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"right\">\r\n        <div class=\"mt-1 mr-2\">\r\n          <app-reporting *ngIf=\"formEndpoint\" [fromTsiForm]=\"true\" [id]=\"this.id\" [formEndpoint]=\"formEndpoint\"\r\n            [formName]=\"formName\" [reportDiscriminator]=\"descriminatorValue\" [isFormEndpointPaged]=\"true\"\r\n            [mode]=\"mode\" [nombreDocumentsJoints]=\"nombreDocuments\" [configModeButtonId]=\"configModeButtonId\"\r\n            [isReportingToolbarDisabled]=\"isReportingToolbarDisabled\" (toggleDesignMode)=\"toggleDesignMode($event)\"\r\n            [businessClass]=\"businessClass\" (closedModalFileUpload)=\"getNombreFichier()\"\r\n            [showImportExportButton]=\"false\" [showActionButton]=\"showActionButton\" (openWorkflow)=\"openWorkflow.emit()\"\r\n            #reportingApp [showManageWorkflowButton]=\"showManageWorkflowButton\"\r\n            >\r\n          </app-reporting>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n        class=\"drag-message cursor-follow\">\r\n        {{ \"Jointure\" | localize }}\r\n      </div>\r\n\r\n    </p-toolbar>\r\n  </ng-template>\r\n\r\n  <div *busy=\"isLoading || hasActiveRequests\"></div>\r\n\r\n  <fieldset [disabled]=\"disabled\">\r\n    <div class=\"card mr\">\r\n      <p-tabView>\r\n\r\n        <p-tabPanel header=\"\" \r\n        [headerStyle]=\"colonnesPersonnaliseeGrouped.length === 0 && !canShowForms\r\n      ? { display: 'none' } \r\n      : null\">\r\n\r\n        <ng-template pTemplate=\"header\">\r\n          <i class=\"pi pi-home mr-2\"></i>\r\n          <span class=\"main-tab-text\">{{ 'shared_form_maintabTitle' | localize }}</span>\r\n        </ng-template>\r\n\r\n          <ng-content></ng-content>\r\n        </p-tabPanel>\r\n\r\n        <!-- Dynamic tabs -->\r\n        <ng-container *ngIf=\"colonnesPersonnaliseeGrouped.length > 0\">\r\n          <p-tabPanel *ngFor=\"let grp of colonnesPersonnaliseeGrouped\" [header]=\"grp.groupe\">\r\n\r\n            <ng-template #dynamicToolbarContainer></ng-template>\r\n\r\n            <div class=\"grid\">\r\n              <div class=\"col-12 grid form-row\" *ngFor=\"let col of grp.colonnes\">\r\n                <div class=\"col-3 form-label\">\r\n                  <Tsi-Label [labelValue]=\"col.libelle\"></Tsi-Label>\r\n                </div>\r\n\r\n                <!-- String -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.string\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Text-Box [(inputField)]=\"col.data.valeurString\"></Tsi-Text-Box>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Int -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.int\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Integer [(inputField)]=\"col.data.valeurInt\"></Tsi-Integer>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Decimal -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.decimal\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Decimal-Input [(inputField)]=\"col.data.valeurDecimal\"></Tsi-Decimal-Input>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Boolean -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.boolean\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-CheckBox [isBinary]=\"false\" [(inputField)]=\"col.data.valeurBoolean\">\r\n                    </Tsi-CheckBox>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Binary -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.binary\">\r\n                  binary input (not handled yet)\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n\r\n            <ng-template #dynamicFooterContainer></ng-template>\r\n          </p-tabPanel>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"canShowForms\">\r\n          <p-tabPanel [header]=\"'shared_form_dynamicFormsTab_Title' | localize\">\r\n            <ng-template pTemplate=\"content\">\r\n              <shared-dynamic-form-list\r\n              [occurence]=\"id\"\r\n              [occurenceBusinessClass]=\"businessClass\"\r\n              [occurenceDiscriminatorValue]=\"descriminatorValue\"\r\n              [ignoreDialogConfig]=\"true\" />\r\n            </ng-template>\r\n          </p-tabPanel>\r\n        </ng-container>\r\n\r\n      </p-tabView>\r\n    </div>\r\n  </fieldset>\r\n\r\n  <div *ngIf=\"(businessClass && entityStatusList.length > 0) ||\r\n        workflowInformation?.workflowUid ||\r\n        workflowConfigurationService.isDesginModeFromWorkflow\" class=\"mx-4 px-2 my-1 shared-footer-bar\">\r\n\r\n    <div *ngIf=\"businessClass && entityStatusList && entityStatusList.length > 0\">\r\n      <div class=\"flex align-items-center gap-2\" presentationDesigner=\"shared_crud_status\">\r\n        <Tsi-Label [labelValue]=\"'shared_crud_status'\"></Tsi-Label>\r\n        <Tsi-Search-Combo [id-field]=\"'key'\" [label-field]=\"'value'\" [datasource]=\"entityStatusList\" [(bind)]=\"status\"\r\n          [comboType]=\"'status'\" [statusMetadata]=\"statusMetadataComboStatus\" [inputName]=\"statusColumnName\"\r\n          [showAddButton]=\"false\"\r\n          [showSearchButton]=\"false\" [disabled]=\"statusInputDisabled || entityStatusList.length == 1\"></Tsi-Search-Combo>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"workflowInformation?.workflowUid || workflowConfigurationService.isDesginModeFromWorkflow\"\r\n      class=\"flex col-10\">\r\n      <div presentationDesigner=\"shared_workflowName\" class=\"flex align-items-center gap-2 col-4\">\r\n        <Tsi-Label [labelValue]=\"'administration_workflow_workflow'| localize\">\r\n        </Tsi-Label>\r\n        <Tsi-Text-Box [disabled]=\"true\" [inputName]=\"'workflowName'\" [(inputField)]=\"workflowInformation.workflowName\">\r\n        </Tsi-Text-Box>\r\n      </div>\r\n      <div presentationDesigner=\"administration_workflow_workflow_current_status\"\r\n        class=\"flex align-items-center gap-2 col-4\">\r\n        <Tsi-Label [labelValue]=\"'administration_workflow_workflow_current_status'\"></Tsi-Label>\r\n        <Tsi-Search-Combo class=\"w-7\" [disabled]=\"true\" id-field=\"key\" label-field=\"value\"\r\n          [bind]=\"workflowInformation.workflowEtat\" [isFiltered]=\"true\" [inputName]=\"'WorkflowEtat'\"\r\n          [elementSourceUrl]=\"getWorkflowEtatAsKeyValuePair\" [listSourceUrl]=\"getWorkflowEtatSuivantAsKeyValuePair\"\r\n          [showAddButton]=\"false\"\r\n          [showSearchButton]=\"false\">\r\n        </Tsi-Search-Combo>\r\n      </div>\r\n      <div class=\"col-4\">\r\n        <div *ngIf=\"mode != formModes.create || workflowConfigurationService.isDesginModeFromWorkflow\"\r\n          presentationDesigner=\"administration_workflow_workflow_next_status\"\r\n          class=\"flex gap-2 align-items-center no-border\">\r\n          <Tsi-Label [labelValue]=\"'administration_workflow_workflow_next_status'\"></Tsi-Label>\r\n          <Tsi-Search-Combo class=\"w-7\" id-field=\"key\" label-field=\"value\" [(bind)]=\"selectedWorkflowEtatUid\"\r\n            [isFiltered]=\"true\" [elementSourceUrl]=\"getWorkflowEtatAsKeyValuePair\" [inputName]=\"'WorkflowEtat'\"\r\n            [listSourceUrl]=\"getWorkflowEtatSuivantAsKeyValuePair\" (bindChange)=\"confirmUpdateWorkflowEtat($event)\"\r\n            [showAddButton]=\"false\"\r\n            [showSearchButton]=\"false\">\r\n          </Tsi-Search-Combo>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>", styles: [".border-black{border:solid 2px black}.no-border{border:none!important}.shared-footer-bar{display:flex;align-items:center;width:calc(100% - 33rem);height:2.5rem;position:absolute;bottom:0;z-index:5}.mr{margin:0 12px 5px}.input-wrapper,.input-wrapper>tsi-text-box,.input-wrapper>tsi-integer,.input-wrapper>tsi-decimal-input,.input-wrapper>tsi-check-box{width:100%;display:block}.form-input{display:flex;align-items:center}.main-tab-text{display:inline-block}@media (max-width: 768px){.main-tab-text{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i7.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "selectOnFocus", "resetFilterOnHide", "reloadDataSource", "isFiltered", "selectedLabel", "maxWidth", "businessClass", "searchDebounceTime", "comboType", "statusMetadata", "currentRowItem", "datasource", "bind", "maxSelectedLabels", "tooltipMaxDisplayedItems", "bindMode", "showSearchButton", "showAddButton", "showConsultButton", "showUpdateButton"], outputs: ["bindChange", "datasource-loaded", "init", "isLoaded", "selectedLabelChange", "onClick", "onSearchButtonClick", "selectionChange"] }, { kind: "component", type: TsiCheckboxComponent, selector: "Tsi-CheckBox", inputs: ["class", "isBinary", "checked", "tooltipText", "tooltipPosition"], outputs: ["inputFieldChange", "checkedChange"] }, { kind: "component", type: TsiDecimalInputComponent, selector: "Tsi-Decimal-Input", inputs: ["numOfDecimal", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiTextBoxComponent, selector: "Tsi-Text-Box", inputs: ["textBoxType", "autocomplete"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "component", type: ReportingComponent, selector: "app-reporting", inputs: ["showImportExportButton", "showNoteButton", "showInfoButton", "showUploadButton", "showActionButton", "isReportingToolbarDisabled", "formName", "formEndpoint", "formEndpointBody", "isFormEndpointPaged", "filtersHtmlTemplate", "optionalEndpoints", "businessClass", "mode", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "showManageWorkflowButton", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode", "openWorkflow"] }, { kind: "component", type: DynamicFormListComponent, selector: "shared-dynamic-form-list", inputs: ["occurence", "occurenceBusinessClass", "occurenceDiscriminatorValue", "ignoreDialogConfig"] }, { kind: "directive", type: BusyDirective, selector: "[busy]", inputs: ["busy"] }, { kind: "directive", type: PresentationDesignerDirective, selector: "[presentationDesigner]:not(tsi-tab-panel)" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiFormComponent, selector: "tsi-form", inputs: { class: "class", autocomplete: "autocomplete", optionalEndpoints: "optionalEndpoints", disabled: "disabled", isLoading: "isLoading", modalSize: "modalSize", showManageWorkflowButton: "showManageWorkflowButton", formEndpoint: "formEndpoint", formName: "formName", isReportingToolbarDisabled: "isReportingToolbarDisabled", isCreateOnly: "isCreateOnly", statusInputDisabled: "statusInputDisabled" }, outputs: { onSave: "onSave", openWorkflow: "openWorkflow", onSubmit: "onSubmit", onSubmitFormWorkflowConfiguration: "onSubmitFormWorkflowConfiguration", formRefChange: "formRefChange", onStatusChange: "onStatusChange" }, queries: [{ propertyName: "modalHeaderComp", first: true, predicate: TsiModalHeaderComponent, descendants: true }, { propertyName: "modalFooterComp", first: true, predicate: TsiModalFooterComponent, descendants: true }], viewQueries: [{ propertyName: "formRef", first: true, predicate: ["formRef"], descendants: true }, { propertyName: "reportingApp", first: true, predicate: ["reportingApp"], descendants: true }, { propertyName: "toolbarTemplateRef", first: true, predicate: ["toolbarTemplate"], descendants: true }, { propertyName: "dynamicToolbarContainers", predicate: ["dynamicToolbarContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dynamicFootersContainers", predicate: ["dynamicFooterContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<form class=\"form-horizontal\" autocomplete=\"off\" (ngSubmit)=\"handleFormSubmit($event)\" #formRef=\"ngForm\">\r\n  <ng-template #toolbarTemplate>\r\n    <p-toolbar *ngIf=\"formEndpoint\" styleClass=\"mb-1 gap-2\" class=\"w-full\" (dragover)=\"onDragOver($event)\"\r\n      (drop)=\"onDrop($event)\" (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\">\r\n\r\n      <ng-template pTemplate=\"left\">\r\n        <div class=\"mt-1 ml-2\">\r\n          {{ inputTitle }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"right\">\r\n        <div class=\"mt-1 mr-2\">\r\n          <app-reporting *ngIf=\"formEndpoint\" [fromTsiForm]=\"true\" [id]=\"this.id\" [formEndpoint]=\"formEndpoint\"\r\n            [formName]=\"formName\" [reportDiscriminator]=\"descriminatorValue\" [isFormEndpointPaged]=\"true\"\r\n            [mode]=\"mode\" [nombreDocumentsJoints]=\"nombreDocuments\" [configModeButtonId]=\"configModeButtonId\"\r\n            [isReportingToolbarDisabled]=\"isReportingToolbarDisabled\" (toggleDesignMode)=\"toggleDesignMode($event)\"\r\n            [businessClass]=\"businessClass\" (closedModalFileUpload)=\"getNombreFichier()\"\r\n            [showImportExportButton]=\"false\" [showActionButton]=\"showActionButton\" (openWorkflow)=\"openWorkflow.emit()\"\r\n            #reportingApp [showManageWorkflowButton]=\"showManageWorkflowButton\"\r\n            >\r\n          </app-reporting>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n        class=\"drag-message cursor-follow\">\r\n        {{ \"Jointure\" | localize }}\r\n      </div>\r\n\r\n    </p-toolbar>\r\n  </ng-template>\r\n\r\n  <div *busy=\"isLoading || hasActiveRequests\"></div>\r\n\r\n  <fieldset [disabled]=\"disabled\">\r\n    <div class=\"card mr\">\r\n      <p-tabView>\r\n\r\n        <p-tabPanel header=\"\" \r\n        [headerStyle]=\"colonnesPersonnaliseeGrouped.length === 0 && !canShowForms\r\n      ? { display: 'none' } \r\n      : null\">\r\n\r\n        <ng-template pTemplate=\"header\">\r\n          <i class=\"pi pi-home mr-2\"></i>\r\n          <span class=\"main-tab-text\">{{ 'shared_form_maintabTitle' | localize }}</span>\r\n        </ng-template>\r\n\r\n          <ng-content></ng-content>\r\n        </p-tabPanel>\r\n\r\n        <!-- Dynamic tabs -->\r\n        <ng-container *ngIf=\"colonnesPersonnaliseeGrouped.length > 0\">\r\n          <p-tabPanel *ngFor=\"let grp of colonnesPersonnaliseeGrouped\" [header]=\"grp.groupe\">\r\n\r\n            <ng-template #dynamicToolbarContainer></ng-template>\r\n\r\n            <div class=\"grid\">\r\n              <div class=\"col-12 grid form-row\" *ngFor=\"let col of grp.colonnes\">\r\n                <div class=\"col-3 form-label\">\r\n                  <Tsi-Label [labelValue]=\"col.libelle\"></Tsi-Label>\r\n                </div>\r\n\r\n                <!-- String -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.string\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Text-Box [(inputField)]=\"col.data.valeurString\"></Tsi-Text-Box>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Int -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.int\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Integer [(inputField)]=\"col.data.valeurInt\"></Tsi-Integer>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Decimal -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.decimal\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Decimal-Input [(inputField)]=\"col.data.valeurDecimal\"></Tsi-Decimal-Input>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Boolean -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.boolean\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-CheckBox [isBinary]=\"false\" [(inputField)]=\"col.data.valeurBoolean\">\r\n                    </Tsi-CheckBox>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Binary -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.binary\">\r\n                  binary input (not handled yet)\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n\r\n            <ng-template #dynamicFooterContainer></ng-template>\r\n          </p-tabPanel>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"canShowForms\">\r\n          <p-tabPanel [header]=\"'shared_form_dynamicFormsTab_Title' | localize\">\r\n            <ng-template pTemplate=\"content\">\r\n              <shared-dynamic-form-list\r\n              [occurence]=\"id\"\r\n              [occurenceBusinessClass]=\"businessClass\"\r\n              [occurenceDiscriminatorValue]=\"descriminatorValue\"\r\n              [ignoreDialogConfig]=\"true\" />\r\n            </ng-template>\r\n          </p-tabPanel>\r\n        </ng-container>\r\n\r\n      </p-tabView>\r\n    </div>\r\n  </fieldset>\r\n\r\n  <div *ngIf=\"(businessClass && entityStatusList.length > 0) ||\r\n        workflowInformation?.workflowUid ||\r\n        workflowConfigurationService.isDesginModeFromWorkflow\" class=\"mx-4 px-2 my-1 shared-footer-bar\">\r\n\r\n    <div *ngIf=\"businessClass && entityStatusList && entityStatusList.length > 0\">\r\n      <div class=\"flex align-items-center gap-2\" presentationDesigner=\"shared_crud_status\">\r\n        <Tsi-Label [labelValue]=\"'shared_crud_status'\"></Tsi-Label>\r\n        <Tsi-Search-Combo [id-field]=\"'key'\" [label-field]=\"'value'\" [datasource]=\"entityStatusList\" [(bind)]=\"status\"\r\n          [comboType]=\"'status'\" [statusMetadata]=\"statusMetadataComboStatus\" [inputName]=\"statusColumnName\"\r\n          [showAddButton]=\"false\"\r\n          [showSearchButton]=\"false\" [disabled]=\"statusInputDisabled || entityStatusList.length == 1\"></Tsi-Search-Combo>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"workflowInformation?.workflowUid || workflowConfigurationService.isDesginModeFromWorkflow\"\r\n      class=\"flex col-10\">\r\n      <div presentationDesigner=\"shared_workflowName\" class=\"flex align-items-center gap-2 col-4\">\r\n        <Tsi-Label [labelValue]=\"'administration_workflow_workflow'| localize\">\r\n        </Tsi-Label>\r\n        <Tsi-Text-Box [disabled]=\"true\" [inputName]=\"'workflowName'\" [(inputField)]=\"workflowInformation.workflowName\">\r\n        </Tsi-Text-Box>\r\n      </div>\r\n      <div presentationDesigner=\"administration_workflow_workflow_current_status\"\r\n        class=\"flex align-items-center gap-2 col-4\">\r\n        <Tsi-Label [labelValue]=\"'administration_workflow_workflow_current_status'\"></Tsi-Label>\r\n        <Tsi-Search-Combo class=\"w-7\" [disabled]=\"true\" id-field=\"key\" label-field=\"value\"\r\n          [bind]=\"workflowInformation.workflowEtat\" [isFiltered]=\"true\" [inputName]=\"'WorkflowEtat'\"\r\n          [elementSourceUrl]=\"getWorkflowEtatAsKeyValuePair\" [listSourceUrl]=\"getWorkflowEtatSuivantAsKeyValuePair\"\r\n          [showAddButton]=\"false\"\r\n          [showSearchButton]=\"false\">\r\n        </Tsi-Search-Combo>\r\n      </div>\r\n      <div class=\"col-4\">\r\n        <div *ngIf=\"mode != formModes.create || workflowConfigurationService.isDesginModeFromWorkflow\"\r\n          presentationDesigner=\"administration_workflow_workflow_next_status\"\r\n          class=\"flex gap-2 align-items-center no-border\">\r\n          <Tsi-Label [labelValue]=\"'administration_workflow_workflow_next_status'\"></Tsi-Label>\r\n          <Tsi-Search-Combo class=\"w-7\" id-field=\"key\" label-field=\"value\" [(bind)]=\"selectedWorkflowEtatUid\"\r\n            [isFiltered]=\"true\" [elementSourceUrl]=\"getWorkflowEtatAsKeyValuePair\" [inputName]=\"'WorkflowEtat'\"\r\n            [listSourceUrl]=\"getWorkflowEtatSuivantAsKeyValuePair\" (bindChange)=\"confirmUpdateWorkflowEtat($event)\"\r\n            [showAddButton]=\"false\"\r\n            [showSearchButton]=\"false\">\r\n          </Tsi-Search-Combo>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>", styles: [".border-black{border:solid 2px black}.no-border{border:none!important}.shared-footer-bar{display:flex;align-items:center;width:calc(100% - 33rem);height:2.5rem;position:absolute;bottom:0;z-index:5}.mr{margin:0 12px 5px}.input-wrapper,.input-wrapper>tsi-text-box,.input-wrapper>tsi-integer,.input-wrapper>tsi-decimal-input,.input-wrapper>tsi-check-box{width:100%;display:block}.form-input{display:flex;align-items:center}.main-tab-text{display:inline-block}@media (max-width: 768px){.main-tab-text{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$4.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i7.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "selectOnFocus", "resetFilterOnHide", "reloadDataSource", "isFiltered", "selectedLabel", "maxWidth", "businessClass", "searchDebounceTime", "comboType", "statusMetadata", "currentRowItem", "datasource", "bind", "maxSelectedLabels", "tooltipMaxDisplayedItems", "bindMode", "showSearchButton", "showAddButton", "showConsultButton", "showUpdateButton"], outputs: ["bindChange", "datasource-loaded", "init", "isLoaded", "selectedLabelChange", "onClick", "onSearchButtonClick", "selectionChange"] }, { kind: "component", type: TsiCheckboxComponent, selector: "Tsi-CheckBox", inputs: ["class", "isBinary", "checked", "tooltipText", "tooltipPosition"], outputs: ["inputFieldChange", "checkedChange"] }, { kind: "component", type: TsiDecimalInputComponent, selector: "Tsi-Decimal-Input", inputs: ["numOfDecimal", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiTextBoxComponent, selector: "Tsi-Text-Box", inputs: ["textBoxType", "autocomplete"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "component", type: ReportingComponent, selector: "app-reporting", inputs: ["showImportExportButton", "showNoteButton", "showInfoButton", "showUploadButton", "showActionButton", "isReportingToolbarDisabled", "formName", "formEndpoint", "formEndpointBody", "isFormEndpointPaged", "filtersHtmlTemplate", "optionalEndpoints", "businessClass", "mode", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "showManageWorkflowButton", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode", "openWorkflow"] }, { kind: "component", type: DynamicFormListComponent, selector: "shared-dynamic-form-list", inputs: ["occurence", "occurenceBusinessClass", "occurenceDiscriminatorValue", "ignoreDialogConfig"] }, { kind: "directive", type: BusyDirective, selector: "[busy]", inputs: ["busy"] }, { kind: "directive", type: PresentationDesignerDirective, selector: "[presentationDesigner]:not(tsi-tab-panel)" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiFormComponent, decorators: [{
             type: Component,
@@ -19279,7 +19507,7 @@ class ManageImportExportComponent extends TsiFormComponentBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageImportExportComponent, deps: [{ token: ModeleImportService }, { token: TsiConfirmationService }, { token: TsiNotificationService }, { token: i1$3.DynamicDialogConfig }, { token: TsiModalService }, { token: ErrorResponseManagerService }, { token: i1$3.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ManageImportExportComponent, selector: "app-manage-import-export", providers: [...appProviders], viewQueries: [{ propertyName: "gridComponent", first: true, predicate: TsiViewGridComponent, descendants: true }, { propertyName: "fileUploader", first: true, predicate: ["fileUpload"], descendants: true }, { propertyName: "viewGridComponent", first: true, predicate: ["viewGrid"], descendants: true }, { propertyName: "importFileToExecuteFileUpload", first: true, predicate: ["importFileToExecuteFileUpload"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-tabView>\r\n  <p-tabPanel [header]=\"'shared_execute_import_model_import_export' | localize\" class=\"pt-3 px-2\">\r\n    <div class=\"card\">\r\n      <div *busy=\"isloading\"></div>\r\n      <div class=\"grid\">\r\n        <div class=\"grid col-10\">\r\n          <div>\r\n            <Tsi-Label class=\"col-2\" [labelValue]=\"'shared_reporting_form'\">\r\n            </Tsi-Label>\r\n            <!-- <p-dropdown class=\"col-10 tsi-component\" class=\"tsi-component\" styleClass=\"tsi-component\" appendTp=\"body\"\r\n                optionLabel=\"value\" optionValue=\"key\" [filter]=\"true\"\r\n                filterBy=\"value\" [showClear]=\"true\" placeholder=\"{{'shared_reporting_select_form' | localize}}\"\r\n                [disabled]=\"true\">\r\n              </p-dropdown> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <p-toolbar styleClass=\"mb-4 gap-2\">\r\n        <ng-template pTemplate=\"left\">\r\n          <Tsi-Button [text]=\"'shared_reporting_add_report' | localize\"\r\n            icon=\"p-button-icon p-button-icon-left pi pi-plus\"\r\n            styleClass=\"p-element p-button-success mr-2 p-button p-component ng-star-inserted p-button-label\"\r\n            (click)=\"openModal()\"></Tsi-Button>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"right\">\r\n          <p-fileUpload #fileUpload name=\"demo[]\" (onBeforeUpload)=\"onImportFile($event)\"\r\n            (onSelect)=\"onFileSelected($event)\" (onClear)=\"onClear($event)\" (onRemove)=\"onRemove($event)\"\r\n            [multiple]=\"false\" accept=\"application/json\" [maxFileSize]=\"1000000\"\r\n            [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n            [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n            [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n            [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n            [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n            [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n            [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n            removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n            [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n            [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n            <ng-template *ngIf=\"toUploadFileData\" pTemplate=\"fileupload-content\" let-files>\r\n              <div *ngIf=\"files?.length\">\r\n                <strong>{{ files[0].name }}</strong>\r\n              </div>\r\n            </ng-template>\r\n          </p-fileUpload>\r\n        </ng-template>\r\n      </p-toolbar>\r\n\r\n      <tsi-view-grid #viewGrid [header]=\"'shared_execute_import_model_import_export'  |localize\"\r\n        [searchFields]=\"searchFields\" [showConsultButton]=\"false\" [getDataFromApi]=\"true\"\r\n        [crudService]=\"modeleImportService\" (buttonColumnClicked)=\"buttonClicked($event)\"\r\n        [formName]=\"'app-manage-import-export'\" [columns]=\"columns\" key=\"uid\" [selectKeyOnly]=\"false\"\r\n        [sortMode]=\"sortModeRef.Single\">\r\n      </tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_execute_import_model_import_export_default' | localize\" class=\"pt-3 px-2\">\r\n    <div class=\"grid\">\r\n      <tsi-view-grid class=\"col-12\" [header]=\"'shared_execute_import_model_import_export_default'  |localize\"\r\n        [columns]=\"columnsJson\" [getDataFromApi]=\"false\" [gridData]=\"gridData\" [key]=\"key\"\r\n        [formName]=\"'modele-import-par-default'\"\r\n        (buttonColumnClicked)=\"handleButtonColumnExecuteClicked($event)\"\r\n        [sortMode]=\"sortModeRef.Single\"></tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_execute_import_history' | localize\" class=\"pt-3 px-2\">\r\n    <div class=\"grid\">\r\n      <tsi-view-grid class=\"col-12\" [header]=\"'shared_execute_import_history'  |localize\" [columns]=\"columnsHistory\"\r\n        [getDataFromApi]=\"false\" [gridData]=\"historyGridData\" [key]=\"importHistoryKey\"\r\n        [formName]=\"'modele-import-par-default'\"\r\n        (buttonColumnClicked)=\"handleButtonColumnExecuteClicked($event)\"\r\n        [sortMode]=\"sortModeRef.Single\">\r\n      </tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_execute_import_without_model' | localize\" class=\"pt-3 px-2\">\r\n    <div *busy=\"isloading\"></div>\r\n    <ng-template pTemplate=\"body\">\r\n      <p-fileUpload #importFileToReportFileUpload name=\"importFileToReport\" [multiple]=\"false\"\r\n        (onSelect)=\"onImportFileWithoutModel_FileSelected($event)\" (onClear)=\"onImportFileWithoutModel_Clear($event)\"\r\n        (onBeforeUpload)=\"onImportFileWithoutModel_ImportFile($event)\"\r\n        (onRemove)=\"onImportFileWithoutModel_Remove($event)\" accept=\".xls,.xlsx\" [maxFileSize]=\"10000000\"\r\n        [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n        [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n        [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n        [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n        [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n        [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n        [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n        removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n        [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n        [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n        <ng-template *ngIf=\"toUploadWithoutModel\" pTemplate=\"fileupload-content\" let-files>\r\n          <div *ngIf=\"files?.length\">\r\n            <strong>{{ files[0].name }}</strong>\r\n          </div>\r\n        </ng-template>\r\n      </p-fileUpload>\r\n    </ng-template>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_import_result_header' | localize\" class=\"pt-3 px-2\">\r\n    <div class=\"grid\">\r\n      <tsi-view-grid class=\"col-12\" [header]=\"'shared_import_result_header'  |localize\" [columns]=\"importResultsColumns\"\r\n        [getDataFromApi]=\"false\" [gridData]=\"importResultData\" [key]=\"'uid'\" [formName]=\"'modele-import-result-import'\"\r\n        (buttonColumnClicked)=\"handleConsultImportResultButtonClicked($event)\"\r\n        [sortMode]=\"sortModeRef.Single\"\r\n        ></tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n</p-tabView>\r\n\r\n<div class=\"p-1\">\r\n  <Tsi-Button\r\n    styleClass=\"p-element p-button-text p-button-raised p-button-rounded mr-2 p-button p-component p-button-icon-only\"\r\n    [tooltipText]=\"'shared_import_export_refresh'\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n    icon=\"p-button-icon pi pi-refresh\" (onClick)=\"refreshImportExportData()\"\r\n    class=\"p-button-text p-button-raised p-button-rounded mr-2\"></Tsi-Button>\r\n</div>\r\n\r\n<!-- dialog to import file to report -->\r\n<p-dialog header=\"{{'shared_reporting_select_file_to_import_into_report' | localize}}\"\r\n  [(visible)]=\"isImportFileToExecuteVisible\" [style]=\"{width: '50vw'}\">\r\n  <!-- <Tsi-Modal-Header (onCloseClick)=\"onImportFileToReportModalCancelClick()\" [inputTitle]=\"'shared_reporting_select_file_to_import_into_report'\"></Tsi-Modal-Header> -->\r\n\r\n  <ng-template pTemplate=\"body\">\r\n    <p-fileUpload #importFileToReportFileUpload name=\"importFileToReport\" [multiple]=\"false\"\r\n      (onSelect)=\"onImportFileToExecute_FileSelected($event)\" (onClear)=\"onImportFileToExecute_Clear($event)\"\r\n      (onBeforeUpload)=\"onImportFileToExecute_ImportFile($event)\" (onRemove)=\"onImportFileToExecute_Remove($event)\"\r\n      accept=\"{{fileType}}\" [maxFileSize]=\"10000000\"\r\n      [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n      [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n      [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n      [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n      [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n      [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n      [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n      removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n      [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n      [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n      <ng-template *ngIf=\"toUploadToExecuteFile\" pTemplate=\"fileupload-content\" let-files>\r\n        <div *ngIf=\"files?.length\">\r\n          <strong>{{ files[0].name }}</strong>\r\n        </div>\r\n      </ng-template>\r\n    </p-fileUpload>\r\n  </ng-template>\r\n\r\n\r\n  <!-- <Tsi-Modal-Footer (onCancelClick)=\"onImportFileToReportModalCancelClick()\"\r\n    (onSaveClick)=\"onImportFileToReportModalSaveClick()\"\r\n    [saveDisabled]=\"!toUploadToUpdateReportFileData\"></Tsi-Modal-Footer> -->\r\n\r\n</p-dialog>", styles: ["::ng-deep .p-fileupload-choose input{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i3$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i7.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "component", type: TsiViewGridComponent, selector: "tsi-view-grid", inputs: ["columns", "gridConfiguration", "viewComponent", "crudService", "header", "modalSize", "showConsultButton", "showSearchField", "searchFields", "formEndpoint", "formName", "id", "showImportExportButton", "targetBusinessClass", "getDataFromApi", "gridData", "isSearchButtonDisabled", "selectKeyOnly", "selectionMode", "selectedItems", "key", "showGlobalSearch", "showExportButton", "showCalenderView", "showHeaderFilters", "showFilterButton", "selectAll", "checkedByField", "sortMode", "sizingMode", "searchOnInit"], outputs: ["summariesChange", "selectedItemsChange", "buttonColumnClicked", "searchFieldsValueChanged", "getAllPagedResultChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "directive", type: BusyDirective, selector: "[busy]", inputs: ["busy"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ManageImportExportComponent, selector: "app-manage-import-export", providers: [...appProviders], viewQueries: [{ propertyName: "gridComponent", first: true, predicate: TsiViewGridComponent, descendants: true }, { propertyName: "fileUploader", first: true, predicate: ["fileUpload"], descendants: true }, { propertyName: "viewGridComponent", first: true, predicate: ["viewGrid"], descendants: true }, { propertyName: "importFileToExecuteFileUpload", first: true, predicate: ["importFileToExecuteFileUpload"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-tabView>\r\n  <p-tabPanel [header]=\"'shared_execute_import_model_import_export' | localize\" class=\"pt-3 px-2\">\r\n    <div class=\"card\">\r\n      <div *busy=\"isloading\"></div>\r\n      <div class=\"grid\">\r\n        <div class=\"grid col-10\">\r\n          <div>\r\n            <Tsi-Label class=\"col-2\" [labelValue]=\"'shared_reporting_form'\">\r\n            </Tsi-Label>\r\n            <!-- <p-dropdown class=\"col-10 tsi-component\" class=\"tsi-component\" styleClass=\"tsi-component\" appendTp=\"body\"\r\n                optionLabel=\"value\" optionValue=\"key\" [filter]=\"true\"\r\n                filterBy=\"value\" [showClear]=\"true\" placeholder=\"{{'shared_reporting_select_form' | localize}}\"\r\n                [disabled]=\"true\">\r\n              </p-dropdown> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <p-toolbar styleClass=\"mb-4 gap-2\">\r\n        <ng-template pTemplate=\"left\">\r\n          <Tsi-Button [text]=\"'shared_reporting_add_report' | localize\"\r\n            icon=\"p-button-icon p-button-icon-left pi pi-plus\"\r\n            styleClass=\"p-element p-button-success mr-2 p-button p-component ng-star-inserted p-button-label\"\r\n            (click)=\"openModal()\"></Tsi-Button>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"right\">\r\n          <p-fileUpload #fileUpload name=\"demo[]\" (onBeforeUpload)=\"onImportFile($event)\"\r\n            (onSelect)=\"onFileSelected($event)\" (onClear)=\"onClear($event)\" (onRemove)=\"onRemove($event)\"\r\n            [multiple]=\"false\" accept=\"application/json\" [maxFileSize]=\"1000000\"\r\n            [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n            [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n            [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n            [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n            [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n            [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n            [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n            removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n            [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n            [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n            <ng-template *ngIf=\"toUploadFileData\" pTemplate=\"fileupload-content\" let-files>\r\n              <div *ngIf=\"files?.length\">\r\n                <strong>{{ files[0].name }}</strong>\r\n              </div>\r\n            </ng-template>\r\n          </p-fileUpload>\r\n        </ng-template>\r\n      </p-toolbar>\r\n\r\n      <tsi-view-grid #viewGrid [header]=\"'shared_execute_import_model_import_export'  |localize\"\r\n        [searchFields]=\"searchFields\" [showConsultButton]=\"false\" [getDataFromApi]=\"true\"\r\n        [crudService]=\"modeleImportService\" (buttonColumnClicked)=\"buttonClicked($event)\"\r\n        [formName]=\"'app-manage-import-export'\" [columns]=\"columns\" key=\"uid\" [selectKeyOnly]=\"false\"\r\n        [sortMode]=\"sortModeRef.Single\">\r\n      </tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_execute_import_model_import_export_default' | localize\" class=\"pt-3 px-2\">\r\n    <div class=\"grid\">\r\n      <tsi-view-grid class=\"col-12\" [header]=\"'shared_execute_import_model_import_export_default'  |localize\"\r\n        [columns]=\"columnsJson\" [getDataFromApi]=\"false\" [gridData]=\"gridData\" [key]=\"key\"\r\n        [formName]=\"'modele-import-par-default'\"\r\n        (buttonColumnClicked)=\"handleButtonColumnExecuteClicked($event)\"\r\n        [sortMode]=\"sortModeRef.Single\"></tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_execute_import_history' | localize\" class=\"pt-3 px-2\">\r\n    <div class=\"grid\">\r\n      <tsi-view-grid class=\"col-12\" [header]=\"'shared_execute_import_history'  |localize\" [columns]=\"columnsHistory\"\r\n        [getDataFromApi]=\"false\" [gridData]=\"historyGridData\" [key]=\"importHistoryKey\"\r\n        [formName]=\"'modele-import-par-default'\"\r\n        (buttonColumnClicked)=\"handleButtonColumnExecuteClicked($event)\"\r\n        [sortMode]=\"sortModeRef.Single\">\r\n      </tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_execute_import_without_model' | localize\" class=\"pt-3 px-2\">\r\n    <div *busy=\"isloading\"></div>\r\n    <ng-template pTemplate=\"body\">\r\n      <p-fileUpload #importFileToReportFileUpload name=\"importFileToReport\" [multiple]=\"false\"\r\n        (onSelect)=\"onImportFileWithoutModel_FileSelected($event)\" (onClear)=\"onImportFileWithoutModel_Clear($event)\"\r\n        (onBeforeUpload)=\"onImportFileWithoutModel_ImportFile($event)\"\r\n        (onRemove)=\"onImportFileWithoutModel_Remove($event)\" accept=\".xls,.xlsx\" [maxFileSize]=\"10000000\"\r\n        [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n        [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n        [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n        [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n        [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n        [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n        [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n        removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n        [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n        [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n        <ng-template *ngIf=\"toUploadWithoutModel\" pTemplate=\"fileupload-content\" let-files>\r\n          <div *ngIf=\"files?.length\">\r\n            <strong>{{ files[0].name }}</strong>\r\n          </div>\r\n        </ng-template>\r\n      </p-fileUpload>\r\n    </ng-template>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_import_result_header' | localize\" class=\"pt-3 px-2\">\r\n    <div class=\"grid\">\r\n      <tsi-view-grid class=\"col-12\" [header]=\"'shared_import_result_header'  |localize\" [columns]=\"importResultsColumns\"\r\n        [getDataFromApi]=\"false\" [gridData]=\"importResultData\" [key]=\"'uid'\" [formName]=\"'modele-import-result-import'\"\r\n        (buttonColumnClicked)=\"handleConsultImportResultButtonClicked($event)\"\r\n        [sortMode]=\"sortModeRef.Single\"\r\n        ></tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n</p-tabView>\r\n\r\n<div class=\"p-1\">\r\n  <Tsi-Button\r\n    styleClass=\"p-element p-button-text p-button-raised p-button-rounded mr-2 p-button p-component p-button-icon-only\"\r\n    [tooltipText]=\"'shared_import_export_refresh'\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n    icon=\"p-button-icon pi pi-refresh\" (onClick)=\"refreshImportExportData()\"\r\n    class=\"p-button-text p-button-raised p-button-rounded mr-2\"></Tsi-Button>\r\n</div>\r\n\r\n<!-- dialog to import file to report -->\r\n<p-dialog header=\"{{'shared_reporting_select_file_to_import_into_report' | localize}}\"\r\n  [(visible)]=\"isImportFileToExecuteVisible\" [style]=\"{width: '50vw'}\">\r\n  <!-- <Tsi-Modal-Header (onCloseClick)=\"onImportFileToReportModalCancelClick()\" [inputTitle]=\"'shared_reporting_select_file_to_import_into_report'\"></Tsi-Modal-Header> -->\r\n\r\n  <ng-template pTemplate=\"body\">\r\n    <p-fileUpload #importFileToReportFileUpload name=\"importFileToReport\" [multiple]=\"false\"\r\n      (onSelect)=\"onImportFileToExecute_FileSelected($event)\" (onClear)=\"onImportFileToExecute_Clear($event)\"\r\n      (onBeforeUpload)=\"onImportFileToExecute_ImportFile($event)\" (onRemove)=\"onImportFileToExecute_Remove($event)\"\r\n      accept=\"{{fileType}}\" [maxFileSize]=\"10000000\"\r\n      [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n      [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n      [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n      [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n      [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n      [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n      [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n      removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n      [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n      [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n      <ng-template *ngIf=\"toUploadToExecuteFile\" pTemplate=\"fileupload-content\" let-files>\r\n        <div *ngIf=\"files?.length\">\r\n          <strong>{{ files[0].name }}</strong>\r\n        </div>\r\n      </ng-template>\r\n    </p-fileUpload>\r\n  </ng-template>\r\n\r\n\r\n  <!-- <Tsi-Modal-Footer (onCancelClick)=\"onImportFileToReportModalCancelClick()\"\r\n    (onSaveClick)=\"onImportFileToReportModalSaveClick()\"\r\n    [saveDisabled]=\"!toUploadToUpdateReportFileData\"></Tsi-Modal-Footer> -->\r\n\r\n</p-dialog>", styles: ["::ng-deep .p-fileupload-choose input{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$4.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i3$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i7.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "component", type: TsiViewGridComponent, selector: "tsi-view-grid", inputs: ["columns", "gridConfiguration", "viewComponent", "crudService", "header", "modalSize", "showConsultButton", "showSearchField", "searchFields", "formEndpoint", "formName", "id", "showImportExportButton", "targetBusinessClass", "getDataFromApi", "gridData", "isSearchButtonDisabled", "selectKeyOnly", "selectionMode", "selectedItems", "key", "showGlobalSearch", "showExportButton", "showCalenderView", "showHeaderFilters", "showFilterButton", "selectAll", "checkedByField", "sortMode", "sizingMode", "searchOnInit"], outputs: ["summariesChange", "selectedItemsChange", "buttonColumnClicked", "searchFieldsValueChanged", "getAllPagedResultChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "directive", type: BusyDirective, selector: "[busy]", inputs: ["busy"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageImportExportComponent, decorators: [{
             type: Component,
@@ -20634,7 +20862,7 @@ class ManageReportingComponent extends TsiFormComponentBaseComponent {
         this.isloading = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageReportingComponent, deps: [{ token: ReportingService }, { token: IdentityManagerService }, { token: TsiConfirmationService }, { token: TsiNotificationService }, { token: i1$3.DynamicDialogRef }, { token: i1$3.DynamicDialogConfig }, { token: TsiModalService }, { token: MailingService }, { token: ErrorResponseManagerService }, { token: i7$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ManageReportingComponent, selector: "app-manage-reporting", inputs: { otherFormName: "otherFormName", otherFormEndpoint: "otherFormEndpoint", formEndpointBody: "formEndpointBody", isFormEndpointPaged: "isFormEndpointPaged", filtersHtmlTemplate: "filtersHtmlTemplate", optionalEndpoints: "optionalEndpoints", customReportingMode: "customReportingMode" }, providers: [...appProviders], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }, { propertyName: "importFileToReportFileUpload", first: true, predicate: ["importFileToReportFileUpload"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<div class=\"card\">\r\n  <div *busy=\"isloading\"></div>\r\n  <div class=\"grid\">\r\n    <div class=\"grid col-10\">\r\n      <div *ngIf=\"isFromForm; else notFromForm\">\r\n        <Tsi-Label class=\"col-2\" [labelValue]=\"'shared_reporting_form'\">\r\n        </Tsi-Label>\r\n        <p-dropdown class=\"col-10 tsi-component\" class=\"tsi-component\" styleClass=\"tsi-component\" appendTp=\"body\"\r\n          [options]=\"formNames\" [ngModel]=\"otherFormName\" optionLabel=\"value\" optionValue=\"key\" [filter]=\"true\"\r\n          filterBy=\"value\" [showClear]=\"true\" placeholder=\"{{'shared_reporting_select_form' | localize}}\"\r\n          [disabled]=\"true\">\r\n        </p-dropdown>\r\n      </div>\r\n\r\n      <ng-template #notFromForm>\r\n        <ng-container>\r\n          <Tsi-Label class=\"col-2\" [labelValue]=\"'shared_reporting_form'\">\r\n          </Tsi-Label>\r\n          <Tsi-Search-Combo class=\"col-10\" [(bind)]=\"otherFormName\" (bindChange)=\"onFormChange()\"\r\n            [listSourceUrl]=\"getFormNamesEndpoint\" [elementSourceUrl]=\"getFormNamesEndpoint \" [isFiltered]=\"true\"\r\n            id-field=\"key\" label-field=\"value\">\r\n          </Tsi-Search-Combo>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <p-toolbar styleClass=\"mb-4 gap-2\">\r\n    <ng-template pTemplate=\"left\">\r\n      <Tsi-Button [text]=\"'shared_reporting_add_report' | localize\" icon=\"p-button-icon p-button-icon-left pi pi-plus\"\r\n        styleClass=\"p-element p-button-success ml-2 mr-2 p-button p-component ng-star-inserted p-button-label\" (click)=\"onNewReport()\"></Tsi-Button>\r\n      <Tsi-Button [buttonType]=\"buttonType.Submit\" [text]=\"'shared_reporting_delete_report' | localize\" icon=\"p-button-icon p-button-icon-left pi pi-trash\"\r\n        styleClass=\"p-element p-button-danger p-button p-component ng-star-inserted p-button-label\" (click)=\"onDeleteSelectedReports()\"\r\n        [disabled]=\"!selectedReports || !selectedReports.length\"></Tsi-Button>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"right\">\r\n      <p-fileUpload #fileUpload name=\"demo[]\" (onBeforeUpload)=\"onImportFile($event)\"\r\n        (onSelect)=\"onFileSelected($event)\" (onClear)=\"onClear($event)\" (onRemove)=\"onRemove($event)\" [multiple]=\"false\"\r\n        accept=\"application/json\" [maxFileSize]=\"10000000\" \r\n        [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n        [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n        [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n        [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n        [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n        [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n        [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n        removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n        [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n        [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n        <ng-template *ngIf=\"toUploadFileData\" pTemplate=\"fileupload-content\">\r\n        </ng-template>\r\n      </p-fileUpload>\r\n    </ng-template>\r\n  </p-toolbar>\r\n\r\n  <!-- <Tsi-Display-Grid [showHeader]=\"true\"\r\n    [header]=\"'shared_reporting_my_template'\"\r\n    [columns]=\"columns\" [gridData]=\"reports\" key=\"uid\"\r\n    (buttonColumnClicked)=\"handleButtonColumnClicked($event)\" [(selectedItems)]=\"selectedReports\"\r\n    [showFilters]=\"false\"\r\n    [paginator]=\"true\"\r\n    [globalFilterFields]=\"globalFilterFields\">\r\n  </Tsi-Display-Grid> -->\r\n\r\n\r\n  <!--<div style=\"text-align:left\"> <p-button icon=\"pi pi-refresh\"  [pTooltip]=\"'shared_reporting_refresh' | localize\" [tooltipPosition]=\"tooltipPosition.Top\"  label=\"Reload\" severity=\"help\" (click)=\"onRefresh()\" /> </div>\r\n  <p-button icon=\"pi pi-refresh\" class=\"p-button-rounded\" styleClass=\"p-button-text\" />\r\n-->\r\n  \r\n  <Tsi-Button styleClass=\"p-element p-button-text p-button-raised p-button-rounded mb-3 ml-3\"  \r\n    [tooltipText]=\"'shared_reporting_refresh'\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n    icon=\"pi pi-refresh\" (click)=\"onRefresh()\"></Tsi-Button>\r\n\r\n  <tsi-view-grid \r\n    [sortMode]=\"sortModeRef.Single\"\r\n    [header]=\"'shared_reporting_my_template'\"\r\n    [columns]=\"columns\" [gridData]=\"reports\" key=\"uid\"\r\n    (buttonColumnClicked)=\"handleButtonColumnClicked($event)\" [(selectedItems)]=\"selectedReports\"\r\n    [getDataFromApi]=\"false\"\r\n    [formName]=\"'my-report-templates'\"\r\n    >\r\n  </tsi-view-grid>\r\n  <br/>\r\n   <!-- Default Template -->\r\n   <!-- <Tsi-Display-Grid \r\n   [showHeader]=\"true\" \r\n   [header]=\"'shared_reporting_BuiltIn_template'\"\r\n   [showSummaryFooter]=\"false\" \r\n   [paginator]=\"false\" \r\n   [showFilters]=\"false\" \r\n   [columns]=\"defaultTemplateColumns\" \r\n   [gridData]=\"defaultReportTemplateData\" \r\n   (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n   [paginator]=\"true\"\r\n   key=\"name\">\r\n  </Tsi-Display-Grid> -->\r\n\r\n  \r\n  <tsi-view-grid\r\n   [sortMode]=\"sortModeRef.Single\"\r\n   [header]=\"'shared_reporting_BuiltIn_template'\"\r\n   [columns]=\"defaultTemplateColumns\" \r\n   [gridData]=\"defaultReportTemplateData\" \r\n   (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n   [getDataFromApi]=\"false\"\r\n   [formName]=\"'default-my-report-templates'\"\r\n   key=\"name\">\r\n  </tsi-view-grid>\r\n\r\n\r\n\r\n\r\n  \r\n\r\n  <!-- dialog to import file to report -->\r\n  <p-dialog header=\"{{'shared_reporting_select_file_to_import_into_report' | localize}}\" [(visible)]=\"isUpdateReportFromFileDialogVisible\" [style]=\"{width: '50vw'}\">\r\n    <!-- <Tsi-Modal-Header (onCloseClick)=\"onImportFileToReportModalCancelClick()\" [inputTitle]=\"'shared_reporting_select_file_to_import_into_report'\"></Tsi-Modal-Header> -->\r\n\r\n    <ng-template pTemplate=\"body\">\r\n      <p-fileUpload #importFileToReportFileUpload name=\"importFileToReport\" (onBeforeUpload)=\"onImportFileToReport_ImportFile($event)\"\r\n        (onSelect)=\"onImportFileToReport_FileSelected($event)\" (onClear)=\"onImportFileToReport_Clear($event)\" (onRemove)=\"onImportFileToReport_Remove($event)\" [multiple]=\"false\"\r\n        accept=\"application/json\" [maxFileSize]=\"10000000\"\r\n        [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n        [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n        [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n        [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n        [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n        [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n        [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n        removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n        [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n        [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n        <ng-template *ngIf=\"toUploadToUpdateReportFileData\" pTemplate=\"fileupload-content\">\r\n        </ng-template>\r\n      </p-fileUpload>\r\n    </ng-template>\r\n\r\n    <!-- <Tsi-Modal-Footer (onCancelClick)=\"onImportFileToReportModalCancelClick()\"\r\n    (onSaveClick)=\"onImportFileToReportModalSaveClick()\"\r\n    [saveDisabled]=\"!toUploadToUpdateReportFileData\"></Tsi-Modal-Footer> -->\r\n\r\n</p-dialog>\r\n</div>\r\n", styles: [".p-button.p-button-icon-only.p-button-rounded{height:2rem!important}::ng-deep .p-fileupload-choose input{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i3$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i11.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "selectOnFocus", "resetFilterOnHide", "reloadDataSource", "isFiltered", "selectedLabel", "maxWidth", "businessClass", "searchDebounceTime", "comboType", "statusMetadata", "currentRowItem", "datasource", "bind", "maxSelectedLabels", "tooltipMaxDisplayedItems", "bindMode", "showSearchButton", "showAddButton", "showConsultButton", "showUpdateButton"], outputs: ["bindChange", "datasource-loaded", "init", "isLoaded", "selectedLabelChange", "onClick", "onSearchButtonClick", "selectionChange"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "component", type: TsiViewGridComponent, selector: "tsi-view-grid", inputs: ["columns", "gridConfiguration", "viewComponent", "crudService", "header", "modalSize", "showConsultButton", "showSearchField", "searchFields", "formEndpoint", "formName", "id", "showImportExportButton", "targetBusinessClass", "getDataFromApi", "gridData", "isSearchButtonDisabled", "selectKeyOnly", "selectionMode", "selectedItems", "key", "showGlobalSearch", "showExportButton", "showCalenderView", "showHeaderFilters", "showFilterButton", "selectAll", "checkedByField", "sortMode", "sizingMode", "searchOnInit"], outputs: ["summariesChange", "selectedItemsChange", "buttonColumnClicked", "searchFieldsValueChanged", "getAllPagedResultChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "directive", type: BusyDirective, selector: "[busy]", inputs: ["busy"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ManageReportingComponent, selector: "app-manage-reporting", inputs: { otherFormName: "otherFormName", otherFormEndpoint: "otherFormEndpoint", formEndpointBody: "formEndpointBody", isFormEndpointPaged: "isFormEndpointPaged", filtersHtmlTemplate: "filtersHtmlTemplate", optionalEndpoints: "optionalEndpoints", customReportingMode: "customReportingMode" }, providers: [...appProviders], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }, { propertyName: "importFileToReportFileUpload", first: true, predicate: ["importFileToReportFileUpload"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<div class=\"card\">\r\n  <div *busy=\"isloading\"></div>\r\n  <div class=\"grid\">\r\n    <div class=\"grid col-10\">\r\n      <div *ngIf=\"isFromForm; else notFromForm\">\r\n        <Tsi-Label class=\"col-2\" [labelValue]=\"'shared_reporting_form'\">\r\n        </Tsi-Label>\r\n        <p-dropdown class=\"col-10 tsi-component\" class=\"tsi-component\" styleClass=\"tsi-component\" appendTp=\"body\"\r\n          [options]=\"formNames\" [ngModel]=\"otherFormName\" optionLabel=\"value\" optionValue=\"key\" [filter]=\"true\"\r\n          filterBy=\"value\" [showClear]=\"true\" placeholder=\"{{'shared_reporting_select_form' | localize}}\"\r\n          [disabled]=\"true\">\r\n        </p-dropdown>\r\n      </div>\r\n\r\n      <ng-template #notFromForm>\r\n        <ng-container>\r\n          <Tsi-Label class=\"col-2\" [labelValue]=\"'shared_reporting_form'\">\r\n          </Tsi-Label>\r\n          <Tsi-Search-Combo class=\"col-10\" [(bind)]=\"otherFormName\" (bindChange)=\"onFormChange()\"\r\n            [listSourceUrl]=\"getFormNamesEndpoint\" [elementSourceUrl]=\"getFormNamesEndpoint \" [isFiltered]=\"true\"\r\n            id-field=\"key\" label-field=\"value\">\r\n          </Tsi-Search-Combo>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <p-toolbar styleClass=\"mb-4 gap-2\">\r\n    <ng-template pTemplate=\"left\">\r\n      <Tsi-Button [text]=\"'shared_reporting_add_report' | localize\" icon=\"p-button-icon p-button-icon-left pi pi-plus\"\r\n        styleClass=\"p-element p-button-success ml-2 mr-2 p-button p-component ng-star-inserted p-button-label\" (click)=\"onNewReport()\"></Tsi-Button>\r\n      <Tsi-Button [buttonType]=\"buttonType.Submit\" [text]=\"'shared_reporting_delete_report' | localize\" icon=\"p-button-icon p-button-icon-left pi pi-trash\"\r\n        styleClass=\"p-element p-button-danger p-button p-component ng-star-inserted p-button-label\" (click)=\"onDeleteSelectedReports()\"\r\n        [disabled]=\"!selectedReports || !selectedReports.length\"></Tsi-Button>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"right\">\r\n      <p-fileUpload #fileUpload name=\"demo[]\" (onBeforeUpload)=\"onImportFile($event)\"\r\n        (onSelect)=\"onFileSelected($event)\" (onClear)=\"onClear($event)\" (onRemove)=\"onRemove($event)\" [multiple]=\"false\"\r\n        accept=\"application/json\" [maxFileSize]=\"10000000\" \r\n        [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n        [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n        [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n        [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n        [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n        [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n        [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n        removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n        [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n        [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n        <ng-template *ngIf=\"toUploadFileData\" pTemplate=\"fileupload-content\">\r\n        </ng-template>\r\n      </p-fileUpload>\r\n    </ng-template>\r\n  </p-toolbar>\r\n\r\n  <!-- <Tsi-Display-Grid [showHeader]=\"true\"\r\n    [header]=\"'shared_reporting_my_template'\"\r\n    [columns]=\"columns\" [gridData]=\"reports\" key=\"uid\"\r\n    (buttonColumnClicked)=\"handleButtonColumnClicked($event)\" [(selectedItems)]=\"selectedReports\"\r\n    [showFilters]=\"false\"\r\n    [paginator]=\"true\"\r\n    [globalFilterFields]=\"globalFilterFields\">\r\n  </Tsi-Display-Grid> -->\r\n\r\n\r\n  <!--<div style=\"text-align:left\"> <p-button icon=\"pi pi-refresh\"  [pTooltip]=\"'shared_reporting_refresh' | localize\" [tooltipPosition]=\"tooltipPosition.Top\"  label=\"Reload\" severity=\"help\" (click)=\"onRefresh()\" /> </div>\r\n  <p-button icon=\"pi pi-refresh\" class=\"p-button-rounded\" styleClass=\"p-button-text\" />\r\n-->\r\n  \r\n  <Tsi-Button styleClass=\"p-element p-button-text p-button-raised p-button-rounded mb-3 ml-3\"  \r\n    [tooltipText]=\"'shared_reporting_refresh'\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n    icon=\"pi pi-refresh\" (click)=\"onRefresh()\"></Tsi-Button>\r\n\r\n  <tsi-view-grid \r\n    [sortMode]=\"sortModeRef.Single\"\r\n    [header]=\"'shared_reporting_my_template'\"\r\n    [columns]=\"columns\" [gridData]=\"reports\" key=\"uid\"\r\n    (buttonColumnClicked)=\"handleButtonColumnClicked($event)\" [(selectedItems)]=\"selectedReports\"\r\n    [getDataFromApi]=\"false\"\r\n    [formName]=\"'my-report-templates'\"\r\n    >\r\n  </tsi-view-grid>\r\n  <br/>\r\n   <!-- Default Template -->\r\n   <!-- <Tsi-Display-Grid \r\n   [showHeader]=\"true\" \r\n   [header]=\"'shared_reporting_BuiltIn_template'\"\r\n   [showSummaryFooter]=\"false\" \r\n   [paginator]=\"false\" \r\n   [showFilters]=\"false\" \r\n   [columns]=\"defaultTemplateColumns\" \r\n   [gridData]=\"defaultReportTemplateData\" \r\n   (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n   [paginator]=\"true\"\r\n   key=\"name\">\r\n  </Tsi-Display-Grid> -->\r\n\r\n  \r\n  <tsi-view-grid\r\n   [sortMode]=\"sortModeRef.Single\"\r\n   [header]=\"'shared_reporting_BuiltIn_template'\"\r\n   [columns]=\"defaultTemplateColumns\" \r\n   [gridData]=\"defaultReportTemplateData\" \r\n   (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n   [getDataFromApi]=\"false\"\r\n   [formName]=\"'default-my-report-templates'\"\r\n   key=\"name\">\r\n  </tsi-view-grid>\r\n\r\n\r\n\r\n\r\n  \r\n\r\n  <!-- dialog to import file to report -->\r\n  <p-dialog header=\"{{'shared_reporting_select_file_to_import_into_report' | localize}}\" [(visible)]=\"isUpdateReportFromFileDialogVisible\" [style]=\"{width: '50vw'}\">\r\n    <!-- <Tsi-Modal-Header (onCloseClick)=\"onImportFileToReportModalCancelClick()\" [inputTitle]=\"'shared_reporting_select_file_to_import_into_report'\"></Tsi-Modal-Header> -->\r\n\r\n    <ng-template pTemplate=\"body\">\r\n      <p-fileUpload #importFileToReportFileUpload name=\"importFileToReport\" (onBeforeUpload)=\"onImportFileToReport_ImportFile($event)\"\r\n        (onSelect)=\"onImportFileToReport_FileSelected($event)\" (onClear)=\"onImportFileToReport_Clear($event)\" (onRemove)=\"onImportFileToReport_Remove($event)\" [multiple]=\"false\"\r\n        accept=\"application/json\" [maxFileSize]=\"10000000\"\r\n        [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n        [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n        [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n        [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n        [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n        [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n        [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n        removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n        [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n        [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n        <ng-template *ngIf=\"toUploadToUpdateReportFileData\" pTemplate=\"fileupload-content\">\r\n        </ng-template>\r\n      </p-fileUpload>\r\n    </ng-template>\r\n\r\n    <!-- <Tsi-Modal-Footer (onCancelClick)=\"onImportFileToReportModalCancelClick()\"\r\n    (onSaveClick)=\"onImportFileToReportModalSaveClick()\"\r\n    [saveDisabled]=\"!toUploadToUpdateReportFileData\"></Tsi-Modal-Footer> -->\r\n\r\n</p-dialog>\r\n</div>\r\n", styles: [".p-button.p-button-icon-only.p-button-rounded{height:2rem!important}::ng-deep .p-fileupload-choose input{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$4.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i3$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i11.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "selectOnFocus", "resetFilterOnHide", "reloadDataSource", "isFiltered", "selectedLabel", "maxWidth", "businessClass", "searchDebounceTime", "comboType", "statusMetadata", "currentRowItem", "datasource", "bind", "maxSelectedLabels", "tooltipMaxDisplayedItems", "bindMode", "showSearchButton", "showAddButton", "showConsultButton", "showUpdateButton"], outputs: ["bindChange", "datasource-loaded", "init", "isLoaded", "selectedLabelChange", "onClick", "onSearchButtonClick", "selectionChange"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "component", type: TsiViewGridComponent, selector: "tsi-view-grid", inputs: ["columns", "gridConfiguration", "viewComponent", "crudService", "header", "modalSize", "showConsultButton", "showSearchField", "searchFields", "formEndpoint", "formName", "id", "showImportExportButton", "targetBusinessClass", "getDataFromApi", "gridData", "isSearchButtonDisabled", "selectKeyOnly", "selectionMode", "selectedItems", "key", "showGlobalSearch", "showExportButton", "showCalenderView", "showHeaderFilters", "showFilterButton", "selectAll", "checkedByField", "sortMode", "sizingMode", "searchOnInit"], outputs: ["summariesChange", "selectedItemsChange", "buttonColumnClicked", "searchFieldsValueChanged", "getAllPagedResultChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "directive", type: BusyDirective, selector: "[busy]", inputs: ["busy"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageReportingComponent, decorators: [{
             type: Component,
@@ -23302,7 +23530,7 @@ class TsiProgressBarComponent {
             clearTimeout(this.hideTimeoutId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiProgressBarComponent, deps: [{ token: ProgressBarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiProgressBarComponent, selector: "tsi-progress-bar", inputs: { showBar: "showBar", processName: "processName", showValue: "showValue", color: "color", showCurrentStep: "showCurrentStep", unit: "unit" }, outputs: { completed: "completed", showBarChange: "showBarChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card\" *ngIf=\"showBar\">\r\n  \r\n  <p-toast />\r\n  <p-progressBar [value]=\"progressPercent\" \r\n        [showValue]=\"showValue\" \r\n        [color]=\"color\" \r\n        [style]=\"{ height: '8px' }\" >\r\n\r\n    <ng-template pTemplate=\"progressPercent\" let-progressPercent>\r\n      <span>{{ progressLevel }} / {{ maxLevel }} {{unit}} ({{ progressPercent }}%)</span>\r\n    </ng-template>\r\n  \r\n  </p-progressBar>\r\n\r\n  <div *ngIf=\"warningMessage; else progressBarBlock\" class=\"text-center text-danger p-2\">\r\n    <strong>\u26A0\uFE0F {{ warningMessage }}</strong>\r\n  </div>\r\n\r\n  <ng-template #progressBarBlock>\r\n    <div class=\"mt-2 text-center\">\r\n      <strong *ngIf=\"unit; else percentOnly\">\r\n        {{ progressLevel }} / {{ maxLevel }} {{ unit }} ({{ progressPercent }}%)\r\n      </strong>\r\n      <ng-template #percentOnly>\r\n        <strong>{{ progressPercent }}%</strong>\r\n      </ng-template>\r\n\r\n      <span *ngIf=\"currentStep && showCurrentStep\"> - {{ currentStep }}</span>\r\n    \r\n    </div>\r\n\r\n    <div class=\"mt-1 text-center\" *ngIf=\"title\">\r\n      <small>{{ title }}</small>\r\n    </div>\r\n   </ng-template>\r\n\r\n</div>", styles: ["::ng-deep .custom-progress-bar .p-progressbar{height:30px!important}::ng-deep .custom-progress-bar .p-progressbar-value{font-size:14px;line-height:30px}::ng-deep .custom-progress-bar .p-progressbar-value{background-color:#007ad9}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i5$3.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiProgressBarComponent, selector: "tsi-progress-bar", inputs: { showBar: "showBar", processName: "processName", showValue: "showValue", color: "color", showCurrentStep: "showCurrentStep", unit: "unit" }, outputs: { completed: "completed", showBarChange: "showBarChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card\" *ngIf=\"showBar\">\r\n  \r\n  <p-toast />\r\n  <p-progressBar [value]=\"progressPercent\" \r\n        [showValue]=\"showValue\" \r\n        [color]=\"color\" \r\n        [style]=\"{ height: '8px' }\" >\r\n\r\n    <ng-template pTemplate=\"progressPercent\" let-progressPercent>\r\n      <span>{{ progressLevel }} / {{ maxLevel }} {{unit}} ({{ progressPercent }}%)</span>\r\n    </ng-template>\r\n  \r\n  </p-progressBar>\r\n\r\n  <div *ngIf=\"warningMessage; else progressBarBlock\" class=\"text-center text-danger p-2\">\r\n    <strong>\u26A0\uFE0F {{ warningMessage }}</strong>\r\n  </div>\r\n\r\n  <ng-template #progressBarBlock>\r\n    <div class=\"mt-2 text-center\">\r\n      <strong *ngIf=\"unit; else percentOnly\">\r\n        {{ progressLevel }} / {{ maxLevel }} {{ unit }} ({{ progressPercent }}%)\r\n      </strong>\r\n      <ng-template #percentOnly>\r\n        <strong>{{ progressPercent }}%</strong>\r\n      </ng-template>\r\n\r\n      <span *ngIf=\"currentStep && showCurrentStep\"> - {{ currentStep }}</span>\r\n    \r\n    </div>\r\n\r\n    <div class=\"mt-1 text-center\" *ngIf=\"title\">\r\n      <small>{{ title }}</small>\r\n    </div>\r\n   </ng-template>\r\n\r\n</div>", styles: ["::ng-deep .custom-progress-bar .p-progressbar{height:30px!important}::ng-deep .custom-progress-bar .p-progressbar-value{font-size:14px;line-height:30px}::ng-deep .custom-progress-bar .p-progressbar-value{background-color:#007ad9}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i5$2.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiProgressBarComponent, decorators: [{
             type: Component,
@@ -25185,5 +25413,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionErpService, ActionPlacement, AdDirective, AdItem, AddReportPopupComponent, AdminRoutes, AdministrationEndpoints, AdministrationSegments, AdvancedSearchComponentService, AlertImportMessageComponent, ApiDateTimeFormat, ApiExplorerService, AppBaseComponent, AppRoutes, AppSettingsService, AuthenticationGuard, AuthorizationEndpoints, AuthorizationSegments, AuthorizationService, AuthorizationTokenMapper, AutoComplete, AutoSelectDirective, BsModalRef, BusyDirective, ButtonType, ChooseChoiceMfaMethodComponent, ClaimTypes, CodeFormat, CollectionChangeAction, ComboStatusModel, Component_Modes, ContextMenuComponent, CreateOrEditDynamicFormComponent, CreateOrEditEntityInformationsComponent, CreateOrEditModeleImportComponent, CrudBaseService, CurrentUser, CurrentUserService, CutLabelPipe, DateFormat, DateFormatDisplay, DateHelper, DateHelperService, DatePickerDateFormat, DatePickerDateTimeFormat, DatePickerTimeFormat, DateTimeFormat, DateTimeFormatDisplay, DecimalFormat, DefaultSocieteDevise, Devise, DeviseDetail, DialogDataService, DisplayNestedPropComponent, DisplayTypeColors, DisplayTypes, DynamicFormListComponent, EditableGridComponent, EndpointInfos, EntityColumnDetailResponse, EntityConfigurationService, EntityInfo, EntityInfoWithRelations, EntityRelation, EntityStatusService, EntityValidationsService, ErrorResponseManagerService, ExecuteImportRequest, ExportExcelHelper, Fichier, FilterByExistingValues, FilterByProprety, FilterHelper, FilterOperatorType, FilterOperatorTypeDescriptions, FormValidationError, FormulaService, GenericFormHelper, GenericValidationStateService, GetWorkflowInstanceInformationRequest, GridSelectionMode, GridSizingMode, GridSortMode, Guid, Helpers, HtmlTemplateGeneratorService, HtmlTemplates, HttpMethodType, IdentityManagerService, IdentityPlatformAuthenticationService, IdentityPlatformEndpoints, IdentityPlatformSegments, IdentityRoutes, ImportExportEndPoints, ImportExportSegments, ImportResult, InputRegistryService, InputTypes, JournalisationApplication, JournalisationApplicationService, KeyboardShortcutService, LanguageInformations, LanguageLocale, LanguagesCodes, LayoutHelperService, LayoutOrientation, LocaleCode, LocalePocComponent, LocalizationKeys, LocalizePipe, LogoutPopupComponent, MFAEnum, MailingService, ManageImportExportComponent, ManageReportingComponent, ManageReportingRoutes, MappingHelper, ModalComponent, ModalLabelPipe, ModalLoaderComponent, ModalSizeEnum, ModeleImportCreateRequest, ModeleImportDetail, ModeleImportService, Modes, ModuleCodeService, ModuleMainParameterDirective, ModuleMainParameterService, NoteService, NotificationChannel, NotificationEndpoints, NotificationSegments, NotificationType, NumericDisplayTypes, ObjectHelper, ObservableCollection, PagedResultRequestBase, PermissionGuard, PresentationDesignerDirective, PresentationDesignerDirectiveBase, PresentationDesignerService, PresentationDesignerTabPanelDirective, PresentationSetting, PresentationSettingDetail, PresentationSettingService, ProceedLoginRequest, ProgressBarHelperService, ProgressBarResponse, ProgressBarService, ProgressBarUpdateRequest, RecordInfoPopupService, ReportingComponent, ReportingEndpoints, ReportingSegments, ReportingService, RequestTrackerInterceptor, RequestTrackerService, Segment, Segments, SeparateurDecimal, SeparateurMillier, SharedComponentReferenceHelper, SharedModule, SharedUiTsiProviders, ShortenPipe, SpinnerComponent, Status, StatusHistory, StatusHistoryService, StatusTransitionInfoResponse, StatusTransitionsInfoResponse, StorageManager, SubscriptionResult, TS_ValidDateFormat, TS_ValidDateTimeFormat, TS_ValidTimeFormat, TextBoxType, Themes, TimeFormat, TimeOnly, TimeZoneLocale, ToNumberPipe, TooltipPosition, TranslationService, TsiActionErpCreateOrEditComponent, TsiActionErpListComponent, TsiBaseComponent, TsiBsModalService, TsiBubbleInfoComponent, TsiButtonComponent, TsiCalenderComponent, TsiCard, TsiCardComponent, TsiCardListComponent, TsiChangePasswordComponent, TsiCheckboxComponent, TsiCheckboxDisplayComponent, TsiCodeGeneratorComponent, TsiComponentEnum, TsiComponentFinderService, TsiConfirmationService, TsiCurrencyOtherDisplayComponent, TsiCurrencyOtherInputComponent, TsiCurrencyPipe, TsiCurrencySocieteDisplayComponent, TsiCurrencySocieteInputComponent, TsiDateDisplayComponent, TsiDatePickerComponent, TsiDecimalDisplayComponent, TsiDecimalInputComponent, TsiDecimalPipe, TsiDisplayGridComponent, TsiDividerComponent, TsiErrorMessageComponent, TsiFileManagerComponent, TsiFilePreviewComponent, TsiFormComponent, TsiFormComponentBaseComponent, TsiFormModalFooterComponent, TsiFormulaBoxComponent, TsiGenericCrudComponent, TsiGenericFormComponent, TsiGenericGridComponent, TsiImageDisplayComponent, TsiInfoMessageComponent, TsiInputBase, TsiIntegerComponent, TsiIntegerDisplayComponent, TsiKanbanComponent, TsiKanbanWorkflowEtatComponent, TsiLabelComponent, TsiLabelLegendComponent, TsiLegendComponent, TsiListBaseComponent, TsiLogEventHistoryComponent, TsiMessageService, TsiModalComponent, TsiModalFooterComponent, TsiModalHeaderComponent, TsiModalService, TsiNotesAvertirComponent, TsiNotesComponent, TsiNotesGridComponent, TsiNotificationCenterService, TsiNotificationHubService, TsiNotificationPanelComponent, TsiNotificationService, TsiParagraphComponent, TsiPopupTextViewerComponent, TsiProgressBarComponent, TsiRadioButtonComponent, TsiRateDisplayComponent, TsiRateInputComponent, TsiRedirectionMessageComponent, TsiReportType, TsiSearchBoxComponent, TsiSearchComboComponent, TsiSendMailComponent, TsiSubmitButtonComponent, TsiSuccessMessageComponent, TsiTabPanelComponent, TsiTabViewComponent, TsiTemplate, TsiTenantsComponent, TsiTextAreaComponent, TsiTextBoxComponent, TsiTimeDisplayComponent, TsiTimePickerComponent, TsiTooltipComponent, TsiUploadFicheComponent, TsiUploadGridComponent, TsiViewGridComponent, TypeFichier, TypeImportEnum, TypeRegistryHelper, UpdateEntityInfoWithRelationsRequest, UploadAllowedExtensionsLabelKey, UploadErrorCodeTranslationKeys, UploadErrorUnknownKey, UserIdentityService, ValidationDirective, VerificationCodeComponent, VerificationCodeInscriptionComponent, VerificationCodeSmsComponent, WorkflowConfigurationService, WorkflowEtatForm, WorkflowEtatKanbanRequest, WorkflowEtatSuivantResponse, WorkflowResponse, appProviders, authorization, dashboardConst, defaultCardHeader, distinct, executeImportResult, initSharedComponents, isNullOrEmpty, isPinnableCssSize, lengthValidator, locals, logoutReasonEnum, lowerFirst, menuItems, menuPreferences, preciseAdd, preciseSum, primengDateLocalAr, primengLocaleAr, queryParamNamesConst, rangeValidator, registerLibraryLocales, requestHeaderNames, resolveCssSize, rtlModeKeys, splitArrayIntoChunks, toDotNetCamelCase, tokenQueryParamName, updateEntityWorkflowInformation, updateEntityWorkflowInstanceResponse, userLanguage, workflowEtatDetailledResponse, workflowInstanceInformationResponse };
+export { ActionErpService, ActionPlacement, AdDirective, AdItem, AddReportPopupComponent, AdminRoutes, AdministrationEndpoints, AdministrationSegments, AdvancedSearchComponentService, AlertImportMessageComponent, ApiDateTimeFormat, ApiExplorerService, AppBaseComponent, AppRoutes, AppSettingsService, AuthenticationGuard, AuthorizationEndpoints, AuthorizationSegments, AuthorizationService, AuthorizationTokenMapper, AutoComplete, AutoSelectDirective, BsModalRef, BusyDirective, ButtonType, ChooseChoiceMfaMethodComponent, ClaimTypes, CodeFormat, CollectionChangeAction, ComboStatusModel, Component_Modes, ContextMenuComponent, CreateOrEditDynamicFormComponent, CreateOrEditEntityInformationsComponent, CreateOrEditModeleImportComponent, CrudBaseService, CurrentUser, CurrentUserService, CutLabelPipe, DateFormat, DateFormatDisplay, DateHelper, DateHelperService, DatePickerDateFormat, DatePickerDateTimeFormat, DatePickerTimeFormat, DateTimeFormat, DateTimeFormatDisplay, DecimalFormat, DefaultSocieteDevise, Devise, DeviseDetail, DialogDataService, DisplayNestedPropComponent, DisplayTypeColors, DisplayTypes, DynamicFormListComponent, EditableGridComponent, EndpointInfos, EntityColumnDetailResponse, EntityConfigurationService, EntityInfo, EntityInfoWithRelations, EntityRelation, EntityStatusService, EntityValidationsService, ErrorResponseManagerService, ExecuteImportRequest, ExportExcelHelper, Fichier, FilterByExistingValues, FilterByProprety, FilterHelper, FilterOperatorType, FilterOperatorTypeDescriptions, FormValidationError, FormulaService, GenericFormHelper, GenericValidationStateService, GetWorkflowInstanceInformationRequest, GridSelectionMode, GridSizingMode, GridSortMode, Guid, Helpers, HtmlTemplateGeneratorService, HtmlTemplates, HttpMethodType, IdentityManagerService, IdentityPlatformAuthenticationService, IdentityPlatformEndpoints, IdentityPlatformSegments, IdentityRoutes, ImportExportEndPoints, ImportExportSegments, ImportResult, InputRegistryService, InputTypes, JournalisationApplication, JournalisationApplicationService, KeyboardShortcutService, LanguageInformations, LanguageLocale, LanguagesCodes, LayoutHelperService, LayoutOrientation, LocaleCode, LocalePocComponent, LocalizationKeys, LocalizePipe, LogoutPopupComponent, MFAEnum, MailingService, ManageImportExportComponent, ManageReportingComponent, ManageReportingRoutes, MappingHelper, ModalComponent, ModalLabelPipe, ModalLoaderComponent, ModalSizeEnum, ModeleImportCreateRequest, ModeleImportDetail, ModeleImportService, Modes, ModuleCodeService, ModuleMainParameterDirective, ModuleMainParameterService, NoteService, NotificationChannel, NotificationEndpoints, NotificationSegments, NotificationType, NumericDisplayTypes, ObjectHelper, ObservableCollection, PagedResultRequestBase, PermissionGuard, PresentationDesignerDirective, PresentationDesignerDirectiveBase, PresentationDesignerService, PresentationDesignerTabPanelDirective, PresentationSetting, PresentationSettingDetail, PresentationSettingService, ProceedLoginRequest, ProgressBarHelperService, ProgressBarResponse, ProgressBarService, ProgressBarUpdateRequest, RecordInfoPopupService, ReportingComponent, ReportingEndpoints, ReportingSegments, ReportingService, RequestTrackerInterceptor, RequestTrackerService, Segment, Segments, SeparateurDecimal, SeparateurMillier, SharedComponentReferenceHelper, SharedModule, SharedUiTsiProviders, ShortenPipe, SpinnerComponent, Status, StatusHistory, StatusHistoryService, StatusTransitionInfoResponse, StatusTransitionsInfoResponse, StorageManager, SubscriptionResult, TS_ValidDateFormat, TS_ValidDateTimeFormat, TS_ValidTimeFormat, TextBoxType, Themes, TimeFormat, TimeOnly, TimeZoneLocale, ToNumberPipe, TooltipPosition, TranslationService, TsiActionErpCreateOrEditComponent, TsiActionErpListComponent, TsiBaseComponent, TsiBsModalService, TsiBubbleInfoComponent, TsiButtonComponent, TsiCalenderComponent, TsiCard, TsiCardComponent, TsiCardListComponent, TsiChangePasswordComponent, TsiCheckboxComponent, TsiCheckboxDisplayComponent, TsiCodeGeneratorComponent, TsiComponentEnum, TsiComponentFinderService, TsiConfirmationService, TsiCurrencyOtherDisplayComponent, TsiCurrencyOtherInputComponent, TsiCurrencyPipe, TsiCurrencySocieteDisplayComponent, TsiCurrencySocieteInputComponent, TsiDateDisplayComponent, TsiDatePickerComponent, TsiDecimalDisplayComponent, TsiDecimalInputComponent, TsiDecimalPipe, TsiDisplayGridComponent, TsiDividerComponent, TsiErrorMessageComponent, TsiFileManagerComponent, TsiFilePreviewComponent, TsiFormComponent, TsiFormComponentBaseComponent, TsiFormModalFooterComponent, TsiFormulaBoxComponent, TsiGenericCrudComponent, TsiGenericFormComponent, TsiGenericGridComponent, TsiImageDisplayComponent, TsiInfoMessageComponent, TsiInputBase, TsiIntegerComponent, TsiIntegerDisplayComponent, TsiKanbanComponent, TsiKanbanWorkflowEtatComponent, TsiLabelComponent, TsiLabelLegendComponent, TsiLegendComponent, TsiListBaseComponent, TsiLogEventHistoryComponent, TsiMessageService, TsiModalComponent, TsiModalFooterComponent, TsiModalHeaderComponent, TsiModalService, TsiNotesAvertirComponent, TsiNotesComponent, TsiNotesGridComponent, TsiNotificationCenterService, TsiNotificationHubService, TsiNotificationPanelComponent, TsiNotificationService, TsiParagraphComponent, TsiPopupTextViewerComponent, TsiProgressBarComponent, TsiRadioButtonComponent, TsiRateDisplayComponent, TsiRateInputComponent, TsiRedirectionMessageComponent, TsiReportType, TsiSearchBoxComponent, TsiSearchComboComponent, TsiSendMailComponent, TsiSubmitButtonComponent, TsiSuccessMessageComponent, TsiTabPanelComponent, TsiTabViewComponent, TsiTemplate, TsiTenantsComponent, TsiTextAreaComponent, TsiTextBoxComponent, TsiTimeDisplayComponent, TsiTimePickerComponent, TsiTooltipComponent, TsiUploadFicheComponent, TsiUploadGridComponent, TsiViewGridComponent, TypeFichier, TypeImportEnum, TypeRegistryHelper, UpdateEntityInfoWithRelationsRequest, UploadAllowedExtensionsLabelKey, UploadErrorCodeTranslationKeys, UploadErrorUnknownKey, UserIdentityService, ValidationDirective, VerificationCodeComponent, VerificationCodeInscriptionComponent, VerificationCodeSmsComponent, WorkflowConfigurationService, WorkflowEtatForm, WorkflowEtatKanbanMultipleRequest, WorkflowEtatKanbanRequest, WorkflowEtatSuivantResponse, WorkflowResponse, appProviders, authorization, dashboardConst, defaultCardHeader, distinct, executeImportResult, initSharedComponents, isNullOrEmpty, isPinnableCssSize, lengthValidator, locals, logoutReasonEnum, lowerFirst, menuItems, menuPreferences, preciseAdd, preciseSum, primengDateLocalAr, primengLocaleAr, queryParamNamesConst, rangeValidator, registerLibraryLocales, requestHeaderNames, resolveCssSize, rtlModeKeys, splitArrayIntoChunks, toDotNetCamelCase, tokenQueryParamName, updateEntityWorkflowInformation, updateEntityWorkflowInstanceResponse, userLanguage, workflowEtatDetailledResponse, workflowInstanceInformationResponse };
 //# sourceMappingURL=tsi-developpement-tsi-shared-ui.mjs.map