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

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

@@ -29,9 +29,10 @@ import { CardModule } from 'primeng/card';
 import * as i2$2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1$4 from '@angular/platform-browser';
-import { filter } from 'rxjs/operators';
+import * as signalR from '@microsoft/signalr';
 import * as i1$5 from '@auth0/angular-jwt';
 import { JwtHelperService, JWT_OPTIONS } from '@auth0/angular-jwt';
+import { filter } from 'rxjs/operators';
 import * as i5 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i11$1 from 'primeng/multiselect';
@@ -50,7 +51,7 @@ import * as i4 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
 import * as i2$5 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i6$3 from 'primeng/badge';
+import * as i11$2 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
 import * as i3$2 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
@@ -61,7 +62,7 @@ import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import listPlugin from '@fullcalendar/list';
 import multiMonthPlugin from '@fullcalendar/multimonth';
-import * as i6$4 from '@fullcalendar/angular';
+import * as i6$3 from '@fullcalendar/angular';
 import { FullCalendarModule } from '@fullcalendar/angular';
 import * as i5$1 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
@@ -86,12 +87,15 @@ import * as i4$2 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import * as i5$3 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
+import * as i10 from 'primeng/divider';
+import { DividerModule } from 'primeng/divider';
+import * as i12$1 from 'primeng/skeleton';
+import { SkeletonModule } from 'primeng/skeleton';
 import localeArSa from '@angular/common/locales/ar-SA';
 import { AvatarModule } from 'primeng/avatar';
 import { AvatarGroupModule } from 'primeng/avatargroup';
 import { ColorPickerModule } from 'primeng/colorpicker';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import { DividerModule } from 'primeng/divider';
 import { DragDropModule } from 'primeng/dragdrop';
 import { ImageModule } from 'primeng/image';
 import { PasswordModule } from 'primeng/password';
@@ -608,6 +612,18 @@ const IdentityPlatformEndpoints = {
     getCommonParameters: () => `${Segment.identityPlatformUrlApi}/${IdentityPlatformSegments.parametres}/${IdentityPlatformSegments.common}`,
 };
 
+const NotificationSegments = {
+    notification: 'notification'
+};
+const NotificationEndpoints = {
+    getAll: () => `${Segment.base}/${NotificationSegments.notification}`,
+    getAllPaged: (pageNumber, pageSize) => `${Segment.base}/${NotificationSegments.notification}/paged?pageNumber=${pageNumber}&pageSize=${pageSize}`,
+    getUnreadCount: () => `${Segment.base}/${NotificationSegments.notification}/unread-count`,
+    markAsRead: (uid) => `${Segment.base}/${NotificationSegments.notification}/${uid}/read`,
+    markAsUnread: (uid) => `${Segment.base}/${NotificationSegments.notification}/${uid}/unread`,
+    markAllAsRead: () => `${Segment.base}/${NotificationSegments.notification}/read-all`,
+};
+
 /**
  * Enum representing the language codes supported by the application.
  *
@@ -1491,6 +1507,20 @@ var ActionPlacement;
     ActionPlacement["Inline"] = "inline";
 })(ActionPlacement || (ActionPlacement = {}));
 
+var NotificationType;
+(function (NotificationType) {
+    NotificationType[NotificationType["Information"] = 0] = "Information";
+    NotificationType[NotificationType["Success"] = 1] = "Success";
+    NotificationType[NotificationType["Warning"] = 2] = "Warning";
+    NotificationType[NotificationType["Error"] = 3] = "Error";
+})(NotificationType || (NotificationType = {}));
+var NotificationChannel;
+(function (NotificationChannel) {
+    NotificationChannel[NotificationChannel["WebSocket"] = 0] = "WebSocket";
+    NotificationChannel[NotificationChannel["Email"] = 1] = "Email";
+    NotificationChannel[NotificationChannel["Push"] = 2] = "Push";
+})(NotificationChannel || (NotificationChannel = {}));
+
 class EntityValidationsService {
     constructor(_httpClient) {
         this._httpClient = _httpClient;
@@ -4251,6 +4281,255 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i2$1.MessageService }, { type: LocalizePipe }, { type: TsiMessageService }] });
 
+class TsiNotificationCenterService extends CrudBaseService {
+    constructor(http) {
+        super(http, NotificationSegments.notification);
+        this.http = http;
+        this.notifications = [];
+        this.unreadCount = 0;
+        this.isLoading = false;
+        this.isLoadingMore = false;
+        this.hasMore = true;
+        this.pageSize = 10;
+        this._pageNumber = 1;
+    }
+    loadFirstPage() {
+        this._pageNumber = 1;
+        this.hasMore = true;
+        this.notifications = [];
+        this.isLoading = true;
+        this.loadUnreadCount();
+        this._fetchPage(1);
+    }
+    loadUnreadCount() {
+        this.http.get(NotificationEndpoints.getUnreadCount()).subscribe({
+            next: (count) => { this.unreadCount = count; },
+            error: () => { }
+        });
+    }
+    loadNextPage() {
+        if (this.isLoadingMore || !this.hasMore)
+            return;
+        this.isLoadingMore = true;
+        this._fetchPage(this._pageNumber + 1);
+    }
+    /** Called by the hub when a notification is pushed. */
+    pushReceived(notification) {
+        this.notifications.unshift(notification);
+        this.unreadCount++;
+    }
+    markAllAsRead() {
+        const now = new Date().toISOString();
+        this.notifications.forEach(n => {
+            if (!n.isRead) {
+                n.isRead = true;
+                n.readAt = now;
+            }
+        });
+        this.unreadCount = 0;
+        this.http.patch(NotificationEndpoints.markAllAsRead(), {}).subscribe();
+    }
+    markAsRead(uid) {
+        const notif = this.notifications.find(n => n.uid === uid);
+        if (notif && !notif.isRead) {
+            notif.isRead = true;
+            notif.readAt = new Date().toISOString();
+            this.unreadCount = Math.max(0, this.unreadCount - 1);
+        }
+        this.http.patch(NotificationEndpoints.markAsRead(uid), {}).subscribe();
+    }
+    markAsUnread(uid) {
+        const notif = this.notifications.find(n => n.uid === uid);
+        if (notif && notif.isRead) {
+            notif.isRead = false;
+            notif.readAt = null;
+            this.unreadCount++;
+            this.http.patch(NotificationEndpoints.markAsUnread(uid), {}).subscribe();
+        }
+    }
+    _fetchPage(page) {
+        this.http.get(NotificationEndpoints.getAllPaged(page, this.pageSize)).subscribe({
+            next: (res) => {
+                if (page === 1) {
+                    this.notifications = res.items;
+                    this.isLoading = false;
+                }
+                else {
+                    this.notifications.push(...res.items);
+                    this.isLoadingMore = false;
+                }
+                this._pageNumber = page;
+                this.hasMore = this.notifications.length < res.totalCount;
+            },
+            error: () => {
+                this.isLoading = false;
+                this.isLoadingMore = false;
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotificationCenterService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotificationCenterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotificationCenterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+class IdentityManagerService {
+    constructor(_jwtHelper) {
+        this._jwtHelper = _jwtHelper;
+    }
+    saveAuthToken(token) {
+        StorageManager.setItem(authorization.encryptedAuthTokenName, token);
+    }
+    saveRtlMode(value) {
+        StorageManager.setItem(rtlModeKeys.rtlModeEnabled, value);
+    }
+    saveUserLanguage(value) {
+        StorageManager.setItem(userLanguage.userLanguage, value);
+    }
+    getUserLanguage() {
+        return StorageManager.getItem(userLanguage.userLanguage);
+    }
+    saveMenuItems(values) {
+        StorageManager.setItem(menuItems.menuItems, values);
+    }
+    getAuthToken() {
+        return StorageManager.getItem(authorization.encryptedAuthTokenName);
+    }
+    getMenuItems() {
+        return StorageManager.getItem(menuItems.menuItems);
+    }
+    getRtlMode() {
+        return StorageManager.getItem(rtlModeKeys.rtlModeEnabled);
+    }
+    removeAuthToken() {
+        StorageManager.removeItem(authorization.encryptedAuthTokenName);
+    }
+    iHaveAuthToken() {
+        if (this.getAuthToken()) {
+            return true;
+        }
+        return false;
+    }
+    isMyAuthTokenValid() {
+        if (this.iHaveAuthToken()) {
+            let myAuthToken = this.getAuthToken();
+            return this.isAuthTokenValid(myAuthToken);
+        }
+        else {
+            return false;
+        }
+    }
+    isAuthTokenValid(token) {
+        if (token) {
+            return !this._jwtHelper.isTokenExpired(token);
+        }
+        return false;
+    }
+    parseAuthToken(token) {
+        if (token) {
+            let parseToken = this._jwtHelper.decodeToken(token);
+            return AuthorizationTokenMapper.ToAuthorizationToken(parseToken);
+        }
+        else {
+            return undefined;
+        }
+    }
+    parseMyAuthToken() {
+        let myToken = this.getAuthToken();
+        if (this.iHaveAuthToken() && myToken) {
+            let parseToken = this._jwtHelper.decodeToken(myToken);
+            return AuthorizationTokenMapper.ToAuthorizationToken(parseToken);
+        }
+        else {
+            throw new Error('no auth token found for current user !');
+        }
+    }
+    saveFavoritesOnly(value) {
+        StorageManager.setItem(menuPreferences.favoritesOnly, JSON.stringify(value));
+    }
+    getFavoritesOnly() {
+        const value = StorageManager.getItem(menuPreferences.favoritesOnly);
+        return value ? JSON.parse(value) : false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IdentityManagerService, deps: [{ token: i1$5.JwtHelperService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IdentityManagerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IdentityManagerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$5.JwtHelperService }] });
+
+const DEFAULT_HUB_PATH = '/hubs/notification';
+const RECEIVE_NOTIFICATION_EVENT = 'ReceiveNotification';
+class TsiNotificationHubService {
+    constructor(notificationCenter, identityManager, tsiNotifService, messageService) {
+        this.notificationCenter = notificationCenter;
+        this.identityManager = identityManager;
+        this.tsiNotifService = tsiNotifService;
+        this.messageService = messageService;
+        this.connection = null;
+    }
+    /** Enabled unless configuration explicitly sets notificationHub.enabled = false (absent block/key → enabled). */
+    get isEnabled() {
+        return this.config?.enabled !== false;
+    }
+    startConnection(configuration) {
+        this.config = configuration?.notificationHub;
+        if (!this.isEnabled || this.connection || !configuration)
+            return;
+        const hubUrl = configuration.remoteServiceBaseUrl.replace(/\/api\/?$/, '')
+            + (this.config?.hubPath ?? DEFAULT_HUB_PATH);
+        this.connection = new signalR.HubConnectionBuilder()
+            .withUrl(hubUrl, {
+            accessTokenFactory: () => this.identityManager.getAuthToken() ?? ''
+        })
+            .withAutomaticReconnect()
+            .build();
+        this.connection.on(RECEIVE_NOTIFICATION_EVENT, (notification) => {
+            this.notificationCenter.pushReceived(notification);
+            if (this.config?.showToasts !== false) {
+                this.showToast(notification);
+            }
+        });
+        this.connection.start()
+            .catch(err => console.error('[SignalR] Connection error:', err));
+    }
+    stopConnection() {
+        this.connection?.stop();
+        this.connection = null;
+    }
+    showToast(notification) {
+        switch (notification.notificationType) {
+            case NotificationType.Success:
+                this.tsiNotifService.success(notification.message, notification.title);
+                break;
+            case NotificationType.Warning:
+                this.tsiNotifService.warn(notification.message, notification.title);
+                break;
+            case NotificationType.Error:
+                this.messageService.add({ severity: 'error', summary: notification.title, detail: notification.message });
+                break;
+            case NotificationType.Information:
+            default:
+                this.tsiNotifService.info(notification.message, notification.title);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotificationHubService, deps: [{ token: TsiNotificationCenterService }, { token: IdentityManagerService }, { token: TsiNotificationService }, { token: i2$1.MessageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotificationHubService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotificationHubService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: TsiNotificationCenterService }, { type: IdentityManagerService }, { type: TsiNotificationService }, { type: i2$1.MessageService }] });
+
 class PresentationDesignerService extends PresentationDesignerBaseService {
     constructor() {
         super();
@@ -5058,94 +5337,6 @@ const IdentityRoutes = {
     login: "account/login"
 };
 
-class IdentityManagerService {
-    constructor(_jwtHelper) {
-        this._jwtHelper = _jwtHelper;
-    }
-    saveAuthToken(token) {
-        StorageManager.setItem(authorization.encryptedAuthTokenName, token);
-    }
-    saveRtlMode(value) {
-        StorageManager.setItem(rtlModeKeys.rtlModeEnabled, value);
-    }
-    saveUserLanguage(value) {
-        StorageManager.setItem(userLanguage.userLanguage, value);
-    }
-    getUserLanguage() {
-        return StorageManager.getItem(userLanguage.userLanguage);
-    }
-    saveMenuItems(values) {
-        StorageManager.setItem(menuItems.menuItems, values);
-    }
-    getAuthToken() {
-        return StorageManager.getItem(authorization.encryptedAuthTokenName);
-    }
-    getMenuItems() {
-        return StorageManager.getItem(menuItems.menuItems);
-    }
-    getRtlMode() {
-        return StorageManager.getItem(rtlModeKeys.rtlModeEnabled);
-    }
-    removeAuthToken() {
-        StorageManager.removeItem(authorization.encryptedAuthTokenName);
-    }
-    iHaveAuthToken() {
-        if (this.getAuthToken()) {
-            return true;
-        }
-        return false;
-    }
-    isMyAuthTokenValid() {
-        if (this.iHaveAuthToken()) {
-            let myAuthToken = this.getAuthToken();
-            return this.isAuthTokenValid(myAuthToken);
-        }
-        else {
-            return false;
-        }
-    }
-    isAuthTokenValid(token) {
-        if (token) {
-            return !this._jwtHelper.isTokenExpired(token);
-        }
-        return false;
-    }
-    parseAuthToken(token) {
-        if (token) {
-            let parseToken = this._jwtHelper.decodeToken(token);
-            return AuthorizationTokenMapper.ToAuthorizationToken(parseToken);
-        }
-        else {
-            return undefined;
-        }
-    }
-    parseMyAuthToken() {
-        let myToken = this.getAuthToken();
-        if (this.iHaveAuthToken() && myToken) {
-            let parseToken = this._jwtHelper.decodeToken(myToken);
-            return AuthorizationTokenMapper.ToAuthorizationToken(parseToken);
-        }
-        else {
-            throw new Error('no auth token found for current user !');
-        }
-    }
-    saveFavoritesOnly(value) {
-        StorageManager.setItem(menuPreferences.favoritesOnly, JSON.stringify(value));
-    }
-    getFavoritesOnly() {
-        const value = StorageManager.getItem(menuPreferences.favoritesOnly);
-        return value ? JSON.parse(value) : false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IdentityManagerService, deps: [{ token: i1$5.JwtHelperService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IdentityManagerService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IdentityManagerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1$5.JwtHelperService }] });
-
 class LayoutService {
     constructor(_identityManagerService) {
         this._identityManagerService = _identityManagerService;
@@ -8970,11 +9161,11 @@ class EditableGridComponent extends TsiInputBase {
         return `${EditableGridComponent.SEARCH_LABEL_PREFIX}${column.field}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditableGridComponent, deps: [{ token: LocalizePipe }, { token: i2$1.FilterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EditableGridComponent, selector: "Tsi-Generic-Editable-Grid", inputs: { selectedItems: "selectedItems", configuration: "configuration", key: "key", items: "items", saveEvent: "saveEvent", showGlobalSearch: "showGlobalSearch", showAddButton: "showAddButton", showDeleteButton: "showDeleteButton", showEditButton: "showEditButton", showRowSummary: "showRowSummary", scrollHeight: "scrollHeight", sizingMode: "sizingMode", rowPerPage: "rowPerPage", pageSize: "pageSize", entityPrimaryKeyName: "entityPrimaryKeyName", columns: "columns", gridData: "gridData", isTableLoading: "isTableLoading", parent: "parent", showSaveButton: "showSaveButton", showActionColumn: "showActionColumn", enableRowDisabling: "enableRowDisabling", rowSummaryConfig: "rowSummaryConfig", showHaveSumary: "showHaveSumary", showRowSumary: "showRowSumary", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", showConsultButton: "showConsultButton", editableGridBusinessClass: "editableGridBusinessClass", orderColumn: "orderColumn", deleteLineButtonDisabled: "deleteLineButtonDisabled", showDuplicateButton: "showDuplicateButton", id: "id" }, outputs: { refreshEventEmitter: "refreshEventEmitter", saveDataEventEmitter: "saveDataEventEmitter", rowChangedEventEmitter: "rowChangedEventEmitter", selectedRowEventEmitter: "selectedRowEventEmitter", addedRowEventEmitter: "addedRowEventEmitter", focusOutEventEmitter: "focusOutEventEmitter", cellChanged: "cellChanged", rowDeletedEventEmitter: "rowDeletedEventEmitter", selectedItemsChange: "selectedItemsChange", onRowSelect: "onRowSelect", focusOutRow: "focusOutRow", onConsultClicked: "onConsultClicked", rowDuplicatedEventEmitter: "rowDuplicatedEventEmitter" }, host: { listeners: { "document:keydown": "handleGridKeydown($event)" } }, providers: [GenericValidationStateService], viewQueries: [{ propertyName: "editableTable", first: true, predicate: ["editableTable"], descendants: true }, { propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"card\">\r\n  <p-table #dt [selectionMode]=\"selectionMode\" [(selection)]=\"selectedItems\" editMode=\"row\"\r\n    [paginator]=\"gridData.length > pageSize\" [rowsPerPageOptions]=\"rowPerPage\" [rows]=\"pageSize\"\r\n    (onRowSelect)=\"onRowSelected($event)\" (onRowUnselect)=\"onRowUnselect($event)\" [scrollable]=\"true\"\r\n    (onColResize)=\"onColResize($event)\"\r\n    [resizableColumns]=\"true\" columnResizeMode=\"expand\" appendTo=\"body\" [value]=\"gridData\"\r\n    [columns]=\"selectedColumns\" [dataKey]=\"key\" [scrollHeight]=\"scrollHeight\" [styleClass]=\"'p-datatable-sm p-datatable-gridlines' + (stripedRows ? ' p-datatable-striped' : '')\"\r\n    (selectionChange)=\"selectionChange($event)\" #editableTable [totalRecords]=\"gridData.length\"\r\n    [globalFilterFields]=\"globalFilterFields\" [rowTrackBy]=\"rowTrackBy\" [tableStyle]=\"tableStyle\">\r\n\r\n    <ng-template pTemplate=\"caption\">\r\n      <div class=\"flex items-center gap-5 flex-row\">\r\n        <p-multiSelect [options]=\"columns\" [(ngModel)]=\"selectedColumns\"\r\n          selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" optionLabel=\"translatedHeader\"\r\n          [style]=\"{'min-width': '180px'}\" placeholder=\"{{ 'choose_columns' | localize }}\">\r\n          <ng-template let-option pTemplate=\"item\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <span>{{ option.header | localize }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </p-multiSelect>\r\n\r\n        <div *ngIf=\"showGlobalSearch\" class=\"flex items-center gap-1 w-8\">\r\n          <div presentationDesignerBase=\"global_search\" class=\"p-inputgroup rtl-mode h-2rem no-pad\">\r\n            <input class=\"\" type=\"text\" [(ngModel)]=\"searchValue\" pInputText class=\"border-round-lg\"\r\n              [placeholder]=\"'shared_edittable_search_placeholder' | localize\" (keydown.enter)=\"applyGlobalSearch()\">\r\n          </div>\r\n          <div presentationDesignerBase=\"search_button\">\r\n            <Tsi-Button styleClass=\"p-button-icon-only\" type=\"button\" icon=\"pi pi-search\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_search\"\r\n              (onClick)=\"applyGlobalSearch()\" />\r\n          </div>\r\n        </div>\r\n      </div> \r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n\r\n      <tr>\r\n        <ng-container *ngIf=\"selectionMode != multipleGridSelectionMode\">\r\n          <th pResizableColumn pFrozenColumn style=\"min-width:2rem; left: 1rem !important; width:2rem !important;\"></th>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n          <th pResizableColumn pFrozenColumn style=\"min-width:2rem; left: 1rem !important; width:2rem !important;\">\r\n            <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n          </th>\r\n        </ng-container>\r\n        \r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n\r\n        <!-- <th pResizableColumn pFrozenColumn *ngIf=\"showEditButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th> -->\r\n        \r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showDuplicateButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showConsultButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showDeleteButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n\r\n        <th pResizableColumn pFrozenColumn [frozen]=\"col.isFrozen\" [style]=\"col.style\" [ngStyle]=\"getColumnSizeStyle(col)\" scope=\"col\"\r\n          [attr.data-field]=\"col.field\"\r\n          [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n          style=\"min-width:3rem;\" pSortableColumn=\"{{col.field}}\" *ngFor=\"let col of columns\"\r\n          pTooltip=\"{{col.toolTipText | localize }}\" tooltipPosition=\"top\" pReorderableColumn>{{ col.header | localize\r\n          }}\r\n          <p-sortIcon field=\"{{col.field}}\"></p-sortIcon>\r\n          <Tsi-Bubble-Info [infoText]=\"col.infoText | localize\"></Tsi-Bubble-Info>\r\n        </th>\r\n        <th style=\"min-width:3rem\" *ngIf=\"showRowSummary\" scope=\"col\">{{'RowSummary' | localize}}</th>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"body\" let-item let-editing=\"editing\" let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n      \r\n      <tr [pEditableRow]=\"item\"\r\n        *ngIf=\"selectionMode == multipleGridSelectionMode || selectionMode == undefined; else selectionModeBlock\"\r\n        (focusOut)=\"onFocusOutRow(item)\">\r\n        \r\n        <td style=\"text-align: center;\">\r\n          <p-tableCheckbox [value]=\"item\" ></p-tableCheckbox>\r\n        </td>\r\n\r\n        <!-- <td pFrozenColumn style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1\"> -->\r\n\r\n\r\n        <!-- <td pFrozenColumn style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n        </td> -->\r\n\r\n        <!-- <td pFrozenColumn *ngIf=\"showEditButton\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n          <div class=\"flex align-items-center justify-content-center\">\r\n            <button *ngIf=\"!editing\" pButton pRipple type=\"button\" pInitEditableRow icon=\"pi pi-pencil\"\r\n              class=\"p-button-rounded p-button-text\">\r\n            </button>\r\n            <button *ngIf=\"editing\" pButton pRipple type=\"button\" pSaveEditableRow icon=\"pi pi-check\"\r\n              class=\"p-button-rounded p-button-text p-button-success -ml-1\">\r\n            </button>\r\n            <button *ngIf=\"editing\" pButton pRipple type=\"button\" pCancelEditableRow icon=\"pi pi-times\"\r\n              class=\"p-button-rounded p-button-text p-button-danger -ml-2\">\r\n            </button>\r\n          </div>\r\n        </td> -->\r\n        <td pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\" style=\"left: 1rem !important; width:3rem !important;\"></td>\r\n\r\n        <td pFrozenColumn *ngIf=\"showDuplicateButton\" style=\"left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1\">\r\n          <div class=\"p-0\">\r\n            <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-copy\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_dupliquer\"\r\n              styleClass=\"p-button-rounded p-button-text p-button-info\" (click)=\"duplicateRow(item)\"></Tsi-Button>\r\n          </div>\r\n        </td>\r\n\r\n        <td pFrozenColumn *ngIf=\"showConsultButton\" style=\"left: -1rem !important; width:3rem !important;\"\r\n          class=\"p-1 btn-consult-style\">\r\n          <div class=\"p-0\">\r\n            <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-eye\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_consulter\"\r\n              styleClass=\"p-button-rounded p-button-text p-button-secondary\" (click)=\"consult(item)\"></Tsi-Button>\r\n          </div>\r\n        </td>\r\n\r\n        <td pFrozenColumn *ngIf=\"showDeleteButton\"\r\n          style=\"left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1 btn-delete-style\">\r\n          <div class=\"p-0\">\r\n            <Tsi-Button [disabled]=\"isDeleteButtonDisabled(item)\" type=\"button\" icon=\"p-button-icon pi pi-trash\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_supprimer\"\r\n              styleClass=\"p-element p-button-rounded p-button-text p-button-danger p-button p-component p-button-icon-only\"\r\n              (click)=\"delete(item)\"></Tsi-Button>\r\n          </div>\r\n        </td>\r\n\r\n\r\n        <td class=\"ui-resizable-column\" pFrozenColumn [frozen]=\"col.isFrozen\" *ngFor=\"let col of columns\"\r\n          [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n          [ngStyle]=\"getBodyColumnStyle(col)\">\r\n          \r\n          \r\n          <div *ngIf=\"col.displayOnly || disabled; else ordinaryBloc\">\r\n\r\n                <!-- Tsi-Search-Combo -->\r\n                <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteOutputBlock\">\r\n                  <Tsi-Search-Combo [disabled]=\"true\" [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                    [businessClass]=\"col.businessClass\" [currentRowItem]=\"item\" [(bind)]=\"item[col.field]\"\r\n                    id-field=\"{{col.idField}}\" [listSourceUrl]=\"col.listSourceUrl\" label-field=\"{{col.labelField}}\"\r\n                    [isFiltered]=\"col.isFiltered\" [datasource]=\"col.datasource\"\r\n                    [showSearchButton]=\"col.showSearchButton ?? true\" [showAddButton]=\"col.showAddButton ?? true\"\r\n                    [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                    [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                    [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                    (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                    [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n                </div>\r\n\r\n                <!-- Tsi-Currency-Societe-Display -->\r\n                <ng-template #currencySocieteOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherOutputBlock\">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Currency-Other-Display -->\r\n                <ng-template #currencyOtherOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerOutputBlock\">\r\n                    <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Other-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Date-Display -->\r\n                <ng-template #datePickerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxOutputBlock\">\r\n                    <Tsi-Date-Display [showTime]=\"col.showTime\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Date-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-CheckBox-Display -->\r\n                <ng-template #checkBoxOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalOutputBlock\">\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-Display -->\r\n                <ng-template #decimalOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerOutputBlock\">\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-Display -->\r\n                <ng-template #integerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateOutputBlock\">\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-Display -->\r\n                <ng-template #rateOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeOutputBlock\">\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                <!-- Tsi-Time-Display -->\r\n                <ng-template #timeOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.TIME; else formulaOutputBlock\">\r\n                    <tsi-time-display [inputData]=\"item[col.field]\"></tsi-time-display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Formula-Display -->\r\n                <ng-template #formulaOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextOutputBlock\">\r\n                    <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\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>\r\n                      {{item[col.field]}}\r\n                    </span>\r\n                  </ng-container>\r\n                </ng-template>\r\n          </div>\r\n\r\n          <ng-template #ordinaryBloc>\r\n\r\n            <!-- Tsi-Search-Combo -->\r\n            <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteInputBlock\">\r\n              <Tsi-Search-Combo [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                [businessClass]=\"col.businessClass\" [listSourceUrl]=\"col.listSourceUrl\" [(bind)]=\"item[col.field]\"\r\n                id-field=\"{{col.idField}}\" label-field=\"{{col.labelField}}\" [isFiltered]=\"col.isFiltered\"\r\n                [currentRowItem]=\"item\" (bindChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                [datasource]=\"col.datasource\" [showSearchButton]=\"col.showSearchButton ?? true\"\r\n                [showAddButton]=\"col.showAddButton ?? true\" [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n            </div>\r\n\r\n            <!-- Tsi-Currency-Societe-Input -->\r\n            <ng-template #currencySocieteInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherInputBlock\">\r\n                <Tsi-Currency-Societe-Input [inputName]=\"col.inputName\" [disabled]=\"col.disabled\" [inputId]=\"col.field\"\r\n                  [(inputField)]=\"item[col.field]\" (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Currency-Societe-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Currency-Other-Input -->\r\n            <ng-template #currencyOtherInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerInputBlock\">\r\n                <Tsi-Currency-Other-Input [inputName]=\"col.inputName\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\" [inputId]=\"col.field\"\r\n                  [(inputField)]=\"item[col.field]\" (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                  [currency]=\"col.currencyOtherCode\" [disabled]=\"col.disabled\">\r\n                </Tsi-Currency-Other-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Date-Picker -->\r\n            <ng-template #datePickerInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxInputBlock\">\r\n                <Tsi-Date-Picker [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [showTime]=\"col.showTime\"\r\n                  [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Date-Picker>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-CheckBox -->\r\n            <ng-template #checkBoxInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalInputBlock\">\r\n                <Tsi-CheckBox [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\" \r\n                  [isBinary]=\"col.isBinary ?? false\">\r\n                </Tsi-CheckBox>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Decimal-Input -->\r\n            <ng-template #decimalInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerInputBlock\">\r\n                <Tsi-Decimal-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [numOfDecimal]=\"col.numOfDecimal\"\r\n                  [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Decimal-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Integer -->\r\n            <ng-template #integerInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateInputBlock\">\r\n                <Tsi-Integer [inputName]=\"col.inputName\" [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                  [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\">\r\n                </Tsi-Integer>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Rate-Input -->\r\n            <ng-template #rateInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeInputBloc\">\r\n                <Tsi-Rate-Input [inputName]=\"col.inputName\" [numOfDecimal]=\"col.numOfDecimal\" [inputId]=\"col.field\"\r\n                  [(inputField)]=\"item[col.field]\" (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                  [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Rate-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Time-picker bloc -->\r\n            <ng-template #timeInputBloc>\r\n              <ng-container *ngIf=\"col.type == inputTypes.TIME; else formulaInputBlock\">\r\n                <tsi-time-picker (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [inputName]=\"col.inputName\"\r\n                  [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\" [disabled]=\"col.disabled\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </tsi-time-picker>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <ng-template #formulaInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextInputBlock\">\r\n                <!--<Tsi-Bubble-Info\r\n                  [infoText]=\"['formula_explication',\r\n                  ]\"></Tsi-Bubble-Info> -->\r\n                <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Text-Box -->\r\n            <ng-template #defaultTextInputBlock>\r\n              <ng-container>\r\n                <Tsi-Text-Box [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\" (keydown)=\"handleKeydown($event)\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                  [inputName]=\"col.inputName\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Text-Box>\r\n              \r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-template>\r\n\r\n        </td>\r\n\r\n        <td *ngIf=\"showRowSummary\" class=\"font-bold\">\r\n          {{rowSummary(item)}}\r\n        </td>\r\n      </tr>\r\n\r\n      <ng-template #selectionModeBlock>\r\n        <ng-container>\r\n          <tr [pEditableRow]=\"item\" [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"rowIndex\"\r\n            (focusOut)=\"onFocusOutRow(item)\">\r\n\r\n       <!-- <td pFrozenColumn style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1\"> -->\r\n\r\n            <td pFrozenColumn style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n              </td>\r\n\r\n            <!-- <td *ngIf=\"selectionMode == multipleGridSelectionMode\" style=\"width: 2rem;\">\r\n              <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </td> -->\r\n\r\n            <!-- <td pFrozenColumn *ngIf=\"showEditButton\" style=\"min-width:3rem;left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n              <div class=\"flex align-items-center justify-content-center\">\r\n                <button *ngIf=\"!editing\" pButton pRipple type=\"button\" pInitEditableRow icon=\"pi pi-pencil\"\r\n                  class=\"p-button-rounded p-button-text\">\r\n                </button>\r\n                <button *ngIf=\"editing\" pButton pRipple type=\"button\" pSaveEditableRow icon=\"pi pi-check\"\r\n                  class=\"p-button-rounded p-button-text p-button-success -ml-1\">\r\n                </button>\r\n                <button *ngIf=\"editing\" pButton pRipple type=\"button\" pCancelEditableRow icon=\"pi pi-times\"\r\n                  class=\"p-button-rounded p-button-text p-button-danger -ml-2\">\r\n                </button>\r\n              </div>\r\n            </td> -->\r\n            \r\n            <td pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\" style=\"left: 1rem !important; width:3rem !important;\">\r\n            </td>\r\n            \r\n            <td pFrozenColumn pResizableColumn *ngIf=\"showDuplicateButton\"\r\n              style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n              <div class=\"p-0\">\r\n                <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-copy\"\r\n                  [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_dupliquer\"\r\n                  styleClass=\"p-button-rounded p-button-text p-button-info\" (click)=\"duplicateRow(item)\"></Tsi-Button>\r\n              </div>\r\n            </td>\r\n\r\n            <td pFrozenColumn pResizableColumn *ngIf=\"showConsultButton\"\r\n              style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1 btn-consult-style\">\r\n              <div class=\"p-0\">\r\n                <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-eye\"\r\n                  [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_consulter\"\r\n                  styleClass=\"p-button-rounded p-button-text p-button-secondary\" (click)=\"consult(item)\"></Tsi-Button>\r\n              </div>\r\n            </td>\r\n\r\n            <td pFrozenColumn pResizableColumn *ngIf=\"showDeleteButton\" style=\"left: 1rem !important; width:3rem !important;\"\r\n              class=\"p-1 btn-delete-style\">\r\n              <div class=\"p-0\">\r\n                <Tsi-Button type=\"button\" icon=\"p-button-icon pi pi-trash\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n                  tooltipText=\"shared_edittable_supprimer\"\r\n                  styleClass=\"p-element p-button-rounded p-button-text p-button-danger p-button p-component p-button-icon-only\"\r\n                  (click)=\"delete(item)\"></Tsi-Button>\r\n              </div>\r\n            </td>\r\n            \r\n            <td class=\"ui-resizable-column\" pFrozenColumn [frozen]=\"col.isFrozen\" *ngFor=\"let col of columns\"\r\n              [class.tsi-col-wrap]=\"shouldWrapColumn(col)\" [ngStyle]=\"getBodyColumnStyle(col)\">\r\n\r\n              <div *ngIf=\"col.displayOnly || disabled; else ordinaryBloc\">\r\n                <!-- Tsi-Search-Combo -->\r\n                <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteOutputBlock\">\r\n                  <Tsi-Search-Combo [disabled]=\"true\" [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                    [businessClass]=\"col.businessClass\" [currentRowItem]=\"item\" [(bind)]=\"item[col.field]\"\r\n                    id-field=\"{{col.idField}}\" [listSourceUrl]=\"col.listSourceUrl\" label-field=\"{{col.labelField}}\"\r\n                    [isFiltered]=\"col.isFiltered\" [datasource]=\"col.datasource\"\r\n                    [showSearchButton]=\"col.showSearchButton ?? true\" [showAddButton]=\"col.showAddButton ?? true\"\r\n                    [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                    [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                    [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                    (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                    [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n                </div>\r\n\r\n                <!-- Tsi-Currency-Societe-Display -->\r\n                <ng-template #currencySocieteOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherOutputBlock\">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Currency-Other-Display -->\r\n                <ng-template #currencyOtherOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerOutputBlock\">\r\n                    <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Other-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Date-Display -->\r\n                <ng-template #datePickerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxOutputBlock\">\r\n                    <Tsi-Date-Display [showTime]=\"col.showTime\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Date-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-CheckBox-Display -->\r\n                <ng-template #checkBoxOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalOutputBlock\">\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-Display -->\r\n                <ng-template #decimalOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerOutputBlock\">\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-Display -->\r\n                <ng-template #integerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateOutputBlock\">\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-Display -->\r\n                <ng-template #rateOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeOutputBlock\">\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                <!-- Tsi-Time-Display -->\r\n                <ng-template #timeOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.TIME; else formulaOutputBlock\">\r\n                    <tsi-time-display [inputData]=\"item[col.field]\"></tsi-time-display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Formula-Display -->\r\n                <ng-template #formulaOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextOutputBlock\">\r\n                    <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\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>\r\n                      {{item[col.field]}}\r\n                    </span>\r\n                  </ng-container>\r\n                </ng-template>\r\n              </div>\r\n              \r\n              <ng-template #ordinaryBloc>\r\n                <!-- Tsi-Search-Combo -->\r\n                <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteInputBlock\">\r\n                  <Tsi-Search-Combo [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                    [listSourceUrl]=\"col.listSourceUrl\" [(bind)]=\"item[col.field]\" id-field=\"{{col.idField}}\"\r\n                    label-field=\"{{col.labelField}}\" [isFiltered]=\"col.isFiltered\" [businessClass]=\"col.businessClass\"\r\n                    (bindChange)=\"onCellValueChanged(col, $event, item)\" [currentRowItem]=\"item\"\r\n                    [datasource]=\"col.datasource\" [disabled]=\"col.disabled\"\r\n                    [showSearchButton]=\"col.showSearchButton ?? true\" [showAddButton]=\"col.showAddButton ?? true\"\r\n                    [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                    [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                    [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                    (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                    [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n                </div>\r\n\r\n                <!-- Tsi-Currency-Societe-Input -->\r\n                <ng-template #currencySocieteInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherInputBlock\">\r\n                    <Tsi-Currency-Societe-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Currency-Societe-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Currency-Other-Input -->\r\n                <ng-template #currencyOtherInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerInputBlock\">\r\n                    <Tsi-Currency-Other-Input [disabled]=\"col.disabled\" [inputName]=\"col.inputName\"\r\n                      [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\" [currency]=\"col.currencyOtherCode\">\r\n                    </Tsi-Currency-Other-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Date-Picker -->\r\n                <ng-template #datePickerInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxInputBlock\">\r\n                    <Tsi-Date-Picker [showTime]=\"col.showTime\" [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Date-Picker>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-CheckBox -->\r\n                <ng-template #checkBoxInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalInputBlock\">\r\n                    <Tsi-CheckBox [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                      [isBinary]=\"col.isBinary ?? false\">\r\n                    </Tsi-CheckBox>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Decimal-Input -->\r\n                <ng-template #decimalInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerInputBlock\">\r\n                    <Tsi-Decimal-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                      [(inputField)]=\"item[col.field]\" [numOfDecimal]=\"col.numOfDecimal\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\">\r\n                    </Tsi-Decimal-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Integer -->\r\n                <ng-template #integerInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateInputBlock\">\r\n                    <Tsi-Integer [class]=\"'max-w-4rem'\" [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\">\r\n                    </Tsi-Integer>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Rate-Input -->\r\n                <ng-template #rateInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeInputBloc\">\r\n                    <Tsi-Rate-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Rate-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Time-Picker -->\r\n                <ng-template #timeInputBloc>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.TIME else formulaInputBlock\">\r\n                    <tsi-time-picker (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                      [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                      [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </tsi-time-picker>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <ng-template #formulaInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextInputBlock\">\r\n                    <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Text-Box -->\r\n                <ng-template #defaultTextInputBlock>\r\n                  <ng-container>\r\n                    <Tsi-Text-Box [inputId]=\"col.field\" [disabled]=\"col.disabled\"\r\n                      [(inputField)]=\"item[col.field]\" (keydown)=\"handleKeydown($event)\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [inputName]=\"col.inputName\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Text-Box>\r\n                  </ng-container>\r\n                </ng-template>\r\n              </ng-template>\r\n\r\n            </td>\r\n            <td *ngIf=\"showRowSummary\" class=\"font-bold\">\r\n              {{rowSummary(item)}}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n    </ng-template>\r\n\r\n    <ng-template *ngIf=\"showHaveSumary\" pTemplate=\"footer\" let-columns>\r\n\r\n      <tr class=\"tfooter\">\r\n        <!-- <td pFrozenColumn scope=\"col\" style=\"left: 1rem !important; width:3rem !important;\"></td> -->\r\n        <td *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n          style=\"min-width:2rem; left: 1rem !important; width:2rem !important;\">\r\n          <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n        </td>\r\n        <td pFrozenColumn scope=\"col\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\">Total</td>\r\n        <td pFrozenColumn *ngIf=\"showDeleteButton\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1\">\r\n        <td pFrozenColumn style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n          <!--<td pFrozenColumn *ngIf=\"showEditButton\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1\"> -->\r\n        <td pFrozenColumn *ngIf=\"showDuplicateButton\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n        </td>\r\n        <td pFrozenColumn *ngIf=\"showConsultButton\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n        </td>\r\n        <td pFrozenColumn [frozen]=\"col.isFrozen\" [style]=\"col.style\" [ngStyle]=\"getColumnSizeStyle(col)\" scope=\"col\" *ngFor=\"let col of columns\"\r\n          [class.tsi-col-wrap]=\"shouldWrapColumn(col)\">\r\n          <div *ngIf=\"col.haveSummary\">\r\n            <!-- Tsi-Currency-Societe-Display -->\r\n            <div *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherOutputBlock\">\r\n              <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col)\">\r\n              </Tsi-Currency-Societe-Display>\r\n            </div>\r\n\r\n            <!-- Tsi-Currency-Other-Display -->\r\n            <ng-template #currencyOtherOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else decimalOutputBlock\">\r\n                <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col)\">\r\n                </Tsi-Currency-Other-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Decimal-Display -->\r\n            <ng-template #decimalOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerOutputBlock\">\r\n                <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col)\"\r\n                  [numOfDecimal]=\"col.numOfDecimal\">\r\n                </Tsi-Decimal-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Integer-Display -->\r\n            <ng-template #integerOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateOutputBlock\">\r\n                <Tsi-Integer-Display [inputData]=\"getSummary(col)\">\r\n                </Tsi-Integer-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Rate-Display -->\r\n            <ng-template #rateOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else defaultTextOutputBlock\">\r\n                <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"getSummary(col)\">\r\n                </Tsi-Rate-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Default -->\r\n            <ng-template #defaultTextOutputBlock>\r\n              <ng-container>\r\n                <span>\r\n                  {{getSummary(col)}}\r\n                </span>\r\n              </ng-container>\r\n            </ng-template>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"summary\">\r\n      <tr>\r\n        {{'TotalRecordsCount' | localize }} {{gridData.length}}\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  <div>\r\n    <Tsi-Button *ngIf=\"showAddButton\" style=\"height: 20px;width: 20px;\" icon=\"p-button-icon pi pi-plus\" type=\"button\"\r\n      [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_ajouter\"\r\n      styleClass=\"p-element p-button-sm p-button-success p-button-text p-button p-component p-button-icon-only ng-star-inserted\"\r\n      (click)=\"addRow()\"></Tsi-Button>\r\n  </div>\r\n</div>", styles: [".tfooter{position:sticky;bottom:0;width:100%;z-index:10}.tsi-col-wrap,.tsi-col-wrap>span,.tsi-col-wrap>div{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}::ng-deep .p-datatable .p-datatable-tfoot>tr>td{padding:1.8px!important}.p-button.p-button-icon-only.p-button-rounded{border-radius:50%}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.grid-cell{overflow:visible!important}.p-datatable .p-cell-editing{overflow:visible!important;position:relative;z-index:1}td,.p-editable-column{overflow:visible!important}.p-editable-column input{width:100%}::ng-deep .p-tabview .p-tabview-panels{overflow:visible!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { 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.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { 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: "directive", type: i6.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i11$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "selectOnFocus", "resetFilterOnHide", "reloadDataSource", "isFiltered", "selectedLabel", "maxWidth", "businessClass", "searchDebounceTime", "comboType", "statusMetadata", "currentRowItem", "datasource", "bind", "maxSelectedLabels", "tooltipMaxDisplayedItems", "bindMode", "showSearchButton", "showAddButton", "showConsultButton", "showUpdateButton"], outputs: ["bindChange", "datasource-loaded", "init", "isLoaded", "selectedLabelChange", "onClick", "onSearchButtonClick", "selectionChange"] }, { kind: "component", type: TsiCheckboxComponent, selector: "Tsi-CheckBox", inputs: ["class", "isBinary", "checked", "tooltipText", "tooltipPosition"], outputs: ["inputFieldChange", "checkedChange"] }, { kind: "component", type: TsiCurrencyOtherInputComponent, selector: "Tsi-Currency-Other-Input", inputs: ["currency", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiCurrencySocieteInputComponent, selector: "Tsi-Currency-Societe-Input", inputs: ["class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiDatePickerComponent, selector: "Tsi-Date-Picker", inputs: ["required", "showTime", "showButtonBar"], 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: TsiTextBoxComponent, selector: "Tsi-Text-Box", inputs: ["textBoxType", "autocomplete"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiFormulaBoxComponent, selector: "Tsi-Formula-Box", inputs: ["value", "endPoint"], outputs: ["valueChange"] }, { kind: "component", type: TsiTimePickerComponent, selector: "tsi-time-picker", outputs: ["inputFieldChange"] }, { kind: "component", type: TsiCheckboxDisplayComponent, selector: "Tsi-Checkbox-Display", inputs: ["inputData"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["currency", "inputData"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDateDisplayComponent, selector: "Tsi-Date-Display", inputs: ["inputData", "showTime"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: TsiBubbleInfoComponent, selector: "Tsi-Bubble-Info", inputs: ["infoText"] }, { 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: TsiTimeDisplayComponent, selector: "tsi-time-display", inputs: ["inputData"] }, { 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: EditableGridComponent, selector: "Tsi-Generic-Editable-Grid", inputs: { selectedItems: "selectedItems", configuration: "configuration", key: "key", items: "items", saveEvent: "saveEvent", showGlobalSearch: "showGlobalSearch", showAddButton: "showAddButton", showDeleteButton: "showDeleteButton", showEditButton: "showEditButton", showRowSummary: "showRowSummary", scrollHeight: "scrollHeight", sizingMode: "sizingMode", rowPerPage: "rowPerPage", pageSize: "pageSize", entityPrimaryKeyName: "entityPrimaryKeyName", columns: "columns", gridData: "gridData", isTableLoading: "isTableLoading", parent: "parent", showSaveButton: "showSaveButton", showActionColumn: "showActionColumn", enableRowDisabling: "enableRowDisabling", rowSummaryConfig: "rowSummaryConfig", showHaveSumary: "showHaveSumary", showRowSumary: "showRowSumary", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", showConsultButton: "showConsultButton", editableGridBusinessClass: "editableGridBusinessClass", orderColumn: "orderColumn", deleteLineButtonDisabled: "deleteLineButtonDisabled", showDuplicateButton: "showDuplicateButton", id: "id" }, outputs: { refreshEventEmitter: "refreshEventEmitter", saveDataEventEmitter: "saveDataEventEmitter", rowChangedEventEmitter: "rowChangedEventEmitter", selectedRowEventEmitter: "selectedRowEventEmitter", addedRowEventEmitter: "addedRowEventEmitter", focusOutEventEmitter: "focusOutEventEmitter", cellChanged: "cellChanged", rowDeletedEventEmitter: "rowDeletedEventEmitter", selectedItemsChange: "selectedItemsChange", onRowSelect: "onRowSelect", focusOutRow: "focusOutRow", onConsultClicked: "onConsultClicked", rowDuplicatedEventEmitter: "rowDuplicatedEventEmitter" }, host: { listeners: { "document:keydown": "handleGridKeydown($event)" } }, providers: [GenericValidationStateService], viewQueries: [{ propertyName: "editableTable", first: true, predicate: ["editableTable"], descendants: true }, { propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"card\">\r\n  <p-table #dt [selectionMode]=\"selectionMode\" [(selection)]=\"selectedItems\" editMode=\"row\"\r\n    [paginator]=\"gridData.length > pageSize\" [rowsPerPageOptions]=\"rowPerPage\" [rows]=\"pageSize\"\r\n    (onRowSelect)=\"onRowSelected($event)\" (onRowUnselect)=\"onRowUnselect($event)\" [scrollable]=\"true\"\r\n    (onColResize)=\"onColResize($event)\"\r\n    [resizableColumns]=\"true\" columnResizeMode=\"expand\" appendTo=\"body\" [value]=\"gridData\"\r\n    [columns]=\"selectedColumns\" [dataKey]=\"key\" [scrollHeight]=\"scrollHeight\" [styleClass]=\"'p-datatable-sm p-datatable-gridlines' + (stripedRows ? ' p-datatable-striped' : '')\"\r\n    (selectionChange)=\"selectionChange($event)\" #editableTable [totalRecords]=\"gridData.length\"\r\n    [globalFilterFields]=\"globalFilterFields\" [rowTrackBy]=\"rowTrackBy\" [tableStyle]=\"tableStyle\">\r\n\r\n    <ng-template pTemplate=\"caption\">\r\n      <div class=\"flex items-center gap-5 flex-row\">\r\n        <p-multiSelect [options]=\"columns\" [(ngModel)]=\"selectedColumns\"\r\n          selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" optionLabel=\"translatedHeader\"\r\n          [style]=\"{'min-width': '180px'}\" placeholder=\"{{ 'choose_columns' | localize }}\">\r\n          <ng-template let-option pTemplate=\"item\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <span>{{ option.header | localize }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </p-multiSelect>\r\n\r\n        <div *ngIf=\"showGlobalSearch\" class=\"flex items-center gap-1 w-8\">\r\n          <div presentationDesignerBase=\"global_search\" class=\"p-inputgroup rtl-mode h-2rem no-pad\">\r\n            <input class=\"\" type=\"text\" [(ngModel)]=\"searchValue\" pInputText class=\"border-round-lg\"\r\n              [placeholder]=\"'shared_edittable_search_placeholder' | localize\" (keydown.enter)=\"applyGlobalSearch()\">\r\n          </div>\r\n          <div presentationDesignerBase=\"search_button\">\r\n            <Tsi-Button styleClass=\"p-button-icon-only\" type=\"button\" icon=\"pi pi-search\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_search\"\r\n              (onClick)=\"applyGlobalSearch()\" />\r\n          </div>\r\n        </div>\r\n      </div> \r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n\r\n      <tr>\r\n        <ng-container *ngIf=\"selectionMode != multipleGridSelectionMode\">\r\n          <th pResizableColumn pFrozenColumn style=\"min-width:2rem; left: 1rem !important; width:2rem !important;\"></th>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n          <th pResizableColumn pFrozenColumn style=\"min-width:2rem; left: 1rem !important; width:2rem !important;\">\r\n            <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n          </th>\r\n        </ng-container>\r\n        \r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n\r\n        <!-- <th pResizableColumn pFrozenColumn *ngIf=\"showEditButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th> -->\r\n        \r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showDuplicateButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showConsultButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showDeleteButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n\r\n        <th pResizableColumn pFrozenColumn [frozen]=\"col.isFrozen\" [style]=\"col.style\" [ngStyle]=\"getColumnSizeStyle(col)\" scope=\"col\"\r\n          [attr.data-field]=\"col.field\"\r\n          [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n          style=\"min-width:3rem;\" pSortableColumn=\"{{col.field}}\" *ngFor=\"let col of columns\"\r\n          pTooltip=\"{{col.toolTipText | localize }}\" tooltipPosition=\"top\" pReorderableColumn>{{ col.header | localize\r\n          }}\r\n          <p-sortIcon field=\"{{col.field}}\"></p-sortIcon>\r\n          <Tsi-Bubble-Info [infoText]=\"col.infoText | localize\"></Tsi-Bubble-Info>\r\n        </th>\r\n        <th style=\"min-width:3rem\" *ngIf=\"showRowSummary\" scope=\"col\">{{'RowSummary' | localize}}</th>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"body\" let-item let-editing=\"editing\" let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n      \r\n      <tr [pEditableRow]=\"item\"\r\n        *ngIf=\"selectionMode == multipleGridSelectionMode || selectionMode == undefined; else selectionModeBlock\"\r\n        (focusOut)=\"onFocusOutRow(item)\">\r\n        \r\n        <td pFrozenColumn style=\"text-align: center;\">\r\n          <p-tableCheckbox [value]=\"item\" ></p-tableCheckbox>\r\n        </td>\r\n\r\n        <!-- <td pFrozenColumn style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1\"> -->\r\n\r\n\r\n        <!-- <td pFrozenColumn style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n        </td> -->\r\n\r\n        <!-- <td pFrozenColumn *ngIf=\"showEditButton\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n          <div class=\"flex align-items-center justify-content-center\">\r\n            <button *ngIf=\"!editing\" pButton pRipple type=\"button\" pInitEditableRow icon=\"pi pi-pencil\"\r\n              class=\"p-button-rounded p-button-text\">\r\n            </button>\r\n            <button *ngIf=\"editing\" pButton pRipple type=\"button\" pSaveEditableRow icon=\"pi pi-check\"\r\n              class=\"p-button-rounded p-button-text p-button-success -ml-1\">\r\n            </button>\r\n            <button *ngIf=\"editing\" pButton pRipple type=\"button\" pCancelEditableRow icon=\"pi pi-times\"\r\n              class=\"p-button-rounded p-button-text p-button-danger -ml-2\">\r\n            </button>\r\n          </div>\r\n        </td> -->\r\n        <td pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\" style=\"left: 1rem !important; width:3rem !important;\"></td>\r\n\r\n        <td pFrozenColumn *ngIf=\"showDuplicateButton\" style=\"left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1\">\r\n          <div class=\"p-0\">\r\n            <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-copy\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_dupliquer\"\r\n              styleClass=\"p-button-rounded p-button-text p-button-info\" (click)=\"duplicateRow(item)\"></Tsi-Button>\r\n          </div>\r\n        </td>\r\n\r\n        <td pFrozenColumn *ngIf=\"showConsultButton\" style=\"left: -1rem !important; width:3rem !important;\"\r\n          class=\"p-1 btn-consult-style\">\r\n          <div class=\"p-0\">\r\n            <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-eye\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_consulter\"\r\n              styleClass=\"p-button-rounded p-button-text p-button-secondary\" (click)=\"consult(item)\"></Tsi-Button>\r\n          </div>\r\n        </td>\r\n\r\n        <td pFrozenColumn *ngIf=\"showDeleteButton\"\r\n          style=\"left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1 btn-delete-style\">\r\n          <div class=\"p-0\">\r\n            <Tsi-Button [disabled]=\"isDeleteButtonDisabled(item)\" type=\"button\" icon=\"p-button-icon pi pi-trash\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_supprimer\"\r\n              styleClass=\"p-element p-button-rounded p-button-text p-button-danger p-button p-component p-button-icon-only\"\r\n              (click)=\"delete(item)\"></Tsi-Button>\r\n          </div>\r\n        </td>\r\n\r\n\r\n        <td class=\"ui-resizable-column\" pFrozenColumn [frozen]=\"col.isFrozen\" *ngFor=\"let col of columns\"\r\n          [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n          [ngStyle]=\"getBodyColumnStyle(col)\">\r\n          \r\n          \r\n          <div *ngIf=\"col.displayOnly || disabled; else ordinaryBloc\">\r\n\r\n                <!-- Tsi-Search-Combo -->\r\n                <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteOutputBlock\">\r\n                  <Tsi-Search-Combo [disabled]=\"true\" [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                    [businessClass]=\"col.businessClass\" [currentRowItem]=\"item\" [(bind)]=\"item[col.field]\"\r\n                    id-field=\"{{col.idField}}\" [listSourceUrl]=\"col.listSourceUrl\" label-field=\"{{col.labelField}}\"\r\n                    [isFiltered]=\"col.isFiltered\" [datasource]=\"col.datasource\"\r\n                    [showSearchButton]=\"col.showSearchButton ?? true\" [showAddButton]=\"col.showAddButton ?? true\"\r\n                    [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                    [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                    [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                    (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                    [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n                </div>\r\n\r\n                <!-- Tsi-Currency-Societe-Display -->\r\n                <ng-template #currencySocieteOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherOutputBlock\">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Currency-Other-Display -->\r\n                <ng-template #currencyOtherOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerOutputBlock\">\r\n                    <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Other-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Date-Display -->\r\n                <ng-template #datePickerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxOutputBlock\">\r\n                    <Tsi-Date-Display [showTime]=\"col.showTime\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Date-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-CheckBox-Display -->\r\n                <ng-template #checkBoxOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalOutputBlock\">\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-Display -->\r\n                <ng-template #decimalOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerOutputBlock\">\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-Display -->\r\n                <ng-template #integerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateOutputBlock\">\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-Display -->\r\n                <ng-template #rateOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeOutputBlock\">\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                <!-- Tsi-Time-Display -->\r\n                <ng-template #timeOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.TIME; else formulaOutputBlock\">\r\n                    <tsi-time-display [inputData]=\"item[col.field]\"></tsi-time-display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Formula-Display -->\r\n                <ng-template #formulaOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextOutputBlock\">\r\n                    <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\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>\r\n                      {{item[col.field]}}\r\n                    </span>\r\n                  </ng-container>\r\n                </ng-template>\r\n          </div>\r\n\r\n          <ng-template #ordinaryBloc>\r\n\r\n            <!-- Tsi-Search-Combo -->\r\n            <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteInputBlock\">\r\n              <Tsi-Search-Combo [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                [businessClass]=\"col.businessClass\" [listSourceUrl]=\"col.listSourceUrl\" [(bind)]=\"item[col.field]\"\r\n                id-field=\"{{col.idField}}\" label-field=\"{{col.labelField}}\" [isFiltered]=\"col.isFiltered\"\r\n                [currentRowItem]=\"item\" (bindChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                [datasource]=\"col.datasource\" [showSearchButton]=\"col.showSearchButton ?? true\"\r\n                [showAddButton]=\"col.showAddButton ?? true\" [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n            </div>\r\n\r\n            <!-- Tsi-Currency-Societe-Input -->\r\n            <ng-template #currencySocieteInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherInputBlock\">\r\n                <Tsi-Currency-Societe-Input [inputName]=\"col.inputName\" [disabled]=\"col.disabled\" [inputId]=\"col.field\"\r\n                  [(inputField)]=\"item[col.field]\" (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Currency-Societe-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Currency-Other-Input -->\r\n            <ng-template #currencyOtherInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerInputBlock\">\r\n                <Tsi-Currency-Other-Input [inputName]=\"col.inputName\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\" [inputId]=\"col.field\"\r\n                  [(inputField)]=\"item[col.field]\" (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                  [currency]=\"col.currencyOtherCode\" [disabled]=\"col.disabled\">\r\n                </Tsi-Currency-Other-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Date-Picker -->\r\n            <ng-template #datePickerInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxInputBlock\">\r\n                <Tsi-Date-Picker [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [showTime]=\"col.showTime\"\r\n                  [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Date-Picker>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-CheckBox -->\r\n            <ng-template #checkBoxInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalInputBlock\">\r\n                <Tsi-CheckBox [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\" \r\n                  [isBinary]=\"col.isBinary ?? false\">\r\n                </Tsi-CheckBox>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Decimal-Input -->\r\n            <ng-template #decimalInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerInputBlock\">\r\n                <Tsi-Decimal-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [numOfDecimal]=\"col.numOfDecimal\"\r\n                  [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Decimal-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Integer -->\r\n            <ng-template #integerInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateInputBlock\">\r\n                <Tsi-Integer [inputName]=\"col.inputName\" [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                  [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\">\r\n                </Tsi-Integer>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Rate-Input -->\r\n            <ng-template #rateInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeInputBloc\">\r\n                <Tsi-Rate-Input [inputName]=\"col.inputName\" [numOfDecimal]=\"col.numOfDecimal\" [inputId]=\"col.field\"\r\n                  [(inputField)]=\"item[col.field]\" (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                  [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Rate-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Time-picker bloc -->\r\n            <ng-template #timeInputBloc>\r\n              <ng-container *ngIf=\"col.type == inputTypes.TIME; else formulaInputBlock\">\r\n                <tsi-time-picker (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [inputName]=\"col.inputName\"\r\n                  [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\" [disabled]=\"col.disabled\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </tsi-time-picker>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <ng-template #formulaInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextInputBlock\">\r\n                <!--<Tsi-Bubble-Info\r\n                  [infoText]=\"['formula_explication',\r\n                  ]\"></Tsi-Bubble-Info> -->\r\n                <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Text-Box -->\r\n            <ng-template #defaultTextInputBlock>\r\n              <ng-container>\r\n                <Tsi-Text-Box [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\" (keydown)=\"handleKeydown($event)\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                  [inputName]=\"col.inputName\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Text-Box>\r\n              \r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-template>\r\n\r\n        </td>\r\n\r\n        <td *ngIf=\"showRowSummary\" class=\"font-bold\">\r\n          {{rowSummary(item)}}\r\n        </td>\r\n      </tr>\r\n\r\n      <ng-template #selectionModeBlock>\r\n        <ng-container>\r\n          <tr [pEditableRow]=\"item\" [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"rowIndex\"\r\n            (focusOut)=\"onFocusOutRow(item)\">\r\n\r\n       <!-- <td pFrozenColumn style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1\"> -->\r\n\r\n            <td pFrozenColumn style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n              </td>\r\n\r\n            <!-- <td *ngIf=\"selectionMode == multipleGridSelectionMode\" style=\"width: 2rem;\">\r\n              <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </td> -->\r\n\r\n            <!-- <td pFrozenColumn *ngIf=\"showEditButton\" style=\"min-width:3rem;left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n              <div class=\"flex align-items-center justify-content-center\">\r\n                <button *ngIf=\"!editing\" pButton pRipple type=\"button\" pInitEditableRow icon=\"pi pi-pencil\"\r\n                  class=\"p-button-rounded p-button-text\">\r\n                </button>\r\n                <button *ngIf=\"editing\" pButton pRipple type=\"button\" pSaveEditableRow icon=\"pi pi-check\"\r\n                  class=\"p-button-rounded p-button-text p-button-success -ml-1\">\r\n                </button>\r\n                <button *ngIf=\"editing\" pButton pRipple type=\"button\" pCancelEditableRow icon=\"pi pi-times\"\r\n                  class=\"p-button-rounded p-button-text p-button-danger -ml-2\">\r\n                </button>\r\n              </div>\r\n            </td> -->\r\n            \r\n            <td pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\" style=\"left: 1rem !important; width:3rem !important;\">\r\n            </td>\r\n            \r\n            <td pFrozenColumn pResizableColumn *ngIf=\"showDuplicateButton\"\r\n              style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n              <div class=\"p-0\">\r\n                <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-copy\"\r\n                  [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_dupliquer\"\r\n                  styleClass=\"p-button-rounded p-button-text p-button-info\" (click)=\"duplicateRow(item)\"></Tsi-Button>\r\n              </div>\r\n            </td>\r\n\r\n            <td pFrozenColumn pResizableColumn *ngIf=\"showConsultButton\"\r\n              style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1 btn-consult-style\">\r\n              <div class=\"p-0\">\r\n                <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-eye\"\r\n                  [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_consulter\"\r\n                  styleClass=\"p-button-rounded p-button-text p-button-secondary\" (click)=\"consult(item)\"></Tsi-Button>\r\n              </div>\r\n            </td>\r\n\r\n            <td pFrozenColumn pResizableColumn *ngIf=\"showDeleteButton\" style=\"left: 1rem !important; width:3rem !important;\"\r\n              class=\"p-1 btn-delete-style\">\r\n              <div class=\"p-0\">\r\n                <Tsi-Button type=\"button\" icon=\"p-button-icon pi pi-trash\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n                  tooltipText=\"shared_edittable_supprimer\"\r\n                  styleClass=\"p-element p-button-rounded p-button-text p-button-danger p-button p-component p-button-icon-only\"\r\n                  (click)=\"delete(item)\"></Tsi-Button>\r\n              </div>\r\n            </td>\r\n            \r\n            <td class=\"ui-resizable-column\" pFrozenColumn [frozen]=\"col.isFrozen\" *ngFor=\"let col of columns\"\r\n              [class.tsi-col-wrap]=\"shouldWrapColumn(col)\" [ngStyle]=\"getBodyColumnStyle(col)\">\r\n\r\n              <div *ngIf=\"col.displayOnly || disabled; else ordinaryBloc\">\r\n                <!-- Tsi-Search-Combo -->\r\n                <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteOutputBlock\">\r\n                  <Tsi-Search-Combo [disabled]=\"true\" [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                    [businessClass]=\"col.businessClass\" [currentRowItem]=\"item\" [(bind)]=\"item[col.field]\"\r\n                    id-field=\"{{col.idField}}\" [listSourceUrl]=\"col.listSourceUrl\" label-field=\"{{col.labelField}}\"\r\n                    [isFiltered]=\"col.isFiltered\" [datasource]=\"col.datasource\"\r\n                    [showSearchButton]=\"col.showSearchButton ?? true\" [showAddButton]=\"col.showAddButton ?? true\"\r\n                    [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                    [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                    [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                    (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                    [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n                </div>\r\n\r\n                <!-- Tsi-Currency-Societe-Display -->\r\n                <ng-template #currencySocieteOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherOutputBlock\">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Currency-Other-Display -->\r\n                <ng-template #currencyOtherOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerOutputBlock\">\r\n                    <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Other-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Date-Display -->\r\n                <ng-template #datePickerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxOutputBlock\">\r\n                    <Tsi-Date-Display [showTime]=\"col.showTime\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Date-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-CheckBox-Display -->\r\n                <ng-template #checkBoxOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalOutputBlock\">\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-Display -->\r\n                <ng-template #decimalOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerOutputBlock\">\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-Display -->\r\n                <ng-template #integerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateOutputBlock\">\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-Display -->\r\n                <ng-template #rateOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeOutputBlock\">\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                <!-- Tsi-Time-Display -->\r\n                <ng-template #timeOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.TIME; else formulaOutputBlock\">\r\n                    <tsi-time-display [inputData]=\"item[col.field]\"></tsi-time-display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Formula-Display -->\r\n                <ng-template #formulaOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextOutputBlock\">\r\n                    <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\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>\r\n                      {{item[col.field]}}\r\n                    </span>\r\n                  </ng-container>\r\n                </ng-template>\r\n              </div>\r\n              \r\n              <ng-template #ordinaryBloc>\r\n                <!-- Tsi-Search-Combo -->\r\n                <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteInputBlock\">\r\n                  <Tsi-Search-Combo [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                    [listSourceUrl]=\"col.listSourceUrl\" [(bind)]=\"item[col.field]\" id-field=\"{{col.idField}}\"\r\n                    label-field=\"{{col.labelField}}\" [isFiltered]=\"col.isFiltered\" [businessClass]=\"col.businessClass\"\r\n                    (bindChange)=\"onCellValueChanged(col, $event, item)\" [currentRowItem]=\"item\"\r\n                    [datasource]=\"col.datasource\" [disabled]=\"col.disabled\"\r\n                    [showSearchButton]=\"col.showSearchButton ?? true\" [showAddButton]=\"col.showAddButton ?? true\"\r\n                    [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                    [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                    [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                    (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                    [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n                </div>\r\n\r\n                <!-- Tsi-Currency-Societe-Input -->\r\n                <ng-template #currencySocieteInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherInputBlock\">\r\n                    <Tsi-Currency-Societe-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Currency-Societe-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Currency-Other-Input -->\r\n                <ng-template #currencyOtherInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerInputBlock\">\r\n                    <Tsi-Currency-Other-Input [disabled]=\"col.disabled\" [inputName]=\"col.inputName\"\r\n                      [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\" [currency]=\"col.currencyOtherCode\">\r\n                    </Tsi-Currency-Other-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Date-Picker -->\r\n                <ng-template #datePickerInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxInputBlock\">\r\n                    <Tsi-Date-Picker [showTime]=\"col.showTime\" [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Date-Picker>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-CheckBox -->\r\n                <ng-template #checkBoxInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalInputBlock\">\r\n                    <Tsi-CheckBox [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                      [isBinary]=\"col.isBinary ?? false\">\r\n                    </Tsi-CheckBox>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Decimal-Input -->\r\n                <ng-template #decimalInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerInputBlock\">\r\n                    <Tsi-Decimal-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                      [(inputField)]=\"item[col.field]\" [numOfDecimal]=\"col.numOfDecimal\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\">\r\n                    </Tsi-Decimal-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Integer -->\r\n                <ng-template #integerInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateInputBlock\">\r\n                    <Tsi-Integer [class]=\"'max-w-4rem'\" [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\">\r\n                    </Tsi-Integer>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Rate-Input -->\r\n                <ng-template #rateInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeInputBloc\">\r\n                    <Tsi-Rate-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Rate-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Time-Picker -->\r\n                <ng-template #timeInputBloc>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.TIME else formulaInputBlock\">\r\n                    <tsi-time-picker (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                      [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                      [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </tsi-time-picker>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <ng-template #formulaInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextInputBlock\">\r\n                    <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Text-Box -->\r\n                <ng-template #defaultTextInputBlock>\r\n                  <ng-container>\r\n                    <Tsi-Text-Box [inputId]=\"col.field\" [disabled]=\"col.disabled\"\r\n                      [(inputField)]=\"item[col.field]\" (keydown)=\"handleKeydown($event)\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [inputName]=\"col.inputName\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Text-Box>\r\n                  </ng-container>\r\n                </ng-template>\r\n              </ng-template>\r\n\r\n            </td>\r\n            <td *ngIf=\"showRowSummary\" class=\"font-bold\">\r\n              {{rowSummary(item)}}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n    </ng-template>\r\n\r\n    <ng-template *ngIf=\"showHaveSumary\" pTemplate=\"footer\" let-columns>\r\n\r\n      <tr class=\"tfooter\">\r\n        <!-- <td pFrozenColumn scope=\"col\" style=\"left: 1rem !important; width:3rem !important;\"></td> -->\r\n        <td *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n          style=\"min-width:2rem; left: 1rem !important; width:2rem !important;\">\r\n          <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n        </td>\r\n        <td pFrozenColumn scope=\"col\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\">Total</td>\r\n        <td pFrozenColumn *ngIf=\"showDeleteButton\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1\">\r\n        <td pFrozenColumn style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n          <!--<td pFrozenColumn *ngIf=\"showEditButton\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1\"> -->\r\n        <td pFrozenColumn *ngIf=\"showDuplicateButton\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n        </td>\r\n        <td pFrozenColumn *ngIf=\"showConsultButton\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n        </td>\r\n        <td pFrozenColumn [frozen]=\"col.isFrozen\" [style]=\"col.style\" [ngStyle]=\"getColumnSizeStyle(col)\" scope=\"col\" *ngFor=\"let col of columns\"\r\n          [class.tsi-col-wrap]=\"shouldWrapColumn(col)\">\r\n          <div *ngIf=\"col.haveSummary\">\r\n            <!-- Tsi-Currency-Societe-Display -->\r\n            <div *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherOutputBlock\">\r\n              <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col)\">\r\n              </Tsi-Currency-Societe-Display>\r\n            </div>\r\n\r\n            <!-- Tsi-Currency-Other-Display -->\r\n            <ng-template #currencyOtherOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else decimalOutputBlock\">\r\n                <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col)\">\r\n                </Tsi-Currency-Other-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Decimal-Display -->\r\n            <ng-template #decimalOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerOutputBlock\">\r\n                <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col)\"\r\n                  [numOfDecimal]=\"col.numOfDecimal\">\r\n                </Tsi-Decimal-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Integer-Display -->\r\n            <ng-template #integerOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateOutputBlock\">\r\n                <Tsi-Integer-Display [inputData]=\"getSummary(col)\">\r\n                </Tsi-Integer-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Rate-Display -->\r\n            <ng-template #rateOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else defaultTextOutputBlock\">\r\n                <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"getSummary(col)\">\r\n                </Tsi-Rate-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Default -->\r\n            <ng-template #defaultTextOutputBlock>\r\n              <ng-container>\r\n                <span>\r\n                  {{getSummary(col)}}\r\n                </span>\r\n              </ng-container>\r\n            </ng-template>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"summary\">\r\n      <tr>\r\n        {{'TotalRecordsCount' | localize }} {{gridData.length}}\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  <div>\r\n    <Tsi-Button *ngIf=\"showAddButton\" style=\"height: 20px;width: 20px;\" icon=\"p-button-icon pi pi-plus\" type=\"button\"\r\n      [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_ajouter\"\r\n      styleClass=\"p-element p-button-sm p-button-success p-button-text p-button p-component p-button-icon-only ng-star-inserted\"\r\n      (click)=\"addRow()\"></Tsi-Button>\r\n  </div>\r\n</div>", styles: [".tfooter{position:sticky;bottom:0;width:100%;z-index:10}.tsi-col-wrap,.tsi-col-wrap>span,.tsi-col-wrap>div{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}::ng-deep .p-datatable .p-datatable-tfoot>tr>td{padding:1.8px!important}.p-button.p-button-icon-only.p-button-rounded{border-radius:50%}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.grid-cell{overflow:visible!important}.p-datatable .p-cell-editing{overflow:visible!important;position:relative;z-index:1}td,.p-editable-column{overflow:visible!important}.p-editable-column input{width:100%}::ng-deep .p-tabview .p-tabview-panels{overflow:visible!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { 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.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { 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: "directive", type: i6.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i11$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "selectOnFocus", "resetFilterOnHide", "reloadDataSource", "isFiltered", "selectedLabel", "maxWidth", "businessClass", "searchDebounceTime", "comboType", "statusMetadata", "currentRowItem", "datasource", "bind", "maxSelectedLabels", "tooltipMaxDisplayedItems", "bindMode", "showSearchButton", "showAddButton", "showConsultButton", "showUpdateButton"], outputs: ["bindChange", "datasource-loaded", "init", "isLoaded", "selectedLabelChange", "onClick", "onSearchButtonClick", "selectionChange"] }, { kind: "component", type: TsiCheckboxComponent, selector: "Tsi-CheckBox", inputs: ["class", "isBinary", "checked", "tooltipText", "tooltipPosition"], outputs: ["inputFieldChange", "checkedChange"] }, { kind: "component", type: TsiCurrencyOtherInputComponent, selector: "Tsi-Currency-Other-Input", inputs: ["currency", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiCurrencySocieteInputComponent, selector: "Tsi-Currency-Societe-Input", inputs: ["class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiDatePickerComponent, selector: "Tsi-Date-Picker", inputs: ["required", "showTime", "showButtonBar"], 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: TsiTextBoxComponent, selector: "Tsi-Text-Box", inputs: ["textBoxType", "autocomplete"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiFormulaBoxComponent, selector: "Tsi-Formula-Box", inputs: ["value", "endPoint"], outputs: ["valueChange"] }, { kind: "component", type: TsiTimePickerComponent, selector: "tsi-time-picker", outputs: ["inputFieldChange"] }, { kind: "component", type: TsiCheckboxDisplayComponent, selector: "Tsi-Checkbox-Display", inputs: ["inputData"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["currency", "inputData"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDateDisplayComponent, selector: "Tsi-Date-Display", inputs: ["inputData", "showTime"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: TsiBubbleInfoComponent, selector: "Tsi-Bubble-Info", inputs: ["infoText"] }, { 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: TsiTimeDisplayComponent, selector: "tsi-time-display", inputs: ["inputData"] }, { 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: EditableGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Tsi-Generic-Editable-Grid', providers: [GenericValidationStateService], template: "<div class=\"card\">\r\n  <p-table #dt [selectionMode]=\"selectionMode\" [(selection)]=\"selectedItems\" editMode=\"row\"\r\n    [paginator]=\"gridData.length > pageSize\" [rowsPerPageOptions]=\"rowPerPage\" [rows]=\"pageSize\"\r\n    (onRowSelect)=\"onRowSelected($event)\" (onRowUnselect)=\"onRowUnselect($event)\" [scrollable]=\"true\"\r\n    (onColResize)=\"onColResize($event)\"\r\n    [resizableColumns]=\"true\" columnResizeMode=\"expand\" appendTo=\"body\" [value]=\"gridData\"\r\n    [columns]=\"selectedColumns\" [dataKey]=\"key\" [scrollHeight]=\"scrollHeight\" [styleClass]=\"'p-datatable-sm p-datatable-gridlines' + (stripedRows ? ' p-datatable-striped' : '')\"\r\n    (selectionChange)=\"selectionChange($event)\" #editableTable [totalRecords]=\"gridData.length\"\r\n    [globalFilterFields]=\"globalFilterFields\" [rowTrackBy]=\"rowTrackBy\" [tableStyle]=\"tableStyle\">\r\n\r\n    <ng-template pTemplate=\"caption\">\r\n      <div class=\"flex items-center gap-5 flex-row\">\r\n        <p-multiSelect [options]=\"columns\" [(ngModel)]=\"selectedColumns\"\r\n          selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" optionLabel=\"translatedHeader\"\r\n          [style]=\"{'min-width': '180px'}\" placeholder=\"{{ 'choose_columns' | localize }}\">\r\n          <ng-template let-option pTemplate=\"item\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <span>{{ option.header | localize }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </p-multiSelect>\r\n\r\n        <div *ngIf=\"showGlobalSearch\" class=\"flex items-center gap-1 w-8\">\r\n          <div presentationDesignerBase=\"global_search\" class=\"p-inputgroup rtl-mode h-2rem no-pad\">\r\n            <input class=\"\" type=\"text\" [(ngModel)]=\"searchValue\" pInputText class=\"border-round-lg\"\r\n              [placeholder]=\"'shared_edittable_search_placeholder' | localize\" (keydown.enter)=\"applyGlobalSearch()\">\r\n          </div>\r\n          <div presentationDesignerBase=\"search_button\">\r\n            <Tsi-Button styleClass=\"p-button-icon-only\" type=\"button\" icon=\"pi pi-search\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_search\"\r\n              (onClick)=\"applyGlobalSearch()\" />\r\n          </div>\r\n        </div>\r\n      </div> \r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n\r\n      <tr>\r\n        <ng-container *ngIf=\"selectionMode != multipleGridSelectionMode\">\r\n          <th pResizableColumn pFrozenColumn style=\"min-width:2rem; left: 1rem !important; width:2rem !important;\"></th>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n          <th pResizableColumn pFrozenColumn style=\"min-width:2rem; left: 1rem !important; width:2rem !important;\">\r\n            <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n          </th>\r\n        </ng-container>\r\n        \r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n\r\n        <!-- <th pResizableColumn pFrozenColumn *ngIf=\"showEditButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th> -->\r\n        \r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showDuplicateButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showConsultButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showDeleteButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n\r\n        <th pResizableColumn pFrozenColumn [frozen]=\"col.isFrozen\" [style]=\"col.style\" [ngStyle]=\"getColumnSizeStyle(col)\" scope=\"col\"\r\n          [attr.data-field]=\"col.field\"\r\n          [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n          style=\"min-width:3rem;\" pSortableColumn=\"{{col.field}}\" *ngFor=\"let col of columns\"\r\n          pTooltip=\"{{col.toolTipText | localize }}\" tooltipPosition=\"top\" pReorderableColumn>{{ col.header | localize\r\n          }}\r\n          <p-sortIcon field=\"{{col.field}}\"></p-sortIcon>\r\n          <Tsi-Bubble-Info [infoText]=\"col.infoText | localize\"></Tsi-Bubble-Info>\r\n        </th>\r\n        <th style=\"min-width:3rem\" *ngIf=\"showRowSummary\" scope=\"col\">{{'RowSummary' | localize}}</th>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"body\" let-item let-editing=\"editing\" let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n      \r\n      <tr [pEditableRow]=\"item\"\r\n        *ngIf=\"selectionMode == multipleGridSelectionMode || selectionMode == undefined; else selectionModeBlock\"\r\n        (focusOut)=\"onFocusOutRow(item)\">\r\n        \r\n        <td style=\"text-align: center;\">\r\n          <p-tableCheckbox [value]=\"item\" ></p-tableCheckbox>\r\n        </td>\r\n\r\n        <!-- <td pFrozenColumn style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1\"> -->\r\n\r\n\r\n        <!-- <td pFrozenColumn style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n        </td> -->\r\n\r\n        <!-- <td pFrozenColumn *ngIf=\"showEditButton\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n          <div class=\"flex align-items-center justify-content-center\">\r\n            <button *ngIf=\"!editing\" pButton pRipple type=\"button\" pInitEditableRow icon=\"pi pi-pencil\"\r\n              class=\"p-button-rounded p-button-text\">\r\n            </button>\r\n            <button *ngIf=\"editing\" pButton pRipple type=\"button\" pSaveEditableRow icon=\"pi pi-check\"\r\n              class=\"p-button-rounded p-button-text p-button-success -ml-1\">\r\n            </button>\r\n            <button *ngIf=\"editing\" pButton pRipple type=\"button\" pCancelEditableRow icon=\"pi pi-times\"\r\n              class=\"p-button-rounded p-button-text p-button-danger -ml-2\">\r\n            </button>\r\n          </div>\r\n        </td> -->\r\n        <td pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\" style=\"left: 1rem !important; width:3rem !important;\"></td>\r\n\r\n        <td pFrozenColumn *ngIf=\"showDuplicateButton\" style=\"left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1\">\r\n          <div class=\"p-0\">\r\n            <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-copy\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_dupliquer\"\r\n              styleClass=\"p-button-rounded p-button-text p-button-info\" (click)=\"duplicateRow(item)\"></Tsi-Button>\r\n          </div>\r\n        </td>\r\n\r\n        <td pFrozenColumn *ngIf=\"showConsultButton\" style=\"left: -1rem !important; width:3rem !important;\"\r\n          class=\"p-1 btn-consult-style\">\r\n          <div class=\"p-0\">\r\n            <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-eye\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_consulter\"\r\n              styleClass=\"p-button-rounded p-button-text p-button-secondary\" (click)=\"consult(item)\"></Tsi-Button>\r\n          </div>\r\n        </td>\r\n\r\n        <td pFrozenColumn *ngIf=\"showDeleteButton\"\r\n          style=\"left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1 btn-delete-style\">\r\n          <div class=\"p-0\">\r\n            <Tsi-Button [disabled]=\"isDeleteButtonDisabled(item)\" type=\"button\" icon=\"p-button-icon pi pi-trash\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_supprimer\"\r\n              styleClass=\"p-element p-button-rounded p-button-text p-button-danger p-button p-component p-button-icon-only\"\r\n              (click)=\"delete(item)\"></Tsi-Button>\r\n          </div>\r\n        </td>\r\n\r\n\r\n        <td class=\"ui-resizable-column\" pFrozenColumn [frozen]=\"col.isFrozen\" *ngFor=\"let col of columns\"\r\n          [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n          [ngStyle]=\"getBodyColumnStyle(col)\">\r\n          \r\n          \r\n          <div *ngIf=\"col.displayOnly || disabled; else ordinaryBloc\">\r\n\r\n                <!-- Tsi-Search-Combo -->\r\n                <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteOutputBlock\">\r\n                  <Tsi-Search-Combo [disabled]=\"true\" [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                    [businessClass]=\"col.businessClass\" [currentRowItem]=\"item\" [(bind)]=\"item[col.field]\"\r\n                    id-field=\"{{col.idField}}\" [listSourceUrl]=\"col.listSourceUrl\" label-field=\"{{col.labelField}}\"\r\n                    [isFiltered]=\"col.isFiltered\" [datasource]=\"col.datasource\"\r\n                    [showSearchButton]=\"col.showSearchButton ?? true\" [showAddButton]=\"col.showAddButton ?? true\"\r\n                    [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                    [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                    [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                    (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                    [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n                </div>\r\n\r\n                <!-- Tsi-Currency-Societe-Display -->\r\n                <ng-template #currencySocieteOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherOutputBlock\">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Currency-Other-Display -->\r\n                <ng-template #currencyOtherOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerOutputBlock\">\r\n                    <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Other-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Date-Display -->\r\n                <ng-template #datePickerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxOutputBlock\">\r\n                    <Tsi-Date-Display [showTime]=\"col.showTime\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Date-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-CheckBox-Display -->\r\n                <ng-template #checkBoxOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalOutputBlock\">\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-Display -->\r\n                <ng-template #decimalOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerOutputBlock\">\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-Display -->\r\n                <ng-template #integerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateOutputBlock\">\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-Display -->\r\n                <ng-template #rateOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeOutputBlock\">\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                <!-- Tsi-Time-Display -->\r\n                <ng-template #timeOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.TIME; else formulaOutputBlock\">\r\n                    <tsi-time-display [inputData]=\"item[col.field]\"></tsi-time-display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Formula-Display -->\r\n                <ng-template #formulaOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextOutputBlock\">\r\n                    <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\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>\r\n                      {{item[col.field]}}\r\n                    </span>\r\n                  </ng-container>\r\n                </ng-template>\r\n          </div>\r\n\r\n          <ng-template #ordinaryBloc>\r\n\r\n            <!-- Tsi-Search-Combo -->\r\n            <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteInputBlock\">\r\n              <Tsi-Search-Combo [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                [businessClass]=\"col.businessClass\" [listSourceUrl]=\"col.listSourceUrl\" [(bind)]=\"item[col.field]\"\r\n                id-field=\"{{col.idField}}\" label-field=\"{{col.labelField}}\" [isFiltered]=\"col.isFiltered\"\r\n                [currentRowItem]=\"item\" (bindChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                [datasource]=\"col.datasource\" [showSearchButton]=\"col.showSearchButton ?? true\"\r\n                [showAddButton]=\"col.showAddButton ?? true\" [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n            </div>\r\n\r\n            <!-- Tsi-Currency-Societe-Input -->\r\n            <ng-template #currencySocieteInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherInputBlock\">\r\n                <Tsi-Currency-Societe-Input [inputName]=\"col.inputName\" [disabled]=\"col.disabled\" [inputId]=\"col.field\"\r\n                  [(inputField)]=\"item[col.field]\" (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Currency-Societe-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Currency-Other-Input -->\r\n            <ng-template #currencyOtherInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerInputBlock\">\r\n                <Tsi-Currency-Other-Input [inputName]=\"col.inputName\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\" [inputId]=\"col.field\"\r\n                  [(inputField)]=\"item[col.field]\" (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                  [currency]=\"col.currencyOtherCode\" [disabled]=\"col.disabled\">\r\n                </Tsi-Currency-Other-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Date-Picker -->\r\n            <ng-template #datePickerInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxInputBlock\">\r\n                <Tsi-Date-Picker [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [showTime]=\"col.showTime\"\r\n                  [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Date-Picker>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-CheckBox -->\r\n            <ng-template #checkBoxInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalInputBlock\">\r\n                <Tsi-CheckBox [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\" \r\n                  [isBinary]=\"col.isBinary ?? false\">\r\n                </Tsi-CheckBox>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Decimal-Input -->\r\n            <ng-template #decimalInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerInputBlock\">\r\n                <Tsi-Decimal-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [numOfDecimal]=\"col.numOfDecimal\"\r\n                  [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Decimal-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Integer -->\r\n            <ng-template #integerInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateInputBlock\">\r\n                <Tsi-Integer [inputName]=\"col.inputName\" [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                  [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\">\r\n                </Tsi-Integer>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Rate-Input -->\r\n            <ng-template #rateInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeInputBloc\">\r\n                <Tsi-Rate-Input [inputName]=\"col.inputName\" [numOfDecimal]=\"col.numOfDecimal\" [inputId]=\"col.field\"\r\n                  [(inputField)]=\"item[col.field]\" (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                  [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Rate-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Time-picker bloc -->\r\n            <ng-template #timeInputBloc>\r\n              <ng-container *ngIf=\"col.type == inputTypes.TIME; else formulaInputBlock\">\r\n                <tsi-time-picker (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [inputName]=\"col.inputName\"\r\n                  [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\" [disabled]=\"col.disabled\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </tsi-time-picker>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <ng-template #formulaInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextInputBlock\">\r\n                <!--<Tsi-Bubble-Info\r\n                  [infoText]=\"['formula_explication',\r\n                  ]\"></Tsi-Bubble-Info> -->\r\n                <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Text-Box -->\r\n            <ng-template #defaultTextInputBlock>\r\n              <ng-container>\r\n                <Tsi-Text-Box [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\" (keydown)=\"handleKeydown($event)\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                  [inputName]=\"col.inputName\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Text-Box>\r\n              \r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-template>\r\n\r\n        </td>\r\n\r\n        <td *ngIf=\"showRowSummary\" class=\"font-bold\">\r\n          {{rowSummary(item)}}\r\n        </td>\r\n      </tr>\r\n\r\n      <ng-template #selectionModeBlock>\r\n        <ng-container>\r\n          <tr [pEditableRow]=\"item\" [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"rowIndex\"\r\n            (focusOut)=\"onFocusOutRow(item)\">\r\n\r\n       <!-- <td pFrozenColumn style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1\"> -->\r\n\r\n            <td pFrozenColumn style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n              </td>\r\n\r\n            <!-- <td *ngIf=\"selectionMode == multipleGridSelectionMode\" style=\"width: 2rem;\">\r\n              <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </td> -->\r\n\r\n            <!-- <td pFrozenColumn *ngIf=\"showEditButton\" style=\"min-width:3rem;left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n              <div class=\"flex align-items-center justify-content-center\">\r\n                <button *ngIf=\"!editing\" pButton pRipple type=\"button\" pInitEditableRow icon=\"pi pi-pencil\"\r\n                  class=\"p-button-rounded p-button-text\">\r\n                </button>\r\n                <button *ngIf=\"editing\" pButton pRipple type=\"button\" pSaveEditableRow icon=\"pi pi-check\"\r\n                  class=\"p-button-rounded p-button-text p-button-success -ml-1\">\r\n                </button>\r\n                <button *ngIf=\"editing\" pButton pRipple type=\"button\" pCancelEditableRow icon=\"pi pi-times\"\r\n                  class=\"p-button-rounded p-button-text p-button-danger -ml-2\">\r\n                </button>\r\n              </div>\r\n            </td> -->\r\n            \r\n            <td pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\" style=\"left: 1rem !important; width:3rem !important;\">\r\n            </td>\r\n            \r\n            <td pFrozenColumn pResizableColumn *ngIf=\"showDuplicateButton\"\r\n              style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n              <div class=\"p-0\">\r\n                <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-copy\"\r\n                  [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_dupliquer\"\r\n                  styleClass=\"p-button-rounded p-button-text p-button-info\" (click)=\"duplicateRow(item)\"></Tsi-Button>\r\n              </div>\r\n            </td>\r\n\r\n            <td pFrozenColumn pResizableColumn *ngIf=\"showConsultButton\"\r\n              style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1 btn-consult-style\">\r\n              <div class=\"p-0\">\r\n                <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-eye\"\r\n                  [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_consulter\"\r\n                  styleClass=\"p-button-rounded p-button-text p-button-secondary\" (click)=\"consult(item)\"></Tsi-Button>\r\n              </div>\r\n            </td>\r\n\r\n            <td pFrozenColumn pResizableColumn *ngIf=\"showDeleteButton\" style=\"left: 1rem !important; width:3rem !important;\"\r\n              class=\"p-1 btn-delete-style\">\r\n              <div class=\"p-0\">\r\n                <Tsi-Button type=\"button\" icon=\"p-button-icon pi pi-trash\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n                  tooltipText=\"shared_edittable_supprimer\"\r\n                  styleClass=\"p-element p-button-rounded p-button-text p-button-danger p-button p-component p-button-icon-only\"\r\n                  (click)=\"delete(item)\"></Tsi-Button>\r\n              </div>\r\n            </td>\r\n            \r\n            <td class=\"ui-resizable-column\" pFrozenColumn [frozen]=\"col.isFrozen\" *ngFor=\"let col of columns\"\r\n              [class.tsi-col-wrap]=\"shouldWrapColumn(col)\" [ngStyle]=\"getBodyColumnStyle(col)\">\r\n\r\n              <div *ngIf=\"col.displayOnly || disabled; else ordinaryBloc\">\r\n                <!-- Tsi-Search-Combo -->\r\n                <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteOutputBlock\">\r\n                  <Tsi-Search-Combo [disabled]=\"true\" [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                    [businessClass]=\"col.businessClass\" [currentRowItem]=\"item\" [(bind)]=\"item[col.field]\"\r\n                    id-field=\"{{col.idField}}\" [listSourceUrl]=\"col.listSourceUrl\" label-field=\"{{col.labelField}}\"\r\n                    [isFiltered]=\"col.isFiltered\" [datasource]=\"col.datasource\"\r\n                    [showSearchButton]=\"col.showSearchButton ?? true\" [showAddButton]=\"col.showAddButton ?? true\"\r\n                    [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                    [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                    [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                    (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                    [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n                </div>\r\n\r\n                <!-- Tsi-Currency-Societe-Display -->\r\n                <ng-template #currencySocieteOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherOutputBlock\">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Currency-Other-Display -->\r\n                <ng-template #currencyOtherOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerOutputBlock\">\r\n                    <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Other-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Date-Display -->\r\n                <ng-template #datePickerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxOutputBlock\">\r\n                    <Tsi-Date-Display [showTime]=\"col.showTime\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Date-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-CheckBox-Display -->\r\n                <ng-template #checkBoxOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalOutputBlock\">\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-Display -->\r\n                <ng-template #decimalOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerOutputBlock\">\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-Display -->\r\n                <ng-template #integerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateOutputBlock\">\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-Display -->\r\n                <ng-template #rateOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeOutputBlock\">\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                <!-- Tsi-Time-Display -->\r\n                <ng-template #timeOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.TIME; else formulaOutputBlock\">\r\n                    <tsi-time-display [inputData]=\"item[col.field]\"></tsi-time-display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Formula-Display -->\r\n                <ng-template #formulaOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextOutputBlock\">\r\n                    <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\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>\r\n                      {{item[col.field]}}\r\n                    </span>\r\n                  </ng-container>\r\n                </ng-template>\r\n              </div>\r\n              \r\n              <ng-template #ordinaryBloc>\r\n                <!-- Tsi-Search-Combo -->\r\n                <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteInputBlock\">\r\n                  <Tsi-Search-Combo [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                    [listSourceUrl]=\"col.listSourceUrl\" [(bind)]=\"item[col.field]\" id-field=\"{{col.idField}}\"\r\n                    label-field=\"{{col.labelField}}\" [isFiltered]=\"col.isFiltered\" [businessClass]=\"col.businessClass\"\r\n                    (bindChange)=\"onCellValueChanged(col, $event, item)\" [currentRowItem]=\"item\"\r\n                    [datasource]=\"col.datasource\" [disabled]=\"col.disabled\"\r\n                    [showSearchButton]=\"col.showSearchButton ?? true\" [showAddButton]=\"col.showAddButton ?? true\"\r\n                    [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                    [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                    [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                    (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                    [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n                </div>\r\n\r\n                <!-- Tsi-Currency-Societe-Input -->\r\n                <ng-template #currencySocieteInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherInputBlock\">\r\n                    <Tsi-Currency-Societe-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Currency-Societe-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Currency-Other-Input -->\r\n                <ng-template #currencyOtherInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerInputBlock\">\r\n                    <Tsi-Currency-Other-Input [disabled]=\"col.disabled\" [inputName]=\"col.inputName\"\r\n                      [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\" [currency]=\"col.currencyOtherCode\">\r\n                    </Tsi-Currency-Other-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Date-Picker -->\r\n                <ng-template #datePickerInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxInputBlock\">\r\n                    <Tsi-Date-Picker [showTime]=\"col.showTime\" [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Date-Picker>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-CheckBox -->\r\n                <ng-template #checkBoxInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalInputBlock\">\r\n                    <Tsi-CheckBox [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                      [isBinary]=\"col.isBinary ?? false\">\r\n                    </Tsi-CheckBox>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Decimal-Input -->\r\n                <ng-template #decimalInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerInputBlock\">\r\n                    <Tsi-Decimal-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                      [(inputField)]=\"item[col.field]\" [numOfDecimal]=\"col.numOfDecimal\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\">\r\n                    </Tsi-Decimal-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Integer -->\r\n                <ng-template #integerInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateInputBlock\">\r\n                    <Tsi-Integer [class]=\"'max-w-4rem'\" [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\">\r\n                    </Tsi-Integer>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Rate-Input -->\r\n                <ng-template #rateInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeInputBloc\">\r\n                    <Tsi-Rate-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Rate-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Time-Picker -->\r\n                <ng-template #timeInputBloc>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.TIME else formulaInputBlock\">\r\n                    <tsi-time-picker (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                      [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                      [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </tsi-time-picker>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <ng-template #formulaInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextInputBlock\">\r\n                    <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Text-Box -->\r\n                <ng-template #defaultTextInputBlock>\r\n                  <ng-container>\r\n                    <Tsi-Text-Box [inputId]=\"col.field\" [disabled]=\"col.disabled\"\r\n                      [(inputField)]=\"item[col.field]\" (keydown)=\"handleKeydown($event)\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [inputName]=\"col.inputName\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Text-Box>\r\n                  </ng-container>\r\n                </ng-template>\r\n              </ng-template>\r\n\r\n            </td>\r\n            <td *ngIf=\"showRowSummary\" class=\"font-bold\">\r\n              {{rowSummary(item)}}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n    </ng-template>\r\n\r\n    <ng-template *ngIf=\"showHaveSumary\" pTemplate=\"footer\" let-columns>\r\n\r\n      <tr class=\"tfooter\">\r\n        <!-- <td pFrozenColumn scope=\"col\" style=\"left: 1rem !important; width:3rem !important;\"></td> -->\r\n        <td *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n          style=\"min-width:2rem; left: 1rem !important; width:2rem !important;\">\r\n          <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n        </td>\r\n        <td pFrozenColumn scope=\"col\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\">Total</td>\r\n        <td pFrozenColumn *ngIf=\"showDeleteButton\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1\">\r\n        <td pFrozenColumn style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n          <!--<td pFrozenColumn *ngIf=\"showEditButton\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1\"> -->\r\n        <td pFrozenColumn *ngIf=\"showDuplicateButton\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n        </td>\r\n        <td pFrozenColumn *ngIf=\"showConsultButton\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n        </td>\r\n        <td pFrozenColumn [frozen]=\"col.isFrozen\" [style]=\"col.style\" [ngStyle]=\"getColumnSizeStyle(col)\" scope=\"col\" *ngFor=\"let col of columns\"\r\n          [class.tsi-col-wrap]=\"shouldWrapColumn(col)\">\r\n          <div *ngIf=\"col.haveSummary\">\r\n            <!-- Tsi-Currency-Societe-Display -->\r\n            <div *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherOutputBlock\">\r\n              <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col)\">\r\n              </Tsi-Currency-Societe-Display>\r\n            </div>\r\n\r\n            <!-- Tsi-Currency-Other-Display -->\r\n            <ng-template #currencyOtherOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else decimalOutputBlock\">\r\n                <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col)\">\r\n                </Tsi-Currency-Other-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Decimal-Display -->\r\n            <ng-template #decimalOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerOutputBlock\">\r\n                <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col)\"\r\n                  [numOfDecimal]=\"col.numOfDecimal\">\r\n                </Tsi-Decimal-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Integer-Display -->\r\n            <ng-template #integerOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateOutputBlock\">\r\n                <Tsi-Integer-Display [inputData]=\"getSummary(col)\">\r\n                </Tsi-Integer-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Rate-Display -->\r\n            <ng-template #rateOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else defaultTextOutputBlock\">\r\n                <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"getSummary(col)\">\r\n                </Tsi-Rate-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Default -->\r\n            <ng-template #defaultTextOutputBlock>\r\n              <ng-container>\r\n                <span>\r\n                  {{getSummary(col)}}\r\n                </span>\r\n              </ng-container>\r\n            </ng-template>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"summary\">\r\n      <tr>\r\n        {{'TotalRecordsCount' | localize }} {{gridData.length}}\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  <div>\r\n    <Tsi-Button *ngIf=\"showAddButton\" style=\"height: 20px;width: 20px;\" icon=\"p-button-icon pi pi-plus\" type=\"button\"\r\n      [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_ajouter\"\r\n      styleClass=\"p-element p-button-sm p-button-success p-button-text p-button p-component p-button-icon-only ng-star-inserted\"\r\n      (click)=\"addRow()\"></Tsi-Button>\r\n  </div>\r\n</div>", styles: [".tfooter{position:sticky;bottom:0;width:100%;z-index:10}.tsi-col-wrap,.tsi-col-wrap>span,.tsi-col-wrap>div{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}::ng-deep .p-datatable .p-datatable-tfoot>tr>td{padding:1.8px!important}.p-button.p-button-icon-only.p-button-rounded{border-radius:50%}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.grid-cell{overflow:visible!important}.p-datatable .p-cell-editing{overflow:visible!important;position:relative;z-index:1}td,.p-editable-column{overflow:visible!important}.p-editable-column input{width:100%}::ng-deep .p-tabview .p-tabview-panels{overflow:visible!important}\n"] }]
+            args: [{ selector: 'Tsi-Generic-Editable-Grid', providers: [GenericValidationStateService], template: "<div class=\"card\">\r\n  <p-table #dt [selectionMode]=\"selectionMode\" [(selection)]=\"selectedItems\" editMode=\"row\"\r\n    [paginator]=\"gridData.length > pageSize\" [rowsPerPageOptions]=\"rowPerPage\" [rows]=\"pageSize\"\r\n    (onRowSelect)=\"onRowSelected($event)\" (onRowUnselect)=\"onRowUnselect($event)\" [scrollable]=\"true\"\r\n    (onColResize)=\"onColResize($event)\"\r\n    [resizableColumns]=\"true\" columnResizeMode=\"expand\" appendTo=\"body\" [value]=\"gridData\"\r\n    [columns]=\"selectedColumns\" [dataKey]=\"key\" [scrollHeight]=\"scrollHeight\" [styleClass]=\"'p-datatable-sm p-datatable-gridlines' + (stripedRows ? ' p-datatable-striped' : '')\"\r\n    (selectionChange)=\"selectionChange($event)\" #editableTable [totalRecords]=\"gridData.length\"\r\n    [globalFilterFields]=\"globalFilterFields\" [rowTrackBy]=\"rowTrackBy\" [tableStyle]=\"tableStyle\">\r\n\r\n    <ng-template pTemplate=\"caption\">\r\n      <div class=\"flex items-center gap-5 flex-row\">\r\n        <p-multiSelect [options]=\"columns\" [(ngModel)]=\"selectedColumns\"\r\n          selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" optionLabel=\"translatedHeader\"\r\n          [style]=\"{'min-width': '180px'}\" placeholder=\"{{ 'choose_columns' | localize }}\">\r\n          <ng-template let-option pTemplate=\"item\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <span>{{ option.header | localize }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </p-multiSelect>\r\n\r\n        <div *ngIf=\"showGlobalSearch\" class=\"flex items-center gap-1 w-8\">\r\n          <div presentationDesignerBase=\"global_search\" class=\"p-inputgroup rtl-mode h-2rem no-pad\">\r\n            <input class=\"\" type=\"text\" [(ngModel)]=\"searchValue\" pInputText class=\"border-round-lg\"\r\n              [placeholder]=\"'shared_edittable_search_placeholder' | localize\" (keydown.enter)=\"applyGlobalSearch()\">\r\n          </div>\r\n          <div presentationDesignerBase=\"search_button\">\r\n            <Tsi-Button styleClass=\"p-button-icon-only\" type=\"button\" icon=\"pi pi-search\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_search\"\r\n              (onClick)=\"applyGlobalSearch()\" />\r\n          </div>\r\n        </div>\r\n      </div> \r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n\r\n      <tr>\r\n        <ng-container *ngIf=\"selectionMode != multipleGridSelectionMode\">\r\n          <th pResizableColumn pFrozenColumn style=\"min-width:2rem; left: 1rem !important; width:2rem !important;\"></th>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n          <th pResizableColumn pFrozenColumn style=\"min-width:2rem; left: 1rem !important; width:2rem !important;\">\r\n            <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n          </th>\r\n        </ng-container>\r\n        \r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n\r\n        <!-- <th pResizableColumn pFrozenColumn *ngIf=\"showEditButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th> -->\r\n        \r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showDuplicateButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showConsultButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n        <th pResizableColumn pFrozenColumn *ngIf=\"showDeleteButton\" scope=\"col\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"></th>\r\n\r\n        <th pResizableColumn pFrozenColumn [frozen]=\"col.isFrozen\" [style]=\"col.style\" [ngStyle]=\"getColumnSizeStyle(col)\" scope=\"col\"\r\n          [attr.data-field]=\"col.field\"\r\n          [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n          style=\"min-width:3rem;\" pSortableColumn=\"{{col.field}}\" *ngFor=\"let col of columns\"\r\n          pTooltip=\"{{col.toolTipText | localize }}\" tooltipPosition=\"top\" pReorderableColumn>{{ col.header | localize\r\n          }}\r\n          <p-sortIcon field=\"{{col.field}}\"></p-sortIcon>\r\n          <Tsi-Bubble-Info [infoText]=\"col.infoText | localize\"></Tsi-Bubble-Info>\r\n        </th>\r\n        <th style=\"min-width:3rem\" *ngIf=\"showRowSummary\" scope=\"col\">{{'RowSummary' | localize}}</th>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"body\" let-item let-editing=\"editing\" let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n      \r\n      <tr [pEditableRow]=\"item\"\r\n        *ngIf=\"selectionMode == multipleGridSelectionMode || selectionMode == undefined; else selectionModeBlock\"\r\n        (focusOut)=\"onFocusOutRow(item)\">\r\n        \r\n        <td pFrozenColumn style=\"text-align: center;\">\r\n          <p-tableCheckbox [value]=\"item\" ></p-tableCheckbox>\r\n        </td>\r\n\r\n        <!-- <td pFrozenColumn style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1\"> -->\r\n\r\n\r\n        <!-- <td pFrozenColumn style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n        </td> -->\r\n\r\n        <!-- <td pFrozenColumn *ngIf=\"showEditButton\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n          <div class=\"flex align-items-center justify-content-center\">\r\n            <button *ngIf=\"!editing\" pButton pRipple type=\"button\" pInitEditableRow icon=\"pi pi-pencil\"\r\n              class=\"p-button-rounded p-button-text\">\r\n            </button>\r\n            <button *ngIf=\"editing\" pButton pRipple type=\"button\" pSaveEditableRow icon=\"pi pi-check\"\r\n              class=\"p-button-rounded p-button-text p-button-success -ml-1\">\r\n            </button>\r\n            <button *ngIf=\"editing\" pButton pRipple type=\"button\" pCancelEditableRow icon=\"pi pi-times\"\r\n              class=\"p-button-rounded p-button-text p-button-danger -ml-2\">\r\n            </button>\r\n          </div>\r\n        </td> -->\r\n        <td pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\" style=\"left: 1rem !important; width:3rem !important;\"></td>\r\n\r\n        <td pFrozenColumn *ngIf=\"showDuplicateButton\" style=\"left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1\">\r\n          <div class=\"p-0\">\r\n            <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-copy\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_dupliquer\"\r\n              styleClass=\"p-button-rounded p-button-text p-button-info\" (click)=\"duplicateRow(item)\"></Tsi-Button>\r\n          </div>\r\n        </td>\r\n\r\n        <td pFrozenColumn *ngIf=\"showConsultButton\" style=\"left: -1rem !important; width:3rem !important;\"\r\n          class=\"p-1 btn-consult-style\">\r\n          <div class=\"p-0\">\r\n            <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-eye\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_consulter\"\r\n              styleClass=\"p-button-rounded p-button-text p-button-secondary\" (click)=\"consult(item)\"></Tsi-Button>\r\n          </div>\r\n        </td>\r\n\r\n        <td pFrozenColumn *ngIf=\"showDeleteButton\"\r\n          style=\"left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1 btn-delete-style\">\r\n          <div class=\"p-0\">\r\n            <Tsi-Button [disabled]=\"isDeleteButtonDisabled(item)\" type=\"button\" icon=\"p-button-icon pi pi-trash\"\r\n              [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_supprimer\"\r\n              styleClass=\"p-element p-button-rounded p-button-text p-button-danger p-button p-component p-button-icon-only\"\r\n              (click)=\"delete(item)\"></Tsi-Button>\r\n          </div>\r\n        </td>\r\n\r\n\r\n        <td class=\"ui-resizable-column\" pFrozenColumn [frozen]=\"col.isFrozen\" *ngFor=\"let col of columns\"\r\n          [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n          [ngStyle]=\"getBodyColumnStyle(col)\">\r\n          \r\n          \r\n          <div *ngIf=\"col.displayOnly || disabled; else ordinaryBloc\">\r\n\r\n                <!-- Tsi-Search-Combo -->\r\n                <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteOutputBlock\">\r\n                  <Tsi-Search-Combo [disabled]=\"true\" [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                    [businessClass]=\"col.businessClass\" [currentRowItem]=\"item\" [(bind)]=\"item[col.field]\"\r\n                    id-field=\"{{col.idField}}\" [listSourceUrl]=\"col.listSourceUrl\" label-field=\"{{col.labelField}}\"\r\n                    [isFiltered]=\"col.isFiltered\" [datasource]=\"col.datasource\"\r\n                    [showSearchButton]=\"col.showSearchButton ?? true\" [showAddButton]=\"col.showAddButton ?? true\"\r\n                    [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                    [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                    [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                    (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                    [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n                </div>\r\n\r\n                <!-- Tsi-Currency-Societe-Display -->\r\n                <ng-template #currencySocieteOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherOutputBlock\">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Currency-Other-Display -->\r\n                <ng-template #currencyOtherOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerOutputBlock\">\r\n                    <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Other-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Date-Display -->\r\n                <ng-template #datePickerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxOutputBlock\">\r\n                    <Tsi-Date-Display [showTime]=\"col.showTime\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Date-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-CheckBox-Display -->\r\n                <ng-template #checkBoxOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalOutputBlock\">\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-Display -->\r\n                <ng-template #decimalOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerOutputBlock\">\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-Display -->\r\n                <ng-template #integerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateOutputBlock\">\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-Display -->\r\n                <ng-template #rateOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeOutputBlock\">\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                <!-- Tsi-Time-Display -->\r\n                <ng-template #timeOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.TIME; else formulaOutputBlock\">\r\n                    <tsi-time-display [inputData]=\"item[col.field]\"></tsi-time-display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Formula-Display -->\r\n                <ng-template #formulaOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextOutputBlock\">\r\n                    <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\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>\r\n                      {{item[col.field]}}\r\n                    </span>\r\n                  </ng-container>\r\n                </ng-template>\r\n          </div>\r\n\r\n          <ng-template #ordinaryBloc>\r\n\r\n            <!-- Tsi-Search-Combo -->\r\n            <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteInputBlock\">\r\n              <Tsi-Search-Combo [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                [businessClass]=\"col.businessClass\" [listSourceUrl]=\"col.listSourceUrl\" [(bind)]=\"item[col.field]\"\r\n                id-field=\"{{col.idField}}\" label-field=\"{{col.labelField}}\" [isFiltered]=\"col.isFiltered\"\r\n                [currentRowItem]=\"item\" (bindChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                [datasource]=\"col.datasource\" [showSearchButton]=\"col.showSearchButton ?? true\"\r\n                [showAddButton]=\"col.showAddButton ?? true\" [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n            </div>\r\n\r\n            <!-- Tsi-Currency-Societe-Input -->\r\n            <ng-template #currencySocieteInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherInputBlock\">\r\n                <Tsi-Currency-Societe-Input [inputName]=\"col.inputName\" [disabled]=\"col.disabled\" [inputId]=\"col.field\"\r\n                  [(inputField)]=\"item[col.field]\" (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Currency-Societe-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Currency-Other-Input -->\r\n            <ng-template #currencyOtherInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerInputBlock\">\r\n                <Tsi-Currency-Other-Input [inputName]=\"col.inputName\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\" [inputId]=\"col.field\"\r\n                  [(inputField)]=\"item[col.field]\" (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                  [currency]=\"col.currencyOtherCode\" [disabled]=\"col.disabled\">\r\n                </Tsi-Currency-Other-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Date-Picker -->\r\n            <ng-template #datePickerInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxInputBlock\">\r\n                <Tsi-Date-Picker [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [showTime]=\"col.showTime\"\r\n                  [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Date-Picker>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-CheckBox -->\r\n            <ng-template #checkBoxInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalInputBlock\">\r\n                <Tsi-CheckBox [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\" \r\n                  [isBinary]=\"col.isBinary ?? false\">\r\n                </Tsi-CheckBox>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Decimal-Input -->\r\n            <ng-template #decimalInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerInputBlock\">\r\n                <Tsi-Decimal-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [numOfDecimal]=\"col.numOfDecimal\"\r\n                  [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Decimal-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Integer -->\r\n            <ng-template #integerInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateInputBlock\">\r\n                <Tsi-Integer [inputName]=\"col.inputName\" [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                  [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\">\r\n                </Tsi-Integer>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Rate-Input -->\r\n            <ng-template #rateInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeInputBloc\">\r\n                <Tsi-Rate-Input [inputName]=\"col.inputName\" [numOfDecimal]=\"col.numOfDecimal\" [inputId]=\"col.field\"\r\n                  [(inputField)]=\"item[col.field]\" (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                  [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Rate-Input>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Time-picker bloc -->\r\n            <ng-template #timeInputBloc>\r\n              <ng-container *ngIf=\"col.type == inputTypes.TIME; else formulaInputBlock\">\r\n                <tsi-time-picker (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [inputName]=\"col.inputName\"\r\n                  [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\" [disabled]=\"col.disabled\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </tsi-time-picker>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <ng-template #formulaInputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextInputBlock\">\r\n                <!--<Tsi-Bubble-Info\r\n                  [infoText]=\"['formula_explication',\r\n                  ]\"></Tsi-Bubble-Info> -->\r\n                <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                  [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Text-Box -->\r\n            <ng-template #defaultTextInputBlock>\r\n              <ng-container>\r\n                <Tsi-Text-Box [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\" (keydown)=\"handleKeydown($event)\"\r\n                  (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                  [inputName]=\"col.inputName\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                </Tsi-Text-Box>\r\n              \r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-template>\r\n\r\n        </td>\r\n\r\n        <td *ngIf=\"showRowSummary\" class=\"font-bold\">\r\n          {{rowSummary(item)}}\r\n        </td>\r\n      </tr>\r\n\r\n      <ng-template #selectionModeBlock>\r\n        <ng-container>\r\n          <tr [pEditableRow]=\"item\" [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"rowIndex\"\r\n            (focusOut)=\"onFocusOutRow(item)\">\r\n\r\n       <!-- <td pFrozenColumn style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1\"> -->\r\n\r\n            <td pFrozenColumn style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n              </td>\r\n\r\n            <!-- <td *ngIf=\"selectionMode == multipleGridSelectionMode\" style=\"width: 2rem;\">\r\n              <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </td> -->\r\n\r\n            <!-- <td pFrozenColumn *ngIf=\"showEditButton\" style=\"min-width:3rem;left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n              <div class=\"flex align-items-center justify-content-center\">\r\n                <button *ngIf=\"!editing\" pButton pRipple type=\"button\" pInitEditableRow icon=\"pi pi-pencil\"\r\n                  class=\"p-button-rounded p-button-text\">\r\n                </button>\r\n                <button *ngIf=\"editing\" pButton pRipple type=\"button\" pSaveEditableRow icon=\"pi pi-check\"\r\n                  class=\"p-button-rounded p-button-text p-button-success -ml-1\">\r\n                </button>\r\n                <button *ngIf=\"editing\" pButton pRipple type=\"button\" pCancelEditableRow icon=\"pi pi-times\"\r\n                  class=\"p-button-rounded p-button-text p-button-danger -ml-2\">\r\n                </button>\r\n              </div>\r\n            </td> -->\r\n            \r\n            <td pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\" style=\"left: 1rem !important; width:3rem !important;\">\r\n            </td>\r\n            \r\n            <td pFrozenColumn pResizableColumn *ngIf=\"showDuplicateButton\"\r\n              style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n              <div class=\"p-0\">\r\n                <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-copy\"\r\n                  [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_dupliquer\"\r\n                  styleClass=\"p-button-rounded p-button-text p-button-info\" (click)=\"duplicateRow(item)\"></Tsi-Button>\r\n              </div>\r\n            </td>\r\n\r\n            <td pFrozenColumn pResizableColumn *ngIf=\"showConsultButton\"\r\n              style=\"left: 1rem !important; width:3rem !important;\" class=\"p-1 btn-consult-style\">\r\n              <div class=\"p-0\">\r\n                <Tsi-Button [buttonType]=\"buttonType.Button\" icon=\"p-button-icon pi pi-eye\"\r\n                  [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_consulter\"\r\n                  styleClass=\"p-button-rounded p-button-text p-button-secondary\" (click)=\"consult(item)\"></Tsi-Button>\r\n              </div>\r\n            </td>\r\n\r\n            <td pFrozenColumn pResizableColumn *ngIf=\"showDeleteButton\" style=\"left: 1rem !important; width:3rem !important;\"\r\n              class=\"p-1 btn-delete-style\">\r\n              <div class=\"p-0\">\r\n                <Tsi-Button type=\"button\" icon=\"p-button-icon pi pi-trash\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n                  tooltipText=\"shared_edittable_supprimer\"\r\n                  styleClass=\"p-element p-button-rounded p-button-text p-button-danger p-button p-component p-button-icon-only\"\r\n                  (click)=\"delete(item)\"></Tsi-Button>\r\n              </div>\r\n            </td>\r\n            \r\n            <td class=\"ui-resizable-column\" pFrozenColumn [frozen]=\"col.isFrozen\" *ngFor=\"let col of columns\"\r\n              [class.tsi-col-wrap]=\"shouldWrapColumn(col)\" [ngStyle]=\"getBodyColumnStyle(col)\">\r\n\r\n              <div *ngIf=\"col.displayOnly || disabled; else ordinaryBloc\">\r\n                <!-- Tsi-Search-Combo -->\r\n                <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteOutputBlock\">\r\n                  <Tsi-Search-Combo [disabled]=\"true\" [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                    [businessClass]=\"col.businessClass\" [currentRowItem]=\"item\" [(bind)]=\"item[col.field]\"\r\n                    id-field=\"{{col.idField}}\" [listSourceUrl]=\"col.listSourceUrl\" label-field=\"{{col.labelField}}\"\r\n                    [isFiltered]=\"col.isFiltered\" [datasource]=\"col.datasource\"\r\n                    [showSearchButton]=\"col.showSearchButton ?? true\" [showAddButton]=\"col.showAddButton ?? true\"\r\n                    [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                    [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                    [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                    (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                    [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n                </div>\r\n\r\n                <!-- Tsi-Currency-Societe-Display -->\r\n                <ng-template #currencySocieteOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherOutputBlock\">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Currency-Other-Display -->\r\n                <ng-template #currencyOtherOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerOutputBlock\">\r\n                    <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Other-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Date-Display -->\r\n                <ng-template #datePickerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxOutputBlock\">\r\n                    <Tsi-Date-Display [showTime]=\"col.showTime\" [inputData]=\"item[col.field]\">\r\n                    </Tsi-Date-Display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-CheckBox-Display -->\r\n                <ng-template #checkBoxOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalOutputBlock\">\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-Display -->\r\n                <ng-template #decimalOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerOutputBlock\">\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-Display -->\r\n                <ng-template #integerOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateOutputBlock\">\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-Display -->\r\n                <ng-template #rateOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeOutputBlock\">\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                <!-- Tsi-Time-Display -->\r\n                <ng-template #timeOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.TIME; else formulaOutputBlock\">\r\n                    <tsi-time-display [inputData]=\"item[col.field]\"></tsi-time-display>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Formula-Display -->\r\n                <ng-template #formulaOutputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextOutputBlock\">\r\n                    <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\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>\r\n                      {{item[col.field]}}\r\n                    </span>\r\n                  </ng-container>\r\n                </ng-template>\r\n              </div>\r\n              \r\n              <ng-template #ordinaryBloc>\r\n                <!-- Tsi-Search-Combo -->\r\n                <div *ngIf=\"col.type == inputTypes.SEARCH_COMBO; else currencySocieteInputBlock\">\r\n                  <Tsi-Search-Combo [elementSourceUrl]=\"col.elementSourceUrl\"\r\n                    [listSourceUrl]=\"col.listSourceUrl\" [(bind)]=\"item[col.field]\" id-field=\"{{col.idField}}\"\r\n                    label-field=\"{{col.labelField}}\" [isFiltered]=\"col.isFiltered\" [businessClass]=\"col.businessClass\"\r\n                    (bindChange)=\"onCellValueChanged(col, $event, item)\" [currentRowItem]=\"item\"\r\n                    [datasource]=\"col.datasource\" [disabled]=\"col.disabled\"\r\n                    [showSearchButton]=\"col.showSearchButton ?? true\" [showAddButton]=\"col.showAddButton ?? true\"\r\n                    [showUpdateButton]=\"col.showUpdateButton ?? undefined\"\r\n                    [showConsultButton]=\"col.showConsultButton ?? undefined\"\r\n                    [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                    (selectedLabelChange)=\"onCellLabelResolved(col, $event, item)\"\r\n                    [inputName]=\"col.inputName\"></Tsi-Search-Combo>\r\n                </div>\r\n\r\n                <!-- Tsi-Currency-Societe-Input -->\r\n                <ng-template #currencySocieteInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherInputBlock\">\r\n                    <Tsi-Currency-Societe-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Currency-Societe-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Currency-Other-Input -->\r\n                <ng-template #currencyOtherInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerInputBlock\">\r\n                    <Tsi-Currency-Other-Input [disabled]=\"col.disabled\" [inputName]=\"col.inputName\"\r\n                      [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\" [currency]=\"col.currencyOtherCode\">\r\n                    </Tsi-Currency-Other-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Date-Picker -->\r\n                <ng-template #datePickerInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DATE; else checkBoxInputBlock\">\r\n                    <Tsi-Date-Picker [showTime]=\"col.showTime\" [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Date-Picker>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-CheckBox -->\r\n                <ng-template #checkBoxInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.CHECKBOX; else decimalInputBlock\">\r\n                    <Tsi-CheckBox [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                      [isBinary]=\"col.isBinary ?? false\">\r\n                    </Tsi-CheckBox>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Decimal-Input -->\r\n                <ng-template #decimalInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerInputBlock\">\r\n                    <Tsi-Decimal-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                      [(inputField)]=\"item[col.field]\" [numOfDecimal]=\"col.numOfDecimal\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\">\r\n                    </Tsi-Decimal-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Integer -->\r\n                <ng-template #integerInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateInputBlock\">\r\n                    <Tsi-Integer [class]=\"'max-w-4rem'\" [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\">\r\n                    </Tsi-Integer>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Rate-Input -->\r\n                <ng-template #rateInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else timeInputBloc\">\r\n                    <Tsi-Rate-Input [inputName]=\"col.inputName\" [inputId]=\"col.field\"\r\n                      [(inputField)]=\"item[col.field]\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [disabled]=\"col.disabled\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Rate-Input>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Time-Picker -->\r\n                <ng-template #timeInputBloc>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.TIME else formulaInputBlock\">\r\n                    <tsi-time-picker (inputFieldChange)=\"onCellValueChanged(col, $event, item)\"\r\n                      [inputName]=\"col.inputName\" [inputId]=\"col.field\" [(inputField)]=\"item[col.field]\"\r\n                      [disabled]=\"col.disabled\" [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </tsi-time-picker>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <ng-template #formulaInputBlock>\r\n                  <ng-container *ngIf=\"col.type == inputTypes.FORMULA_TEXT_BOX; else defaultTextInputBlock\">\r\n                    <Tsi-Formula-Box [inputName]=\"col.inputName\" [(value)]=\"item[col.field]\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\"></Tsi-Formula-Box>\r\n                  </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Text-Box -->\r\n                <ng-template #defaultTextInputBlock>\r\n                  <ng-container>\r\n                    <Tsi-Text-Box [inputId]=\"col.field\" [disabled]=\"col.disabled\"\r\n                      [(inputField)]=\"item[col.field]\" (keydown)=\"handleKeydown($event)\"\r\n                      (inputFieldChange)=\"onCellValueChanged(col, $event, item)\" [inputName]=\"col.inputName\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\r\n                    </Tsi-Text-Box>\r\n                  </ng-container>\r\n                </ng-template>\r\n              </ng-template>\r\n\r\n            </td>\r\n            <td *ngIf=\"showRowSummary\" class=\"font-bold\">\r\n              {{rowSummary(item)}}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n    </ng-template>\r\n\r\n    <ng-template *ngIf=\"showHaveSumary\" pTemplate=\"footer\" let-columns>\r\n\r\n      <tr class=\"tfooter\">\r\n        <!-- <td pFrozenColumn scope=\"col\" style=\"left: 1rem !important; width:3rem !important;\"></td> -->\r\n        <td *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n          style=\"min-width:2rem; left: 1rem !important; width:2rem !important;\">\r\n          <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n        </td>\r\n        <td pFrozenColumn scope=\"col\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\">Total</td>\r\n        <td pFrozenColumn *ngIf=\"showDeleteButton\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1\">\r\n        <td pFrozenColumn style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n          <!--<td pFrozenColumn *ngIf=\"showEditButton\" style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\"\r\n          class=\"p-1\"> -->\r\n        <td pFrozenColumn *ngIf=\"showDuplicateButton\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n        </td>\r\n        <td pFrozenColumn *ngIf=\"showConsultButton\"\r\n          style=\"min-width:3rem; left: 1rem !important; width:3rem !important;\" class=\"p-1\">\r\n        </td>\r\n        <td pFrozenColumn [frozen]=\"col.isFrozen\" [style]=\"col.style\" [ngStyle]=\"getColumnSizeStyle(col)\" scope=\"col\" *ngFor=\"let col of columns\"\r\n          [class.tsi-col-wrap]=\"shouldWrapColumn(col)\">\r\n          <div *ngIf=\"col.haveSummary\">\r\n            <!-- Tsi-Currency-Societe-Display -->\r\n            <div *ngIf=\"col.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherOutputBlock\">\r\n              <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col)\">\r\n              </Tsi-Currency-Societe-Display>\r\n            </div>\r\n\r\n            <!-- Tsi-Currency-Other-Display -->\r\n            <ng-template #currencyOtherOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.CURRENCY_OTHER_INPUT; else decimalOutputBlock\">\r\n                <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col)\">\r\n                </Tsi-Currency-Other-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Decimal-Display -->\r\n            <ng-template #decimalOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.DECIMAL_INPUT; else integerOutputBlock\">\r\n                <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col)\"\r\n                  [numOfDecimal]=\"col.numOfDecimal\">\r\n                </Tsi-Decimal-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Integer-Display -->\r\n            <ng-template #integerOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.INTEGER; else rateOutputBlock\">\r\n                <Tsi-Integer-Display [inputData]=\"getSummary(col)\">\r\n                </Tsi-Integer-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Tsi-Rate-Display -->\r\n            <ng-template #rateOutputBlock>\r\n              <ng-container *ngIf=\"col.type == inputTypes.RATE_INPUT; else defaultTextOutputBlock\">\r\n                <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"getSummary(col)\">\r\n                </Tsi-Rate-Display>\r\n              </ng-container>\r\n            </ng-template>\r\n\r\n            <!-- Default -->\r\n            <ng-template #defaultTextOutputBlock>\r\n              <ng-container>\r\n                <span>\r\n                  {{getSummary(col)}}\r\n                </span>\r\n              </ng-container>\r\n            </ng-template>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"summary\">\r\n      <tr>\r\n        {{'TotalRecordsCount' | localize }} {{gridData.length}}\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  <div>\r\n    <Tsi-Button *ngIf=\"showAddButton\" style=\"height: 20px;width: 20px;\" icon=\"p-button-icon pi pi-plus\" type=\"button\"\r\n      [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_edittable_ajouter\"\r\n      styleClass=\"p-element p-button-sm p-button-success p-button-text p-button p-component p-button-icon-only ng-star-inserted\"\r\n      (click)=\"addRow()\"></Tsi-Button>\r\n  </div>\r\n</div>", styles: [".tfooter{position:sticky;bottom:0;width:100%;z-index:10}.tsi-col-wrap,.tsi-col-wrap>span,.tsi-col-wrap>div{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}::ng-deep .p-datatable .p-datatable-tfoot>tr>td{padding:1.8px!important}.p-button.p-button-icon-only.p-button-rounded{border-radius:50%}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.grid-cell{overflow:visible!important}.p-datatable .p-cell-editing{overflow:visible!important;position:relative;z-index:1}td,.p-editable-column{overflow:visible!important}.p-editable-column input{width:100%}::ng-deep .p-tabview .p-tabview-panels{overflow:visible!important}\n"] }]
         }], ctorParameters: () => [{ type: LocalizePipe }, { type: i2$1.FilterService }], propDecorators: { editableTable: [{
                 type: ViewChild,
                 args: ["editableTable"]
@@ -9685,7 +9876,7 @@ class TsiCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiCardComponent, selector: "Tsi-card", inputs: { id: "id", headerTitle: "headerTitle", subHeaderTitle: "subHeaderTitle", description: "description", imgUrl: "imgUrl", uid: "uid", formName: "formName", statut: "statut", overflowActionsMenu: "overflowActionsMenu", item: "item", selectKeyOnly: "selectKeyOnly", key: "key" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<div class=\"card-container\">\r\n    <p-card>\r\n        <ng-template pTemplate=\"header\"  >\r\n            <div class=\"fixed-card-header\">\r\n                <img *ngIf=\"imgUrl\" [src]=\"imgUrl.startsWith('./assets') ?  imgUrl : 'data:image/png;base64,' + imgUrl\" />\r\n            </div>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"title\">\r\n            <span *ngIf=\"headerTitle\">\r\n                {{ headerTitle }}\r\n            </span>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"subtitle\">\r\n            <span *ngIf=\"subHeaderTitle\">\r\n                {{ subHeaderTitle }}\r\n            </span>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"body\">\r\n            <span *ngIf=\"statut\">\r\n                {{ statut }}\r\n            </span>\r\n            <p class=\"clamp-text\" *ngIf=\"description\">\r\n                {{ description }}\r\n            </p>\r\n        </ng-template>\r\n<ng-template pTemplate=\"footer p-0 \">\r\n            <div class=\"flex justify-content-end align-items-center mt-1 gap-2\">\r\n                \r\n                <Tsi-Button \r\n                    [styleClass]=\"'p-button-rounded p-button-text p-0-5'\" \r\n                    type=\"button\" \r\n                    icon=\"pi pi-pencil\"\r\n                    (click)=\"edit(uid)\">\r\n                </Tsi-Button>\r\n\r\n                <p-button \r\n                    type=\"button\"\r\n                    icon=\"pi pi-ellipsis-v\"\r\n                    styleClass=\"overflow-btn\"\r\n                    (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n                </p-button>\r\n\r\n                <!-- Menu popup -->\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                    <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(item, menuItem)\">\r\n                            <i *ngIf=\"menuItem.id === 'notes'\" \r\n                                class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                                [ngClass]=\"menuItem.iconStyleClass\" \r\n                                pBadge severity=\"danger\"\r\n                                [value]=\"item.notesCount\"\r\n                                [badgeDisabled]=\"item.notesCount == null\" \r\n                                badgePosition=\"top-right\">\r\n                            </i>\r\n                            <i *ngIf=\"menuItem.id !== 'notes'\" \r\n                                class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                                [ngClass]=\"menuItem.iconStyleClass\">\r\n                            </i>\r\n                            <span class=\"menu-label\">{{ menuItem.label | localize }}</span>\r\n                        </a>\r\n                    </ng-template>\r\n                </p-menu>\r\n\r\n            </div>\r\n        </ng-template>\r\n    </p-card>\r\n</div>", styles: [".clamp-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.fixed-card-header{height:100px;display:flex;align-items:center;justify-content:center;background-color:#f0f0f0}.fixed-card-header img{max-height:100%;max-width:100%;object-fit:contain}.card-container{height:100%}::ng-deep .card-container .p-card{display:flex!important;flex-direction:column!important;height:100%!important}::ng-deep .p-card-body{flex-grow:1!important;display:flex!important;flex-direction:column!important}::ng-deep .p-card-content{flex-grow:1!important}::ng-deep .p-card-footer{margin:auto!important}::ng-deep .p-0-5{padding:.5rem!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.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: i6$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { 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: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiCardComponent, selector: "Tsi-card", inputs: { id: "id", headerTitle: "headerTitle", subHeaderTitle: "subHeaderTitle", description: "description", imgUrl: "imgUrl", uid: "uid", formName: "formName", statut: "statut", overflowActionsMenu: "overflowActionsMenu", item: "item", selectKeyOnly: "selectKeyOnly", key: "key" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<div class=\"card-container\">\r\n    <p-card>\r\n        <ng-template pTemplate=\"header\"  >\r\n            <div class=\"fixed-card-header\">\r\n                <img *ngIf=\"imgUrl\" [src]=\"imgUrl.startsWith('./assets') ?  imgUrl : 'data:image/png;base64,' + imgUrl\" />\r\n            </div>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"title\">\r\n            <span *ngIf=\"headerTitle\">\r\n                {{ headerTitle }}\r\n            </span>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"subtitle\">\r\n            <span *ngIf=\"subHeaderTitle\">\r\n                {{ subHeaderTitle }}\r\n            </span>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"body\">\r\n            <span *ngIf=\"statut\">\r\n                {{ statut }}\r\n            </span>\r\n            <p class=\"clamp-text\" *ngIf=\"description\">\r\n                {{ description }}\r\n            </p>\r\n        </ng-template>\r\n<ng-template pTemplate=\"footer p-0 \">\r\n            <div class=\"flex justify-content-end align-items-center mt-1 gap-2\">\r\n                \r\n                <Tsi-Button \r\n                    [styleClass]=\"'p-button-rounded p-button-text p-0-5'\" \r\n                    type=\"button\" \r\n                    icon=\"pi pi-pencil\"\r\n                    (click)=\"edit(uid)\">\r\n                </Tsi-Button>\r\n\r\n                <p-button \r\n                    type=\"button\"\r\n                    icon=\"pi pi-ellipsis-v\"\r\n                    styleClass=\"overflow-btn\"\r\n                    (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n                </p-button>\r\n\r\n                <!-- Menu popup -->\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                    <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(item, menuItem)\">\r\n                            <i *ngIf=\"menuItem.id === 'notes'\" \r\n                                class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                                [ngClass]=\"menuItem.iconStyleClass\" \r\n                                pBadge severity=\"danger\"\r\n                                [value]=\"item.notesCount\"\r\n                                [badgeDisabled]=\"item.notesCount == null\" \r\n                                badgePosition=\"top-right\">\r\n                            </i>\r\n                            <i *ngIf=\"menuItem.id !== 'notes'\" \r\n                                class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                                [ngClass]=\"menuItem.iconStyleClass\">\r\n                            </i>\r\n                            <span class=\"menu-label\">{{ menuItem.label | localize }}</span>\r\n                        </a>\r\n                    </ng-template>\r\n                </p-menu>\r\n\r\n            </div>\r\n        </ng-template>\r\n    </p-card>\r\n</div>", styles: [".clamp-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.fixed-card-header{height:100px;display:flex;align-items:center;justify-content:center;background-color:#f0f0f0}.fixed-card-header img{max-height:100%;max-width:100%;object-fit:contain}.card-container{height:100%}::ng-deep .card-container .p-card{display:flex!important;flex-direction:column!important;height:100%!important}::ng-deep .p-card-body{flex-grow:1!important;display:flex!important;flex-direction:column!important}::ng-deep .p-card-content{flex-grow:1!important}::ng-deep .p-card-footer{margin:auto!important}::ng-deep .p-0-5{padding:.5rem!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.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: i6$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i11$2.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: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiCardComponent, decorators: [{
             type: Component,
@@ -10354,7 +10545,7 @@ class TsiKanbanComponent extends AppBaseComponent {
         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 }, { 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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i2$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i6$3.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["currency", "inputData"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i2$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i11$2.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["currency", "inputData"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiKanbanComponent, decorators: [{
             type: Component,
@@ -10810,7 +11001,7 @@ class TsiCalenderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiCalenderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: TsiNotificationService }, { token: i1$2.DatePipe }, { token: LocalizePipe }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiCalenderComponent, selector: "tsi-calender", inputs: { crudService: "crudService", schema: "schema", eventsData: "eventsData", showInfoButton: "showInfoButton", showDownloadButton: "showDownloadButton", showUploadButton: "showUploadButton", showNoteButton: "showNoteButton", showActionButton: "showActionButton", filterStartDate: "filterStartDate", filterEndDate: "filterEndDate", entityInfo: "entityInfo" }, outputs: { eventClick: "eventClick", dateRangeChange: "dateRangeChange", viewTypeChange: "viewTypeChange" }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ContextMenuComponent, descendants: true }, { propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-calendar #datePicker class=\"hidden-calendar\" (onSelect)=\"navigateToDate($event)\"/>\r\n<full-calendar #calendar [options]='calendarOptions()'>\r\n    <ng-template  let-arg>\r\n\r\n    <i [ngStyle]=\"arg.event.color && arg.event.color !== '' ? {'background-color': arg.event.color} : {}\" >\r\n        \r\n        {{ arg.event.title }}</i>\r\n    </ng-template>\r\n</full-calendar>\r\n<app-context-menu \r\n  [showInfoButton]=\"showInfoButton\"\r\n  [showUploadButton]=\"showUploadButton\"\r\n  [showNoteButton]=\"showNoteButton\"\r\n  [showActionButton]=\"showActionButton\"\r\n  (actionSelected)=\"handleSelectedAction($event)\">\r\n</app-context-menu>\r\n<ng-template #dropdownTemplate>\r\n    <p-dropdown [style]=\"{'width' : '200px','border-radius': '5px'}\" [options]=\"displayModeOptions\" (onChange)=\"onDisplayModeChange($event)\"></p-dropdown>\r\n</ng-template>\r\n", styles: ["::ng-deep .hidden-calendar .p-inputtext{border:none;width:0px;height:0px}::ng-deep .hidden-calendar .p-inputtext:enabled:focus{box-shadow:none}::ng-deep .displayModeOptions{background:#fff;border:none}.attachment-info{margin-left:50px;font-size:12px;color:#080808}.attachment-info i{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6$4.FullCalendarComponent, selector: "full-calendar", inputs: ["options", "deepChangeDetection", "events", "eventSources", "resources"] }, { kind: "component", type: ContextMenuComponent, selector: "app-context-menu", inputs: ["showInfoButton", "showUploadButton", "showNoteButton", "showActionButton"], outputs: ["actionSelected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiCalenderComponent, selector: "tsi-calender", inputs: { crudService: "crudService", schema: "schema", eventsData: "eventsData", showInfoButton: "showInfoButton", showDownloadButton: "showDownloadButton", showUploadButton: "showUploadButton", showNoteButton: "showNoteButton", showActionButton: "showActionButton", filterStartDate: "filterStartDate", filterEndDate: "filterEndDate", entityInfo: "entityInfo" }, outputs: { eventClick: "eventClick", dateRangeChange: "dateRangeChange", viewTypeChange: "viewTypeChange" }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ContextMenuComponent, descendants: true }, { propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-calendar #datePicker class=\"hidden-calendar\" (onSelect)=\"navigateToDate($event)\"/>\r\n<full-calendar #calendar [options]='calendarOptions()'>\r\n    <ng-template  let-arg>\r\n\r\n    <i [ngStyle]=\"arg.event.color && arg.event.color !== '' ? {'background-color': arg.event.color} : {}\" >\r\n        \r\n        {{ arg.event.title }}</i>\r\n    </ng-template>\r\n</full-calendar>\r\n<app-context-menu \r\n  [showInfoButton]=\"showInfoButton\"\r\n  [showUploadButton]=\"showUploadButton\"\r\n  [showNoteButton]=\"showNoteButton\"\r\n  [showActionButton]=\"showActionButton\"\r\n  (actionSelected)=\"handleSelectedAction($event)\">\r\n</app-context-menu>\r\n<ng-template #dropdownTemplate>\r\n    <p-dropdown [style]=\"{'width' : '200px','border-radius': '5px'}\" [options]=\"displayModeOptions\" (onChange)=\"onDisplayModeChange($event)\"></p-dropdown>\r\n</ng-template>\r\n", styles: ["::ng-deep .hidden-calendar .p-inputtext{border:none;width:0px;height:0px}::ng-deep .hidden-calendar .p-inputtext:enabled:focus{box-shadow:none}::ng-deep .displayModeOptions{background:#fff;border:none}.attachment-info{margin-left:50px;font-size:12px;color:#080808}.attachment-info i{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6$3.FullCalendarComponent, selector: "full-calendar", inputs: ["options", "deepChangeDetection", "events", "eventSources", "resources"] }, { kind: "component", type: ContextMenuComponent, selector: "app-context-menu", inputs: ["showInfoButton", "showUploadButton", "showNoteButton", "showActionButton"], outputs: ["actionSelected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiCalenderComponent, decorators: [{
             type: Component,
@@ -11155,7 +11346,7 @@ class TsiKanbanWorkflowEtatComponent extends AppBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiKanbanWorkflowEtatComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: WorkflowConfigurationService }, { token: EntityConfigurationService }, { token: LocalizePipe }, { token: TsiNotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiKanbanWorkflowEtatComponent, selector: "Tsi-kanban-workflow-etat", inputs: { cardBusinessClass: "cardBusinessClass", header: "header", id: "id", page$: "page$", descriminatorValue: "descriminatorValue", summaryColumns: "summaryColumns", overflowActionsMenu: "overflowActionsMenu", selectKeyOnly: "selectKeyOnly", key: "key", page: "page" }, outputs: { buttonClicked: "buttonClicked", callSearch: "callSearch" }, usesInheritance: true, ngImport: i0, template: "<div class=\"card flex justify-content-center\">\r\n  <p-paginator\r\n    [first]=\"first\"\r\n    [rows]=\"rows\"\r\n    [totalRecords]=\"totalCount\"\r\n    [rowsPerPageOptions]=\"[1, 10, 25, 50]\"\r\n    (onPageChange)=\"onPageChange($event)\"\r\n    [showCurrentPageReport]=\"true\"\r\n    currentPageReportTemplate=\"{{ 'Showing' | localize }} {first} {{'to' | localize}} {last} {{ 'of' | localize }} {totalRecords}\">\r\n  </p-paginator>\r\n</div>\r\n\r\n<div class=\"kanban-board flex gap-4 overflow-auto\">\r\n  <div *ngFor=\"let workflowEtat of displayedWorkFlowEtatLabels; trackBy: trackByWorkflowEtat\"\r\n       class=\"kanban-column flex flex-column border-round surface-0 shadow-2\"\r\n       (dragover)=\"allowDrop($event)\"\r\n       (drop)=\"drop($event, workflowEtat.key)\">\r\n       \r\n    <div class=\"column-header p-3 border-bottom-1 surface-border font-semibold\">\r\n      {{ workflowEtat.localized }}\r\n      <span class=\"text-sm font-normal text-gray-500\">\r\n        ({{ getColumnCount(workflowEtat.key) }})\r\n      </span>\r\n      <div class=\"text-xs font-normal text-gray-500\" *ngIf=\"hasColumnSummaries\">\r\n        <div *ngFor=\"let sumCol of summaryColumns\" class=\"flex align-items-center gap-1\">\r\n          <span>{{ (sumCol.header ?? sumCol.field) | localize }}:</span>\r\n          <ng-container [ngSwitch]=\"sumCol.type\">\r\n            <Tsi-Currency-Societe-Display *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Currency-Societe-Display>\r\n            <Tsi-Integer-Display *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Integer-Display>\r\n            <Tsi-Rate-Display *ngSwitchCase=\"displayTypes.RATE_DISPLAY\"\r\n              [isFraction]=\"sumCol.isFraction ?? false\" [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Rate-Display>\r\n            <Tsi-Decimal-Display *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\"\r\n              [formatDecimal]=\"sumCol.formatDecimal\" [numOfDecimal]=\"sumCol.numOfDecimal\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Decimal-Display>\r\n            <Tsi-Currency-Other-Display *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\"\r\n              [currency]=\"sumCol.currencyOtherCode\" [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Currency-Other-Display>\r\n            <span *ngSwitchDefault>{{ getColumnSummaryValue(workflowEtat.key, sumCol.field) }}</span>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"column-cards flex-1 overflow-auto p-3\">\r\n      <div *ngFor=\"let card of cardMapByWorkflowEtat.get(workflowEtat.key); trackBy: trackByCard\"\r\n           class=\"kanban-card p-3 border-round bg-white mb-3 shadow-1\"\r\n           [ngClass]=\"getWorkflowEtatClass(card)\"\r\n           draggable=\"true\"\r\n           (dragstart)=\"dragStart($event, card)\"\r\n           (dragend)=\"dragEnd()\">\r\n           \r\n        <div class=\"font-bold mb-2\">{{ card.headerTitle }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">{{ card.description }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">\r\n          <span class=\"font-semibold\">{{ 'shared_tsi_component_grid_kanban_workflowEtat_view_workflow_etat' | localize }}:</span>\r\n          <span>{{ getLocalizedWorkflowEtat(card.status) }}</span>\r\n        </div>\r\n\r\n        <p-menu appendTo=\"body\" #menuMoreActions\r\n             [model]=\"overflowActionsMenu\"\r\n             [popup]=\"true\" styleClass=\"overflow-menu\"\r\n             [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n          <ng-template pTemplate=\"item\" let-menuItem>\r\n            <a pRipple class=\"flex align-items-center p-menuitem-link\"\r\n              [ngClass]=\"menuItem.styleClass\"\r\n              (click)=\"onOverflowActionClicked(card, menuItem)\">\r\n              <i *ngIf=\"menuItem.id === 'notes'\" class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                [ngClass]=\"menuItem.iconStyleClass\" pBadge severity=\"danger\"\r\n                [value]=\"card.fullRecord.notesCount\"\r\n                [badgeDisabled]=\"card.fullRecord.notesCount == null\" badgePosition=\"top-right\">\r\n              </i>\r\n\r\n              <i *ngIf=\"menuItem.id !== 'notes'\" class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                [ngClass]=\"menuItem.iconStyleClass\">\r\n              </i>\r\n\r\n              <span class=\"menu-label\">\r\n                {{ menuItem.label | localize }}\r\n              </span>\r\n            </a>\r\n          </ng-template>\r\n        </p-menu>\r\n\r\n        <div class=\"flex justify-content-end align-items-center mt-1 gap-2 p-0\">\r\n          <Tsi-Button [styleClass]=\"'p-button-rounded p-button-text p-0-5'\" type=\"button\" icon=\"pi pi-pencil\"\r\n            (click)=\"edit(card.uid)\">\r\n          </Tsi-Button>\r\n          <p-button type=\"button\" icon=\"pi pi-ellipsis-v\" styleClass=\"overflow-btn\"\r\n            (onClick)=\"overflowColumnClicked(menuMoreActions, $event, card)\">\r\n          </p-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"isLoading\">\r\n  <div class=\"spinner-wrapper\">\r\n    <app-spinner></app-spinner>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;padding:1rem}[draggable=true]{-webkit-user-select:none;user-select:none}.kanban-board{height:calc(100vh - 100px);padding:1rem}.kanban-column{width:300px;max-height:100%;display:flex;flex-direction:column;background-color:#f8f9fa}.column-header{font-size:1rem;font-weight:700;background-color:#fff;border-radius:6px 6px 0 0}.column-cards{overflow-y:auto;flex:1}.kanban-card{border-left:4px solid;cursor:move;transition:border-color .3s ease}.workflowEtatColor-0{border-left-color:#7269ef}.workflowEtatColor-1{border-left-color:#00c853}.workflowEtatColor-2{border-left-color:#ffab00}.workflowEtatColor-3{border-left-color:#d50000}.workflowEtatColor-4{border-left-color:#ff33a8}.workflowEtatColor-5{border-left-color:#3357ff}.workflowEtatColor-6{border-left-color:#ff8c00}.workflowEtatColor-7{border-left-color:indigo}.workflowEtatColor-8{border-left-color:#33ff57}.workflowEtatColor-9{border-left-color:#ff5733}.workflowEtatColor-10{border-left-color:khaki}[class*=workflowEtatColor-]{border-left-style:solid;border-left-width:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i2$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i6$3.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["currency", "inputData"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiKanbanWorkflowEtatComponent, selector: "Tsi-kanban-workflow-etat", inputs: { cardBusinessClass: "cardBusinessClass", header: "header", id: "id", page$: "page$", descriminatorValue: "descriminatorValue", summaryColumns: "summaryColumns", overflowActionsMenu: "overflowActionsMenu", selectKeyOnly: "selectKeyOnly", key: "key", page: "page" }, outputs: { buttonClicked: "buttonClicked", callSearch: "callSearch" }, usesInheritance: true, ngImport: i0, template: "<div class=\"card flex justify-content-center\">\r\n  <p-paginator\r\n    [first]=\"first\"\r\n    [rows]=\"rows\"\r\n    [totalRecords]=\"totalCount\"\r\n    [rowsPerPageOptions]=\"[1, 10, 25, 50]\"\r\n    (onPageChange)=\"onPageChange($event)\"\r\n    [showCurrentPageReport]=\"true\"\r\n    currentPageReportTemplate=\"{{ 'Showing' | localize }} {first} {{'to' | localize}} {last} {{ 'of' | localize }} {totalRecords}\">\r\n  </p-paginator>\r\n</div>\r\n\r\n<div class=\"kanban-board flex gap-4 overflow-auto\">\r\n  <div *ngFor=\"let workflowEtat of displayedWorkFlowEtatLabels; trackBy: trackByWorkflowEtat\"\r\n       class=\"kanban-column flex flex-column border-round surface-0 shadow-2\"\r\n       (dragover)=\"allowDrop($event)\"\r\n       (drop)=\"drop($event, workflowEtat.key)\">\r\n       \r\n    <div class=\"column-header p-3 border-bottom-1 surface-border font-semibold\">\r\n      {{ workflowEtat.localized }}\r\n      <span class=\"text-sm font-normal text-gray-500\">\r\n        ({{ getColumnCount(workflowEtat.key) }})\r\n      </span>\r\n      <div class=\"text-xs font-normal text-gray-500\" *ngIf=\"hasColumnSummaries\">\r\n        <div *ngFor=\"let sumCol of summaryColumns\" class=\"flex align-items-center gap-1\">\r\n          <span>{{ (sumCol.header ?? sumCol.field) | localize }}:</span>\r\n          <ng-container [ngSwitch]=\"sumCol.type\">\r\n            <Tsi-Currency-Societe-Display *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Currency-Societe-Display>\r\n            <Tsi-Integer-Display *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Integer-Display>\r\n            <Tsi-Rate-Display *ngSwitchCase=\"displayTypes.RATE_DISPLAY\"\r\n              [isFraction]=\"sumCol.isFraction ?? false\" [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Rate-Display>\r\n            <Tsi-Decimal-Display *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\"\r\n              [formatDecimal]=\"sumCol.formatDecimal\" [numOfDecimal]=\"sumCol.numOfDecimal\"\r\n              [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Decimal-Display>\r\n            <Tsi-Currency-Other-Display *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\"\r\n              [currency]=\"sumCol.currencyOtherCode\" [inputData]=\"getColumnSummaryValue(workflowEtat.key, sumCol.field)\">\r\n            </Tsi-Currency-Other-Display>\r\n            <span *ngSwitchDefault>{{ getColumnSummaryValue(workflowEtat.key, sumCol.field) }}</span>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"column-cards flex-1 overflow-auto p-3\">\r\n      <div *ngFor=\"let card of cardMapByWorkflowEtat.get(workflowEtat.key); trackBy: trackByCard\"\r\n           class=\"kanban-card p-3 border-round bg-white mb-3 shadow-1\"\r\n           [ngClass]=\"getWorkflowEtatClass(card)\"\r\n           draggable=\"true\"\r\n           (dragstart)=\"dragStart($event, card)\"\r\n           (dragend)=\"dragEnd()\">\r\n           \r\n        <div class=\"font-bold mb-2\">{{ card.headerTitle }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">{{ card.description }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">\r\n          <span class=\"font-semibold\">{{ 'shared_tsi_component_grid_kanban_workflowEtat_view_workflow_etat' | localize }}:</span>\r\n          <span>{{ getLocalizedWorkflowEtat(card.status) }}</span>\r\n        </div>\r\n\r\n        <p-menu appendTo=\"body\" #menuMoreActions\r\n             [model]=\"overflowActionsMenu\"\r\n             [popup]=\"true\" styleClass=\"overflow-menu\"\r\n             [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n          <ng-template pTemplate=\"item\" let-menuItem>\r\n            <a pRipple class=\"flex align-items-center p-menuitem-link\"\r\n              [ngClass]=\"menuItem.styleClass\"\r\n              (click)=\"onOverflowActionClicked(card, menuItem)\">\r\n              <i *ngIf=\"menuItem.id === 'notes'\" class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                [ngClass]=\"menuItem.iconStyleClass\" pBadge severity=\"danger\"\r\n                [value]=\"card.fullRecord.notesCount\"\r\n                [badgeDisabled]=\"card.fullRecord.notesCount == null\" badgePosition=\"top-right\">\r\n              </i>\r\n\r\n              <i *ngIf=\"menuItem.id !== 'notes'\" class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                [ngClass]=\"menuItem.iconStyleClass\">\r\n              </i>\r\n\r\n              <span class=\"menu-label\">\r\n                {{ menuItem.label | localize }}\r\n              </span>\r\n            </a>\r\n          </ng-template>\r\n        </p-menu>\r\n\r\n        <div class=\"flex justify-content-end align-items-center mt-1 gap-2 p-0\">\r\n          <Tsi-Button [styleClass]=\"'p-button-rounded p-button-text p-0-5'\" type=\"button\" icon=\"pi pi-pencil\"\r\n            (click)=\"edit(card.uid)\">\r\n          </Tsi-Button>\r\n          <p-button type=\"button\" icon=\"pi pi-ellipsis-v\" styleClass=\"overflow-btn\"\r\n            (onClick)=\"overflowColumnClicked(menuMoreActions, $event, card)\">\r\n          </p-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"isLoading\">\r\n  <div class=\"spinner-wrapper\">\r\n    <app-spinner></app-spinner>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;padding:1rem}[draggable=true]{-webkit-user-select:none;user-select:none}.kanban-board{height:calc(100vh - 100px);padding:1rem}.kanban-column{width:300px;max-height:100%;display:flex;flex-direction:column;background-color:#f8f9fa}.column-header{font-size:1rem;font-weight:700;background-color:#fff;border-radius:6px 6px 0 0}.column-cards{overflow-y:auto;flex:1}.kanban-card{border-left:4px solid;cursor:move;transition:border-color .3s ease}.workflowEtatColor-0{border-left-color:#7269ef}.workflowEtatColor-1{border-left-color:#00c853}.workflowEtatColor-2{border-left-color:#ffab00}.workflowEtatColor-3{border-left-color:#d50000}.workflowEtatColor-4{border-left-color:#ff33a8}.workflowEtatColor-5{border-left-color:#3357ff}.workflowEtatColor-6{border-left-color:#ff8c00}.workflowEtatColor-7{border-left-color:indigo}.workflowEtatColor-8{border-left-color:#33ff57}.workflowEtatColor-9{border-left-color:#ff5733}.workflowEtatColor-10{border-left-color:khaki}[class*=workflowEtatColor-]{border-left-style:solid;border-left-width:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i2$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i11$2.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["currency", "inputData"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiKanbanWorkflowEtatComponent, decorators: [{
             type: Component,
@@ -13120,7 +13311,7 @@ class TsiGenericGridComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiGenericGridComponent, deps: [{ token: StatusColorService }, { token: GenericFichierService }, { token: HtmlTemplateGeneratorService }, { token: i1$2.DatePipe }, { token: TsiNotificationService }, { token: LocalizePipe }, { token: LayoutHelperService }, { token: LayoutService }, { token: i2$1.PrimeNGConfig }, { token: AppSettingsService }, { token: ErrorResponseManagerService }, { token: i0.EnvironmentInjector }, { token: i1$3.DynamicDialogConfig }, { token: i1$3.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: { cudComponent: "cudComponent", modalSize: "modalSize", showInfoButton: "showInfoButton", showDownloadButton: "showDownloadButton", showUploadButton: "showUploadButton", showNoteButton: "showNoteButton", showActionButton: "showActionButton", sizingMode: "sizingMode", formName: "formName", id: "id", pagedRequest: "pagedRequest", configuration: "configuration", page: "page", key: "key", columns: "columns", isSearchButtonDisabled: "isSearchButtonDisabled", filteredColumns: "filteredColumns", gridData: "gridData", isTableLoading: "isTableLoading", parent: "parent", showSearchBox: "showSearchBox", showActionColumn: "showActionColumn", showHeaderFilters: "showHeaderFilters", showFilterButton: "showFilterButton", isGridDataPagedInApi: "isGridDataPagedInApi", header: "header", ShowFilterColumns: "ShowFilterColumns", showImportExportButton: "showImportExportButton", crudService: "crudService", searchFields: "searchFields", sortMode: "sortMode", filtersHtmlTemplate: "filtersHtmlTemplate", presentationSettings: "presentationSettings", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", searchOnInit: "searchOnInit", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showSearchField: "showSearchField", showCalenderView: "showCalenderView", calenderSchema: "calenderSchema", showCardView: "showCardView", showKanbanView: "showKanbanView", showKanbanViewOfWorkFlowEtat: "showKanbanViewOfWorkFlowEtat", page$: "page$", checkedByField: "checkedByField", selectAll: "selectAll", targetBusinessClass: "targetBusinessClass", descriminatorValue: "descriminatorValue", businessClass: "businessClass", groupBy: "groupBy", entityInfo: "entityInfo" }, outputs: { onSave: "onSave", editRow: "editRow", deleteRow: "deleteRow", load: "load", buttonColumnClicked: "buttonColumnClicked", filtersHtmlTemplateChange: "filtersHtmlTemplateChange", selectedItemsChange: "selectedItemsChange", searchFieldsValueChanged: "searchFieldsValueChanged", calendarEventClick: "calendarEventClick", statusFilterChanged: "statusFilterChanged" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableHeaderCheckbox", first: true, predicate: ["tableHeaderCheckbox"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n\r\n  <div class=\"col-12\" [@slideInOut]=\"showSearchField ? 'in' : 'out'\" *ngIf=\"showGlobalSearch\">\r\n    <tsi-search-box \r\n      [isRtlMode]=\"isRtlMode\" \r\n      [(searchFields)]=\"searchFields\" \r\n      [businessClass]=\"businessClass\"\r\n      [entityInfo]=\"entityInfo\"\r\n      [statusMetadata]=\"statusMetadata\"\r\n      [descriminatorValue]=\"descriminatorValue\"\r\n      (searchFieldsChange)=\"searchFieldsValueChanges($event)\" \r\n      (keywordValueChanged)=\"keywordValueChanged($event)\"\r\n      (searchFieldsApplied)=\"search($event)\"\r\n      (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n      (workflowEtatFilterChanged)=\"onWorkflowEtatFilterChanged($event)\"\r\n      (comboBoxLabelChanged)=\"comboBoxLabelChanged($event)\">\r\n    </tsi-search-box>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === false && _showCardView === false && _showKanbanView === false\" class=\"col-12\">\r\n    \r\n    <p-table #dt\r\n      [lazy]=\"isGridDataPagedInApi\"\r\n      [lazyLoadOnInit]=\"searchOnInit\" \r\n      [totalRecords]=\"page.totalCount\" \r\n      [loading]=\"page.loading\" \r\n      [reorderableColumns]=\"true\"\r\n      [resizableColumns]=\"true\" \r\n      [columns]=\"selectedColumns\" \r\n      [value]=\"page.items\"\r\n      [paginator]=\"true\" \r\n      [scrollable]=\"true\" \r\n      [(rows)]=\"page.pageSize\"\r\n      [showCurrentPageReport]=\"true\" \r\n      [globalFilterFields]=\"fields()\" \r\n      [tableStyle]=\"tableStyle\"\r\n      [rowsPerPageOptions]=\"[1, 10, 25, 50, 100]\" \r\n      [sortMode]=\"sortMode\"\r\n      [multiSortMeta]=\"sortMetas\" \r\n      [selectAll]=\"selectAll\"\r\n      [selectionMode]=\"selectionMode\" \r\n      [(selection)]=\"selection\" \r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      (onRowUnselect)=\"onSelectedItemsChanged()\"\r\n      (selectAllChange)=\"onSelectAllChange($event)\" \r\n      (onRowSelect)=\"onSelectedItemsChanged()\"\r\n      (onColResize)=\"onColResize($event)\"\r\n      columnResizeMode=\"expand\"\r\n      dataKey=\"{{ key }}\" \r\n      scrollHeight=\"600px\" \r\n      [styleClass]=\"'p-datatable-gridlines' + (stripedRows ? ' p-datatable-striped' : '')\"\r\n      currentPageReportTemplate=\"{{ 'Showing' | localize }} {{getFirstElementIndex()}} {{\r\n        'to' | localize\r\n      }} {last} {{ 'of' | localize }} \r\n      {totalRecords} {{ 'entries' | localize }}\" \r\n      >\r\n\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex justify-content-between align-items-center flex-wrap gap-2\">\r\n          <div class=\"ml-2 font-semibold\">\r\n            <span class=\"font-bold\" >{{ header | localize }}</span>\r\n            ({{ page.totalCount }} {{ 'records_label' | localize }})\r\n          </div>\r\n\r\n          <div class=\"flex align-items-center gap-3 caption-paginator\">\r\n            <p-paginator\r\n              [first]=\"dt.first ?? 0\"\r\n              [rows]=\"dt.rows\"\r\n              [totalRecords]=\"dt.totalRecords\"\r\n              [rowsPerPageOptions]=\"[1, 10, 25, 50, 100]\"\r\n              [showCurrentPageReport]=\"true\"\r\n              [currentPageReportTemplate]=\"('Showing' | localize) + ' ' + getFirstElementIndex() + ' ' + ('to' | localize) + ' {last} ' + ('of' | localize) + ' {totalRecords} ' + ('entries' | localize)\"\r\n              (onPageChange)=\"dt.onPageChange({ first: $event.first ?? 1, rows: $event.rows ?? 1 })\">\r\n            </p-paginator>\r\n          </div>\r\n\r\n          <div class=\"p-1 flex align-items-center\">\r\n            <div *ngIf=\"showFilterButton\" presentationDesignerBase=\"grid_toggle_header_filters\">\r\n              <Tsi-Button [icon]=\"filterIcon\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"filterTooltip\"\r\n                styleClass=\"p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"toggleHeaderFilters()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showHeaderFilters\" presentationDesignerBase=\"grid_toggle_header_filter_mode\">\r\n              <Tsi-Button [icon]=\"filterModeIcon\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n                [tooltipText]=\"filterModeTooltip\" [styleClass]=\"'ml-1 p-button-primary p-button-icon-only'\"\r\n                (click)=\"toggleHeaderFiltersMode()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div presentationDesignerBase=\"grid_clear_filter_button\">\r\n              <Tsi-Button [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"'icon-clear-filter'\"\r\n                styleClass=\"ml-1 p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"onClearFilters()\" icon=\"pi pi-eraser\">\r\n              </Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showExportButton\" presentationDesignerBase=\"grid_export_button\">\r\n              <Tsi-Button icon=\"p-button-icon pi pi-file-excel\" (onClick)=\"exportExcel()\"\r\n                styleClass=\"p-element p-button-success hover:shadow-6 ml-2 p-1 p-button p-component p-button-icon-only\"\r\n                [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"XLS\"></Tsi-Button>\r\n            </div>\r\n\r\n            <p-multiSelect class=\"ml-1\" [options]=\"columns\" [ngModel]=\"selectedColumns\" optionLabel=\"translatedHeader\"\r\n              selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" [style]=\"{ 'min-width': '180px' }\"\r\n              placeholder=\"{{ 'choose_columns' | localize }}\" (ngModelChange)=\"onSelectedColumnsChange($event)\">\r\n            </p-multiSelect>\r\n          </div>\r\n\r\n          <!-- <div> -->\r\n          <!-- <button *ngIf=\"showGlobalSearch\" type=\"button\" pButton pRipple icon=\"pi pi-search\" (click)=\"search()\"></button> -->\r\n          <!-- </div> -->\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          <th [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\"\r\n            [ngClass]=\"page.loading ? 'no-z-index' : 'z-1'\" *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n            <div class=\"flex align-items-center justify-content-center\">\r\n              <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </div>\r\n          </th>\r\n          \r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <th *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\"\r\n              scope=\"col\" [attr.data-field]=\"col.field\" [style]=\"col.style\" pTooltip=\"{{ col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n              [pSortableColumn]=\"(!col.isButton || !isOverflowColumn(col.field) || !(col.type == displayTypes.IMAGE_DISPLAY)) ? \r\n              col.field : null\"\r\n              [pResizableColumnDisabled]=\"col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)\"\r\n              [tooltipDisabled]=\"col.isButton || isOverflowColumn(col.field)\" \r\n              [pReorderableColumnDisabled]=\"col.isButton || isOverflowColumn(col.field)\" pReorderableColumn\r\n              pResizableColumn [ngStyle]=\"getHeaderColumnStyle(col)\"\r\n              [class.disabled-column]=\"col.isButton || isOverflowColumn(col.field) || col.type === displayTypes.IMAGE_DISPLAY\"\r\n              [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n              [ngClass]=\"[\r\n                getHeaderClassColor(col.type),\r\n                (col.isButton || isOverflowColumn(col.field)) ? 'w-1rem' : '',\r\n                (col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)) ? 'non-resizable-column' : '',\r\n                ]\">\r\n\r\n              <ng-container *ngIf=\"notInSpecifiedColumn(col.field)\">\r\n                <span>\r\n                  <table class=\"p-0 m-0\">\r\n                    <tr>\r\n                      <td class=\"col p-0 m-0\" [ngClass]=\"{'w-1rem': col.isButton}\">\r\n                          {{ col.header | localize }}\r\n                      </td>\r\n                      <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\">\r\n                        <p-sortIcon \r\n                          *ngIf=\"col.type !== displayTypes.IMAGE_DISPLAY\"\r\n                          class=\"w-1rem m-0 p-0\"\r\n                          field=\"{{ col.field }}\"\r\n                          ></p-sortIcon>\r\n                      </td>\r\n                    </tr>\r\n                  </table>\r\n                </span>\r\n              </ng-container>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n\r\n        <tr *ngIf=\"showHeaderFilters\">\r\n          <!-- <th scope=\"col\" style=\"width:3rem\"></th>\r\n                        <th scope=\"col\" style=\"width:3rem\"></th> -->\r\n          <th [ngClass]=\"page.loading ? 'no-z-index' : ''\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n            style=\"width: 4rem\"></th>\r\n\r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <ng-container *ngIf=\"col.actionDisplay != actionPlacement.Overflow\">\r\n              <th style=\"overflow: inherit\" scope=\"col\">\r\n                <ng-container *ngIf=\"!col.isButton && col.field != overflowColumnField ; else filterLessColumn\">\r\n                  <ng-container [ngSwitch]=\"col.type\">\r\n\r\n                    <!-- DATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDate [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDate.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDate.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DATETIME -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATETIME_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDateTime [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDateTime.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDateTime.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY SOCIETE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Societe-Input #currSocieteInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currSocieteInput.inputField)\">\r\n                          </Tsi-Currency-Societe-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY OTHER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Other-Input #currOtherInput [inputField]=\"value\" [currency]=\"col.currencyOtherCode\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currOtherInput.inputField)\">\r\n                          </Tsi-Currency-Other-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- INTEGER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Integer #integerInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(integerInput.inputField)\">\r\n                          </Tsi-Integer>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DECIMAL -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Decimal-Input #decimalInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(decimalInput.inputField)\">\r\n                          </Tsi-Decimal-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- RATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.RATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Rate-Input #rateInput [inputField]=\"value\" [isFraction]=\"col.isFraction\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(rateInput.inputField)\">\r\n                          </Tsi-Rate-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DEFAULT (text, boolean, or any unhandled type) -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <p-columnFilter [type]=\"col.filterInputType\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [minFractionDigits]=\"col.numOfDecimal\" [maxFractionDigits]=\"col.numOfDecimal\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-template #filterLessColumn></ng-template>\r\n              </th>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </tr>\r\n        \r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n\r\n        <!-- CASE : multiple selection -->\r\n        <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\" *ngIf=\"\r\n            selectionMode == multipleGridSelectionMode;\r\n            else notMultipleSelectionModeBlock\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event,item)\" (dragenter)=\"onDragEnter($event)\"\r\n                    (dragleave)=\"onDragLeave($event)\">\r\n          <td [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\">\r\n              <div class=\"flex align-items-center justify-content-center\">\r\n                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n              </div>\r\n          </td>\r\n          <!-- <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n                            (click)=\"edit(item)\"></button>\r\n                    </div>\r\n                </td>\r\n                <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n                            class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n                    </div>\r\n                </td> -->\r\n                \r\n          <ng-container *ngFor=\"let col of columns\">\r\n\r\n            <td  *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\" [class.tsi-col-wrap]=\"shouldWrapColumn(col)\" [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n              >\r\n\r\n              <!-- style=\"height: min-content; margin-left: -.5rem;\" -->\r\n              <!-- Tsi-Currency-Societe-Input -->\r\n\r\n              <div *ngIf=\"\r\n                  col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                  else currencyOtherOutputBlock\r\n                \">\r\n                <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                </Tsi-Currency-Societe-Display>\r\n              </div>\r\n\r\n              <!-- Tsi-Currency-Other-Input -->\r\n              <ng-template #currencyOtherOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                    else datePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Date-Picker -->\r\n              <ng-template #datePickerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DATE_DISPLAY;\r\n                    else dateTimePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Date-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n              <!-- Tsi-CheckBox -->\r\n              <ng-template #checkBoxOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                    else decimalOutputBlock\r\n                  \">\r\n                  <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Checkbox-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Decimal-Input -->\r\n              <ng-template #decimalOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DECIMAL_DISPLAY;\r\n                    else integerOutputBlock\r\n                  \">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Integer -->\r\n              <ng-template #integerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.INTEGER_DISPLAY;\r\n                    else rateOutputBlock\r\n                  \">\r\n                  <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Integer-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Rate-Input -->\r\n              <ng-template #rateOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.RATE_DISPLAY;\r\n                    else displayNestedPropOutputBlock\r\n                  \">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Rate-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayNestedPropOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                    else displayStatusColorBlock\r\n                  \">\r\n                  <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                    [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                  </Tsi-Display-Nested-Prop>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusColorBlock>\r\n                <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                  </div> \r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusValueColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                          class=\"px-2 py-1 font-bold status-badge\"\r\n                          [style.background-color]=\"opt.colorHex\"\r\n                          [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                          [ngClass]=\"{\r\n                              'text-black bg-white': !opt.colorHex,\r\n                              'text-white': opt.colorHex\r\n                            }\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                          class=\"px-2 py-1 font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-status-column -->\r\n              <ng-template #displayStatusColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n\r\n                        <span\r\n                          *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                          class=\"font-bold status-badge\"\r\n                          [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                          [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                          [style.padding-top]=\"'0.1rem'\"\r\n                          [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n                          class=\"font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayButtonBlock>\r\n                <ng-container *ngIf=\"col.isButton; else displayImage\" >\r\n                  <div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n                    <Tsi-Button  [styleClass]=\"col.styleClass\" type=\"button\"\r\n                      icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                      [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n                      (click)=\"buttonClicked(item, col.field)\" ></Tsi-Button>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-image -->\r\n              <ng-template #displayImage>\r\n                <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                  <div class=\"h-2rem\">\r\n                    <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                      [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                      [width]=\"'100%'\" [height]=\"'100%'\">\r\n                    </tsi-image-display>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-icon (file-type logo) -->\r\n              <ng-template #displayIconBlock>\r\n                <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                  <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                    <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                      [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                      style=\"font-size: 1.25rem\"></i>\r\n                    <span>{{ item[col.field] }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-text-eye -->\r\n              <ng-template #displayTextEyeBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.TEXT_DISPLAY;\r\n                    else moreActionsBlock\r\n                  \">\r\n                  <span class=\"p-2 inline-block\">\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n\r\n              <!-- more actions -->\r\n                  <ng-template #moreActionsBlock>\r\n                    <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n                      <p-menu \r\n                        appendTo=\"body\" \r\n                        #menuMoreActions \r\n                        [model]=\"overflowActionsMenu\" \r\n                        [popup]=\"true\"\r\n                        styleClass=\"overflow-menu\"\r\n                        [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n                        \r\n                        <ng-template pTemplate=\"item\" let-menuItem>\r\n                          <a \r\n                            pRipple \r\n                            class=\"flex align-items-center p-menuitem-link\"\r\n                            [ngClass]=\"menuItem.styleClass\"\r\n                            (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n                            <i\r\n                              *ngIf=\"menuItem.id === 'notes'\"\r\n                              class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\"\r\n                              pBadge\r\n                              severity=\"danger\"\r\n                              [value]=\"item.notesCount\"\r\n                              [badgeDisabled]=\"item.notesCount == null\"\r\n                              badgePosition=\"top-right\">\r\n                            </i>\r\n\r\n                            <i\r\n                              *ngIf=\"menuItem.id !== 'notes'\"\r\n                              class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\">\r\n                            </i>\r\n\r\n                            <span class=\"menu-label\">\r\n                              {{ menuItem.label | localize }}\r\n                            </span>\r\n                          </a>\r\n                        </ng-template>\r\n                      </p-menu>\r\n                      <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <p-button \r\n                          type=\"button\"\r\n                          icon=\"{{col.buttonIcon}}\"\r\n                          styleClass=\"{{col.styleClass}} overflow-btn\"\r\n                          (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n                        </p-button>  \r\n                      </div>\r\n                      \r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n              <!-- Tsi-Text-Box -->\r\n              <ng-template #defaultTextOutputBlock>\r\n                <ng-container>\r\n                  <span class=\"p-2 inline-block\">\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n                    class=\"drag-message cursor-follow\">\r\n                    {{ \"Jointure\" | localize }}\r\n                  </div>\r\n        </tr>\r\n                          \r\n        <!-- CASE : single or none selection -->\r\n        <ng-template #notMultipleSelectionModeBlock>\r\n          <ng-container>\r\n            <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\"\r\n              [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"index\" id=\"tsi-grid-row-{{index}}\">\r\n\r\n              <ng-container *ngFor=\"let col of columns\">\r\n\r\n                <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\"\r\n                  [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n                  style=\"height: min-content;\"\r\n                  [ngClass]=\"{\r\n                    'w-1rem': col.isButton,\r\n                    'bg-white': col.isButton\r\n                  }\">\r\n\r\n                  <div *ngIf=\"\r\n                      col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                      else currencyOtherOutputBlock\r\n                    \">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </div>\r\n\r\n                  <!-- Tsi-Currency-Other-Input -->\r\n                  <ng-template #currencyOtherOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                        else datePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Currency-Other-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #datePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATE_DISPLAY;\r\n                        else dateTimePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <!-- Tsi-CheckBox -->\r\n                  <ng-template #checkBoxOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                        else decimalOutputBlock\r\n                      \">\r\n                      <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Checkbox-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Decimal-Input -->\r\n                  <ng-template #decimalOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DECIMAL_DISPLAY;\r\n                        else integerOutputBlock\r\n                      \">\r\n                      <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                        [numOfDecimal]=\"col.numOfDecimal\">\r\n                      </Tsi-Decimal-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Integer -->\r\n                  <ng-template #integerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.INTEGER_DISPLAY;\r\n                        else rateOutputBlock\r\n                      \">\r\n                      <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Integer-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Rate-Input -->\r\n                  <ng-template #rateOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.RATE_DISPLAY;\r\n                        else displayNestedPropOutputBlock\r\n                      \">\r\n                      <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Rate-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayNestedPropOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                        else displayStatusColorBlock\r\n                      \">\r\n                      <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                        [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                      </Tsi-Display-Nested-Prop>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <ng-template #displayStatusColorBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <ng-template #displayStatusValueColumnBlock>\r\n                      <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                        <div class=\"align-items-center justify-content-center p-2\">\r\n                          <!--<p-tag \r\n                              [value]=\"item[col.field]\"\r\n                              [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                          </p-tag>-->\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                                class=\"px-2 py-1 font-bold status-badge\"\r\n                                [style.background-color]=\"opt.colorHex\"\r\n                                [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                                [ngClass]=\"{\r\n                                    'text-black bg-white': !opt.colorHex,\r\n                                    'text-white': opt.colorHex\r\n                                  }\"\r\n                                >\r\n                                {{ opt.translatedLabel }}\r\n                              </span>\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                                class=\"px-2 py-1 font-bold status-badge\">\r\n                                {{ item[col.field] }}\r\n                              </span>\r\n                        </div>\r\n                      </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-status-prop -->\r\n                  <ng-template #displayStatusColumnBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                        <!--<p-tag \r\n                          [value]=\"item[col.field]\"\r\n                          [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                        </p-tag>-->\r\n\r\n                        <span\r\n                            *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                            class=\"status-badge font-bold\"\r\n                            [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                            [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                            [style.padding-top]=\"'0.1rem'\"\r\n                            [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                            {{ opt.translatedLabel }}\r\n                          </span>\r\n                          <span\r\n                            *ngIf=\"statusMetadata &&  !getStatusOption(item[col.field])\"\r\n                            class=\"status-badge font-bold\">\r\n                            {{ item[col.field] }}\r\n                        </span>\r\n                        \r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                  \r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayButtonBlock>\r\n                    <ng-container *ngIf=\"col.isButton; else displayImage\">\r\n                      <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n                        [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n                        class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n                        <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n                          [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                          (click)=\"buttonClicked(item, col.field)\"\r\n                          [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-image -->\r\n                  <ng-template #displayImage>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                      <div class=\"h-2rem\">\r\n                        <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                          [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                          [width]=\"'100%'\" [height]=\"'100%'\">\r\n                        </tsi-image-display>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-icon (file-type logo) -->\r\n                  <ng-template #displayIconBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                      <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                        <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                          [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                          style=\"font-size: 1.25rem\"></i>\r\n                        <span>{{ item[col.field] }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-text-eye -->\r\n                  <ng-template #displayTextEyeBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.TEXT_DISPLAY;\r\n                        else moreActionsBlock\r\n                      \">\r\n                      <span class=\"p-2 inline-block\">\r\n                        <span class=\"cursor-pointer pi pi-eye\" (click)=\"eyeClicked(item[col.field])\"></span>\r\n                        {{ truncateString(item[col.field], 50) }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- more actions -->\r\n                  <ng-template #moreActionsBlock>\r\n                    <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n                      <p-menu \r\n                        appendTo=\"body\" \r\n                        #menuMoreActions \r\n                        [model]=\"overflowActionsMenu\" \r\n                        [popup]=\"true\"\r\n                        styleClass=\"overflow-menu\"\r\n                        [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n                        \r\n                        <ng-template pTemplate=\"item\" let-menuItem>\r\n                          <a \r\n                            pRipple \r\n                            class=\"flex align-items-center p-menuitem-link\"\r\n                            [ngClass]=\"menuItem.styleClass\"\r\n                            (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n                            <i\r\n                              *ngIf=\"menuItem.id === 'notes'\"\r\n                              class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\"\r\n                              pBadge\r\n                              severity=\"danger\"\r\n                              [value]=\"item.notesCount\"\r\n                              [badgeDisabled]=\"item.notesCount == null\"\r\n                              badgePosition=\"top-right\">\r\n                            </i>\r\n\r\n                            <i\r\n                              *ngIf=\"menuItem.id !== 'notes'\"\r\n                              class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\">\r\n                            </i>\r\n\r\n                            <span class=\"menu-label\">\r\n                              {{ menuItem.label | localize }}\r\n                            </span>\r\n                          </a>\r\n                        </ng-template>\r\n                      </p-menu>\r\n                      <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <p-button \r\n                          type=\"button\"\r\n                          icon=\"{{col.buttonIcon}}\"\r\n                          styleClass=\"{{col.styleClass}} overflow-btn\"\r\n                          (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n                        </p-button>  \r\n                      </div>\r\n                      \r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Text-Box -->\r\n                  <ng-template #defaultTextOutputBlock>\r\n                    <ng-container>\r\n                      <span class=\"p-2 inline-block\">\r\n                        {{ item[col.field] }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                </td>\r\n\r\n              </ng-container>\r\n            </tr>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"footer\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == multipleGridSelectionMode\"></td>\r\n\r\n          <ng-container *ngFor=\"let col of selectedColumns\">\r\n            <td class=\"pr-0\" *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\">\r\n              <div *ngIf=\"col.showSummary\">\r\n                <!-- CURRENCY_SOCIETE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                  <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Societe-Display>\r\n                </div>\r\n\r\n                <!-- INTEGER_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.INTEGER_DISPLAY\">\r\n                  <Tsi-Integer-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Integer-Display>\r\n                </div>\r\n\r\n                <!-- RATE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.RATE_DISPLAY\">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction ?? false\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Rate-Display>\r\n                </div>\r\n\r\n                <!-- DECIMAL_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY\">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col.field)\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </div>\r\n\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </div>\r\n              </div>\r\n            </td>\r\n          </ng-container>  \r\n        </tr>\r\n      </ng-template>\r\n      \r\n      <ng-template pTemplate=\"summary\">\r\n        <span *ngIf=\"colorful\">\r\n          <span>View Grid</span>\r\n          <span class=\"pl-2\">| SearchOnInit : {{ searchOnInit }}</span>\r\n          <span class=\"pl-2\">| Pagination In Api : {{ isGridDataPagedInApi }}</span>\r\n        </span>\r\n      </ng-template>\r\n    </p-table>\r\n\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === true\" class=\"col-12\">\r\n    <tsi-calender \r\n  [schema]=\"calenderSchema\" \r\n  [eventsData]=\"page.items\" \r\n  [crudService]=\"crudService\"\r\n  [showInfoButton]=\"showInfoButton\"\r\n  [showDownloadButton]=\"showDownloadButton\"\r\n  [showUploadButton]=\"showUploadButton\"\r\n  [showNoteButton]=\"showNoteButton\"\r\n  [showActionButton]=\"showActionButton\"\r\n  [entityInfo]=\"entityInfo\"\r\n  [filterStartDate]=\"getCalenderFilterValue(calenderSchema?.start)\"\r\n  [filterEndDate]=\"getCalenderFilterValue(calenderSchema?.end)\"\r\n  (dateRangeChange)=\"handleDateRangeChange($event)\"\r\n  (viewTypeChange)=\"handleCalenderViewTypeChange($event)\"\r\n  (eventClick)=\"handleCalendarEventClick($event)\">\r\n</tsi-calender>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCardView === true\" class=\"col-12\">\r\n    <Tsi-card-list [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\"[selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\">\r\n    </Tsi-card-list>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && !_showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\" [crudService]=\"crudService\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\"\r\n      [summaryColumns]=\"kanbanSummaryColumns\">\r\n    </Tsi-kanban>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && _showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban-workflow-etat [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" [descriminatorValue]=\"descriminatorValue\" (callSearch)=\"callSearchHandler($event)\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\"\r\n      [summaryColumns]=\"kanbanSummaryColumns\">\r\n    </Tsi-kanban-workflow-etat>\r\n  </div>\r\n\r\n  <div *ngIf=\"isAdvancedSearch && selectionMode == multipleGridSelectionMode\">\r\n    <Tsi-Modal-Footer [showSaveAndCloseButton]=\"false\" (onSaveClick)=\"onConfirmSelection()\" (onCancelClick)=\"onCancelSelection()\" />\r\n  </div>\r\n</div>", styles: [".p-button.p-button-icon-only.p-button-rounded{border-radius:50%;height:1rem}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.p-inputgroup.rtl-mode .p-inputgroup-addon:last-child,.p-inputgroup.rtl-mode button:last-child,.p-inputgroup.rtl-mode input:last-child,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:6px 0 0 6px/6px 0px 0px 6px!important}.p-inputgroup.ltr-mode .p-inputgroup-addon:last-child,.p-inputgroup.ltr-mode button:last-child,.p-inputgroup.ltr-mode input:last-child,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:0 6px 6px 0/0px 6px 6px 0px!important}.p-paginator .p-dropdown{height:auto;border:none;border-bottom:1px solid}:host ::ng-deep .p-datatable .p-paginator-bottom{display:none}:host ::ng-deep .caption-paginator .p-paginator{background:transparent;border:none;padding:0}.p-datatable .frozen-column{position:sticky;left:0;z-index:1;background:#fff}.frozen-column-ltr-mode{min-width:2rem;position:sticky;left:0;background-color:#fff}.frozen-column-rtl-mode{min-width:2rem;position:sticky;right:0;background-color:#fff}.disabled-column{background-color:#f5f5f5;color:#d3d3d3;pointer-events:none}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:max-content;width:100%;text-align:center;white-space:nowrap;border-radius:.4rem;padding:.1rem .2rem;font-weight:600;line-height:1.2;color:#fff;box-shadow:0 1px 2px #0000000d;transition:all .2s ease-in-out;cursor:default;transform-origin:top center;border-top-left-radius:inherit;border-bottom-right-radius:inherit}.status-badge:hover{transform:scale(1.06);box-shadow:0 2px 4px #0000001a;filter:brightness(1.2)}td span,td div{padding:0 .5rem}.tsi-col-wrap,.tsi-col-wrap>span:not(.status-badge),.tsi-col-wrap>div:not(.status-badge){white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}td.tsi-col-wrap>span:not(.status-badge),td.tsi-col-wrap>div:not(.status-badge){display:inline-block}.custom-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.button-icon{width:1.5rem;height:1.5rem}.custom-button:hover{background-color:#f0f0f0}table{width:100%!important}.right-to-left{text-align:start}::ng-deep th.non-resizable-column .p-column-resizer{display:none!important;pointer-events:none!important}::ng-deep .cursor-follow{position:fixed;background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.85rem;z-index:1000;pointer-events:none;white-space:nowrap}::ng-deep .overflow-menu.p-menu-overlay{border-radius:8px;border:none;padding:.4rem;min-width:0!important;background:#fff;box-shadow:0 8px 24px #0000001f;animation:fadeScaleIn .12s ease-out}::ng-deep .overflow-menu .p-menuitem-link{overflow:visible!important;position:relative;padding:0}::ng-deep .overflow-menu-item{padding:.55rem .75rem;border-radius:8px;gap:.5rem;font-size:.85rem;white-space:nowrap;transition:all .15s ease}::ng-deep .overflow-menu-item:hover{background-color:#f5f7fa}::ng-deep .menu-icon{font-size:.9rem;width:18px;text-align:center;opacity:.8}::ng-deep .menu-label{font-weight:400}::ng-deep .overflow-btn{width:28px;height:28px;padding:0}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}::ng-deep .overflow-menu .p-badge{font-size:.55rem;min-width:.9rem;height:.9rem;line-height:.9rem;font-family:inherit}::ng-deep .badge-icon.has-badge{transition:transform .2s ease-in-out;display:inline-block;position:relative;z-index:2}::ng-deep .badge-icon.has-badge:hover{transform:scale(1.4);z-index:10}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i6.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i6.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i11$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i2$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i6$3.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherInputComponent, selector: "Tsi-Currency-Other-Input", inputs: ["currency", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiCurrencySocieteInputComponent, selector: "Tsi-Currency-Societe-Input", inputs: ["class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiDecimalInputComponent, selector: "Tsi-Decimal-Input", inputs: ["numOfDecimal", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiRateInputComponent, selector: "Tsi-Rate-Input", inputs: ["required", "isFraction", "numOfDecimal"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiCheckboxDisplayComponent, selector: "Tsi-Checkbox-Display", inputs: ["inputData"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["currency", "inputData"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDateDisplayComponent, selector: "Tsi-Date-Display", inputs: ["inputData", "showTime"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: TsiModalFooterComponent, selector: "Tsi-Modal-Footer", inputs: ["cancelDisabled", "saveDisabled", "cancelLabel", "saveLabel", "isConsult", "isDuplicate", "isOnlyCreate", "additionalButtonLabel", "additionalButtonIcon", "additionalButtonDisabled", "showAdditionalButton", "showSaveAndCloseButton", "mode"], outputs: ["onCancelClick", "onSaveClick", "onAdditionalButtonClick"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: TsiSearchBoxComponent, selector: "tsi-search-box", inputs: ["searchFields", "businessClass", "descriminatorValue", "isRtlMode", "isSearchButtonDisabled", "entityInfo", "statusMetadata"], outputs: ["searchFieldsChange", "searchFieldsApplied", "keywordValueChanged", "statusFilterChanged", "workflowEtatFilterChanged", "comboBoxLabelChanged"] }, { kind: "component", type: TsiCardListComponent, selector: "Tsi-card-list", inputs: ["cardBusinessClass", "header", "id", "page", "page$", "overflowActionsMenu", "selectKeyOnly", "key"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiImageDisplayComponent, selector: "tsi-image-display", inputs: ["src", "alt", "width", "height", "isRounded", "headerTitles"] }, { kind: "component", type: TsiKanbanComponent, selector: "Tsi-kanban", inputs: ["cardBusinessClass", "header", "id", "page$", "crudService", "overflowActionsMenu", "selectKeyOnly", "key", "summaryColumns", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiCalenderComponent, selector: "tsi-calender", inputs: ["crudService", "schema", "eventsData", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton", "filterStartDate", "filterEndDate", "entityInfo"], outputs: ["eventClick", "dateRangeChange", "viewTypeChange"] }, { kind: "component", type: TsiKanbanWorkflowEtatComponent, selector: "Tsi-kanban-workflow-etat", inputs: ["cardBusinessClass", "header", "id", "page$", "descriminatorValue", "summaryColumns", "overflowActionsMenu", "selectKeyOnly", "key", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]:not(tsi-tab-panel)", inputs: ["presentationDesigner", "presentationDesignerBase"] }, { kind: "component", type: DisplayNestedPropComponent, selector: "Tsi-Display-Nested-Prop", inputs: ["id", "displayValue", "sourceUrl"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: { cudComponent: "cudComponent", modalSize: "modalSize", showInfoButton: "showInfoButton", showDownloadButton: "showDownloadButton", showUploadButton: "showUploadButton", showNoteButton: "showNoteButton", showActionButton: "showActionButton", sizingMode: "sizingMode", formName: "formName", id: "id", pagedRequest: "pagedRequest", configuration: "configuration", page: "page", key: "key", columns: "columns", isSearchButtonDisabled: "isSearchButtonDisabled", filteredColumns: "filteredColumns", gridData: "gridData", isTableLoading: "isTableLoading", parent: "parent", showSearchBox: "showSearchBox", showActionColumn: "showActionColumn", showHeaderFilters: "showHeaderFilters", showFilterButton: "showFilterButton", isGridDataPagedInApi: "isGridDataPagedInApi", header: "header", ShowFilterColumns: "ShowFilterColumns", showImportExportButton: "showImportExportButton", crudService: "crudService", searchFields: "searchFields", sortMode: "sortMode", filtersHtmlTemplate: "filtersHtmlTemplate", presentationSettings: "presentationSettings", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", searchOnInit: "searchOnInit", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showSearchField: "showSearchField", showCalenderView: "showCalenderView", calenderSchema: "calenderSchema", showCardView: "showCardView", showKanbanView: "showKanbanView", showKanbanViewOfWorkFlowEtat: "showKanbanViewOfWorkFlowEtat", page$: "page$", checkedByField: "checkedByField", selectAll: "selectAll", targetBusinessClass: "targetBusinessClass", descriminatorValue: "descriminatorValue", businessClass: "businessClass", groupBy: "groupBy", entityInfo: "entityInfo" }, outputs: { onSave: "onSave", editRow: "editRow", deleteRow: "deleteRow", load: "load", buttonColumnClicked: "buttonColumnClicked", filtersHtmlTemplateChange: "filtersHtmlTemplateChange", selectedItemsChange: "selectedItemsChange", searchFieldsValueChanged: "searchFieldsValueChanged", calendarEventClick: "calendarEventClick", statusFilterChanged: "statusFilterChanged" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableHeaderCheckbox", first: true, predicate: ["tableHeaderCheckbox"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n\r\n  <div class=\"col-12\" [@slideInOut]=\"showSearchField ? 'in' : 'out'\" *ngIf=\"showGlobalSearch\">\r\n    <tsi-search-box \r\n      [isRtlMode]=\"isRtlMode\" \r\n      [(searchFields)]=\"searchFields\" \r\n      [businessClass]=\"businessClass\"\r\n      [entityInfo]=\"entityInfo\"\r\n      [statusMetadata]=\"statusMetadata\"\r\n      [descriminatorValue]=\"descriminatorValue\"\r\n      (searchFieldsChange)=\"searchFieldsValueChanges($event)\" \r\n      (keywordValueChanged)=\"keywordValueChanged($event)\"\r\n      (searchFieldsApplied)=\"search($event)\"\r\n      (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n      (workflowEtatFilterChanged)=\"onWorkflowEtatFilterChanged($event)\"\r\n      (comboBoxLabelChanged)=\"comboBoxLabelChanged($event)\">\r\n    </tsi-search-box>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === false && _showCardView === false && _showKanbanView === false\" class=\"col-12\">\r\n    \r\n    <p-table #dt\r\n      [lazy]=\"isGridDataPagedInApi\"\r\n      [lazyLoadOnInit]=\"searchOnInit\" \r\n      [totalRecords]=\"page.totalCount\" \r\n      [loading]=\"page.loading\" \r\n      [reorderableColumns]=\"true\"\r\n      [resizableColumns]=\"true\" \r\n      [columns]=\"selectedColumns\" \r\n      [value]=\"page.items\"\r\n      [paginator]=\"true\" \r\n      [scrollable]=\"true\" \r\n      [(rows)]=\"page.pageSize\"\r\n      [showCurrentPageReport]=\"true\" \r\n      [globalFilterFields]=\"fields()\" \r\n      [tableStyle]=\"tableStyle\"\r\n      [rowsPerPageOptions]=\"[1, 10, 25, 50, 100]\" \r\n      [sortMode]=\"sortMode\"\r\n      [multiSortMeta]=\"sortMetas\" \r\n      [selectAll]=\"selectAll\"\r\n      [selectionMode]=\"selectionMode\" \r\n      [(selection)]=\"selection\" \r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      (onRowUnselect)=\"onSelectedItemsChanged()\"\r\n      (selectAllChange)=\"onSelectAllChange($event)\" \r\n      (onRowSelect)=\"onSelectedItemsChanged()\"\r\n      (onColResize)=\"onColResize($event)\"\r\n      columnResizeMode=\"expand\"\r\n      dataKey=\"{{ key }}\" \r\n      scrollHeight=\"600px\" \r\n      [styleClass]=\"'p-datatable-gridlines' + (stripedRows ? ' p-datatable-striped' : '')\"\r\n      currentPageReportTemplate=\"{{ 'Showing' | localize }} {{getFirstElementIndex()}} {{\r\n        'to' | localize\r\n      }} {last} {{ 'of' | localize }} \r\n      {totalRecords} {{ 'entries' | localize }}\" \r\n      >\r\n\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex justify-content-between align-items-center flex-wrap gap-2\">\r\n          <div class=\"ml-2 font-semibold\">\r\n            <span class=\"font-bold\" >{{ header | localize }}</span>\r\n            ({{ page.totalCount }} {{ 'records_label' | localize }})\r\n          </div>\r\n\r\n          <div class=\"flex align-items-center gap-3 caption-paginator\">\r\n            <p-paginator\r\n              [first]=\"dt.first ?? 0\"\r\n              [rows]=\"dt.rows\"\r\n              [totalRecords]=\"dt.totalRecords\"\r\n              [rowsPerPageOptions]=\"[1, 10, 25, 50, 100]\"\r\n              [showCurrentPageReport]=\"true\"\r\n              [currentPageReportTemplate]=\"('Showing' | localize) + ' ' + getFirstElementIndex() + ' ' + ('to' | localize) + ' {last} ' + ('of' | localize) + ' {totalRecords} ' + ('entries' | localize)\"\r\n              (onPageChange)=\"dt.onPageChange({ first: $event.first ?? 1, rows: $event.rows ?? 1 })\">\r\n            </p-paginator>\r\n          </div>\r\n\r\n          <div class=\"p-1 flex align-items-center\">\r\n            <div *ngIf=\"showFilterButton\" presentationDesignerBase=\"grid_toggle_header_filters\">\r\n              <Tsi-Button [icon]=\"filterIcon\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"filterTooltip\"\r\n                styleClass=\"p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"toggleHeaderFilters()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showHeaderFilters\" presentationDesignerBase=\"grid_toggle_header_filter_mode\">\r\n              <Tsi-Button [icon]=\"filterModeIcon\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n                [tooltipText]=\"filterModeTooltip\" [styleClass]=\"'ml-1 p-button-primary p-button-icon-only'\"\r\n                (click)=\"toggleHeaderFiltersMode()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div presentationDesignerBase=\"grid_clear_filter_button\">\r\n              <Tsi-Button [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"'icon-clear-filter'\"\r\n                styleClass=\"ml-1 p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"onClearFilters()\" icon=\"pi pi-eraser\">\r\n              </Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showExportButton\" presentationDesignerBase=\"grid_export_button\">\r\n              <Tsi-Button icon=\"p-button-icon pi pi-file-excel\" (onClick)=\"exportExcel()\"\r\n                styleClass=\"p-element p-button-success hover:shadow-6 ml-2 p-1 p-button p-component p-button-icon-only\"\r\n                [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"XLS\"></Tsi-Button>\r\n            </div>\r\n\r\n            <p-multiSelect class=\"ml-1\" [options]=\"columns\" [ngModel]=\"selectedColumns\" optionLabel=\"translatedHeader\"\r\n              selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" [style]=\"{ 'min-width': '180px' }\"\r\n              placeholder=\"{{ 'choose_columns' | localize }}\" (ngModelChange)=\"onSelectedColumnsChange($event)\">\r\n            </p-multiSelect>\r\n          </div>\r\n\r\n          <!-- <div> -->\r\n          <!-- <button *ngIf=\"showGlobalSearch\" type=\"button\" pButton pRipple icon=\"pi pi-search\" (click)=\"search()\"></button> -->\r\n          <!-- </div> -->\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          <th [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\"\r\n            [ngClass]=\"page.loading ? 'no-z-index' : 'z-1'\" *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n            <div class=\"flex align-items-center justify-content-center\">\r\n              <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </div>\r\n          </th>\r\n          \r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <th *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\"\r\n              scope=\"col\" [attr.data-field]=\"col.field\" [style]=\"col.style\" pTooltip=\"{{ col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n              [pSortableColumn]=\"(!col.isButton || !isOverflowColumn(col.field) || !(col.type == displayTypes.IMAGE_DISPLAY)) ? \r\n              col.field : null\"\r\n              [pResizableColumnDisabled]=\"col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)\"\r\n              [tooltipDisabled]=\"col.isButton || isOverflowColumn(col.field)\" \r\n              [pReorderableColumnDisabled]=\"col.isButton || isOverflowColumn(col.field)\" pReorderableColumn\r\n              pResizableColumn [ngStyle]=\"getHeaderColumnStyle(col)\"\r\n              [class.disabled-column]=\"col.isButton || isOverflowColumn(col.field) || col.type === displayTypes.IMAGE_DISPLAY\"\r\n              [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n              [ngClass]=\"[\r\n                getHeaderClassColor(col.type),\r\n                (col.isButton || isOverflowColumn(col.field)) ? 'w-1rem' : '',\r\n                (col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)) ? 'non-resizable-column' : '',\r\n                ]\">\r\n\r\n              <ng-container *ngIf=\"notInSpecifiedColumn(col.field)\">\r\n                <span>\r\n                  <table class=\"p-0 m-0\">\r\n                    <tr>\r\n                      <td class=\"col p-0 m-0\" [ngClass]=\"{'w-1rem': col.isButton}\">\r\n                          {{ col.header | localize }}\r\n                      </td>\r\n                      <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\">\r\n                        <p-sortIcon \r\n                          *ngIf=\"col.type !== displayTypes.IMAGE_DISPLAY\"\r\n                          class=\"w-1rem m-0 p-0\"\r\n                          field=\"{{ col.field }}\"\r\n                          ></p-sortIcon>\r\n                      </td>\r\n                    </tr>\r\n                  </table>\r\n                </span>\r\n              </ng-container>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n\r\n        <tr *ngIf=\"showHeaderFilters\">\r\n          <!-- <th scope=\"col\" style=\"width:3rem\"></th>\r\n                        <th scope=\"col\" style=\"width:3rem\"></th> -->\r\n          <th [ngClass]=\"page.loading ? 'no-z-index' : ''\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n            style=\"width: 4rem\"></th>\r\n\r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <ng-container *ngIf=\"col.actionDisplay != actionPlacement.Overflow\">\r\n              <th style=\"overflow: inherit\" scope=\"col\">\r\n                <ng-container *ngIf=\"!col.isButton && col.field != overflowColumnField ; else filterLessColumn\">\r\n                  <ng-container [ngSwitch]=\"col.type\">\r\n\r\n                    <!-- DATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDate [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDate.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDate.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DATETIME -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATETIME_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDateTime [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDateTime.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDateTime.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY SOCIETE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Societe-Input #currSocieteInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currSocieteInput.inputField)\">\r\n                          </Tsi-Currency-Societe-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY OTHER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Other-Input #currOtherInput [inputField]=\"value\" [currency]=\"col.currencyOtherCode\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currOtherInput.inputField)\">\r\n                          </Tsi-Currency-Other-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- INTEGER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Integer #integerInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(integerInput.inputField)\">\r\n                          </Tsi-Integer>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DECIMAL -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Decimal-Input #decimalInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(decimalInput.inputField)\">\r\n                          </Tsi-Decimal-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- RATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.RATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Rate-Input #rateInput [inputField]=\"value\" [isFraction]=\"col.isFraction\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(rateInput.inputField)\">\r\n                          </Tsi-Rate-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DEFAULT (text, boolean, or any unhandled type) -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <p-columnFilter [type]=\"col.filterInputType\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [minFractionDigits]=\"col.numOfDecimal\" [maxFractionDigits]=\"col.numOfDecimal\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-template #filterLessColumn></ng-template>\r\n              </th>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </tr>\r\n        \r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n\r\n        <!-- CASE : multiple selection -->\r\n        <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\" *ngIf=\"\r\n            selectionMode == multipleGridSelectionMode;\r\n            else notMultipleSelectionModeBlock\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event,item)\" (dragenter)=\"onDragEnter($event)\"\r\n                    (dragleave)=\"onDragLeave($event)\">\r\n          <td [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\">\r\n              <div class=\"flex align-items-center justify-content-center\">\r\n                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n              </div>\r\n          </td>\r\n          <!-- <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n                            (click)=\"edit(item)\"></button>\r\n                    </div>\r\n                </td>\r\n                <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n                            class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n                    </div>\r\n                </td> -->\r\n                \r\n          <ng-container *ngFor=\"let col of columns\">\r\n\r\n            <td  *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\" [class.tsi-col-wrap]=\"shouldWrapColumn(col)\" [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n              >\r\n\r\n              <!-- style=\"height: min-content; margin-left: -.5rem;\" -->\r\n              <!-- Tsi-Currency-Societe-Input -->\r\n\r\n              <div *ngIf=\"\r\n                  col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                  else currencyOtherOutputBlock\r\n                \">\r\n                <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                </Tsi-Currency-Societe-Display>\r\n              </div>\r\n\r\n              <!-- Tsi-Currency-Other-Input -->\r\n              <ng-template #currencyOtherOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                    else datePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Date-Picker -->\r\n              <ng-template #datePickerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DATE_DISPLAY;\r\n                    else dateTimePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Date-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n              <!-- Tsi-CheckBox -->\r\n              <ng-template #checkBoxOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                    else decimalOutputBlock\r\n                  \">\r\n                  <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Checkbox-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Decimal-Input -->\r\n              <ng-template #decimalOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DECIMAL_DISPLAY;\r\n                    else integerOutputBlock\r\n                  \">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Integer -->\r\n              <ng-template #integerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.INTEGER_DISPLAY;\r\n                    else rateOutputBlock\r\n                  \">\r\n                  <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Integer-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Rate-Input -->\r\n              <ng-template #rateOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.RATE_DISPLAY;\r\n                    else displayNestedPropOutputBlock\r\n                  \">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Rate-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayNestedPropOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                    else displayStatusColorBlock\r\n                  \">\r\n                  <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                    [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                  </Tsi-Display-Nested-Prop>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusColorBlock>\r\n                <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                  </div> \r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusValueColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                          class=\"px-2 py-1 font-bold status-badge\"\r\n                          [style.background-color]=\"opt.colorHex\"\r\n                          [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                          [ngClass]=\"{\r\n                              'text-black bg-white': !opt.colorHex,\r\n                              'text-white': opt.colorHex\r\n                            }\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                          class=\"px-2 py-1 font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-status-column -->\r\n              <ng-template #displayStatusColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n\r\n                        <span\r\n                          *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                          class=\"font-bold status-badge\"\r\n                          [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                          [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                          [style.padding-top]=\"'0.1rem'\"\r\n                          [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n                          class=\"font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayButtonBlock>\r\n                <ng-container *ngIf=\"col.isButton; else displayImage\" >\r\n                  <div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n                    <Tsi-Button  [styleClass]=\"col.styleClass\" type=\"button\"\r\n                      icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                      [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n                      (click)=\"buttonClicked(item, col.field)\" ></Tsi-Button>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-image -->\r\n              <ng-template #displayImage>\r\n                <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                  <div class=\"h-2rem\">\r\n                    <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                      [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                      [width]=\"'100%'\" [height]=\"'100%'\">\r\n                    </tsi-image-display>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-icon (file-type logo) -->\r\n              <ng-template #displayIconBlock>\r\n                <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                  <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                    <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                      [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                      style=\"font-size: 1.25rem\"></i>\r\n                    <span>{{ item[col.field] }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-text-eye -->\r\n              <ng-template #displayTextEyeBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.TEXT_DISPLAY;\r\n                    else moreActionsBlock\r\n                  \">\r\n                  <span class=\"p-2 inline-block\">\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n\r\n              <!-- more actions -->\r\n                  <ng-template #moreActionsBlock>\r\n                    <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n                      <p-menu \r\n                        appendTo=\"body\" \r\n                        #menuMoreActions \r\n                        [model]=\"overflowActionsMenu\" \r\n                        [popup]=\"true\"\r\n                        styleClass=\"overflow-menu\"\r\n                        [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n                        \r\n                        <ng-template pTemplate=\"item\" let-menuItem>\r\n                          <a \r\n                            pRipple \r\n                            class=\"flex align-items-center p-menuitem-link\"\r\n                            [ngClass]=\"menuItem.styleClass\"\r\n                            (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n                            <i\r\n                              *ngIf=\"menuItem.id === 'notes'\"\r\n                              class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\"\r\n                              pBadge\r\n                              severity=\"danger\"\r\n                              [value]=\"item.notesCount\"\r\n                              [badgeDisabled]=\"item.notesCount == null\"\r\n                              badgePosition=\"top-right\">\r\n                            </i>\r\n\r\n                            <i\r\n                              *ngIf=\"menuItem.id !== 'notes'\"\r\n                              class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\">\r\n                            </i>\r\n\r\n                            <span class=\"menu-label\">\r\n                              {{ menuItem.label | localize }}\r\n                            </span>\r\n                          </a>\r\n                        </ng-template>\r\n                      </p-menu>\r\n                      <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <p-button \r\n                          type=\"button\"\r\n                          icon=\"{{col.buttonIcon}}\"\r\n                          styleClass=\"{{col.styleClass}} overflow-btn\"\r\n                          (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n                        </p-button>  \r\n                      </div>\r\n                      \r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n              <!-- Tsi-Text-Box -->\r\n              <ng-template #defaultTextOutputBlock>\r\n                <ng-container>\r\n                  <span class=\"p-2 inline-block\">\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n                    class=\"drag-message cursor-follow\">\r\n                    {{ \"Jointure\" | localize }}\r\n                  </div>\r\n        </tr>\r\n                          \r\n        <!-- CASE : single or none selection -->\r\n        <ng-template #notMultipleSelectionModeBlock>\r\n          <ng-container>\r\n            <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\"\r\n              [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"index\" id=\"tsi-grid-row-{{index}}\">\r\n\r\n              <ng-container *ngFor=\"let col of columns\">\r\n\r\n                <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\"\r\n                  [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n                  style=\"height: min-content;\"\r\n                  [ngClass]=\"{\r\n                    'w-1rem': col.isButton,\r\n                    'bg-white': col.isButton\r\n                  }\">\r\n\r\n                  <div *ngIf=\"\r\n                      col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                      else currencyOtherOutputBlock\r\n                    \">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </div>\r\n\r\n                  <!-- Tsi-Currency-Other-Input -->\r\n                  <ng-template #currencyOtherOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                        else datePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Currency-Other-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #datePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATE_DISPLAY;\r\n                        else dateTimePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <!-- Tsi-CheckBox -->\r\n                  <ng-template #checkBoxOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                        else decimalOutputBlock\r\n                      \">\r\n                      <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Checkbox-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Decimal-Input -->\r\n                  <ng-template #decimalOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DECIMAL_DISPLAY;\r\n                        else integerOutputBlock\r\n                      \">\r\n                      <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                        [numOfDecimal]=\"col.numOfDecimal\">\r\n                      </Tsi-Decimal-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Integer -->\r\n                  <ng-template #integerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.INTEGER_DISPLAY;\r\n                        else rateOutputBlock\r\n                      \">\r\n                      <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Integer-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Rate-Input -->\r\n                  <ng-template #rateOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.RATE_DISPLAY;\r\n                        else displayNestedPropOutputBlock\r\n                      \">\r\n                      <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Rate-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayNestedPropOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                        else displayStatusColorBlock\r\n                      \">\r\n                      <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                        [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                      </Tsi-Display-Nested-Prop>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <ng-template #displayStatusColorBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <ng-template #displayStatusValueColumnBlock>\r\n                      <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                        <div class=\"align-items-center justify-content-center p-2\">\r\n                          <!--<p-tag \r\n                              [value]=\"item[col.field]\"\r\n                              [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                          </p-tag>-->\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                                class=\"px-2 py-1 font-bold status-badge\"\r\n                                [style.background-color]=\"opt.colorHex\"\r\n                                [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                                [ngClass]=\"{\r\n                                    'text-black bg-white': !opt.colorHex,\r\n                                    'text-white': opt.colorHex\r\n                                  }\"\r\n                                >\r\n                                {{ opt.translatedLabel }}\r\n                              </span>\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                                class=\"px-2 py-1 font-bold status-badge\">\r\n                                {{ item[col.field] }}\r\n                              </span>\r\n                        </div>\r\n                      </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-status-prop -->\r\n                  <ng-template #displayStatusColumnBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                        <!--<p-tag \r\n                          [value]=\"item[col.field]\"\r\n                          [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                        </p-tag>-->\r\n\r\n                        <span\r\n                            *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                            class=\"status-badge font-bold\"\r\n                            [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                            [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                            [style.padding-top]=\"'0.1rem'\"\r\n                            [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                            {{ opt.translatedLabel }}\r\n                          </span>\r\n                          <span\r\n                            *ngIf=\"statusMetadata &&  !getStatusOption(item[col.field])\"\r\n                            class=\"status-badge font-bold\">\r\n                            {{ item[col.field] }}\r\n                        </span>\r\n                        \r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                  \r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayButtonBlock>\r\n                    <ng-container *ngIf=\"col.isButton; else displayImage\">\r\n                      <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n                        [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n                        class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n                        <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n                          [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                          (click)=\"buttonClicked(item, col.field)\"\r\n                          [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-image -->\r\n                  <ng-template #displayImage>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                      <div class=\"h-2rem\">\r\n                        <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                          [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                          [width]=\"'100%'\" [height]=\"'100%'\">\r\n                        </tsi-image-display>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-icon (file-type logo) -->\r\n                  <ng-template #displayIconBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                      <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                        <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                          [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                          style=\"font-size: 1.25rem\"></i>\r\n                        <span>{{ item[col.field] }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-text-eye -->\r\n                  <ng-template #displayTextEyeBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.TEXT_DISPLAY;\r\n                        else moreActionsBlock\r\n                      \">\r\n                      <span class=\"p-2 inline-block\">\r\n                        <span class=\"cursor-pointer pi pi-eye\" (click)=\"eyeClicked(item[col.field])\"></span>\r\n                        {{ truncateString(item[col.field], 50) }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- more actions -->\r\n                  <ng-template #moreActionsBlock>\r\n                    <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n                      <p-menu \r\n                        appendTo=\"body\" \r\n                        #menuMoreActions \r\n                        [model]=\"overflowActionsMenu\" \r\n                        [popup]=\"true\"\r\n                        styleClass=\"overflow-menu\"\r\n                        [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n                        \r\n                        <ng-template pTemplate=\"item\" let-menuItem>\r\n                          <a \r\n                            pRipple \r\n                            class=\"flex align-items-center p-menuitem-link\"\r\n                            [ngClass]=\"menuItem.styleClass\"\r\n                            (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n                            <i\r\n                              *ngIf=\"menuItem.id === 'notes'\"\r\n                              class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\"\r\n                              pBadge\r\n                              severity=\"danger\"\r\n                              [value]=\"item.notesCount\"\r\n                              [badgeDisabled]=\"item.notesCount == null\"\r\n                              badgePosition=\"top-right\">\r\n                            </i>\r\n\r\n                            <i\r\n                              *ngIf=\"menuItem.id !== 'notes'\"\r\n                              class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                              [ngClass]=\"menuItem.iconStyleClass\">\r\n                            </i>\r\n\r\n                            <span class=\"menu-label\">\r\n                              {{ menuItem.label | localize }}\r\n                            </span>\r\n                          </a>\r\n                        </ng-template>\r\n                      </p-menu>\r\n                      <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <p-button \r\n                          type=\"button\"\r\n                          icon=\"{{col.buttonIcon}}\"\r\n                          styleClass=\"{{col.styleClass}} overflow-btn\"\r\n                          (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n                        </p-button>  \r\n                      </div>\r\n                      \r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Text-Box -->\r\n                  <ng-template #defaultTextOutputBlock>\r\n                    <ng-container>\r\n                      <span class=\"p-2 inline-block\">\r\n                        {{ item[col.field] }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                </td>\r\n\r\n              </ng-container>\r\n            </tr>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"footer\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == multipleGridSelectionMode\"></td>\r\n\r\n          <ng-container *ngFor=\"let col of selectedColumns\">\r\n            <td class=\"pr-0\" *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\">\r\n              <div *ngIf=\"col.showSummary\">\r\n                <!-- CURRENCY_SOCIETE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                  <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Societe-Display>\r\n                </div>\r\n\r\n                <!-- INTEGER_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.INTEGER_DISPLAY\">\r\n                  <Tsi-Integer-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Integer-Display>\r\n                </div>\r\n\r\n                <!-- RATE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.RATE_DISPLAY\">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction ?? false\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Rate-Display>\r\n                </div>\r\n\r\n                <!-- DECIMAL_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY\">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col.field)\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </div>\r\n\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </div>\r\n              </div>\r\n            </td>\r\n          </ng-container>  \r\n        </tr>\r\n      </ng-template>\r\n      \r\n      <ng-template pTemplate=\"summary\">\r\n        <span *ngIf=\"colorful\">\r\n          <span>View Grid</span>\r\n          <span class=\"pl-2\">| SearchOnInit : {{ searchOnInit }}</span>\r\n          <span class=\"pl-2\">| Pagination In Api : {{ isGridDataPagedInApi }}</span>\r\n        </span>\r\n      </ng-template>\r\n    </p-table>\r\n\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === true\" class=\"col-12\">\r\n    <tsi-calender \r\n  [schema]=\"calenderSchema\" \r\n  [eventsData]=\"page.items\" \r\n  [crudService]=\"crudService\"\r\n  [showInfoButton]=\"showInfoButton\"\r\n  [showDownloadButton]=\"showDownloadButton\"\r\n  [showUploadButton]=\"showUploadButton\"\r\n  [showNoteButton]=\"showNoteButton\"\r\n  [showActionButton]=\"showActionButton\"\r\n  [entityInfo]=\"entityInfo\"\r\n  [filterStartDate]=\"getCalenderFilterValue(calenderSchema?.start)\"\r\n  [filterEndDate]=\"getCalenderFilterValue(calenderSchema?.end)\"\r\n  (dateRangeChange)=\"handleDateRangeChange($event)\"\r\n  (viewTypeChange)=\"handleCalenderViewTypeChange($event)\"\r\n  (eventClick)=\"handleCalendarEventClick($event)\">\r\n</tsi-calender>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCardView === true\" class=\"col-12\">\r\n    <Tsi-card-list [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\"[selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\">\r\n    </Tsi-card-list>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && !_showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\" [crudService]=\"crudService\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\"\r\n      [summaryColumns]=\"kanbanSummaryColumns\">\r\n    </Tsi-kanban>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && _showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban-workflow-etat [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" [descriminatorValue]=\"descriminatorValue\" (callSearch)=\"callSearchHandler($event)\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\"\r\n      [summaryColumns]=\"kanbanSummaryColumns\">\r\n    </Tsi-kanban-workflow-etat>\r\n  </div>\r\n\r\n  <div *ngIf=\"isAdvancedSearch && selectionMode == multipleGridSelectionMode\">\r\n    <Tsi-Modal-Footer [showSaveAndCloseButton]=\"false\" (onSaveClick)=\"onConfirmSelection()\" (onCancelClick)=\"onCancelSelection()\" />\r\n  </div>\r\n</div>", styles: [".p-button.p-button-icon-only.p-button-rounded{border-radius:50%;height:1rem}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.p-inputgroup.rtl-mode .p-inputgroup-addon:last-child,.p-inputgroup.rtl-mode button:last-child,.p-inputgroup.rtl-mode input:last-child,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:6px 0 0 6px/6px 0px 0px 6px!important}.p-inputgroup.ltr-mode .p-inputgroup-addon:last-child,.p-inputgroup.ltr-mode button:last-child,.p-inputgroup.ltr-mode input:last-child,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:0 6px 6px 0/0px 6px 6px 0px!important}.p-paginator .p-dropdown{height:auto;border:none;border-bottom:1px solid}:host ::ng-deep .p-datatable .p-paginator-bottom{display:none}:host ::ng-deep .caption-paginator .p-paginator{background:transparent;border:none;padding:0}.p-datatable .frozen-column{position:sticky;left:0;z-index:1;background:#fff}.frozen-column-ltr-mode{min-width:2rem;position:sticky;left:0;background-color:#fff}.frozen-column-rtl-mode{min-width:2rem;position:sticky;right:0;background-color:#fff}.disabled-column{background-color:#f5f5f5;color:#d3d3d3;pointer-events:none}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:max-content;width:100%;text-align:center;white-space:nowrap;border-radius:.4rem;padding:.1rem .2rem;font-weight:600;line-height:1.2;color:#fff;box-shadow:0 1px 2px #0000000d;transition:all .2s ease-in-out;cursor:default;transform-origin:top center;border-top-left-radius:inherit;border-bottom-right-radius:inherit}.status-badge:hover{transform:scale(1.06);box-shadow:0 2px 4px #0000001a;filter:brightness(1.2)}td span,td div{padding:0 .5rem}.tsi-col-wrap,.tsi-col-wrap>span:not(.status-badge),.tsi-col-wrap>div:not(.status-badge){white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}td.tsi-col-wrap>span:not(.status-badge),td.tsi-col-wrap>div:not(.status-badge){display:inline-block}.custom-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.button-icon{width:1.5rem;height:1.5rem}.custom-button:hover{background-color:#f0f0f0}table{width:100%!important}.right-to-left{text-align:start}::ng-deep th.non-resizable-column .p-column-resizer{display:none!important;pointer-events:none!important}::ng-deep .cursor-follow{position:fixed;background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.85rem;z-index:1000;pointer-events:none;white-space:nowrap}::ng-deep .overflow-menu.p-menu-overlay{border-radius:8px;border:none;padding:.4rem;min-width:0!important;background:#fff;box-shadow:0 8px 24px #0000001f;animation:fadeScaleIn .12s ease-out}::ng-deep .overflow-menu .p-menuitem-link{overflow:visible!important;position:relative;padding:0}::ng-deep .overflow-menu-item{padding:.55rem .75rem;border-radius:8px;gap:.5rem;font-size:.85rem;white-space:nowrap;transition:all .15s ease}::ng-deep .overflow-menu-item:hover{background-color:#f5f7fa}::ng-deep .menu-icon{font-size:.9rem;width:18px;text-align:center;opacity:.8}::ng-deep .menu-label{font-weight:400}::ng-deep .overflow-btn{width:28px;height:28px;padding:0}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}::ng-deep .overflow-menu .p-badge{font-size:.55rem;min-width:.9rem;height:.9rem;line-height:.9rem;font-family:inherit}::ng-deep .badge-icon.has-badge{transition:transform .2s ease-in-out;display:inline-block;position:relative;z-index:2}::ng-deep .badge-icon.has-badge:hover{transform:scale(1.4);z-index:10}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i6.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i6.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i11$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i2$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i11$2.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherInputComponent, selector: "Tsi-Currency-Other-Input", inputs: ["currency", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiCurrencySocieteInputComponent, selector: "Tsi-Currency-Societe-Input", inputs: ["class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiDecimalInputComponent, selector: "Tsi-Decimal-Input", inputs: ["numOfDecimal", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiRateInputComponent, selector: "Tsi-Rate-Input", inputs: ["required", "isFraction", "numOfDecimal"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiCheckboxDisplayComponent, selector: "Tsi-Checkbox-Display", inputs: ["inputData"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["currency", "inputData"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDateDisplayComponent, selector: "Tsi-Date-Display", inputs: ["inputData", "showTime"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: TsiModalFooterComponent, selector: "Tsi-Modal-Footer", inputs: ["cancelDisabled", "saveDisabled", "cancelLabel", "saveLabel", "isConsult", "isDuplicate", "isOnlyCreate", "additionalButtonLabel", "additionalButtonIcon", "additionalButtonDisabled", "showAdditionalButton", "showSaveAndCloseButton", "mode"], outputs: ["onCancelClick", "onSaveClick", "onAdditionalButtonClick"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: TsiSearchBoxComponent, selector: "tsi-search-box", inputs: ["searchFields", "businessClass", "descriminatorValue", "isRtlMode", "isSearchButtonDisabled", "entityInfo", "statusMetadata"], outputs: ["searchFieldsChange", "searchFieldsApplied", "keywordValueChanged", "statusFilterChanged", "workflowEtatFilterChanged", "comboBoxLabelChanged"] }, { kind: "component", type: TsiCardListComponent, selector: "Tsi-card-list", inputs: ["cardBusinessClass", "header", "id", "page", "page$", "overflowActionsMenu", "selectKeyOnly", "key"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiImageDisplayComponent, selector: "tsi-image-display", inputs: ["src", "alt", "width", "height", "isRounded", "headerTitles"] }, { kind: "component", type: TsiKanbanComponent, selector: "Tsi-kanban", inputs: ["cardBusinessClass", "header", "id", "page$", "crudService", "overflowActionsMenu", "selectKeyOnly", "key", "summaryColumns", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiCalenderComponent, selector: "tsi-calender", inputs: ["crudService", "schema", "eventsData", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton", "filterStartDate", "filterEndDate", "entityInfo"], outputs: ["eventClick", "dateRangeChange", "viewTypeChange"] }, { kind: "component", type: TsiKanbanWorkflowEtatComponent, selector: "Tsi-kanban-workflow-etat", inputs: ["cardBusinessClass", "header", "id", "page$", "descriminatorValue", "summaryColumns", "overflowActionsMenu", "selectKeyOnly", "key", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]:not(tsi-tab-panel)", inputs: ["presentationDesigner", "presentationDesignerBase"] }, { kind: "component", type: DisplayNestedPropComponent, selector: "Tsi-Display-Nested-Prop", inputs: ["id", "displayValue", "sourceUrl"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('slideInOut', [
                 state('in', style({
                     height: '*',
@@ -13417,6 +13608,9 @@ class ReportingComponent {
     get reportingInformation() {
         return this._reportingInformation;
     }
+    get isRtlMode() {
+        return this._appLayoutService.isRtlModeEnabled();
+    }
     get enableToPrintReport() {
         if (this._layoutHelperService.isDesignMode) {
             return true;
@@ -13471,6 +13665,7 @@ class ReportingComponent {
         this.reports = [];
         this.showContextMenu = false;
         this.contextMenuPosition = { x: 0, y: 0 };
+        this._appLayoutService = inject(LayoutService);
         this.tooltipPosition = TooltipPosition.Top;
     }
     //#endregion
@@ -13945,11 +14140,11 @@ class ReportingComponent {
         return key;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReportingComponent, deps: [{ token: TsiModalService }, { token: ReportingService }, { token: IdentityManagerService }, { token: TsiNotificationService }, { token: TsiMessageService }, { token: RecordInfoPopupService }, { token: ErrorResponseManagerService }, { token: LayoutHelperService }, { token: GenericFichierService }, { token: i0.EnvironmentInjector }, { token: MailingService }, { token: InputRegistryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReportingComponent, selector: "app-reporting", inputs: { showImportExportButton: "showImportExportButton", showNoteButton: "showNoteButton", showInfoButton: "showInfoButton", showUploadButton: "showUploadButton", showActionButton: "showActionButton", isReportingToolbarDisabled: "isReportingToolbarDisabled", formName: "formName", formEndpoint: "formEndpoint", formEndpointBody: "formEndpointBody", isFormEndpointPaged: "isFormEndpointPaged", filtersHtmlTemplate: "filtersHtmlTemplate", optionalEndpoints: "optionalEndpoints", businessClass: "businessClass", mode: "mode", cudComponent: "cudComponent", httpMethodType: "httpMethodType", requestData: "requestData", customReportingMode: "customReportingMode", pagedRequest: "pagedRequest", reportDiscriminator: "reportDiscriminator", nombreDocumentsJoints: "nombreDocumentsJoints", id: "id", configModeButtonId: "configModeButtonId", showManageWorkflowButton: "showManageWorkflowButton", selectedItemUids: "selectedItemUids", fromTsiForm: "fromTsiForm", customSendMailMode: "customSendMailMode", reportingInformation: "reportingInformation" }, outputs: { onSave: "onSave", refreshData: "refreshData", closedModalFileUpload: "closedModalFileUpload", toggleDesignMode: "toggleDesignMode", openWorkflow: "openWorkflow" }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex gap-2 mx-2\">\r\n  <div\r\n    *ngIf=\"(formEndpoint || businessClass) && enableToPrintReport\"\r\n    presentationDesignerBase=\"manage_reports_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      [iconSrc]=\"'./assets/icons/icon-printer-group-white.png'\"\r\n      [iconWidth]=\"20\"\r\n      [tooltipText]=\"'shared_reporting_manage_reports'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"showDialog()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"(formEndpoint || businessClass) && enableToPrintReport\"\r\n    presentationDesignerBase=\"print_default_report_button\"\r\n    class=\"flex align-items-center justify-content-center btn-wrapper\"\r\n    #wrapper\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-print p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_reporting_rightClick'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"onPrintDefault($event)\"\r\n      (rightClick)=\"onRightClick($event)\"\r\n    >\r\n    </Tsi-Button>\r\n    <!-- `shared_reporting_print_report` key for `Imprimer` text  (replace it as value or tooltip if need it) -->\r\n\r\n    <div\r\n      *ngIf=\"showContextMenu && enableToPrintReport\"\r\n      class=\"context-menu\"\r\n      [ngStyle]=\"{\r\n        'top.px': contextMenuPosition.y,\r\n        'left.px': contextMenuPosition.x\r\n      }\"\r\n      (mouseleave)=\"hideContextMenu()\"\r\n    >\r\n      <div\r\n        *ngFor=\"let report of reports\"\r\n        class=\"menu-item\"\r\n        (click)=\"onSelectContextOption(report)\"\r\n      >\r\n        {{ report.name }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n    <div\r\n    *ngIf=\"(formEndpoint || businessClass) && enableToPrintReport\"\r\n    presentationDesignerBase=\"send_report_by_email_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-send p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_reporting_send_mail'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"onSendPdf($event)\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"businessClass && showUploadButton\"\r\n    presentationDesignerBase=\"attachment_button\"\r\n    class=\"flex align-items-center justify-content-center btn-wrapper\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled || isUploadBlockedByMode\"\r\n      type=\"button\"\r\n      icon=\"pi pi-paperclip p-button-icon\"\r\n      [tooltipText]=\"'shared_actions_attachment'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"showUploadDialog()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n    >\r\n    </Tsi-Button>\r\n    <span *ngIf=\"nombreDocumentsJoints && nombreDocumentsJoints > 0\" class=\"custom-badge\">\r\n      {{ nombreDocumentsJoints }}\r\n    </span>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"businessClass && showImportExportButton\"\r\n    presentationDesignerBase=\"import_export_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-arrow-right-arrow-left p-button-icon\"\r\n      [tooltipText]=\"'shared_reporting_manage_export_import'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"showExportImportDialog()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showNoteButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n    presentationDesignerBase=\"shared_show_notes_button\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-comment p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_tsi_component_gestion_des_notes'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-warning hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (click)=\"viewNotes()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"businessClass && fromTsiForm && showManageWorkflowButton\"\r\n    presentationDesignerBase=\"shared_manage_workflow_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-sitemap p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_reporting_manage_workflow'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-info hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (click)=\"onManageWorkflowClick()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showActionButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n    presentationDesignerBase=\"shared_show_action_button\"\r\n  >\r\n    <Tsi-Button\r\n      id=\"'show-action-button'\"\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-bolt p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_tsi_component_gestion_des_action'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-warning hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (onClick)=\"viewAction()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showInfoButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n    presentationDesignerBase=\"shared_show_info_button\"\r\n  >\r\n    <Tsi-Button\r\n      id=\"'show-info-button'\"\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-info p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_actions_info'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-info hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (click)=\"viewInfo($event)\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showPresentationDesignerConfigButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      id=\"{{ customReportingMode ? 'confg-mode-button-from-list' : configModeButtonId }}\"\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-eye p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_tsi_component_config_show_hide'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"presentationDesignerConfig()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- <div *ngIf=\"showContextMenu\"\r\n  class=\"context-menu\"\r\n  [ngStyle]=\"{\r\n    'top.px': contextMenuPosition.y,\r\n    'left.px': contextMenuPosition.x\r\n  }\"\r\n  (mouseleave)=\"hideContextMenu()\">\r\n  <div *ngFor=\"let report of reports\"\r\n    class=\"menu-item\"\r\n    (click)=\"onSelectContextOption(report)\">\r\n    {{report.name}}\r\n  </div>\r\n</div> -->\r\n", styles: [".p-fileupload-content{display:none!important}.btn-wrapper{position:relative;display:inline-block}.context-menu{position:absolute;background:#fff;border:.125rem solid #ccc;border-radius:1rem;z-index:1000;box-shadow:0 .25rem .75rem #0003;min-width:15rem;max-height:25rem;padding:.5rem 0;overflow-y:auto}.menu-item{padding:.5rem;cursor:pointer;text-transform:capitalize}.menu-item:hover{background-color:#f0f0f0}::ng-deep .header-title{flex-shrink:1;min-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 .5rem}.custom-badge{position:absolute;top:-5px;right:-5px;background:#e90505;color:#fff;padding:2px 6px;font-size:.75rem;border-radius:50%;font-weight:700;min-width:1rem;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]:not(tsi-tab-panel)", inputs: ["presentationDesigner", "presentationDesignerBase"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReportingComponent, selector: "app-reporting", inputs: { showImportExportButton: "showImportExportButton", showNoteButton: "showNoteButton", showInfoButton: "showInfoButton", showUploadButton: "showUploadButton", showActionButton: "showActionButton", isReportingToolbarDisabled: "isReportingToolbarDisabled", formName: "formName", formEndpoint: "formEndpoint", formEndpointBody: "formEndpointBody", isFormEndpointPaged: "isFormEndpointPaged", filtersHtmlTemplate: "filtersHtmlTemplate", optionalEndpoints: "optionalEndpoints", businessClass: "businessClass", mode: "mode", cudComponent: "cudComponent", httpMethodType: "httpMethodType", requestData: "requestData", customReportingMode: "customReportingMode", pagedRequest: "pagedRequest", reportDiscriminator: "reportDiscriminator", nombreDocumentsJoints: "nombreDocumentsJoints", id: "id", configModeButtonId: "configModeButtonId", showManageWorkflowButton: "showManageWorkflowButton", selectedItemUids: "selectedItemUids", fromTsiForm: "fromTsiForm", customSendMailMode: "customSendMailMode", reportingInformation: "reportingInformation" }, outputs: { onSave: "onSave", refreshData: "refreshData", closedModalFileUpload: "closedModalFileUpload", toggleDesignMode: "toggleDesignMode", openWorkflow: "openWorkflow" }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex gap-2 mx-2\">\r\n  <div\r\n    *ngIf=\"(formEndpoint || businessClass) && enableToPrintReport\"\r\n    presentationDesignerBase=\"manage_reports_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      [iconSrc]=\"'./assets/icons/icon-printer-group-white.png'\"\r\n      [iconWidth]=\"20\"\r\n      [tooltipText]=\"'shared_reporting_manage_reports'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"showDialog()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"(formEndpoint || businessClass) && enableToPrintReport\"\r\n    presentationDesignerBase=\"print_default_report_button\"\r\n    class=\"flex align-items-center justify-content-center btn-wrapper\"\r\n    #wrapper\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-print p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_reporting_rightClick'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"onPrintDefault($event)\"\r\n      (rightClick)=\"onRightClick($event)\"\r\n    >\r\n    </Tsi-Button>\r\n    <!-- `shared_reporting_print_report` key for `Imprimer` text  (replace it as value or tooltip if need it) -->\r\n\r\n    <div\r\n      *ngIf=\"showContextMenu && enableToPrintReport\"\r\n      class=\"context-menu\"\r\n      [class.rtl]=\"isRtlMode\"\r\n      [ngStyle]=\"{\r\n        'top.px': contextMenuPosition.y,\r\n        'left.px': contextMenuPosition.x\r\n      }\"\r\n      (mouseleave)=\"hideContextMenu()\"\r\n    >\r\n      <div\r\n        *ngFor=\"let report of reports\"\r\n        class=\"menu-item\"\r\n        (click)=\"onSelectContextOption(report)\"\r\n      >\r\n        {{ report.name }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n    <div\r\n    *ngIf=\"(formEndpoint || businessClass) && enableToPrintReport\"\r\n    presentationDesignerBase=\"send_report_by_email_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-send p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_reporting_send_mail'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"onSendPdf($event)\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"businessClass && showUploadButton\"\r\n    presentationDesignerBase=\"attachment_button\"\r\n    class=\"flex align-items-center justify-content-center btn-wrapper\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled || isUploadBlockedByMode\"\r\n      type=\"button\"\r\n      icon=\"pi pi-paperclip p-button-icon\"\r\n      [tooltipText]=\"'shared_actions_attachment'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"showUploadDialog()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n    >\r\n    </Tsi-Button>\r\n    <span *ngIf=\"nombreDocumentsJoints && nombreDocumentsJoints > 0\" class=\"custom-badge\">\r\n      {{ nombreDocumentsJoints }}\r\n    </span>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"businessClass && showImportExportButton\"\r\n    presentationDesignerBase=\"import_export_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-arrow-right-arrow-left p-button-icon\"\r\n      [tooltipText]=\"'shared_reporting_manage_export_import'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"showExportImportDialog()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showNoteButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n    presentationDesignerBase=\"shared_show_notes_button\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-comment p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_tsi_component_gestion_des_notes'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-warning hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (click)=\"viewNotes()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"businessClass && fromTsiForm && showManageWorkflowButton\"\r\n    presentationDesignerBase=\"shared_manage_workflow_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-sitemap p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_reporting_manage_workflow'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-info hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (click)=\"onManageWorkflowClick()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showActionButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n    presentationDesignerBase=\"shared_show_action_button\"\r\n  >\r\n    <Tsi-Button\r\n      id=\"'show-action-button'\"\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-bolt p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_tsi_component_gestion_des_action'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-warning hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (onClick)=\"viewAction()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showInfoButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n    presentationDesignerBase=\"shared_show_info_button\"\r\n  >\r\n    <Tsi-Button\r\n      id=\"'show-info-button'\"\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-info p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_actions_info'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-info hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (click)=\"viewInfo($event)\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showPresentationDesignerConfigButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      id=\"{{ customReportingMode ? 'confg-mode-button-from-list' : configModeButtonId }}\"\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-eye p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_tsi_component_config_show_hide'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"presentationDesignerConfig()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- <div *ngIf=\"showContextMenu\"\r\n  class=\"context-menu\"\r\n  [ngStyle]=\"{\r\n    'top.px': contextMenuPosition.y,\r\n    'left.px': contextMenuPosition.x\r\n  }\"\r\n  (mouseleave)=\"hideContextMenu()\">\r\n  <div *ngFor=\"let report of reports\"\r\n    class=\"menu-item\"\r\n    (click)=\"onSelectContextOption(report)\">\r\n    {{report.name}}\r\n  </div>\r\n</div> -->\r\n", styles: [".p-fileupload-content{display:none!important}.btn-wrapper{position:relative;display:inline-block}.context-menu{position:absolute;background:#fff;border:.125rem solid #ccc;border-radius:1rem;z-index:1000;box-shadow:0 .25rem .75rem #0003;min-width:15rem;max-height:25rem;padding:.5rem 0;overflow-y:auto;transform:translate(-100%);width:max-content;max-width:30rem}.context-menu.rtl{transform:none}.menu-item{padding:.5rem;cursor:pointer;text-transform:capitalize;white-space:normal;overflow-wrap:anywhere}.menu-item:hover{background-color:#f0f0f0}::ng-deep .header-title{flex-shrink:1;min-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 .5rem}.custom-badge{position:absolute;top:-5px;right:-5px;background:#e90505;color:#fff;padding:2px 6px;font-size:.75rem;border-radius:50%;font-weight:700;min-width:1rem;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]:not(tsi-tab-panel)", inputs: ["presentationDesigner", "presentationDesignerBase"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReportingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-reporting', template: "<div class=\"flex gap-2 mx-2\">\r\n  <div\r\n    *ngIf=\"(formEndpoint || businessClass) && enableToPrintReport\"\r\n    presentationDesignerBase=\"manage_reports_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      [iconSrc]=\"'./assets/icons/icon-printer-group-white.png'\"\r\n      [iconWidth]=\"20\"\r\n      [tooltipText]=\"'shared_reporting_manage_reports'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"showDialog()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"(formEndpoint || businessClass) && enableToPrintReport\"\r\n    presentationDesignerBase=\"print_default_report_button\"\r\n    class=\"flex align-items-center justify-content-center btn-wrapper\"\r\n    #wrapper\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-print p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_reporting_rightClick'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"onPrintDefault($event)\"\r\n      (rightClick)=\"onRightClick($event)\"\r\n    >\r\n    </Tsi-Button>\r\n    <!-- `shared_reporting_print_report` key for `Imprimer` text  (replace it as value or tooltip if need it) -->\r\n\r\n    <div\r\n      *ngIf=\"showContextMenu && enableToPrintReport\"\r\n      class=\"context-menu\"\r\n      [ngStyle]=\"{\r\n        'top.px': contextMenuPosition.y,\r\n        'left.px': contextMenuPosition.x\r\n      }\"\r\n      (mouseleave)=\"hideContextMenu()\"\r\n    >\r\n      <div\r\n        *ngFor=\"let report of reports\"\r\n        class=\"menu-item\"\r\n        (click)=\"onSelectContextOption(report)\"\r\n      >\r\n        {{ report.name }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n    <div\r\n    *ngIf=\"(formEndpoint || businessClass) && enableToPrintReport\"\r\n    presentationDesignerBase=\"send_report_by_email_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-send p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_reporting_send_mail'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"onSendPdf($event)\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"businessClass && showUploadButton\"\r\n    presentationDesignerBase=\"attachment_button\"\r\n    class=\"flex align-items-center justify-content-center btn-wrapper\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled || isUploadBlockedByMode\"\r\n      type=\"button\"\r\n      icon=\"pi pi-paperclip p-button-icon\"\r\n      [tooltipText]=\"'shared_actions_attachment'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"showUploadDialog()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n    >\r\n    </Tsi-Button>\r\n    <span *ngIf=\"nombreDocumentsJoints && nombreDocumentsJoints > 0\" class=\"custom-badge\">\r\n      {{ nombreDocumentsJoints }}\r\n    </span>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"businessClass && showImportExportButton\"\r\n    presentationDesignerBase=\"import_export_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-arrow-right-arrow-left p-button-icon\"\r\n      [tooltipText]=\"'shared_reporting_manage_export_import'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"showExportImportDialog()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showNoteButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n    presentationDesignerBase=\"shared_show_notes_button\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-comment p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_tsi_component_gestion_des_notes'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-warning hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (click)=\"viewNotes()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"businessClass && fromTsiForm && showManageWorkflowButton\"\r\n    presentationDesignerBase=\"shared_manage_workflow_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-sitemap p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_reporting_manage_workflow'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-info hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (click)=\"onManageWorkflowClick()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showActionButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n    presentationDesignerBase=\"shared_show_action_button\"\r\n  >\r\n    <Tsi-Button\r\n      id=\"'show-action-button'\"\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-bolt p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_tsi_component_gestion_des_action'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-warning hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (onClick)=\"viewAction()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showInfoButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n    presentationDesignerBase=\"shared_show_info_button\"\r\n  >\r\n    <Tsi-Button\r\n      id=\"'show-info-button'\"\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-info p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_actions_info'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-info hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (click)=\"viewInfo($event)\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showPresentationDesignerConfigButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      id=\"{{ customReportingMode ? 'confg-mode-button-from-list' : configModeButtonId }}\"\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-eye p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_tsi_component_config_show_hide'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"presentationDesignerConfig()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- <div *ngIf=\"showContextMenu\"\r\n  class=\"context-menu\"\r\n  [ngStyle]=\"{\r\n    'top.px': contextMenuPosition.y,\r\n    'left.px': contextMenuPosition.x\r\n  }\"\r\n  (mouseleave)=\"hideContextMenu()\">\r\n  <div *ngFor=\"let report of reports\"\r\n    class=\"menu-item\"\r\n    (click)=\"onSelectContextOption(report)\">\r\n    {{report.name}}\r\n  </div>\r\n</div> -->\r\n", styles: [".p-fileupload-content{display:none!important}.btn-wrapper{position:relative;display:inline-block}.context-menu{position:absolute;background:#fff;border:.125rem solid #ccc;border-radius:1rem;z-index:1000;box-shadow:0 .25rem .75rem #0003;min-width:15rem;max-height:25rem;padding:.5rem 0;overflow-y:auto}.menu-item{padding:.5rem;cursor:pointer;text-transform:capitalize}.menu-item:hover{background-color:#f0f0f0}::ng-deep .header-title{flex-shrink:1;min-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 .5rem}.custom-badge{position:absolute;top:-5px;right:-5px;background:#e90505;color:#fff;padding:2px 6px;font-size:.75rem;border-radius:50%;font-weight:700;min-width:1rem;text-align:center}\n"] }]
+            args: [{ selector: 'app-reporting', template: "<div class=\"flex gap-2 mx-2\">\r\n  <div\r\n    *ngIf=\"(formEndpoint || businessClass) && enableToPrintReport\"\r\n    presentationDesignerBase=\"manage_reports_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      [iconSrc]=\"'./assets/icons/icon-printer-group-white.png'\"\r\n      [iconWidth]=\"20\"\r\n      [tooltipText]=\"'shared_reporting_manage_reports'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"showDialog()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"(formEndpoint || businessClass) && enableToPrintReport\"\r\n    presentationDesignerBase=\"print_default_report_button\"\r\n    class=\"flex align-items-center justify-content-center btn-wrapper\"\r\n    #wrapper\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-print p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_reporting_rightClick'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"onPrintDefault($event)\"\r\n      (rightClick)=\"onRightClick($event)\"\r\n    >\r\n    </Tsi-Button>\r\n    <!-- `shared_reporting_print_report` key for `Imprimer` text  (replace it as value or tooltip if need it) -->\r\n\r\n    <div\r\n      *ngIf=\"showContextMenu && enableToPrintReport\"\r\n      class=\"context-menu\"\r\n      [class.rtl]=\"isRtlMode\"\r\n      [ngStyle]=\"{\r\n        'top.px': contextMenuPosition.y,\r\n        'left.px': contextMenuPosition.x\r\n      }\"\r\n      (mouseleave)=\"hideContextMenu()\"\r\n    >\r\n      <div\r\n        *ngFor=\"let report of reports\"\r\n        class=\"menu-item\"\r\n        (click)=\"onSelectContextOption(report)\"\r\n      >\r\n        {{ report.name }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n    <div\r\n    *ngIf=\"(formEndpoint || businessClass) && enableToPrintReport\"\r\n    presentationDesignerBase=\"send_report_by_email_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-send p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_reporting_send_mail'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"onSendPdf($event)\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"businessClass && showUploadButton\"\r\n    presentationDesignerBase=\"attachment_button\"\r\n    class=\"flex align-items-center justify-content-center btn-wrapper\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled || isUploadBlockedByMode\"\r\n      type=\"button\"\r\n      icon=\"pi pi-paperclip p-button-icon\"\r\n      [tooltipText]=\"'shared_actions_attachment'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"showUploadDialog()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n    >\r\n    </Tsi-Button>\r\n    <span *ngIf=\"nombreDocumentsJoints && nombreDocumentsJoints > 0\" class=\"custom-badge\">\r\n      {{ nombreDocumentsJoints }}\r\n    </span>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"businessClass && showImportExportButton\"\r\n    presentationDesignerBase=\"import_export_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-arrow-right-arrow-left p-button-icon\"\r\n      [tooltipText]=\"'shared_reporting_manage_export_import'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"showExportImportDialog()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showNoteButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n    presentationDesignerBase=\"shared_show_notes_button\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-comment p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_tsi_component_gestion_des_notes'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-warning hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (click)=\"viewNotes()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"businessClass && fromTsiForm && showManageWorkflowButton\"\r\n    presentationDesignerBase=\"shared_manage_workflow_button\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-sitemap p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_reporting_manage_workflow'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-info hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (click)=\"onManageWorkflowClick()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showActionButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n    presentationDesignerBase=\"shared_show_action_button\"\r\n  >\r\n    <Tsi-Button\r\n      id=\"'show-action-button'\"\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-bolt p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_tsi_component_gestion_des_action'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-warning hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (onClick)=\"viewAction()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showInfoButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n    presentationDesignerBase=\"shared_show_info_button\"\r\n  >\r\n    <Tsi-Button\r\n      id=\"'show-info-button'\"\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-info p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_actions_info'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-info hover:shadow-6 h-2rem p-button-icon-only text-white\"\r\n      (click)=\"viewInfo($event)\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showPresentationDesignerConfigButton\"\r\n    class=\"flex align-items-center justify-content-center\"\r\n  >\r\n    <Tsi-Button\r\n      id=\"{{ customReportingMode ? 'confg-mode-button-from-list' : configModeButtonId }}\"\r\n      [disabled]=\"isReportingToolbarDisabled\"\r\n      type=\"button\"\r\n      icon=\"pi pi-eye p-button-icon p-button-icon-left\"\r\n      [tooltipText]=\"'shared_tsi_component_config_show_hide'\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\"\r\n      (click)=\"presentationDesignerConfig()\"\r\n    >\r\n    </Tsi-Button>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- <div *ngIf=\"showContextMenu\"\r\n  class=\"context-menu\"\r\n  [ngStyle]=\"{\r\n    'top.px': contextMenuPosition.y,\r\n    'left.px': contextMenuPosition.x\r\n  }\"\r\n  (mouseleave)=\"hideContextMenu()\">\r\n  <div *ngFor=\"let report of reports\"\r\n    class=\"menu-item\"\r\n    (click)=\"onSelectContextOption(report)\">\r\n    {{report.name}}\r\n  </div>\r\n</div> -->\r\n", styles: [".p-fileupload-content{display:none!important}.btn-wrapper{position:relative;display:inline-block}.context-menu{position:absolute;background:#fff;border:.125rem solid #ccc;border-radius:1rem;z-index:1000;box-shadow:0 .25rem .75rem #0003;min-width:15rem;max-height:25rem;padding:.5rem 0;overflow-y:auto;transform:translate(-100%);width:max-content;max-width:30rem}.context-menu.rtl{transform:none}.menu-item{padding:.5rem;cursor:pointer;text-transform:capitalize;white-space:normal;overflow-wrap:anywhere}.menu-item:hover{background-color:#f0f0f0}::ng-deep .header-title{flex-shrink:1;min-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 .5rem}.custom-badge{position:absolute;top:-5px;right:-5px;background:#e90505;color:#fff;padding:2px 6px;font-size:.75rem;border-radius:50%;font-weight:700;min-width:1rem;text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: TsiModalService }, { type: ReportingService }, { type: IdentityManagerService }, { type: TsiNotificationService }, { type: TsiMessageService }, { type: RecordInfoPopupService }, { type: ErrorResponseManagerService }, { type: LayoutHelperService }, { type: GenericFichierService }, { type: i0.EnvironmentInjector }, { type: MailingService }, { type: InputRegistryService }], propDecorators: { showImportExportButton: [{
                 type: Input
             }], showNoteButton: [{
@@ -17534,11 +17729,11 @@ class TsiFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiFormComponent, deps: [{ token: EntityStatusService }, { token: StatusColorService }, { token: GenericFichierService }, { token: ErrorResponseManagerService }, { token: TsiConfirmationService }, { token: TsiNotificationService }, { token: i0.ChangeDetectorRef }, { token: LayoutHelperService }, { token: WorkflowConfigurationService }, { token: ColonnePersonnaliseeService }, { token: FormStateService }, { token: i1$3.DynamicDialogRef }, { token: i1$3.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiFormComponent, selector: "tsi-form", inputs: { class: "class", autocomplete: "autocomplete", optionalEndpoints: "optionalEndpoints", disabled: "disabled", isLoading: "isLoading", modalSize: "modalSize", showManageWorkflowButton: "showManageWorkflowButton", formEndpoint: "formEndpoint", formName: "formName", isReportingToolbarDisabled: "isReportingToolbarDisabled", isCreateOnly: "isCreateOnly", statusInputDisabled: "statusInputDisabled" }, outputs: { onSave: "onSave", openWorkflow: "openWorkflow", onSubmit: "onSubmit", onSubmitFormWorkflowConfiguration: "onSubmitFormWorkflowConfiguration", formRefChange: "formRefChange", onStatusChange: "onStatusChange" }, queries: [{ propertyName: "modalHeaderComp", first: true, predicate: TsiModalHeaderComponent, descendants: true }, { propertyName: "modalFooterComp", first: true, predicate: TsiModalFooterComponent, descendants: true }], viewQueries: [{ propertyName: "formRef", first: true, predicate: ["formRef"], descendants: true }, { propertyName: "reportingApp", first: true, predicate: ["reportingApp"], descendants: true }, { propertyName: "toolbarTemplateRef", first: true, predicate: ["toolbarTemplate"], descendants: true }, { propertyName: "dynamicToolbarContainers", predicate: ["dynamicToolbarContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dynamicFootersContainers", predicate: ["dynamicFooterContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<form class=\"form-horizontal\" autocomplete=\"off\" (ngSubmit)=\"handleFormSubmit($event)\" #formRef=\"ngForm\">\r\n  <ng-template #toolbarTemplate>\r\n    <p-toolbar *ngIf=\"formEndpoint\" styleClass=\"mb-1 gap-2\" class=\"w-full\" (dragover)=\"onDragOver($event)\"\r\n      (drop)=\"onDrop($event)\" (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\">\r\n\r\n      <ng-template pTemplate=\"left\">\r\n        <div class=\"mt-1 ml-2\">\r\n          {{ inputTitle }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"right\">\r\n        <div class=\"mt-1 mr-2\">\r\n          <app-reporting *ngIf=\"formEndpoint\" [fromTsiForm]=\"true\" [id]=\"this.id\" [formEndpoint]=\"formEndpoint\"\r\n            [formName]=\"formName\" [reportDiscriminator]=\"descriminatorValue\" [isFormEndpointPaged]=\"true\"\r\n            [mode]=\"mode\" [nombreDocumentsJoints]=\"nombreDocuments\" [configModeButtonId]=\"configModeButtonId\"\r\n            [isReportingToolbarDisabled]=\"isReportingToolbarDisabled\" (toggleDesignMode)=\"toggleDesignMode($event)\"\r\n            [businessClass]=\"businessClass\" (closedModalFileUpload)=\"getNombreFichier()\"\r\n            [showImportExportButton]=\"false\" [showActionButton]=\"showActionButton\" (openWorkflow)=\"openWorkflow.emit()\"\r\n            #reportingApp [showManageWorkflowButton]=\"showManageWorkflowButton\"\r\n            >\r\n          </app-reporting>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n        class=\"drag-message cursor-follow\">\r\n        {{ \"Jointure\" | localize }}\r\n      </div>\r\n\r\n    </p-toolbar>\r\n  </ng-template>\r\n\r\n  <div *busy=\"isLoading || hasActiveRequests\"></div>\r\n\r\n  <fieldset [disabled]=\"disabled\">\r\n    <div class=\"card mr\">\r\n      <p-tabView>\r\n\r\n        <p-tabPanel header=\"\" \r\n        [headerStyle]=\"colonnesPersonnaliseeGrouped.length === 0 && !canShowForms\r\n      ? { display: 'none' } \r\n      : null\">\r\n\r\n        <ng-template pTemplate=\"header\">\r\n          <i class=\"pi pi-home mr-2\"></i>\r\n          <span class=\"main-tab-text\">{{ 'shared_form_maintabTitle' | localize }}</span>\r\n        </ng-template>\r\n\r\n          <ng-content></ng-content>\r\n        </p-tabPanel>\r\n\r\n        <!-- Dynamic tabs -->\r\n        <ng-container *ngIf=\"colonnesPersonnaliseeGrouped.length > 0\">\r\n          <p-tabPanel *ngFor=\"let grp of colonnesPersonnaliseeGrouped\" [header]=\"grp.groupe\">\r\n\r\n            <ng-template #dynamicToolbarContainer></ng-template>\r\n\r\n            <div class=\"grid\">\r\n              <div class=\"col-12 grid form-row\" *ngFor=\"let col of grp.colonnes\">\r\n                <div class=\"col-3 form-label\">\r\n                  <Tsi-Label [labelValue]=\"col.nom\"></Tsi-Label>\r\n                </div>\r\n\r\n                <!-- String -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.string\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Text-Box [(inputField)]=\"col.data.valeurString\"></Tsi-Text-Box>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Int -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.int\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Integer [(inputField)]=\"col.data.valeurInt\"></Tsi-Integer>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Decimal -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.decimal\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Decimal-Input [(inputField)]=\"col.data.valeurDecimal\"></Tsi-Decimal-Input>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Boolean -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.boolean\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-CheckBox [isBinary]=\"false\" [(inputField)]=\"col.data.valeurBoolean\">\r\n                    </Tsi-CheckBox>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Binary -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.binary\">\r\n                  binary input (not handled yet)\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n\r\n            <ng-template #dynamicFooterContainer></ng-template>\r\n          </p-tabPanel>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"canShowForms\">\r\n          <p-tabPanel [header]=\"'shared_form_dynamicFormsTab_Title' | localize\">\r\n            <ng-template pTemplate=\"content\">\r\n              <shared-dynamic-form-list\r\n              [occurence]=\"id\"\r\n              [occurenceBusinessClass]=\"businessClass\"\r\n              [occurenceDiscriminatorValue]=\"descriminatorValue\"\r\n              [ignoreDialogConfig]=\"true\" />\r\n            </ng-template>\r\n          </p-tabPanel>\r\n        </ng-container>\r\n\r\n      </p-tabView>\r\n    </div>\r\n  </fieldset>\r\n\r\n  <div *ngIf=\"(businessClass && entityStatusList.length > 0) ||\r\n        workflowInformation?.workflowUid ||\r\n        workflowConfigurationService.isDesginModeFromWorkflow\" class=\"mx-4 px-2 my-1 shared-footer-bar\">\r\n\r\n    <div *ngIf=\"businessClass && entityStatusList && entityStatusList.length > 0\">\r\n      <div class=\"flex align-items-center gap-2\" presentationDesigner=\"shared_crud_status\">\r\n        <Tsi-Label [labelValue]=\"'shared_crud_status'\"></Tsi-Label>\r\n        <Tsi-Search-Combo [id-field]=\"'key'\" [label-field]=\"'value'\" [datasource]=\"entityStatusList\" [(bind)]=\"status\"\r\n          [comboType]=\"'status'\" [statusMetadata]=\"statusMetadataComboStatus\" [inputName]=\"statusColumnName\"\r\n          [showAddButton]=\"false\"\r\n          [showSearchButton]=\"false\" [disabled]=\"statusInputDisabled || entityStatusList.length == 1\"></Tsi-Search-Combo>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"workflowInformation?.workflowUid || workflowConfigurationService.isDesginModeFromWorkflow\"\r\n      class=\"flex col-10\">\r\n      <div presentationDesigner=\"shared_workflowName\" class=\"flex align-items-center gap-2 col-4\">\r\n        <Tsi-Label [labelValue]=\"'administration_workflow_workflow'| localize\">\r\n        </Tsi-Label>\r\n        <Tsi-Text-Box [disabled]=\"true\" [inputName]=\"'workflowName'\" [(inputField)]=\"workflowInformation.workflowName\">\r\n        </Tsi-Text-Box>\r\n      </div>\r\n      <div presentationDesigner=\"administration_workflow_workflow_current_status\"\r\n        class=\"flex align-items-center gap-2 col-4\">\r\n        <Tsi-Label [labelValue]=\"'administration_workflow_workflow_current_status'\"></Tsi-Label>\r\n        <Tsi-Search-Combo class=\"w-7\" [disabled]=\"true\" id-field=\"key\" label-field=\"value\"\r\n          [bind]=\"workflowInformation.workflowEtat\" [isFiltered]=\"true\" [inputName]=\"'WorkflowEtat'\"\r\n          [elementSourceUrl]=\"getWorkflowEtatAsKeyValuePair\" [listSourceUrl]=\"getWorkflowEtatSuivantAsKeyValuePair\"\r\n          [showAddButton]=\"false\"\r\n          [showSearchButton]=\"false\">\r\n        </Tsi-Search-Combo>\r\n      </div>\r\n      <div class=\"col-4\">\r\n        <div *ngIf=\"mode != formModes.create || workflowConfigurationService.isDesginModeFromWorkflow\"\r\n          presentationDesigner=\"administration_workflow_workflow_next_status\"\r\n          class=\"flex gap-2 align-items-center no-border\">\r\n          <Tsi-Label [labelValue]=\"'administration_workflow_workflow_next_status'\"></Tsi-Label>\r\n          <Tsi-Search-Combo class=\"w-7\" id-field=\"key\" label-field=\"value\" [(bind)]=\"selectedWorkflowEtatUid\"\r\n            [isFiltered]=\"true\" [elementSourceUrl]=\"getWorkflowEtatAsKeyValuePair\" [inputName]=\"'WorkflowEtat'\"\r\n            [listSourceUrl]=\"getWorkflowEtatSuivantAsKeyValuePair\" (bindChange)=\"confirmUpdateWorkflowEtat($event)\"\r\n            [showAddButton]=\"false\"\r\n            [showSearchButton]=\"false\">\r\n          </Tsi-Search-Combo>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>", styles: [".border-black{border:solid 2px black}.no-border{border:none!important}.shared-footer-bar{display:flex;align-items:center;width:calc(100% - 33rem);height:2.5rem;position:absolute;bottom:0;z-index:5}.mr{margin:0 12px 5px}.input-wrapper,.input-wrapper>tsi-text-box,.input-wrapper>tsi-integer,.input-wrapper>tsi-decimal-input,.input-wrapper>tsi-check-box{width:100%;display:block}.form-input{display:flex;align-items:center}.main-tab-text{display:inline-block}@media (max-width: 768px){.main-tab-text{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i7.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "selectOnFocus", "resetFilterOnHide", "reloadDataSource", "isFiltered", "selectedLabel", "maxWidth", "businessClass", "searchDebounceTime", "comboType", "statusMetadata", "currentRowItem", "datasource", "bind", "maxSelectedLabels", "tooltipMaxDisplayedItems", "bindMode", "showSearchButton", "showAddButton", "showConsultButton", "showUpdateButton"], outputs: ["bindChange", "datasource-loaded", "init", "isLoaded", "selectedLabelChange", "onClick", "onSearchButtonClick", "selectionChange"] }, { kind: "component", type: TsiCheckboxComponent, selector: "Tsi-CheckBox", inputs: ["class", "isBinary", "checked", "tooltipText", "tooltipPosition"], outputs: ["inputFieldChange", "checkedChange"] }, { kind: "component", type: TsiDecimalInputComponent, selector: "Tsi-Decimal-Input", inputs: ["numOfDecimal", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiTextBoxComponent, selector: "Tsi-Text-Box", inputs: ["textBoxType", "autocomplete"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "component", type: ReportingComponent, selector: "app-reporting", inputs: ["showImportExportButton", "showNoteButton", "showInfoButton", "showUploadButton", "showActionButton", "isReportingToolbarDisabled", "formName", "formEndpoint", "formEndpointBody", "isFormEndpointPaged", "filtersHtmlTemplate", "optionalEndpoints", "businessClass", "mode", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "showManageWorkflowButton", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode", "openWorkflow"] }, { kind: "component", type: DynamicFormListComponent, selector: "shared-dynamic-form-list", inputs: ["occurence", "occurenceBusinessClass", "occurenceDiscriminatorValue", "ignoreDialogConfig"] }, { kind: "directive", type: BusyDirective, selector: "[busy]", inputs: ["busy"] }, { kind: "directive", type: PresentationDesignerDirective, selector: "[presentationDesigner]:not(tsi-tab-panel)" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiFormComponent, selector: "tsi-form", inputs: { class: "class", autocomplete: "autocomplete", optionalEndpoints: "optionalEndpoints", disabled: "disabled", isLoading: "isLoading", modalSize: "modalSize", showManageWorkflowButton: "showManageWorkflowButton", formEndpoint: "formEndpoint", formName: "formName", isReportingToolbarDisabled: "isReportingToolbarDisabled", isCreateOnly: "isCreateOnly", statusInputDisabled: "statusInputDisabled" }, outputs: { onSave: "onSave", openWorkflow: "openWorkflow", onSubmit: "onSubmit", onSubmitFormWorkflowConfiguration: "onSubmitFormWorkflowConfiguration", formRefChange: "formRefChange", onStatusChange: "onStatusChange" }, queries: [{ propertyName: "modalHeaderComp", first: true, predicate: TsiModalHeaderComponent, descendants: true }, { propertyName: "modalFooterComp", first: true, predicate: TsiModalFooterComponent, descendants: true }], viewQueries: [{ propertyName: "formRef", first: true, predicate: ["formRef"], descendants: true }, { propertyName: "reportingApp", first: true, predicate: ["reportingApp"], descendants: true }, { propertyName: "toolbarTemplateRef", first: true, predicate: ["toolbarTemplate"], descendants: true }, { propertyName: "dynamicToolbarContainers", predicate: ["dynamicToolbarContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dynamicFootersContainers", predicate: ["dynamicFooterContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<form class=\"form-horizontal\" autocomplete=\"off\" (ngSubmit)=\"handleFormSubmit($event)\" #formRef=\"ngForm\">\r\n  <ng-template #toolbarTemplate>\r\n    <p-toolbar *ngIf=\"formEndpoint\" styleClass=\"mb-1 gap-2\" class=\"w-full\" (dragover)=\"onDragOver($event)\"\r\n      (drop)=\"onDrop($event)\" (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\">\r\n\r\n      <ng-template pTemplate=\"left\">\r\n        <div class=\"mt-1 ml-2\">\r\n          {{ inputTitle }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"right\">\r\n        <div class=\"mt-1 mr-2\">\r\n          <app-reporting *ngIf=\"formEndpoint\" [fromTsiForm]=\"true\" [id]=\"this.id\" [formEndpoint]=\"formEndpoint\"\r\n            [formName]=\"formName\" [reportDiscriminator]=\"descriminatorValue\" [isFormEndpointPaged]=\"true\"\r\n            [mode]=\"mode\" [nombreDocumentsJoints]=\"nombreDocuments\" [configModeButtonId]=\"configModeButtonId\"\r\n            [isReportingToolbarDisabled]=\"isReportingToolbarDisabled\" (toggleDesignMode)=\"toggleDesignMode($event)\"\r\n            [businessClass]=\"businessClass\" (closedModalFileUpload)=\"getNombreFichier()\"\r\n            [showImportExportButton]=\"false\" [showActionButton]=\"showActionButton\" (openWorkflow)=\"openWorkflow.emit()\"\r\n            #reportingApp [showManageWorkflowButton]=\"showManageWorkflowButton\"\r\n            >\r\n          </app-reporting>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n        class=\"drag-message cursor-follow\">\r\n        {{ \"Jointure\" | localize }}\r\n      </div>\r\n\r\n    </p-toolbar>\r\n  </ng-template>\r\n\r\n  <div *busy=\"isLoading || hasActiveRequests\"></div>\r\n\r\n  <fieldset [disabled]=\"disabled\">\r\n    <div class=\"card mr\">\r\n      <p-tabView>\r\n\r\n        <p-tabPanel header=\"\" \r\n        [headerStyle]=\"colonnesPersonnaliseeGrouped.length === 0 && !canShowForms\r\n      ? { display: 'none' } \r\n      : null\">\r\n\r\n        <ng-template pTemplate=\"header\">\r\n          <i class=\"pi pi-home mr-2\"></i>\r\n          <span class=\"main-tab-text\">{{ 'shared_form_maintabTitle' | localize }}</span>\r\n        </ng-template>\r\n\r\n          <ng-content></ng-content>\r\n        </p-tabPanel>\r\n\r\n        <!-- Dynamic tabs -->\r\n        <ng-container *ngIf=\"colonnesPersonnaliseeGrouped.length > 0\">\r\n          <p-tabPanel *ngFor=\"let grp of colonnesPersonnaliseeGrouped\" [header]=\"grp.groupe\">\r\n\r\n            <ng-template #dynamicToolbarContainer></ng-template>\r\n\r\n            <div class=\"grid\">\r\n              <div class=\"col-12 grid form-row\" *ngFor=\"let col of grp.colonnes\">\r\n                <div class=\"col-3 form-label\">\r\n                  <Tsi-Label [labelValue]=\"col.libelle\"></Tsi-Label>\r\n                </div>\r\n\r\n                <!-- String -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.string\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Text-Box [(inputField)]=\"col.data.valeurString\"></Tsi-Text-Box>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Int -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.int\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Integer [(inputField)]=\"col.data.valeurInt\"></Tsi-Integer>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Decimal -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.decimal\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Decimal-Input [(inputField)]=\"col.data.valeurDecimal\"></Tsi-Decimal-Input>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Boolean -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.boolean\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-CheckBox [isBinary]=\"false\" [(inputField)]=\"col.data.valeurBoolean\">\r\n                    </Tsi-CheckBox>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Binary -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.binary\">\r\n                  binary input (not handled yet)\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n\r\n            <ng-template #dynamicFooterContainer></ng-template>\r\n          </p-tabPanel>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"canShowForms\">\r\n          <p-tabPanel [header]=\"'shared_form_dynamicFormsTab_Title' | localize\">\r\n            <ng-template pTemplate=\"content\">\r\n              <shared-dynamic-form-list\r\n              [occurence]=\"id\"\r\n              [occurenceBusinessClass]=\"businessClass\"\r\n              [occurenceDiscriminatorValue]=\"descriminatorValue\"\r\n              [ignoreDialogConfig]=\"true\" />\r\n            </ng-template>\r\n          </p-tabPanel>\r\n        </ng-container>\r\n\r\n      </p-tabView>\r\n    </div>\r\n  </fieldset>\r\n\r\n  <div *ngIf=\"(businessClass && entityStatusList.length > 0) ||\r\n        workflowInformation?.workflowUid ||\r\n        workflowConfigurationService.isDesginModeFromWorkflow\" class=\"mx-4 px-2 my-1 shared-footer-bar\">\r\n\r\n    <div *ngIf=\"businessClass && entityStatusList && entityStatusList.length > 0\">\r\n      <div class=\"flex align-items-center gap-2\" presentationDesigner=\"shared_crud_status\">\r\n        <Tsi-Label [labelValue]=\"'shared_crud_status'\"></Tsi-Label>\r\n        <Tsi-Search-Combo [id-field]=\"'key'\" [label-field]=\"'value'\" [datasource]=\"entityStatusList\" [(bind)]=\"status\"\r\n          [comboType]=\"'status'\" [statusMetadata]=\"statusMetadataComboStatus\" [inputName]=\"statusColumnName\"\r\n          [showAddButton]=\"false\"\r\n          [showSearchButton]=\"false\" [disabled]=\"statusInputDisabled || entityStatusList.length == 1\"></Tsi-Search-Combo>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"workflowInformation?.workflowUid || workflowConfigurationService.isDesginModeFromWorkflow\"\r\n      class=\"flex col-10\">\r\n      <div presentationDesigner=\"shared_workflowName\" class=\"flex align-items-center gap-2 col-4\">\r\n        <Tsi-Label [labelValue]=\"'administration_workflow_workflow'| localize\">\r\n        </Tsi-Label>\r\n        <Tsi-Text-Box [disabled]=\"true\" [inputName]=\"'workflowName'\" [(inputField)]=\"workflowInformation.workflowName\">\r\n        </Tsi-Text-Box>\r\n      </div>\r\n      <div presentationDesigner=\"administration_workflow_workflow_current_status\"\r\n        class=\"flex align-items-center gap-2 col-4\">\r\n        <Tsi-Label [labelValue]=\"'administration_workflow_workflow_current_status'\"></Tsi-Label>\r\n        <Tsi-Search-Combo class=\"w-7\" [disabled]=\"true\" id-field=\"key\" label-field=\"value\"\r\n          [bind]=\"workflowInformation.workflowEtat\" [isFiltered]=\"true\" [inputName]=\"'WorkflowEtat'\"\r\n          [elementSourceUrl]=\"getWorkflowEtatAsKeyValuePair\" [listSourceUrl]=\"getWorkflowEtatSuivantAsKeyValuePair\"\r\n          [showAddButton]=\"false\"\r\n          [showSearchButton]=\"false\">\r\n        </Tsi-Search-Combo>\r\n      </div>\r\n      <div class=\"col-4\">\r\n        <div *ngIf=\"mode != formModes.create || workflowConfigurationService.isDesginModeFromWorkflow\"\r\n          presentationDesigner=\"administration_workflow_workflow_next_status\"\r\n          class=\"flex gap-2 align-items-center no-border\">\r\n          <Tsi-Label [labelValue]=\"'administration_workflow_workflow_next_status'\"></Tsi-Label>\r\n          <Tsi-Search-Combo class=\"w-7\" id-field=\"key\" label-field=\"value\" [(bind)]=\"selectedWorkflowEtatUid\"\r\n            [isFiltered]=\"true\" [elementSourceUrl]=\"getWorkflowEtatAsKeyValuePair\" [inputName]=\"'WorkflowEtat'\"\r\n            [listSourceUrl]=\"getWorkflowEtatSuivantAsKeyValuePair\" (bindChange)=\"confirmUpdateWorkflowEtat($event)\"\r\n            [showAddButton]=\"false\"\r\n            [showSearchButton]=\"false\">\r\n          </Tsi-Search-Combo>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>", styles: [".border-black{border:solid 2px black}.no-border{border:none!important}.shared-footer-bar{display:flex;align-items:center;width:calc(100% - 33rem);height:2.5rem;position:absolute;bottom:0;z-index:5}.mr{margin:0 12px 5px}.input-wrapper,.input-wrapper>tsi-text-box,.input-wrapper>tsi-integer,.input-wrapper>tsi-decimal-input,.input-wrapper>tsi-check-box{width:100%;display:block}.form-input{display:flex;align-items:center}.main-tab-text{display:inline-block}@media (max-width: 768px){.main-tab-text{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i7.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "selectOnFocus", "resetFilterOnHide", "reloadDataSource", "isFiltered", "selectedLabel", "maxWidth", "businessClass", "searchDebounceTime", "comboType", "statusMetadata", "currentRowItem", "datasource", "bind", "maxSelectedLabels", "tooltipMaxDisplayedItems", "bindMode", "showSearchButton", "showAddButton", "showConsultButton", "showUpdateButton"], outputs: ["bindChange", "datasource-loaded", "init", "isLoaded", "selectedLabelChange", "onClick", "onSearchButtonClick", "selectionChange"] }, { kind: "component", type: TsiCheckboxComponent, selector: "Tsi-CheckBox", inputs: ["class", "isBinary", "checked", "tooltipText", "tooltipPosition"], outputs: ["inputFieldChange", "checkedChange"] }, { kind: "component", type: TsiDecimalInputComponent, selector: "Tsi-Decimal-Input", inputs: ["numOfDecimal", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiTextBoxComponent, selector: "Tsi-Text-Box", inputs: ["textBoxType", "autocomplete"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "component", type: ReportingComponent, selector: "app-reporting", inputs: ["showImportExportButton", "showNoteButton", "showInfoButton", "showUploadButton", "showActionButton", "isReportingToolbarDisabled", "formName", "formEndpoint", "formEndpointBody", "isFormEndpointPaged", "filtersHtmlTemplate", "optionalEndpoints", "businessClass", "mode", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "showManageWorkflowButton", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode", "openWorkflow"] }, { kind: "component", type: DynamicFormListComponent, selector: "shared-dynamic-form-list", inputs: ["occurence", "occurenceBusinessClass", "occurenceDiscriminatorValue", "ignoreDialogConfig"] }, { kind: "directive", type: BusyDirective, selector: "[busy]", inputs: ["busy"] }, { kind: "directive", type: PresentationDesignerDirective, selector: "[presentationDesigner]:not(tsi-tab-panel)" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tsi-form', template: "<form class=\"form-horizontal\" autocomplete=\"off\" (ngSubmit)=\"handleFormSubmit($event)\" #formRef=\"ngForm\">\r\n  <ng-template #toolbarTemplate>\r\n    <p-toolbar *ngIf=\"formEndpoint\" styleClass=\"mb-1 gap-2\" class=\"w-full\" (dragover)=\"onDragOver($event)\"\r\n      (drop)=\"onDrop($event)\" (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\">\r\n\r\n      <ng-template pTemplate=\"left\">\r\n        <div class=\"mt-1 ml-2\">\r\n          {{ inputTitle }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"right\">\r\n        <div class=\"mt-1 mr-2\">\r\n          <app-reporting *ngIf=\"formEndpoint\" [fromTsiForm]=\"true\" [id]=\"this.id\" [formEndpoint]=\"formEndpoint\"\r\n            [formName]=\"formName\" [reportDiscriminator]=\"descriminatorValue\" [isFormEndpointPaged]=\"true\"\r\n            [mode]=\"mode\" [nombreDocumentsJoints]=\"nombreDocuments\" [configModeButtonId]=\"configModeButtonId\"\r\n            [isReportingToolbarDisabled]=\"isReportingToolbarDisabled\" (toggleDesignMode)=\"toggleDesignMode($event)\"\r\n            [businessClass]=\"businessClass\" (closedModalFileUpload)=\"getNombreFichier()\"\r\n            [showImportExportButton]=\"false\" [showActionButton]=\"showActionButton\" (openWorkflow)=\"openWorkflow.emit()\"\r\n            #reportingApp [showManageWorkflowButton]=\"showManageWorkflowButton\"\r\n            >\r\n          </app-reporting>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n        class=\"drag-message cursor-follow\">\r\n        {{ \"Jointure\" | localize }}\r\n      </div>\r\n\r\n    </p-toolbar>\r\n  </ng-template>\r\n\r\n  <div *busy=\"isLoading || hasActiveRequests\"></div>\r\n\r\n  <fieldset [disabled]=\"disabled\">\r\n    <div class=\"card mr\">\r\n      <p-tabView>\r\n\r\n        <p-tabPanel header=\"\" \r\n        [headerStyle]=\"colonnesPersonnaliseeGrouped.length === 0 && !canShowForms\r\n      ? { display: 'none' } \r\n      : null\">\r\n\r\n        <ng-template pTemplate=\"header\">\r\n          <i class=\"pi pi-home mr-2\"></i>\r\n          <span class=\"main-tab-text\">{{ 'shared_form_maintabTitle' | localize }}</span>\r\n        </ng-template>\r\n\r\n          <ng-content></ng-content>\r\n        </p-tabPanel>\r\n\r\n        <!-- Dynamic tabs -->\r\n        <ng-container *ngIf=\"colonnesPersonnaliseeGrouped.length > 0\">\r\n          <p-tabPanel *ngFor=\"let grp of colonnesPersonnaliseeGrouped\" [header]=\"grp.groupe\">\r\n\r\n            <ng-template #dynamicToolbarContainer></ng-template>\r\n\r\n            <div class=\"grid\">\r\n              <div class=\"col-12 grid form-row\" *ngFor=\"let col of grp.colonnes\">\r\n                <div class=\"col-3 form-label\">\r\n                  <Tsi-Label [labelValue]=\"col.nom\"></Tsi-Label>\r\n                </div>\r\n\r\n                <!-- String -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.string\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Text-Box [(inputField)]=\"col.data.valeurString\"></Tsi-Text-Box>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Int -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.int\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Integer [(inputField)]=\"col.data.valeurInt\"></Tsi-Integer>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Decimal -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.decimal\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Decimal-Input [(inputField)]=\"col.data.valeurDecimal\"></Tsi-Decimal-Input>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Boolean -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.boolean\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-CheckBox [isBinary]=\"false\" [(inputField)]=\"col.data.valeurBoolean\">\r\n                    </Tsi-CheckBox>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Binary -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.binary\">\r\n                  binary input (not handled yet)\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n\r\n            <ng-template #dynamicFooterContainer></ng-template>\r\n          </p-tabPanel>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"canShowForms\">\r\n          <p-tabPanel [header]=\"'shared_form_dynamicFormsTab_Title' | localize\">\r\n            <ng-template pTemplate=\"content\">\r\n              <shared-dynamic-form-list\r\n              [occurence]=\"id\"\r\n              [occurenceBusinessClass]=\"businessClass\"\r\n              [occurenceDiscriminatorValue]=\"descriminatorValue\"\r\n              [ignoreDialogConfig]=\"true\" />\r\n            </ng-template>\r\n          </p-tabPanel>\r\n        </ng-container>\r\n\r\n      </p-tabView>\r\n    </div>\r\n  </fieldset>\r\n\r\n  <div *ngIf=\"(businessClass && entityStatusList.length > 0) ||\r\n        workflowInformation?.workflowUid ||\r\n        workflowConfigurationService.isDesginModeFromWorkflow\" class=\"mx-4 px-2 my-1 shared-footer-bar\">\r\n\r\n    <div *ngIf=\"businessClass && entityStatusList && entityStatusList.length > 0\">\r\n      <div class=\"flex align-items-center gap-2\" presentationDesigner=\"shared_crud_status\">\r\n        <Tsi-Label [labelValue]=\"'shared_crud_status'\"></Tsi-Label>\r\n        <Tsi-Search-Combo [id-field]=\"'key'\" [label-field]=\"'value'\" [datasource]=\"entityStatusList\" [(bind)]=\"status\"\r\n          [comboType]=\"'status'\" [statusMetadata]=\"statusMetadataComboStatus\" [inputName]=\"statusColumnName\"\r\n          [showAddButton]=\"false\"\r\n          [showSearchButton]=\"false\" [disabled]=\"statusInputDisabled || entityStatusList.length == 1\"></Tsi-Search-Combo>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"workflowInformation?.workflowUid || workflowConfigurationService.isDesginModeFromWorkflow\"\r\n      class=\"flex col-10\">\r\n      <div presentationDesigner=\"shared_workflowName\" class=\"flex align-items-center gap-2 col-4\">\r\n        <Tsi-Label [labelValue]=\"'administration_workflow_workflow'| localize\">\r\n        </Tsi-Label>\r\n        <Tsi-Text-Box [disabled]=\"true\" [inputName]=\"'workflowName'\" [(inputField)]=\"workflowInformation.workflowName\">\r\n        </Tsi-Text-Box>\r\n      </div>\r\n      <div presentationDesigner=\"administration_workflow_workflow_current_status\"\r\n        class=\"flex align-items-center gap-2 col-4\">\r\n        <Tsi-Label [labelValue]=\"'administration_workflow_workflow_current_status'\"></Tsi-Label>\r\n        <Tsi-Search-Combo class=\"w-7\" [disabled]=\"true\" id-field=\"key\" label-field=\"value\"\r\n          [bind]=\"workflowInformation.workflowEtat\" [isFiltered]=\"true\" [inputName]=\"'WorkflowEtat'\"\r\n          [elementSourceUrl]=\"getWorkflowEtatAsKeyValuePair\" [listSourceUrl]=\"getWorkflowEtatSuivantAsKeyValuePair\"\r\n          [showAddButton]=\"false\"\r\n          [showSearchButton]=\"false\">\r\n        </Tsi-Search-Combo>\r\n      </div>\r\n      <div class=\"col-4\">\r\n        <div *ngIf=\"mode != formModes.create || workflowConfigurationService.isDesginModeFromWorkflow\"\r\n          presentationDesigner=\"administration_workflow_workflow_next_status\"\r\n          class=\"flex gap-2 align-items-center no-border\">\r\n          <Tsi-Label [labelValue]=\"'administration_workflow_workflow_next_status'\"></Tsi-Label>\r\n          <Tsi-Search-Combo class=\"w-7\" id-field=\"key\" label-field=\"value\" [(bind)]=\"selectedWorkflowEtatUid\"\r\n            [isFiltered]=\"true\" [elementSourceUrl]=\"getWorkflowEtatAsKeyValuePair\" [inputName]=\"'WorkflowEtat'\"\r\n            [listSourceUrl]=\"getWorkflowEtatSuivantAsKeyValuePair\" (bindChange)=\"confirmUpdateWorkflowEtat($event)\"\r\n            [showAddButton]=\"false\"\r\n            [showSearchButton]=\"false\">\r\n          </Tsi-Search-Combo>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>", styles: [".border-black{border:solid 2px black}.no-border{border:none!important}.shared-footer-bar{display:flex;align-items:center;width:calc(100% - 33rem);height:2.5rem;position:absolute;bottom:0;z-index:5}.mr{margin:0 12px 5px}.input-wrapper,.input-wrapper>tsi-text-box,.input-wrapper>tsi-integer,.input-wrapper>tsi-decimal-input,.input-wrapper>tsi-check-box{width:100%;display:block}.form-input{display:flex;align-items:center}.main-tab-text{display:inline-block}@media (max-width: 768px){.main-tab-text{display:none}}\n"] }]
+            args: [{ selector: 'tsi-form', template: "<form class=\"form-horizontal\" autocomplete=\"off\" (ngSubmit)=\"handleFormSubmit($event)\" #formRef=\"ngForm\">\r\n  <ng-template #toolbarTemplate>\r\n    <p-toolbar *ngIf=\"formEndpoint\" styleClass=\"mb-1 gap-2\" class=\"w-full\" (dragover)=\"onDragOver($event)\"\r\n      (drop)=\"onDrop($event)\" (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\">\r\n\r\n      <ng-template pTemplate=\"left\">\r\n        <div class=\"mt-1 ml-2\">\r\n          {{ inputTitle }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"right\">\r\n        <div class=\"mt-1 mr-2\">\r\n          <app-reporting *ngIf=\"formEndpoint\" [fromTsiForm]=\"true\" [id]=\"this.id\" [formEndpoint]=\"formEndpoint\"\r\n            [formName]=\"formName\" [reportDiscriminator]=\"descriminatorValue\" [isFormEndpointPaged]=\"true\"\r\n            [mode]=\"mode\" [nombreDocumentsJoints]=\"nombreDocuments\" [configModeButtonId]=\"configModeButtonId\"\r\n            [isReportingToolbarDisabled]=\"isReportingToolbarDisabled\" (toggleDesignMode)=\"toggleDesignMode($event)\"\r\n            [businessClass]=\"businessClass\" (closedModalFileUpload)=\"getNombreFichier()\"\r\n            [showImportExportButton]=\"false\" [showActionButton]=\"showActionButton\" (openWorkflow)=\"openWorkflow.emit()\"\r\n            #reportingApp [showManageWorkflowButton]=\"showManageWorkflowButton\"\r\n            >\r\n          </app-reporting>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n        class=\"drag-message cursor-follow\">\r\n        {{ \"Jointure\" | localize }}\r\n      </div>\r\n\r\n    </p-toolbar>\r\n  </ng-template>\r\n\r\n  <div *busy=\"isLoading || hasActiveRequests\"></div>\r\n\r\n  <fieldset [disabled]=\"disabled\">\r\n    <div class=\"card mr\">\r\n      <p-tabView>\r\n\r\n        <p-tabPanel header=\"\" \r\n        [headerStyle]=\"colonnesPersonnaliseeGrouped.length === 0 && !canShowForms\r\n      ? { display: 'none' } \r\n      : null\">\r\n\r\n        <ng-template pTemplate=\"header\">\r\n          <i class=\"pi pi-home mr-2\"></i>\r\n          <span class=\"main-tab-text\">{{ 'shared_form_maintabTitle' | localize }}</span>\r\n        </ng-template>\r\n\r\n          <ng-content></ng-content>\r\n        </p-tabPanel>\r\n\r\n        <!-- Dynamic tabs -->\r\n        <ng-container *ngIf=\"colonnesPersonnaliseeGrouped.length > 0\">\r\n          <p-tabPanel *ngFor=\"let grp of colonnesPersonnaliseeGrouped\" [header]=\"grp.groupe\">\r\n\r\n            <ng-template #dynamicToolbarContainer></ng-template>\r\n\r\n            <div class=\"grid\">\r\n              <div class=\"col-12 grid form-row\" *ngFor=\"let col of grp.colonnes\">\r\n                <div class=\"col-3 form-label\">\r\n                  <Tsi-Label [labelValue]=\"col.libelle\"></Tsi-Label>\r\n                </div>\r\n\r\n                <!-- String -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.string\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Text-Box [(inputField)]=\"col.data.valeurString\"></Tsi-Text-Box>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Int -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.int\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Integer [(inputField)]=\"col.data.valeurInt\"></Tsi-Integer>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Decimal -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.decimal\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-Decimal-Input [(inputField)]=\"col.data.valeurDecimal\"></Tsi-Decimal-Input>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Boolean -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.boolean\">\r\n                  <div class=\"input-wrapper\">\r\n                    <Tsi-CheckBox [isBinary]=\"false\" [(inputField)]=\"col.data.valeurBoolean\">\r\n                    </Tsi-CheckBox>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Binary -->\r\n                <div class=\"col-8 form-input\" *ngIf=\"col.type === formType.binary\">\r\n                  binary input (not handled yet)\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n\r\n            <ng-template #dynamicFooterContainer></ng-template>\r\n          </p-tabPanel>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"canShowForms\">\r\n          <p-tabPanel [header]=\"'shared_form_dynamicFormsTab_Title' | localize\">\r\n            <ng-template pTemplate=\"content\">\r\n              <shared-dynamic-form-list\r\n              [occurence]=\"id\"\r\n              [occurenceBusinessClass]=\"businessClass\"\r\n              [occurenceDiscriminatorValue]=\"descriminatorValue\"\r\n              [ignoreDialogConfig]=\"true\" />\r\n            </ng-template>\r\n          </p-tabPanel>\r\n        </ng-container>\r\n\r\n      </p-tabView>\r\n    </div>\r\n  </fieldset>\r\n\r\n  <div *ngIf=\"(businessClass && entityStatusList.length > 0) ||\r\n        workflowInformation?.workflowUid ||\r\n        workflowConfigurationService.isDesginModeFromWorkflow\" class=\"mx-4 px-2 my-1 shared-footer-bar\">\r\n\r\n    <div *ngIf=\"businessClass && entityStatusList && entityStatusList.length > 0\">\r\n      <div class=\"flex align-items-center gap-2\" presentationDesigner=\"shared_crud_status\">\r\n        <Tsi-Label [labelValue]=\"'shared_crud_status'\"></Tsi-Label>\r\n        <Tsi-Search-Combo [id-field]=\"'key'\" [label-field]=\"'value'\" [datasource]=\"entityStatusList\" [(bind)]=\"status\"\r\n          [comboType]=\"'status'\" [statusMetadata]=\"statusMetadataComboStatus\" [inputName]=\"statusColumnName\"\r\n          [showAddButton]=\"false\"\r\n          [showSearchButton]=\"false\" [disabled]=\"statusInputDisabled || entityStatusList.length == 1\"></Tsi-Search-Combo>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"workflowInformation?.workflowUid || workflowConfigurationService.isDesginModeFromWorkflow\"\r\n      class=\"flex col-10\">\r\n      <div presentationDesigner=\"shared_workflowName\" class=\"flex align-items-center gap-2 col-4\">\r\n        <Tsi-Label [labelValue]=\"'administration_workflow_workflow'| localize\">\r\n        </Tsi-Label>\r\n        <Tsi-Text-Box [disabled]=\"true\" [inputName]=\"'workflowName'\" [(inputField)]=\"workflowInformation.workflowName\">\r\n        </Tsi-Text-Box>\r\n      </div>\r\n      <div presentationDesigner=\"administration_workflow_workflow_current_status\"\r\n        class=\"flex align-items-center gap-2 col-4\">\r\n        <Tsi-Label [labelValue]=\"'administration_workflow_workflow_current_status'\"></Tsi-Label>\r\n        <Tsi-Search-Combo class=\"w-7\" [disabled]=\"true\" id-field=\"key\" label-field=\"value\"\r\n          [bind]=\"workflowInformation.workflowEtat\" [isFiltered]=\"true\" [inputName]=\"'WorkflowEtat'\"\r\n          [elementSourceUrl]=\"getWorkflowEtatAsKeyValuePair\" [listSourceUrl]=\"getWorkflowEtatSuivantAsKeyValuePair\"\r\n          [showAddButton]=\"false\"\r\n          [showSearchButton]=\"false\">\r\n        </Tsi-Search-Combo>\r\n      </div>\r\n      <div class=\"col-4\">\r\n        <div *ngIf=\"mode != formModes.create || workflowConfigurationService.isDesginModeFromWorkflow\"\r\n          presentationDesigner=\"administration_workflow_workflow_next_status\"\r\n          class=\"flex gap-2 align-items-center no-border\">\r\n          <Tsi-Label [labelValue]=\"'administration_workflow_workflow_next_status'\"></Tsi-Label>\r\n          <Tsi-Search-Combo class=\"w-7\" id-field=\"key\" label-field=\"value\" [(bind)]=\"selectedWorkflowEtatUid\"\r\n            [isFiltered]=\"true\" [elementSourceUrl]=\"getWorkflowEtatAsKeyValuePair\" [inputName]=\"'WorkflowEtat'\"\r\n            [listSourceUrl]=\"getWorkflowEtatSuivantAsKeyValuePair\" (bindChange)=\"confirmUpdateWorkflowEtat($event)\"\r\n            [showAddButton]=\"false\"\r\n            [showSearchButton]=\"false\">\r\n          </Tsi-Search-Combo>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>", styles: [".border-black{border:solid 2px black}.no-border{border:none!important}.shared-footer-bar{display:flex;align-items:center;width:calc(100% - 33rem);height:2.5rem;position:absolute;bottom:0;z-index:5}.mr{margin:0 12px 5px}.input-wrapper,.input-wrapper>tsi-text-box,.input-wrapper>tsi-integer,.input-wrapper>tsi-decimal-input,.input-wrapper>tsi-check-box{width:100%;display:block}.form-input{display:flex;align-items:center}.main-tab-text{display:inline-block}@media (max-width: 768px){.main-tab-text{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: EntityStatusService }, { type: StatusColorService }, { type: GenericFichierService }, { type: ErrorResponseManagerService }, { type: TsiConfirmationService }, { type: TsiNotificationService }, { type: i0.ChangeDetectorRef }, { type: LayoutHelperService }, { type: WorkflowConfigurationService }, { type: ColonnePersonnaliseeService }, { type: FormStateService }, { type: i1$3.DynamicDialogRef }, { type: i1$3.DynamicDialogConfig }], propDecorators: { formRef: [{
                 type: ViewChild,
                 args: ['formRef']
@@ -24174,6 +24369,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['codeInput']
             }] } });
 
+class TsiNotificationPanelComponent {
+    constructor(notifService, hub, entityConfigurationService, _tsiModalService, router) {
+        this.notifService = notifService;
+        this.hub = hub;
+        this.entityConfigurationService = entityConfigurationService;
+        this._tsiModalService = _tsiModalService;
+        this.router = router;
+        this.menuCache = new Map();
+    }
+    ngOnInit() {
+        if (this.hub.isEnabled) {
+            this.notifService.loadFirstPage();
+        }
+    }
+    toggle(event) {
+        this.notifService.loadFirstPage();
+        this.overlayPanel.toggle(event);
+    }
+    onListScroll(event) {
+        const el = event.target;
+        if (el.scrollTop + el.clientHeight >= el.scrollHeight - 40) {
+            this.notifService.loadNextPage();
+        }
+    }
+    navigateToList() {
+        if (!this.listRoute)
+            return;
+        this.overlayPanel.hide();
+        this.router.navigate([this.listRoute]);
+    }
+    getInitials(title) {
+        return title ? title.charAt(0).toUpperCase() : '?';
+    }
+    getAvatarColor(type) {
+        switch (type) {
+            case NotificationType.Success: return '#22c55e';
+            case NotificationType.Warning: return '#f59e0b';
+            case NotificationType.Error: return '#ef4444';
+            case NotificationType.Information:
+            default: return '#0ea5e9';
+        }
+    }
+    timeAgo(dateStr) {
+        const normalized = /Z|[+-]\d{2}:?\d{2}$/.test(dateStr) ? dateStr : dateStr + 'Z';
+        const diff = Date.now() - new Date(normalized).getTime();
+        const minutes = Math.floor(diff / 60000);
+        if (minutes < 1)
+            return 'à l\'instant';
+        if (minutes < 60)
+            return `${minutes} min`;
+        const hours = Math.floor(minutes / 60);
+        if (hours < 24)
+            return `${hours} h`;
+        const days = Math.floor(hours / 24);
+        if (days < 7)
+            return `${days} j`;
+        const weeks = Math.floor(days / 7);
+        return `${weeks} sem.`;
+    }
+    markAllAsRead() {
+        if (this.notifService.unreadCount === 0)
+            return;
+        this.notifService.markAllAsRead();
+        this.menuCache.clear();
+    }
+    onNotifClick(notification) {
+        if (!notification.isRead) {
+            this.notifService.markAsRead(notification.uid);
+            this.menuCache.delete(notification.uid);
+        }
+        if (notification.url) {
+            window.open(notification.url, '_blank');
+        }
+    }
+    markAsUnread(notification) {
+        this.notifService.markAsUnread(notification.uid);
+        this.menuCache.delete(notification.uid);
+    }
+    buildItemMenu(notification) {
+        if (this.menuCache.has(notification.uid)) {
+            return this.menuCache.get(notification.uid);
+        }
+        const items = [];
+        if (notification.url) {
+            items.push({
+                label: 'Ouvrir le lien',
+                icon: 'pi pi-external-link',
+                command: () => window.open(notification.url, '_blank')
+            });
+        }
+        if (notification.isRead) {
+            items.push({
+                label: 'Marquer comme non lu',
+                icon: 'pi pi-eye-slash',
+                command: () => this.markAsUnread(notification)
+            });
+        }
+        if (this.listRoute) {
+            items.push({
+                label: 'Voir la liste',
+                icon: 'pi pi-list',
+                command: () => this.navigateToList()
+            });
+        }
+        if (notification.classe && notification.objet) {
+            items.push({
+                label: 'Voir fiche',
+                icon: 'pi pi-eye',
+                command: () => this.openFiche(notification)
+            });
+        }
+        this.menuCache.set(notification.uid, items);
+        return items;
+    }
+    openFiche(notification) {
+        if (!notification.classe)
+            return;
+        this.entityConfigurationService
+            .getEntityInfo(notification.classe)
+            .subscribe({
+            next: (entity) => {
+                const componentType = TypeRegistryHelper.getType(entity.formName);
+                const conf = {
+                    data: {
+                        mode: Component_Modes.CONSULT,
+                        customData: entity,
+                        entityInfo: entity,
+                        id: notification.objet,
+                    },
+                    width: ModalSizeEnum.Medium.width,
+                    height: ModalSizeEnum.Large.height,
+                    maximizable: true,
+                    templates: {
+                        footer: TsiFormModalFooterComponent,
+                    }
+                };
+                this._tsiModalService.open(componentType, conf);
+            },
+            error: () => { }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotificationPanelComponent, deps: [{ token: TsiNotificationCenterService }, { token: TsiNotificationHubService }, { token: EntityConfigurationService }, { token: TsiModalService }, { token: i7$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiNotificationPanelComponent, selector: "Tsi-Notification-Panel", inputs: { listRoute: "listRoute" }, viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: ["op"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"hub.isEnabled\">\r\n  <button class=\"p-link layout-topbar-button notification-bell\" (click)=\"toggle($event)\">\r\n    <i class=\"pi pi-bell\" pBadge [value]=\"notifService.unreadCount.toString()\" severity=\"danger\"\r\n      [class.p-badge-hidden]=\"notifService.unreadCount === 0\">\r\n    </i>\r\n  </button>\r\n\r\n  <p-overlayPanel #op styleClass=\"notification-overlay\" [dismissable]=\"true\">\r\n\r\n    <div class=\"notif-header\">\r\n      <span class=\"notif-title\">Notifications</span>\r\n      <div class=\"flex gap-1\">\r\n        <button *ngIf=\"notifService.unreadCount > 0\"\r\n                pTooltip=\"Tout marquer comme lu\" tooltipPosition=\"top\"\r\n                class=\"p-link\" (click)=\"markAllAsRead()\">\r\n          <i class=\"pi pi-check-square\"></i>\r\n        </button>\r\n        <button *ngIf=\"listRoute\" pTooltip=\"Voir la liste\" tooltipPosition=\"top\" class=\"p-link\" (click)=\"navigateToList()\">\r\n          <i class=\"pi pi-cog\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <p-divider styleClass=\"my-0\"></p-divider>\r\n\r\n    <div class=\"notif-list\" (scroll)=\"onListScroll($event)\">\r\n\r\n      <ng-container *ngIf=\"notifService.isLoading\">\r\n        <div *ngFor=\"let i of [1, 2, 3]\" class=\"notif-item\">\r\n          <p-skeleton shape=\"circle\" size=\"2.5rem\"></p-skeleton>\r\n          <div class=\"flex flex-column gap-1 flex-1\">\r\n            <p-skeleton width=\"75%\" height=\"0.85rem\"></p-skeleton>\r\n            <p-skeleton width=\"45%\" height=\"0.75rem\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"!notifService.isLoading && notifService.notifications.length === 0\" class=\"notif-empty\">\r\n        <i class=\"pi pi-check-circle\"></i>\r\n        <span>Aucune notification</span>\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!notifService.isLoading\">\r\n        <div *ngFor=\"let n of notifService.notifications\" class=\"notif-item\" [class.notif-item--unread]=\"!n.isRead\"\r\n             (click)=\"onNotifClick(n)\" (dblclick)=\"openFiche(n)\" [pTooltip]=\"'NotificationTooltip' | localize\"\r\n             tooltipPosition=\"bottom\" tooltipStyleClass=\"notif-tooltip\" style=\"cursor: pointer;\">\r\n\r\n          <div class=\"notif-avatar-wrapper\">\r\n            <ng-container *ngIf=\"n.image; else initialsAvatar\">\r\n              <img [src]=\"n.image\" class=\"notif-avatar notif-avatar-img\" alt=\"avatar\" />\r\n            </ng-container>\r\n            <ng-template #initialsAvatar>\r\n              <div class=\"notif-avatar\" [ngStyle]=\"{'background': getAvatarColor(n.notificationType)}\">\r\n                {{ getInitials(n.title) }}\r\n              </div>\r\n            </ng-template>\r\n            <span *ngIf=\"!n.isRead\" class=\"notif-dot\"></span>\r\n          </div>\r\n\r\n          <div class=\"notif-content\">\r\n            <div class=\"notif-message\">\r\n              <span class=\"notif-bold\">{{ n.title }}</span>\r\n              <span *ngIf=\"n.message\"> \u2014 {{ n.message }}</span>\r\n              <Tsi-Bubble-Info *ngIf=\"n.detailledMessage\" [infoText]=\"n.detailledMessage\"></Tsi-Bubble-Info>\r\n            </div>\r\n            <div class=\"notif-meta\">{{ timeAgo(n.createdAt) }}</div>\r\n          </div>\r\n\r\n          <button class=\"p-link notif-more\" (click)=\"itemMenu.toggle($event); $event.stopPropagation()\">\r\n            <i class=\"pi pi-ellipsis-v\"></i>\r\n          </button>\r\n          <p-menu #itemMenu [model]=\"buildItemMenu(n)\" [popup]=\"true\" appendTo=\"body\"></p-menu>\r\n\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"notifService.isLoadingMore\" class=\"notif-load-more\">\r\n        <p-skeleton width=\"100%\" height=\"3.25rem\"></p-skeleton>\r\n      </div>\r\n      <div *ngIf=\"!notifService.hasMore && notifService.notifications.length > 0 && !notifService.isLoading\"\r\n           class=\"notif-end\">\r\n        <span>Tout est \u00E0 jour</span>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </p-overlayPanel>\r\n</ng-container>\r\n", styles: [".notification-bell{position:relative;margin-right:.5rem}.notification-bell .p-badge-hidden~.p-badge{display:none}:host ::ng-deep .notification-overlay{width:26rem;padding:0;border-radius:12px;box-shadow:0 4px 24px #0000001f;overflow:hidden}:host ::ng-deep .notification-overlay .p-overlaypanel-content{padding:0}.notif-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem .5rem}.notif-header .notif-title{font-size:1.1rem;font-weight:700}.notif-header button i{font-size:1.1rem;color:#64748b}.notif-list{max-height:28rem;overflow-y:auto}.notif-list::-webkit-scrollbar{width:4px}.notif-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.notif-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid #f1f5f9}.notif-item:last-child{border-bottom:none}.notif-item--unread{background-color:#f0f9ff;border-left:3px solid #0ea5e9;padding-left:calc(1rem - 3px)}.notif-item--unread .notif-content{color:#0f172a}.notif-avatar-wrapper{position:relative;flex-shrink:0}.notif-avatar{width:2.5rem;height:2.5rem;border-radius:50%;background:#0ea5e9;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem}.notif-avatar-img{object-fit:cover}.notif-dot{position:absolute;bottom:1px;right:1px;width:.6rem;height:.6rem;background:#0ea5e9;border-radius:50%;border:2px solid #fff}.notif-content{flex:1;min-width:0;font-size:.875rem;line-height:1.4;color:#1e293b}.notif-bold{font-weight:700}.notif-meta{font-size:.78rem;color:#64748b;margin-top:.2rem}.notif-more{color:#94a3b8;align-self:center;padding:.25rem}.notif-empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem;color:#94a3b8}.notif-empty i{font-size:2rem}.notif-load-more{padding:.5rem 1rem}.notif-end{text-align:center;font-size:.78rem;color:#94a3b8;padding:.75rem}:host ::ng-deep .notif-tooltip{max-width:300px;white-space:normal}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i2$3.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "directive", type: i11$2.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: i12$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: TsiBubbleInfoComponent, selector: "Tsi-Bubble-Info", inputs: ["infoText"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotificationPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'Tsi-Notification-Panel', template: "<ng-container *ngIf=\"hub.isEnabled\">\r\n  <button class=\"p-link layout-topbar-button notification-bell\" (click)=\"toggle($event)\">\r\n    <i class=\"pi pi-bell\" pBadge [value]=\"notifService.unreadCount.toString()\" severity=\"danger\"\r\n      [class.p-badge-hidden]=\"notifService.unreadCount === 0\">\r\n    </i>\r\n  </button>\r\n\r\n  <p-overlayPanel #op styleClass=\"notification-overlay\" [dismissable]=\"true\">\r\n\r\n    <div class=\"notif-header\">\r\n      <span class=\"notif-title\">Notifications</span>\r\n      <div class=\"flex gap-1\">\r\n        <button *ngIf=\"notifService.unreadCount > 0\"\r\n                pTooltip=\"Tout marquer comme lu\" tooltipPosition=\"top\"\r\n                class=\"p-link\" (click)=\"markAllAsRead()\">\r\n          <i class=\"pi pi-check-square\"></i>\r\n        </button>\r\n        <button *ngIf=\"listRoute\" pTooltip=\"Voir la liste\" tooltipPosition=\"top\" class=\"p-link\" (click)=\"navigateToList()\">\r\n          <i class=\"pi pi-cog\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <p-divider styleClass=\"my-0\"></p-divider>\r\n\r\n    <div class=\"notif-list\" (scroll)=\"onListScroll($event)\">\r\n\r\n      <ng-container *ngIf=\"notifService.isLoading\">\r\n        <div *ngFor=\"let i of [1, 2, 3]\" class=\"notif-item\">\r\n          <p-skeleton shape=\"circle\" size=\"2.5rem\"></p-skeleton>\r\n          <div class=\"flex flex-column gap-1 flex-1\">\r\n            <p-skeleton width=\"75%\" height=\"0.85rem\"></p-skeleton>\r\n            <p-skeleton width=\"45%\" height=\"0.75rem\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"!notifService.isLoading && notifService.notifications.length === 0\" class=\"notif-empty\">\r\n        <i class=\"pi pi-check-circle\"></i>\r\n        <span>Aucune notification</span>\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!notifService.isLoading\">\r\n        <div *ngFor=\"let n of notifService.notifications\" class=\"notif-item\" [class.notif-item--unread]=\"!n.isRead\"\r\n             (click)=\"onNotifClick(n)\" (dblclick)=\"openFiche(n)\" [pTooltip]=\"'NotificationTooltip' | localize\"\r\n             tooltipPosition=\"bottom\" tooltipStyleClass=\"notif-tooltip\" style=\"cursor: pointer;\">\r\n\r\n          <div class=\"notif-avatar-wrapper\">\r\n            <ng-container *ngIf=\"n.image; else initialsAvatar\">\r\n              <img [src]=\"n.image\" class=\"notif-avatar notif-avatar-img\" alt=\"avatar\" />\r\n            </ng-container>\r\n            <ng-template #initialsAvatar>\r\n              <div class=\"notif-avatar\" [ngStyle]=\"{'background': getAvatarColor(n.notificationType)}\">\r\n                {{ getInitials(n.title) }}\r\n              </div>\r\n            </ng-template>\r\n            <span *ngIf=\"!n.isRead\" class=\"notif-dot\"></span>\r\n          </div>\r\n\r\n          <div class=\"notif-content\">\r\n            <div class=\"notif-message\">\r\n              <span class=\"notif-bold\">{{ n.title }}</span>\r\n              <span *ngIf=\"n.message\"> \u2014 {{ n.message }}</span>\r\n              <Tsi-Bubble-Info *ngIf=\"n.detailledMessage\" [infoText]=\"n.detailledMessage\"></Tsi-Bubble-Info>\r\n            </div>\r\n            <div class=\"notif-meta\">{{ timeAgo(n.createdAt) }}</div>\r\n          </div>\r\n\r\n          <button class=\"p-link notif-more\" (click)=\"itemMenu.toggle($event); $event.stopPropagation()\">\r\n            <i class=\"pi pi-ellipsis-v\"></i>\r\n          </button>\r\n          <p-menu #itemMenu [model]=\"buildItemMenu(n)\" [popup]=\"true\" appendTo=\"body\"></p-menu>\r\n\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"notifService.isLoadingMore\" class=\"notif-load-more\">\r\n        <p-skeleton width=\"100%\" height=\"3.25rem\"></p-skeleton>\r\n      </div>\r\n      <div *ngIf=\"!notifService.hasMore && notifService.notifications.length > 0 && !notifService.isLoading\"\r\n           class=\"notif-end\">\r\n        <span>Tout est \u00E0 jour</span>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </p-overlayPanel>\r\n</ng-container>\r\n", styles: [".notification-bell{position:relative;margin-right:.5rem}.notification-bell .p-badge-hidden~.p-badge{display:none}:host ::ng-deep .notification-overlay{width:26rem;padding:0;border-radius:12px;box-shadow:0 4px 24px #0000001f;overflow:hidden}:host ::ng-deep .notification-overlay .p-overlaypanel-content{padding:0}.notif-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem .5rem}.notif-header .notif-title{font-size:1.1rem;font-weight:700}.notif-header button i{font-size:1.1rem;color:#64748b}.notif-list{max-height:28rem;overflow-y:auto}.notif-list::-webkit-scrollbar{width:4px}.notif-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.notif-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid #f1f5f9}.notif-item:last-child{border-bottom:none}.notif-item--unread{background-color:#f0f9ff;border-left:3px solid #0ea5e9;padding-left:calc(1rem - 3px)}.notif-item--unread .notif-content{color:#0f172a}.notif-avatar-wrapper{position:relative;flex-shrink:0}.notif-avatar{width:2.5rem;height:2.5rem;border-radius:50%;background:#0ea5e9;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem}.notif-avatar-img{object-fit:cover}.notif-dot{position:absolute;bottom:1px;right:1px;width:.6rem;height:.6rem;background:#0ea5e9;border-radius:50%;border:2px solid #fff}.notif-content{flex:1;min-width:0;font-size:.875rem;line-height:1.4;color:#1e293b}.notif-bold{font-weight:700}.notif-meta{font-size:.78rem;color:#64748b;margin-top:.2rem}.notif-more{color:#94a3b8;align-self:center;padding:.25rem}.notif-empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem;color:#94a3b8}.notif-empty i{font-size:2rem}.notif-load-more{padding:.5rem 1rem}.notif-end{text-align:center;font-size:.78rem;color:#94a3b8;padding:.75rem}:host ::ng-deep .notif-tooltip{max-width:300px;white-space:normal}\n"] }]
+        }], ctorParameters: () => [{ type: TsiNotificationCenterService }, { type: TsiNotificationHubService }, { type: EntityConfigurationService }, { type: TsiModalService }, { type: i7$1.Router }], propDecorators: { listRoute: [{
+                type: Input
+            }], overlayPanel: [{
+                type: ViewChild,
+                args: ['op']
+            }] } });
+
 class AuthenticationGuard {
     constructor(_authService, _router) {
         this._authService = _authService;
@@ -24288,6 +24637,7 @@ const _primengModules = [
     TagModule,
     ColorPickerModule,
     BadgeModule,
+    SkeletonModule,
 ];
 // const _ngModules=[
 //   NgSelectModule,
@@ -24394,6 +24744,7 @@ const _tsiComponents = [
     TsiKanbanWorkflowEtatComponent,
     LocalePocComponent,
     VerificationCodeInscriptionComponent,
+    TsiNotificationPanelComponent,
 ];
 const _tsiPipes = [
     LocalizePipe,
@@ -24520,7 +24871,8 @@ class SharedModule {
             CreateOrEditDynamicFormComponent,
             TsiKanbanWorkflowEtatComponent,
             LocalePocComponent,
-            VerificationCodeInscriptionComponent, AdDirective,
+            VerificationCodeInscriptionComponent,
+            TsiNotificationPanelComponent, AdDirective,
             BusyDirective,
             ModuleMainParameterDirective,
             ValidationDirective,
@@ -24575,7 +24927,8 @@ class SharedModule {
             DynamicDialogModule,
             TagModule,
             ColorPickerModule,
-            BadgeModule], exports: [QRCodeModule, LocalizePipe,
+            BadgeModule,
+            SkeletonModule], exports: [QRCodeModule, LocalizePipe,
             TsiDecimalPipe,
             ModalLabelPipe,
             CutLabelPipe, ButtonModule,
@@ -24617,7 +24970,8 @@ class SharedModule {
             DynamicDialogModule,
             TagModule,
             ColorPickerModule,
-            BadgeModule, EditableGridComponent,
+            BadgeModule,
+            SkeletonModule, EditableGridComponent,
             TsiSearchComboComponent,
             TsiCheckboxComponent,
             TsiCurrencyOtherInputComponent,
@@ -24709,7 +25063,8 @@ class SharedModule {
             CreateOrEditDynamicFormComponent,
             TsiKanbanWorkflowEtatComponent,
             LocalePocComponent,
-            VerificationCodeInscriptionComponent, AdDirective,
+            VerificationCodeInscriptionComponent,
+            TsiNotificationPanelComponent, AdDirective,
             BusyDirective,
             ModuleMainParameterDirective,
             ValidationDirective,
@@ -24763,7 +25118,8 @@ class SharedModule {
             DynamicDialogModule,
             TagModule,
             ColorPickerModule,
-            BadgeModule] }); }
+            BadgeModule,
+            SkeletonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -24829,5 +25185,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionErpService, ActionPlacement, AdDirective, AdItem, AddReportPopupComponent, AdminRoutes, AdministrationEndpoints, AdministrationSegments, AdvancedSearchComponentService, AlertImportMessageComponent, ApiDateTimeFormat, ApiExplorerService, AppBaseComponent, AppRoutes, AppSettingsService, AuthenticationGuard, AuthorizationEndpoints, AuthorizationSegments, AuthorizationService, AuthorizationTokenMapper, AutoComplete, AutoSelectDirective, BsModalRef, BusyDirective, ButtonType, ChooseChoiceMfaMethodComponent, ClaimTypes, CodeFormat, CollectionChangeAction, ComboStatusModel, Component_Modes, ContextMenuComponent, CreateOrEditDynamicFormComponent, CreateOrEditEntityInformationsComponent, CreateOrEditModeleImportComponent, CrudBaseService, CurrentUser, CurrentUserService, CutLabelPipe, DateFormat, DateFormatDisplay, DateHelper, DateHelperService, DatePickerDateFormat, DatePickerDateTimeFormat, DatePickerTimeFormat, DateTimeFormat, DateTimeFormatDisplay, DecimalFormat, DefaultSocieteDevise, Devise, DeviseDetail, DialogDataService, DisplayNestedPropComponent, DisplayTypeColors, DisplayTypes, DynamicFormListComponent, EditableGridComponent, EndpointInfos, EntityColumnDetailResponse, EntityConfigurationService, EntityInfo, EntityInfoWithRelations, EntityRelation, EntityStatusService, EntityValidationsService, ErrorResponseManagerService, ExecuteImportRequest, ExportExcelHelper, Fichier, FilterByExistingValues, FilterByProprety, FilterHelper, FilterOperatorType, FilterOperatorTypeDescriptions, FormValidationError, FormulaService, GenericFormHelper, GenericValidationStateService, GetWorkflowInstanceInformationRequest, GridSelectionMode, GridSizingMode, GridSortMode, Guid, Helpers, HtmlTemplateGeneratorService, HtmlTemplates, HttpMethodType, IdentityManagerService, IdentityPlatformAuthenticationService, IdentityPlatformEndpoints, IdentityPlatformSegments, IdentityRoutes, ImportExportEndPoints, ImportExportSegments, ImportResult, InputRegistryService, InputTypes, JournalisationApplication, JournalisationApplicationService, KeyboardShortcutService, LanguageInformations, LanguageLocale, LanguagesCodes, LayoutHelperService, LayoutOrientation, LocaleCode, LocalePocComponent, LocalizationKeys, LocalizePipe, LogoutPopupComponent, MFAEnum, MailingService, ManageImportExportComponent, ManageReportingComponent, ManageReportingRoutes, MappingHelper, ModalComponent, ModalLabelPipe, ModalLoaderComponent, ModalSizeEnum, ModeleImportCreateRequest, ModeleImportDetail, ModeleImportService, Modes, ModuleCodeService, ModuleMainParameterDirective, ModuleMainParameterService, NoteService, NumericDisplayTypes, ObjectHelper, ObservableCollection, PagedResultRequestBase, PermissionGuard, PresentationDesignerDirective, PresentationDesignerDirectiveBase, PresentationDesignerService, PresentationDesignerTabPanelDirective, PresentationSetting, PresentationSettingDetail, PresentationSettingService, ProceedLoginRequest, ProgressBarHelperService, ProgressBarResponse, ProgressBarService, ProgressBarUpdateRequest, RecordInfoPopupService, ReportingComponent, ReportingEndpoints, ReportingSegments, ReportingService, RequestTrackerInterceptor, RequestTrackerService, Segment, Segments, SeparateurDecimal, SeparateurMillier, SharedComponentReferenceHelper, SharedModule, SharedUiTsiProviders, ShortenPipe, SpinnerComponent, Status, StatusHistory, StatusHistoryService, StatusTransitionInfoResponse, StatusTransitionsInfoResponse, StorageManager, SubscriptionResult, TS_ValidDateFormat, TS_ValidDateTimeFormat, TS_ValidTimeFormat, TextBoxType, Themes, TimeFormat, TimeOnly, TimeZoneLocale, ToNumberPipe, TooltipPosition, TranslationService, TsiActionErpCreateOrEditComponent, TsiActionErpListComponent, TsiBaseComponent, TsiBsModalService, TsiBubbleInfoComponent, TsiButtonComponent, TsiCalenderComponent, TsiCard, TsiCardComponent, TsiCardListComponent, TsiChangePasswordComponent, TsiCheckboxComponent, TsiCheckboxDisplayComponent, TsiCodeGeneratorComponent, TsiComponentEnum, TsiComponentFinderService, TsiConfirmationService, TsiCurrencyOtherDisplayComponent, TsiCurrencyOtherInputComponent, TsiCurrencyPipe, TsiCurrencySocieteDisplayComponent, TsiCurrencySocieteInputComponent, TsiDateDisplayComponent, TsiDatePickerComponent, TsiDecimalDisplayComponent, TsiDecimalInputComponent, TsiDecimalPipe, TsiDisplayGridComponent, TsiDividerComponent, TsiErrorMessageComponent, TsiFileManagerComponent, TsiFilePreviewComponent, TsiFormComponent, TsiFormComponentBaseComponent, TsiFormModalFooterComponent, TsiFormulaBoxComponent, TsiGenericCrudComponent, TsiGenericFormComponent, TsiGenericGridComponent, TsiImageDisplayComponent, TsiInfoMessageComponent, TsiInputBase, TsiIntegerComponent, TsiIntegerDisplayComponent, TsiKanbanComponent, TsiKanbanWorkflowEtatComponent, TsiLabelComponent, TsiLabelLegendComponent, TsiLegendComponent, TsiListBaseComponent, TsiLogEventHistoryComponent, TsiMessageService, TsiModalComponent, TsiModalFooterComponent, TsiModalHeaderComponent, TsiModalService, TsiNotesAvertirComponent, TsiNotesComponent, TsiNotesGridComponent, TsiNotificationService, TsiParagraphComponent, TsiPopupTextViewerComponent, TsiProgressBarComponent, TsiRadioButtonComponent, TsiRateDisplayComponent, TsiRateInputComponent, TsiRedirectionMessageComponent, TsiReportType, TsiSearchBoxComponent, TsiSearchComboComponent, TsiSendMailComponent, TsiSubmitButtonComponent, TsiSuccessMessageComponent, TsiTabPanelComponent, TsiTabViewComponent, TsiTemplate, TsiTenantsComponent, TsiTextAreaComponent, TsiTextBoxComponent, TsiTimeDisplayComponent, TsiTimePickerComponent, TsiTooltipComponent, TsiUploadFicheComponent, TsiUploadGridComponent, TsiViewGridComponent, TypeFichier, TypeImportEnum, TypeRegistryHelper, UpdateEntityInfoWithRelationsRequest, UploadAllowedExtensionsLabelKey, UploadErrorCodeTranslationKeys, UploadErrorUnknownKey, UserIdentityService, ValidationDirective, VerificationCodeComponent, VerificationCodeInscriptionComponent, VerificationCodeSmsComponent, WorkflowConfigurationService, WorkflowEtatForm, WorkflowEtatKanbanRequest, WorkflowEtatSuivantResponse, WorkflowResponse, appProviders, authorization, dashboardConst, defaultCardHeader, distinct, executeImportResult, initSharedComponents, isNullOrEmpty, isPinnableCssSize, lengthValidator, locals, logoutReasonEnum, lowerFirst, menuItems, menuPreferences, preciseAdd, preciseSum, primengDateLocalAr, primengLocaleAr, queryParamNamesConst, rangeValidator, registerLibraryLocales, requestHeaderNames, resolveCssSize, rtlModeKeys, splitArrayIntoChunks, toDotNetCamelCase, tokenQueryParamName, updateEntityWorkflowInformation, updateEntityWorkflowInstanceResponse, userLanguage, workflowEtatDetailledResponse, workflowInstanceInformationResponse };
+export { ActionErpService, ActionPlacement, AdDirective, AdItem, AddReportPopupComponent, AdminRoutes, AdministrationEndpoints, AdministrationSegments, AdvancedSearchComponentService, AlertImportMessageComponent, ApiDateTimeFormat, ApiExplorerService, AppBaseComponent, AppRoutes, AppSettingsService, AuthenticationGuard, AuthorizationEndpoints, AuthorizationSegments, AuthorizationService, AuthorizationTokenMapper, AutoComplete, AutoSelectDirective, BsModalRef, BusyDirective, ButtonType, ChooseChoiceMfaMethodComponent, ClaimTypes, CodeFormat, CollectionChangeAction, ComboStatusModel, Component_Modes, ContextMenuComponent, CreateOrEditDynamicFormComponent, CreateOrEditEntityInformationsComponent, CreateOrEditModeleImportComponent, CrudBaseService, CurrentUser, CurrentUserService, CutLabelPipe, DateFormat, DateFormatDisplay, DateHelper, DateHelperService, DatePickerDateFormat, DatePickerDateTimeFormat, DatePickerTimeFormat, DateTimeFormat, DateTimeFormatDisplay, DecimalFormat, DefaultSocieteDevise, Devise, DeviseDetail, DialogDataService, DisplayNestedPropComponent, DisplayTypeColors, DisplayTypes, DynamicFormListComponent, EditableGridComponent, EndpointInfos, EntityColumnDetailResponse, EntityConfigurationService, EntityInfo, EntityInfoWithRelations, EntityRelation, EntityStatusService, EntityValidationsService, ErrorResponseManagerService, ExecuteImportRequest, ExportExcelHelper, Fichier, FilterByExistingValues, FilterByProprety, FilterHelper, FilterOperatorType, FilterOperatorTypeDescriptions, FormValidationError, FormulaService, GenericFormHelper, GenericValidationStateService, GetWorkflowInstanceInformationRequest, GridSelectionMode, GridSizingMode, GridSortMode, Guid, Helpers, HtmlTemplateGeneratorService, HtmlTemplates, HttpMethodType, IdentityManagerService, IdentityPlatformAuthenticationService, IdentityPlatformEndpoints, IdentityPlatformSegments, IdentityRoutes, ImportExportEndPoints, ImportExportSegments, ImportResult, InputRegistryService, InputTypes, JournalisationApplication, JournalisationApplicationService, KeyboardShortcutService, LanguageInformations, LanguageLocale, LanguagesCodes, LayoutHelperService, LayoutOrientation, LocaleCode, LocalePocComponent, LocalizationKeys, LocalizePipe, LogoutPopupComponent, MFAEnum, MailingService, ManageImportExportComponent, ManageReportingComponent, ManageReportingRoutes, MappingHelper, ModalComponent, ModalLabelPipe, ModalLoaderComponent, ModalSizeEnum, ModeleImportCreateRequest, ModeleImportDetail, ModeleImportService, Modes, ModuleCodeService, ModuleMainParameterDirective, ModuleMainParameterService, NoteService, NotificationChannel, NotificationEndpoints, NotificationSegments, NotificationType, NumericDisplayTypes, ObjectHelper, ObservableCollection, PagedResultRequestBase, PermissionGuard, PresentationDesignerDirective, PresentationDesignerDirectiveBase, PresentationDesignerService, PresentationDesignerTabPanelDirective, PresentationSetting, PresentationSettingDetail, PresentationSettingService, ProceedLoginRequest, ProgressBarHelperService, ProgressBarResponse, ProgressBarService, ProgressBarUpdateRequest, RecordInfoPopupService, ReportingComponent, ReportingEndpoints, ReportingSegments, ReportingService, RequestTrackerInterceptor, RequestTrackerService, Segment, Segments, SeparateurDecimal, SeparateurMillier, SharedComponentReferenceHelper, SharedModule, SharedUiTsiProviders, ShortenPipe, SpinnerComponent, Status, StatusHistory, StatusHistoryService, StatusTransitionInfoResponse, StatusTransitionsInfoResponse, StorageManager, SubscriptionResult, TS_ValidDateFormat, TS_ValidDateTimeFormat, TS_ValidTimeFormat, TextBoxType, Themes, TimeFormat, TimeOnly, TimeZoneLocale, ToNumberPipe, TooltipPosition, TranslationService, TsiActionErpCreateOrEditComponent, TsiActionErpListComponent, TsiBaseComponent, TsiBsModalService, TsiBubbleInfoComponent, TsiButtonComponent, TsiCalenderComponent, TsiCard, TsiCardComponent, TsiCardListComponent, TsiChangePasswordComponent, TsiCheckboxComponent, TsiCheckboxDisplayComponent, TsiCodeGeneratorComponent, TsiComponentEnum, TsiComponentFinderService, TsiConfirmationService, TsiCurrencyOtherDisplayComponent, TsiCurrencyOtherInputComponent, TsiCurrencyPipe, TsiCurrencySocieteDisplayComponent, TsiCurrencySocieteInputComponent, TsiDateDisplayComponent, TsiDatePickerComponent, TsiDecimalDisplayComponent, TsiDecimalInputComponent, TsiDecimalPipe, TsiDisplayGridComponent, TsiDividerComponent, TsiErrorMessageComponent, TsiFileManagerComponent, TsiFilePreviewComponent, TsiFormComponent, TsiFormComponentBaseComponent, TsiFormModalFooterComponent, TsiFormulaBoxComponent, TsiGenericCrudComponent, TsiGenericFormComponent, TsiGenericGridComponent, TsiImageDisplayComponent, TsiInfoMessageComponent, TsiInputBase, TsiIntegerComponent, TsiIntegerDisplayComponent, TsiKanbanComponent, TsiKanbanWorkflowEtatComponent, TsiLabelComponent, TsiLabelLegendComponent, TsiLegendComponent, TsiListBaseComponent, TsiLogEventHistoryComponent, TsiMessageService, TsiModalComponent, TsiModalFooterComponent, TsiModalHeaderComponent, TsiModalService, TsiNotesAvertirComponent, TsiNotesComponent, TsiNotesGridComponent, TsiNotificationCenterService, TsiNotificationHubService, TsiNotificationPanelComponent, TsiNotificationService, TsiParagraphComponent, TsiPopupTextViewerComponent, TsiProgressBarComponent, TsiRadioButtonComponent, TsiRateDisplayComponent, TsiRateInputComponent, TsiRedirectionMessageComponent, TsiReportType, TsiSearchBoxComponent, TsiSearchComboComponent, TsiSendMailComponent, TsiSubmitButtonComponent, TsiSuccessMessageComponent, TsiTabPanelComponent, TsiTabViewComponent, TsiTemplate, TsiTenantsComponent, TsiTextAreaComponent, TsiTextBoxComponent, TsiTimeDisplayComponent, TsiTimePickerComponent, TsiTooltipComponent, TsiUploadFicheComponent, TsiUploadGridComponent, TsiViewGridComponent, TypeFichier, TypeImportEnum, TypeRegistryHelper, UpdateEntityInfoWithRelationsRequest, UploadAllowedExtensionsLabelKey, UploadErrorCodeTranslationKeys, UploadErrorUnknownKey, UserIdentityService, ValidationDirective, VerificationCodeComponent, VerificationCodeInscriptionComponent, VerificationCodeSmsComponent, WorkflowConfigurationService, WorkflowEtatForm, WorkflowEtatKanbanRequest, WorkflowEtatSuivantResponse, WorkflowResponse, appProviders, authorization, dashboardConst, defaultCardHeader, distinct, executeImportResult, initSharedComponents, isNullOrEmpty, isPinnableCssSize, lengthValidator, locals, logoutReasonEnum, lowerFirst, menuItems, menuPreferences, preciseAdd, preciseSum, primengDateLocalAr, primengLocaleAr, queryParamNamesConst, rangeValidator, registerLibraryLocales, requestHeaderNames, resolveCssSize, rtlModeKeys, splitArrayIntoChunks, toDotNetCamelCase, tokenQueryParamName, updateEntityWorkflowInformation, updateEntityWorkflowInstanceResponse, userLanguage, workflowEtatDetailledResponse, workflowInstanceInformationResponse };
 //# sourceMappingURL=tsi-developpement-tsi-shared-ui.mjs.map