@tsi-developpement/tsi-shared-ui 1.9.11 → 1.9.13

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

@@ -3918,12 +3918,6 @@ class ErrorResponseManagerService {
             this._messageService.error(response.error.error);
             return;
         }
-        if (response.error && typeof (response.error) == 'object') {
-            if (response.error.errors.hasOwnProperty("547")) {
-                this._messageService.error("Impossible de supprimer un élément avec des données associées.");
-                return;
-            }
-        }
         let errorList = response.error?.errors;
         let errorMessage = "";
         let errorMessages = [];
@@ -9438,13 +9432,28 @@ class TsiKanbanComponent extends AppBaseComponent {
         this.handlePageChange(value);
     }
     get page() { return this._page; }
-    constructor(cdr, _entityConfig, _localize, _entityStatusService, _notificationService) {
+    constructor(cdr, _entityConfig, _localize, _entityStatusService, _notificationService, _statusColorService) {
         super();
         this.cdr = cdr;
         this._entityConfig = _entityConfig;
         this._localize = _localize;
         this._entityStatusService = _entityStatusService;
         this._notificationService = _notificationService;
+        this._statusColorService = _statusColorService;
+        this._statusLessRecords = {
+            key: 'new',
+            localized: 'new'
+        };
+        this._statusLabels = [];
+        this._defaultPage = {
+            items: [],
+            pageSize: 10,
+            pageNumber: 1,
+            totalCount: 0,
+            totalPages: 0,
+            summaries: [],
+            loading: false,
+        };
         this.buttonClicked = new EventEmitter();
         this.callSearch = new EventEmitter();
         this.overflowActionsMenu = [];
@@ -9452,8 +9461,18 @@ class TsiKanbanComponent extends AppBaseComponent {
         this.overflowActionColumns = [];
         this.selectKeyOnly = true;
         this.key = 'uid';
+        // Columns whose per-column summary should be displayed in the Kanban header, formatted
+        // by their display type (like the table footer). Empty by default → no summaries shown.
+        this.summaryColumns = [];
+        this.displayTypes = DisplayTypes;
+        this._page = this._defaultPage;
         this.cards = [];
         this.cardMapByStatus = new Map();
+        // Populated only when the page is grouped server-side (one group per status):
+        // true per-column totals and per-column summaries, independent of the current page.
+        this.countByStatus = new Map();
+        this.summaryByStatus = new Map();
+        this._isGrouped = false;
         this.draggedCard = null;
         this.first = 0;
         this.rows = 10;
@@ -9461,15 +9480,14 @@ class TsiKanbanComponent extends AppBaseComponent {
         this.isLoading = false;
         this.originalStatus = '';
         this.localizedStatusLabels = [];
-        this.localizedStatusLabels = [
-            {
-                key: 'new',
-                localized: this._localize.transform('gesc_param_article_statut_enums_new').trim()
-            }
-        ];
     }
     async ngOnInit() {
         await this.getBusinessClassStatus(this.cardBusinessClass);
+        // Colors are page-independent, so resolve them once up front. entityInfo carries the
+        // status enum name (the 2nd lookup key); getEntityInfoFromCache is cached, so the later
+        // mapItemsToCards calls reuse it.
+        await this.getEntityInfo();
+        this.loadStatusColors();
         this.page$.subscribe(async (page) => {
             if (page) {
                 this.isLoading = !!page.loading;
@@ -9514,6 +9532,12 @@ class TsiKanbanComponent extends AppBaseComponent {
                             this.draggedCard = null;
                             this.updateCardMap();
                             this.isLoading = false;
+                            // Grouped headers (true totals + summaries) come from the server, so a
+                            // client-side re-bucket can't refresh them. Re-fetch the current grouped
+                            // page for authoritative figures (also reflects any concurrent changes).
+                            if (this._isGrouped) {
+                                this.callSearch.emit({ skipCount: this.first, maxResultCount: this.rows });
+                            }
                         },
                         error: (error) => {
                             let from = this._localize.transform("gesc_param_error_switch_status_from");
@@ -9543,9 +9567,35 @@ class TsiKanbanComponent extends AppBaseComponent {
         this.rows = event.rows ?? 10;
         this.callSearch.emit({ skipCount: this.first, maxResultCount: this.rows });
     }
-    getStatusClass(card) {
-        const index = this.localizedStatusLabels.findIndex(l => l.key === card.status);
-        return `status-${index >= 0 ? index : 'default'}`;
+    // Fetch the defined colors for this entity's statuses once. Skips when the business class
+    // or its status enum is unknown; on error columns simply keep their default background.
+    loadStatusColors() {
+        const className = this.cardBusinessClass;
+        const statusEnumName = this.entityInfo?.statusEnumName;
+        if (!className || !statusEnumName)
+            return;
+        this._statusColorService.getStatusColorDetails(className, statusEnumName).subscribe({
+            next: (response) => {
+                this.statusMetadata = response;
+                this.cdr.markForCheck();
+            },
+            error: err => {
+                console.error('Error loading status colors', err);
+            }
+        });
+    }
+    // Resolve the defined hex for a status value (column/card key). Undefined when no color is
+    // defined (or the status has no matching option, e.g. the synthetic 'new' bucket).
+    getStatusColorHex(statusKey) {
+        if (!statusKey)
+            return undefined;
+        return this.statusMetadata?.options.find(o => o.statusValue === statusKey)?.colorHex || undefined;
+    }
+    // The single colored element: a left accent bar on the column header, in the real status color.
+    // Transparent (invisible, width reserved) when no color is defined. Nothing else is tinted —
+    // not the header background, not the header text, not the cards.
+    getColumnAccentColor(statusKey) {
+        return this.getStatusColorHex(statusKey) ?? 'transparent';
     }
     getLocalizedStatus(key) {
         if (!key)
@@ -9553,13 +9603,81 @@ class TsiKanbanComponent extends AppBaseComponent {
         const match = this.localizedStatusLabels.find(s => s.key === key);
         return match?.localized ?? key;
     }
+    // True per-column total: the group's unpaged count when grouped server-side,
+    // otherwise the number of cards on the current page (legacy client-side grouping).
+    getColumnCount(statusKey) {
+        if (this._isGrouped) {
+            return this.countByStatus.get(statusKey) ?? 0;
+        }
+        return this.cardMapByStatus.get(statusKey)?.length ?? 0;
+    }
+    // Whether per-column summaries should render (grouped data + at least one opted-in column).
+    get hasColumnSummaries() {
+        return this._isGrouped && (this.summaryColumns?.length ?? 0) > 0;
+    }
+    // The SUM for a summarized column within a status group (undefined when not grouped or absent).
+    getColumnSummaryValue(statusKey, field) {
+        if (!this._isGrouped) {
+            return undefined;
+        }
+        const match = this.summaryByStatus.get(statusKey)
+            ?.find(s => s.proprety?.toLowerCase() === field?.toLowerCase());
+        return match?.summary;
+    }
     async handlePageChange(page) {
+        if (page?.groups) {
+            await this.handleGroupedPage(page);
+            return;
+        }
         if (!page?.items)
             return;
+        this._isGrouped = false;
         this.cards = await this.mapItemsToCards(page.items);
         this.totalCount = page.totalCount;
         this.updateCardMap();
     }
+    // Server-side grouped page: one group per status, each carrying its own accurate
+    // (unpaged) total count and summaries. Cards on the current page are mapped and
+    // bucketed exactly as in the flat path (via updateCardMap); the true per-column
+    // counts/summaries come from the groups, and the single board paginator spans the
+    // largest column (same skip/take window applied to every group by the backend).
+    async handleGroupedPage(page) {
+        const groups = page.groups ?? [];
+        const validKeys = this._statusLabels.map(s => s.key);
+        const counts = new Map();
+        const summaries = new Map();
+        let maxGroupTotal = 0;
+        for (const group of groups) {
+            const rawKey = group.key?.trim();
+            const bucketKey = rawKey && validKeys.includes(rawKey)
+                ? rawKey
+                : this._statusLessRecords.key;
+            counts.set(bucketKey, (counts.get(bucketKey) ?? 0) + group.totalCount);
+            if (!summaries.has(bucketKey)) {
+                summaries.set(bucketKey, group.summaries ?? []);
+            }
+            maxGroupTotal = Math.max(maxGroupTotal, group.totalCount);
+        }
+        // Data shrank under a later page (drag-drop, a filter, or another user's change):
+        // the current offset is now past the end of every column, so the backend returned an
+        // empty window and the board would look empty until the user manually pages back.
+        // Clamp to the last valid page and re-fetch once. Guarded by first > 0 so a legitimately
+        // empty result on the first page can't loop; the clamp target is always < maxGroupTotal,
+        // so the re-fetch lands on a populated page and this branch won't re-trigger.
+        if (this.first > 0 && this.first >= maxGroupTotal) {
+            this.first = maxGroupTotal > 0
+                ? Math.floor((maxGroupTotal - 1) / this.rows) * this.rows
+                : 0;
+            this.callSearch.emit({ skipCount: this.first, maxResultCount: this.rows });
+            return;
+        }
+        this._isGrouped = true;
+        this.countByStatus = counts;
+        this.summaryByStatus = summaries;
+        this.totalCount = maxGroupTotal;
+        this.cards = await this.mapItemsToCards(groups.flatMap(g => g.items ?? []));
+        this.updateCardMap();
+    }
     async getEntityInfo() {
         this.entityInfo = await this._entityConfig.getEntityInfoFromCache(this.cardBusinessClass);
     }
@@ -9575,7 +9693,7 @@ class TsiKanbanComponent extends AppBaseComponent {
     async mapItemsToCards(items) {
         await this.getEntityInfo();
         const { col1, col2, col3, photo, status } = this.getColKeys();
-        const validKeys = this.localizedStatusLabels.map(s => s.key);
+        const validKeys = this._statusLabels.map(s => s.key);
         this.originalStatus = status;
         return items.map((item, index) => {
             const keys = Object.keys(item).reduce((acc, key) => {
@@ -9598,6 +9716,15 @@ class TsiKanbanComponent extends AppBaseComponent {
         });
     }
     updateCardMap() {
+        // Show the status-less column only when at least one card is in the 'new' bucket
+        // (a record with an empty or unrecognized status). Recomputed here so the column
+        // set stays consistent after both page changes and drag-and-drop moves.
+        const hasStatusLess = this._isGrouped
+            ? (this.countByStatus.get(this._statusLessRecords.key) ?? 0) > 0
+            : this.cards.some(c => c.status === this._statusLessRecords.key);
+        this.localizedStatusLabels = hasStatusLess
+            ? [this._statusLessRecords, ...this._statusLabels]
+            : [...this._statusLabels];
         const map = new Map();
         for (const label of this.localizedStatusLabels) {
             map.set(label.key, []);
@@ -9620,13 +9747,11 @@ class TsiKanbanComponent extends AppBaseComponent {
     async getBusinessClassStatus(className) {
         const response = await firstValueFrom(this._entityStatusService.getEntityStatus(className));
         const statuses = response?.entityStatus ?? [];
-        this.localizedStatusLabels = [
-            { key: 'new', localized: this._localize.transform('gesc_param_article_statut_enums_new').trim() },
-            ...statuses.map((s) => ({
-                key: s.key,
-                localized: this._localize.transform(s.value).trim()
-            }))
-        ];
+        this._statusLessRecords.localized = this._localize.transform('gesc_param_article_statut_enums_new').trim();
+        this._statusLabels = statuses.map((s) => ({
+            key: s.key,
+            localized: this._localize.transform(s.value).trim()
+        }));
     }
     getOverflowMenuModel() {
         if (!this.hasOverflowActions) {
@@ -9666,13 +9791,13 @@ class TsiKanbanComponent extends AppBaseComponent {
     openModalComponent(uid, mode) {
         this.buttonClicked.emit({ field: mode, key: uid, selectKeyOnly: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiKanbanComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: EntityConfigurationService }, { token: LocalizePipe }, { token: EntityStatusService }, { token: TsiNotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiKanbanComponent, selector: "Tsi-kanban", inputs: { cardBusinessClass: "cardBusinessClass", header: "header", id: "id", page$: "page$", crudService: "crudService", 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 [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 class=\"kanban-board flex gap-4 overflow-auto\">\r\n  <div *ngFor=\"let status of localizedStatusLabels; trackBy: trackByStatus\"\r\n    class=\"kanban-column flex flex-column border-round surface-0 shadow-2\" (dragover)=\"allowDrop($event)\"\r\n    (drop)=\"drop($event, status.key)\">\r\n\r\n    <div class=\"column-header p-3 border-bottom-1 surface-border font-semibold\">\r\n      {{ status.localized }}\r\n      <span class=\"text-sm font-normal text-gray-500\">\r\n        ({{ cardMapByStatus.get(status.key)?.length || 0 }})\r\n      </span>\r\n    </div>\r\n\r\n    <div class=\"column-cards flex-1 overflow-auto p-3\">\r\n      <div *ngFor=\"let card of cardMapByStatus.get(status.key); trackBy: trackByCard\"\r\n        class=\"kanban-card p-3 border-round bg-white mb-3 shadow-1\"\r\n        [ngClass]=\"getStatusClass(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.subHeaderTitle }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">{{ card.description }}</div>\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\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}.status-0{border-left-color:#7269ef}.status-1{border-left-color:#00c853}.status-2{border-left-color:#ffab00}.status-3{border-left-color:#d50000}[class*=status-]{border-left-style:solid;border-left-width:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i6$3.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiKanbanComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: EntityConfigurationService }, { token: LocalizePipe }, { token: EntityStatusService }, { token: TsiNotificationService }, { token: StatusColorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiKanbanComponent, selector: "Tsi-kanban", inputs: { cardBusinessClass: "cardBusinessClass", header: "header", id: "id", page$: "page$", crudService: "crudService", overflowActionsMenu: "overflowActionsMenu", selectKeyOnly: "selectKeyOnly", key: "key", summaryColumns: "summaryColumns", page: "page" }, outputs: { buttonClicked: "buttonClicked", callSearch: "callSearch" }, 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 class=\"kanban-board flex gap-4 overflow-auto\">\r\n  <div *ngFor=\"let status of localizedStatusLabels; trackBy: trackByStatus\"\r\n    class=\"kanban-column flex flex-column border-round surface-0 shadow-2\" (dragover)=\"allowDrop($event)\"\r\n    (drop)=\"drop($event, status.key)\">\r\n\r\n    <div class=\"column-header p-3 font-semibold\"\r\n      [style.border-left-color]=\"getColumnAccentColor(status.key)\">\r\n      {{ status.localized }}\r\n      <span class=\"text-sm font-normal text-gray-500\">\r\n        ({{ getColumnCount(status.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(status.key, sumCol.field)\">\r\n            </Tsi-Currency-Societe-Display>\r\n            <Tsi-Integer-Display *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\"\r\n              [inputData]=\"getColumnSummaryValue(status.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(status.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(status.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(status.key, sumCol.field)\">\r\n            </Tsi-Currency-Other-Display>\r\n            <span *ngSwitchDefault>{{ getColumnSummaryValue(status.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 cardMapByStatus.get(status.key); trackBy: trackByCard\"\r\n        class=\"kanban-card p-3 border-round bg-white mb-3 shadow-1\"\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.subHeaderTitle }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">{{ card.description }}</div>\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\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  </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;border-bottom:1px solid var(--surface-border);border-left:.75rem solid transparent;transition:border-color .3s ease}.column-cards{overflow-y:auto;flex:1}.kanban-card{cursor:move}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.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: i6$3.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["inputData", "currency"] }, { 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: TsiKanbanComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Tsi-kanban', 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 class=\"kanban-board flex gap-4 overflow-auto\">\r\n  <div *ngFor=\"let status of localizedStatusLabels; trackBy: trackByStatus\"\r\n    class=\"kanban-column flex flex-column border-round surface-0 shadow-2\" (dragover)=\"allowDrop($event)\"\r\n    (drop)=\"drop($event, status.key)\">\r\n\r\n    <div class=\"column-header p-3 border-bottom-1 surface-border font-semibold\">\r\n      {{ status.localized }}\r\n      <span class=\"text-sm font-normal text-gray-500\">\r\n        ({{ cardMapByStatus.get(status.key)?.length || 0 }})\r\n      </span>\r\n    </div>\r\n\r\n    <div class=\"column-cards flex-1 overflow-auto p-3\">\r\n      <div *ngFor=\"let card of cardMapByStatus.get(status.key); trackBy: trackByCard\"\r\n        class=\"kanban-card p-3 border-round bg-white mb-3 shadow-1\"\r\n        [ngClass]=\"getStatusClass(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.subHeaderTitle }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">{{ card.description }}</div>\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\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}.status-0{border-left-color:#7269ef}.status-1{border-left-color:#00c853}.status-2{border-left-color:#ffab00}.status-3{border-left-color:#d50000}[class*=status-]{border-left-style:solid;border-left-width:4px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: EntityConfigurationService }, { type: LocalizePipe }, { type: EntityStatusService }, { type: TsiNotificationService }], propDecorators: { buttonClicked: [{
+            args: [{ selector: 'Tsi-kanban', 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 class=\"kanban-board flex gap-4 overflow-auto\">\r\n  <div *ngFor=\"let status of localizedStatusLabels; trackBy: trackByStatus\"\r\n    class=\"kanban-column flex flex-column border-round surface-0 shadow-2\" (dragover)=\"allowDrop($event)\"\r\n    (drop)=\"drop($event, status.key)\">\r\n\r\n    <div class=\"column-header p-3 font-semibold\"\r\n      [style.border-left-color]=\"getColumnAccentColor(status.key)\">\r\n      {{ status.localized }}\r\n      <span class=\"text-sm font-normal text-gray-500\">\r\n        ({{ getColumnCount(status.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(status.key, sumCol.field)\">\r\n            </Tsi-Currency-Societe-Display>\r\n            <Tsi-Integer-Display *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\"\r\n              [inputData]=\"getColumnSummaryValue(status.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(status.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(status.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(status.key, sumCol.field)\">\r\n            </Tsi-Currency-Other-Display>\r\n            <span *ngSwitchDefault>{{ getColumnSummaryValue(status.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 cardMapByStatus.get(status.key); trackBy: trackByCard\"\r\n        class=\"kanban-card p-3 border-round bg-white mb-3 shadow-1\"\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.subHeaderTitle }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">{{ card.description }}</div>\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\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  </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;border-bottom:1px solid var(--surface-border);border-left:.75rem solid transparent;transition:border-color .3s ease}.column-cards{overflow-y:auto;flex:1}.kanban-card{cursor:move}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: EntityConfigurationService }, { type: LocalizePipe }, { type: EntityStatusService }, { type: TsiNotificationService }, { type: StatusColorService }], propDecorators: { buttonClicked: [{
                 type: Output
             }], callSearch: [{
                 type: Output
@@ -9692,6 +9817,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], key: [{
                 type: Input
+            }], summaryColumns: [{
+                type: Input
             }], page: [{
                 type: Input
             }] } });
@@ -10588,6 +10715,7 @@ class TsiGenericGridComponent {
         this._tempColumns = [];
         this.tempSearchFields = [];
         this._columns = [];
+        this._kanbanSummaryColumns = [];
         this._isSearchButtonDisabled = false;
         this.filteredColumns = [];
         this.showSearchBox = true;
@@ -11123,6 +11251,7 @@ class TsiGenericGridComponent {
             this.pagedRequest.summaries = this._extractHaveSummaryProperties();
             this.pagedRequest.sorting = this._sort;
             this.pagedRequest.keyword = this.keyword;
+            this.pagedRequest.groupBy = this.groupBy;
             //add search box filters
             this._extractSearchBoxFilters();
             //generate filters html template
@@ -11547,18 +11676,29 @@ class TsiGenericGridComponent {
             keyword: request.keyword,
             filters: request.filters,
             getAllData: request.getAllData,
-            summaries: request.summaries
+            summaries: request.summaries,
+            groupBy: request.groupBy
         };
         return clone;
     }
     _extractHaveSummaryProperties() {
         let properties = [];
-        let haveSummaryColumns = this.columns.filter(c => c.haveSummary === true);
-        if (haveSummaryColumns && haveSummaryColumns.length > 0) {
-            properties = haveSummaryColumns.map(c => c.field);
+        // Compute a SUM for table-footer columns (haveSummary) and Kanban-summary columns
+        // (showKanbanSummary) alike, so the backend returns each group's summary in Kanban view.
+        let summaryColumns = this.columns.filter(c => c.haveSummary === true || c.showKanbanSummary === true);
+        if (summaryColumns && summaryColumns.length > 0) {
+            properties = summaryColumns.map(c => c.field);
         }
         return properties;
     }
+    // Columns whose per-column summary should be displayed in the Kanban (default: none).
+    // Full columns are passed (not just field names) so the Kanban can format each summary
+    // by its display type, exactly like the table footer. Memoized in initialColumnsProcess()
+    // (recomputed only when `columns` is set) so binding it doesn't allocate a new array —
+    // and change the child's @Input reference — on every change-detection cycle.
+    get kanbanSummaryColumns() {
+        return this._kanbanSummaryColumns;
+    }
     _extractSummaries() {
         if (this.page.summaries) {
             this.page.summaries.forEach(s => {
@@ -11816,6 +11956,9 @@ class TsiGenericGridComponent {
                 return;
             }
         });
+        // Resolve the Kanban summary columns once here (columns change only on this setter),
+        // so the [summaryColumns] binding keeps a stable reference across change detection.
+        this._kanbanSummaryColumns = this._columns.filter(c => c.showKanbanSummary === true);
     }
     handleCalendarEventClick(item) {
         if (item.mode === "SEARCH") {
@@ -12095,7 +12238,7 @@ class TsiGenericGridComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiGenericGridComponent, deps: [{ token: StatusColorService }, { token: FichierService }, { token: HtmlTemplateGeneratorService }, { token: i1$1.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", 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]\" \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\" \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\">\r\n          <div class=\"ml-2\">\r\n            {{ header | localize }}\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.currencyCode\" [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.currencyCode\" [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        {{ page.totalCount }} {{ \"records_label\" | localize }}\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  (dateRangeChange)=\"handleDateRangeChange($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    </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    </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}.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.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: i7.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.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: "directive", type: i6$3.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherInputComponent, selector: "Tsi-Currency-Other-Input", inputs: ["numOfDecimal", "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: ["inputData", "currency"] }, { 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", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiCalenderComponent, selector: "tsi-calender", inputs: ["crudService", "schema", "eventsData", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton", "entityInfo"], outputs: ["eventClick", "dateRangeChange"] }, { kind: "component", type: TsiKanbanWorkflowEtatComponent, selector: "Tsi-kanban-workflow-etat", inputs: ["cardBusinessClass", "header", "id", "page$", "descriminatorValue", "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]\" \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\" \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\">\r\n          <div class=\"ml-2\">\r\n            {{ header | localize }}\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.currencyCode\" [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.currencyCode\" [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        {{ page.totalCount }} {{ \"records_label\" | localize }}\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  (dateRangeChange)=\"handleDateRangeChange($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    </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}.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.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: i7.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.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: "directive", type: i6$3.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherInputComponent, selector: "Tsi-Currency-Other-Input", inputs: ["numOfDecimal", "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: ["inputData", "currency"] }, { 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", "entityInfo"], outputs: ["eventClick", "dateRangeChange"] }, { kind: "component", type: TsiKanbanWorkflowEtatComponent, selector: "Tsi-kanban-workflow-etat", inputs: ["cardBusinessClass", "header", "id", "page$", "descriminatorValue", "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: '*',
@@ -12127,7 +12270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             })),
                             transition('in <=> out', 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]\" \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\" \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\">\r\n          <div class=\"ml-2\">\r\n            {{ header | localize }}\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.currencyCode\" [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.currencyCode\" [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        {{ page.totalCount }} {{ \"records_label\" | localize }}\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  (dateRangeChange)=\"handleDateRangeChange($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    </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    </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}.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]\" \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\" \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\">\r\n          <div class=\"ml-2\">\r\n            {{ header | localize }}\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.currencyCode\" [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.currencyCode\" [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        {{ page.totalCount }} {{ \"records_label\" | localize }}\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  (dateRangeChange)=\"handleDateRangeChange($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    </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}.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: FichierService }, { type: HtmlTemplateGeneratorService }, { type: i1$1.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: [{
@@ -12238,6 +12381,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], businessClass: [{
                 type: Input
+            }], groupBy: [{
+                type: Input
             }], entityInfo: [{
                 type: Input
             }], editRow: [{
@@ -13210,6 +13355,7 @@ class TsiViewGridComponent {
                             items: value.items,
                             totalCount: value.totalCount,
                             summaries: value.summaries ? value.summaries : [],
+                            groups: value.groups,
                             totalPages: (this.page.totalCount - (this.page.totalCount % this.page.pageSize)) / this.page.pageSize + 1,
                         };
                     }
@@ -13307,7 +13453,7 @@ class TsiViewGridComponent {
         }
     }
     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$1.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", "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", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    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$1.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", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiViewGridComponent, decorators: [{
             type: Component,
@@ -14407,6 +14553,7 @@ class TsiGenericCrudComponent {
                             items: value.items,
                             totalCount: value.totalCount,
                             summaries: value.summaries ? value.summaries : [],
+                            groups: value.groups,
                             totalPages: (this.page.totalCount - (this.page.totalCount % this.page.pageSize)) / this.page.pageSize + 1,
                         };
                         if (this.showNoteButton) {
@@ -14467,12 +14614,19 @@ class TsiGenericCrudComponent {
         this._handleActionWithAlertCheck(Component_Modes.DUPLICATE, itemKey);
     }
     async getEntityInfo() {
-        if (this.businessClass) {
+        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);
+            return;
+        }
     }
     async _openModal(mode, itemKey, data) {
         this.crudService.isDuplicate = mode === Modes.duplicate;
@@ -14526,6 +14680,7 @@ class TsiGenericCrudComponent {
             filters: request.filters,
             getAllData: request.getAllData,
             summaries: request.summaries,
+            groupBy: request.groupBy,
         };
         return clone;
     }
@@ -14571,6 +14726,7 @@ class TsiGenericCrudComponent {
         this.showCardView = false;
         this.showCalenderView = false;
         this.showKanbanView = false;
+        this._clearGroupBy();
         this._loadDS();
         this.currentIcon = "pi pi-align-justify";
         this.currentTooltip = "shared_tsi_component_grid_list_view";
@@ -14579,6 +14735,7 @@ class TsiGenericCrudComponent {
         this.showCalenderView = !this.showCalenderView;
         this.showCardView = false;
         this.showKanbanView = false;
+        this._clearGroupBy();
         this._loadDS(this.showCalenderView);
         this.currentIcon = "pi pi-calendar";
         this.currentTooltip = "shared_tsi_component_grid_calender_view";
@@ -14587,18 +14744,33 @@ class TsiGenericCrudComponent {
         this.showCardView = !this.showCardView;
         this.showCalenderView = false;
         this.showKanbanView = false;
+        this._clearGroupBy();
         // this._loadDS(this.showCardView);
         this.currentIcon = "pi pi-id-card";
         this.currentTooltip = "shared_tsi_component_grid_card_view";
     }
-    toggleKanbanView() {
+    async toggleKanbanView() {
         this.showKanbanView = !this.showKanbanView;
         this.showCardView = false;
         this.showCalenderView = false;
+        if (this.showKanbanView) {
+            // Group server-side by the entity's status column so each Kanban column
+            // gets its own page and its own accurate (unpaged) total count.
+            await this.getEntityInfo();
+            this.groupBy = this.entityInfo?.statusColumnName;
+        }
+        else {
+            this.groupBy = undefined;
+        }
+        this.pagedRequest = { ...this.pagedRequest, groupBy: this.groupBy };
         this._loadDS();
         this.currentIcon = "pi pi-th-large";
         this.currentTooltip = "shared_tsi_component_grid_kanban_view";
     }
+    _clearGroupBy() {
+        this.groupBy = undefined;
+        this.pagedRequest = { ...this.pagedRequest, groupBy: undefined };
+    }
     //#endregion
     handleKeyDown(event) {
         if (event.key === 'F4') {
@@ -14693,11 +14865,11 @@ 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: FichierUploadService }, { token: RecordInfoPopupService }, { token: WorkflowConfigurationService }, { token: EntityConfigurationService }, { token: NoteService }, { token: i0.EnvironmentInjector }, { token: DiscriminatorService }], 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" }, 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      [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$1.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: i14.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", "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", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode"] }, { 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" }, 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$1.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: i14.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", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode"] }, { 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,
-            args: [{ selector: 'Tsi-Generic-Crud', providers: [TsiNotificationService], 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      [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"] }]
+            args: [{ selector: 'Tsi-Generic-Crud', providers: [TsiNotificationService], 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"] }]
         }], ctorParameters: () => [{ type: TsiNotificationService }, { type: i2$1.MessageService }, { type: TsiModalService }, { type: i0.ChangeDetectorRef }, { type: LocalizePipe }, { type: DialogDataService }, { type: FichierUploadService }, { type: RecordInfoPopupService }, { type: WorkflowConfigurationService }, { type: EntityConfigurationService }, { type: NoteService }, { type: i0.EnvironmentInjector }, { type: DiscriminatorService }], propDecorators: { entityInfo: [{
                 type: Input
             }], genericGridComponent: [{