@tsi-developpement/tsi-shared-ui 1.9.4 → 1.9.6

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, Injectable, HostListener, Directive, Component, Input, inject, EventEmitter, Output, ViewEncapsulation, runInInjectionContext, ViewChild, signal, ElementRef, ContentChild, Optional, ContentChildren, Renderer2, ViewContainerRef, ViewChildren, ChangeDetectorRef, NgModule } from '@angular/core';
+import { Pipe, Injectable, HostListener, Directive, Component, Input, inject, EventEmitter, Output, ViewEncapsulation, ContentChildren, ChangeDetectorRef, Optional, runInInjectionContext, ViewChild, signal, ElementRef, ContentChild, Renderer2, ViewContainerRef, ViewChildren, NgModule } from '@angular/core';
 import { Subject, firstValueFrom, BehaviorSubject, map, catchError, of, distinctUntilChanged, debounceTime, forkJoin, finalize } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpStatusCode, HttpClientModule } from '@angular/common/http';
@@ -13,18 +13,20 @@ import * as i3 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import * as i7 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
+import * as i2$1 from 'primeng/api';
+import { FilterMatchMode, MessageService, ConfirmationService } from 'primeng/api';
+import * as i7$1 from 'primeng/tabview';
+import { TabView, TabViewModule } from 'primeng/tabview';
 import localeFr from '@angular/common/locales/fr';
 import localeEnGb from '@angular/common/locales/en-GB';
 import localeArTn from '@angular/common/locales/ar-TN';
 import * as i1$3 from 'primeng/dynamicdialog';
 import { DialogService, DynamicDialogRef, DynamicDialogConfig, DynamicDialogModule } from 'primeng/dynamicdialog';
-import * as i2$2 from 'primeng/api';
-import { FilterMatchMode, MessageService, ConfirmationService } from 'primeng/api';
 import * as i6 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import * as i6$1 from 'primeng/card';
 import { CardModule } from 'primeng/card';
-import * as i2$1 from 'primeng/button';
+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';
@@ -64,8 +66,6 @@ import * as i5$1 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
 import * as i5$2 from 'primeng/treetable';
 import { TreeTableModule } from 'primeng/treetable';
-import * as i7$1 from 'primeng/tabview';
-import { TabView, TabViewModule } from 'primeng/tabview';
 import * as i14 from 'primeng/splitbutton';
 import { SplitButtonModule } from 'primeng/splitbutton';
 import * as i8 from 'primeng/fileupload';
@@ -185,7 +185,6 @@ const AdministrationSegments = {
     getAffichageAlerteEnum: 'getAffichageAlerteEnum',
     classw: 'Classw',
     importAllWorkflowClasses: "ImportAllWorkflowClasses",
-    classwEtat: 'ClasswEtat',
     workflowEtat: 'WorkflowEtat',
     workflow: 'Workflow',
     alert: 'Alert',
@@ -220,7 +219,6 @@ const AdministrationSegments = {
     createADMINISTRATION: 'createADMINISTRATION',
     getByParamUser: 'getByParamUser',
     getAllByCurrentUserId: 'getAllByCurrentUserId',
-    getAsKeyValuePairByClasswId: 'getAsKeyValuePairByClasswId',
     getAsKeyValuePairByWorkflowId: 'getAsKeyValuePairByWorkflowId',
     updateWorkflowList: 'updateWorkflowList',
     getFonctionnaliteAsKeyValuePairByWorkflowId: 'getWorkflowEtatFonctionnaliteAsKeyValuePairByWorkflowEtatId',
@@ -228,7 +226,6 @@ const AdministrationSegments = {
     getWorkflowInstanceAsKeyValuePairByWorkflowId: 'getWorkflowInstanceAsKeyValuePairByWorkflowId',
     getAllClasswByNom: 'getAllClasswByNom',
     getClasswByNom: 'getClasswByNom',
-    getAllClasswEtatAsKeyPairValue: 'ClasswEtatAsKeyValuePair',
     GetAllFonctionnaliteWorkflowClassW: 'GetAllFonctionnaliteWorkflowClassW',
     getCurrentUser: 'getCurrentUser',
     getCurrentUserWithRoles: 'getCurrentUserWithRoles',
@@ -320,17 +317,12 @@ const AdministrationEndpoints = {
     getAllClassw: () => `${Segment.base}/${AdministrationSegments.classw}`,
     getAllClasswMinimal: () => `${Segment.base}/${AdministrationSegments.classw}/${AdministrationSegments.allMinimal}`,
     getClasswMinimal: () => `${Segment.base}/${AdministrationSegments.classw}/${AdministrationSegments.minimal}`,
-    getAllClasswEtat: () => `${Segment.base}/${AdministrationSegments.classwEtat}`,
-    getAllClasswEtatMinimal: () => `${Segment.base}/${AdministrationSegments.classwEtat}/${AdministrationSegments.allMinimal}`,
-    getClasswEtatMinimal: () => `${Segment.base}/${AdministrationSegments.classwEtat}/${AdministrationSegments.minimal}`,
     getWorkflowEtatAsKeyValuePair: () => `${Segment.base}/${AdministrationSegments.workflowEtat}/${AdministrationSegments.asKeyValuePair}`,
     getWorkflowEtatFonctionnaliteAsKeyValuePair: () => `${Segment.base}/${AdministrationSegments.workflowEtatFonctionnalite}/${AdministrationSegments.asKeyValuePair}`,
     getAllWorkflowEtatFonctionnaliteAsKeyValuePair: () => `${Segment.base}/${AdministrationSegments.workflowEtatFonctionnalite}/${AdministrationSegments.allAsKeyValuePair}`,
-    getAsKeyValuePairByClasswId: (id) => `${Segment.base}/${AdministrationSegments.classwEtat}/${AdministrationSegments.getAsKeyValuePairByClasswId}/${id}`,
     getAsKeyValuePairByWorkflowId: (id) => `${Segment.base}/${AdministrationSegments.workflowEtat}/${AdministrationSegments.getAsKeyValuePairByWorkflowId}/${id}`,
     updateWorkflowList: () => `${Segment.base}/${AdministrationSegments.workflowEtatSuivant}/${AdministrationSegments.updateWorkflowList}/`,
     getFonctionnaliteAsKeyValuePairByWorkflowEtatUid: (id) => `${Segment.base}/${AdministrationSegments.workflowEtatFonctionnalite}/${AdministrationSegments.getFonctionnaliteAsKeyValuePairByWorkflowId}/${id}`,
-    getAllClasswEtatAsKeyPairValue: () => `${Segment.base}/${AdministrationSegments.classwEtat}/${AdministrationSegments.getAllClasswEtatAsKeyPairValue}`,
     getAllWorkflow: () => `${Segment.base}/${AdministrationSegments.workflow}`,
     getAllWorkflowAsKeyValuePair: () => `${Segment.base}/${AdministrationSegments.workflow}/${AdministrationSegments.allAsKeyValuePair}`,
     getWorkflowAsKeyValuePair: () => `${Segment.base}/${AdministrationSegments.workflow}/${AdministrationSegments.asKeyValuePair}`,
@@ -1635,6 +1627,25 @@ class InputRegistryService {
     hasAnyDirtyInput() {
         return Array.from(this._inputs).some(input => input.isDirty);
     }
+    markInputAsDirty(inputName) {
+        const inputs = this.getAll();
+        if (!inputs || inputs.length == 0) {
+            console.error("There are no input !");
+            return;
+        }
+        if (inputName) {
+            const input = inputs.filter(x => x.inputName == inputName);
+            if (input.length == 0) {
+                console.error("There are no input with the given input name : ", inputName);
+                return;
+            }
+            input[0].isDirty = true;
+        }
+        else {
+            const firstInput = inputs[0];
+            firstInput.isDirty = true;
+        }
+    }
     resetDirtyStatusForAllInputs() {
         const inputs = this.getAll();
         if (!inputs?.length)
@@ -2622,12 +2633,12 @@ class PresentationDesignerDirectiveBase {
         this.renderer.addClass(this.el.nativeElement, 'config-mode-border');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PresentationDesignerDirectiveBase, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: LayoutHelperService }, { token: WorkflowConfigurationService }, { token: PresentationDesignerBaseService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]", inputs: { presentationDesigner: "presentationDesigner", presentationDesignerBase: "presentationDesignerBase" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]:not(tsi-tab-panel)", inputs: { presentationDesigner: "presentationDesigner", presentationDesignerBase: "presentationDesignerBase" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PresentationDesignerDirectiveBase, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[presentationDesignerBase]'
+                    selector: '[presentationDesignerBase]:not(tsi-tab-panel)'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: LayoutHelperService }, { type: WorkflowConfigurationService }, { type: PresentationDesignerBaseService }], propDecorators: { presentationDesigner: [{
                 type: Input
@@ -2635,6 +2646,358 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+class TsiTemplate {
+    constructor(template) {
+        this.template = template;
+    }
+    getType() {
+        return this.name;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: TsiTemplate, selector: "[tsiTemplate]", inputs: { type: "type", name: ["tsiTemplate", "name"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tsiTemplate]'
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { type: [{
+                type: Input
+            }], name: [{
+                type: Input,
+                args: ['tsiTemplate']
+            }] } });
+
+class TsiTabPanelComponent {
+    constructor() {
+        // Presentation-designer state, driven exclusively by
+        // PresentationDesignerTabPanelDirective (the persisted presentation setting
+        // is the single source of truth — intentionally not @Inputs).
+        /** Whether the tab view renders this panel (header and content). */
+        this.visible = true;
+        /** Whether the design-mode hide/show checkbox is shown in the tab header. */
+        this.designerCheckboxVisible = false;
+        /** Design-mode checkbox state; checked means hidden after save. */
+        this.designerChecked = false;
+        /**
+         * Defines if tab can be removed.
+         * @group Props
+         */
+        this.closable = false;
+        /**
+         * Whether a lazy loaded panel should avoid getting loaded again on reselection.
+         * @group Props
+         */
+        this.cache = true;
+        /**
+         * Position of the tooltip.
+         * @group Props
+         */
+        this.tooltipPosition = 'top';
+        /**
+         * Type of CSS position.
+         * @group Props
+         */
+        this.tooltipPositionStyle = 'absolute';
+        /**
+         * Defines if tab is active.
+         * @defaultValue false
+         * @group Props
+         */
+        this.selected = false;
+        /**
+         * When true, tab cannot be activated.
+         * @defaultValue false
+         * @group Props
+         */
+        this.disabled = false;
+        /**
+         * Title of the tabPanel.
+         * @group Props
+         */
+        this.header = '';
+        /**
+         * Left icon of the tabPanel.
+         * @group Props
+         * @deprecated since v15.4.2, use `lefticon` template instead.
+         */
+        this.leftIcon = '';
+    }
+    ngAfterContentInit() {
+        this.tsiTemplates.forEach((tsiTemplate) => {
+            const type = tsiTemplate.getType();
+            switch (type) {
+                case 'header':
+                    this.headerTemplateRef = tsiTemplate.template;
+                    break;
+                case 'lefticon':
+                    this.leftIconTemplateRef = tsiTemplate.template;
+                    break;
+                case 'righticon':
+                    this.rightIconTemplateRef = tsiTemplate.template;
+                    break;
+                case 'closeicon':
+                    this.closeIconTemplateRef = tsiTemplate.template;
+                    break;
+                case 'content':
+                default:
+                    this.contentTemplateRef = tsiTemplate.template;
+                    break;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTabPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiTabPanelComponent, selector: "tsi-tab-panel", inputs: { closable: "closable", headerStyle: "headerStyle", headerStyleClass: "headerStyleClass", cache: "cache", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", selected: "selected", disabled: "disabled", header: "header", leftIcon: "leftIcon", rightIcon: "rightIcon" }, queries: [{ propertyName: "tsiTemplates", predicate: TsiTemplate }], ngImport: i0, template: "<!-- No template needed - we only capture ContentChild -->\r\n<!-- Please leave it empty -->", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTabPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tsi-tab-panel', template: "<!-- No template needed - we only capture ContentChild -->\r\n<!-- Please leave it empty -->" }]
+        }], propDecorators: { tsiTemplates: [{
+                type: ContentChildren,
+                args: [TsiTemplate]
+            }], closable: [{
+                type: Input
+            }], headerStyle: [{
+                type: Input
+            }], headerStyleClass: [{
+                type: Input
+            }], cache: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
+            }], tooltipPositionStyle: [{
+                type: Input
+            }], tooltipStyleClass: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], leftIcon: [{
+                type: Input
+            }], rightIcon: [{
+                type: Input
+            }] } });
+
+/**
+ * TsiTabView is a container component to group content with tabs.
+ * @group Components
+ */
+class TsiTabViewComponent {
+    constructor() {
+        /** Panels the view actually renders: the content-queried panels minus the ones hidden by the presentation designer. */
+        this.tabs = [];
+        this.isInitialized = false;
+        this.haveTabPanels = false;
+        /**
+         * Index of the active tab to change selected tab programmatically.
+         * @group Props
+         */
+        this.activeIndex = 0;
+        /**
+         * When enabled, the focused tab is activated.
+         * @group Props
+         */
+        this.selectOnFocus = false;
+        /**
+         * When activated, navigation buttons will automatically hide or show based on the available space within the container.
+         * @group Props
+         */
+        this.autoHideButtons = true;
+        /**
+         * Index of the element in tabbing order.
+         * @group Props
+         */
+        this.tabindex = 0;
+        // Outputs
+        /**
+         * Callback to invoke on tab change.
+         * @param {TabViewChangeEvent} event - Custom tab change event
+         * @group Emits
+         */
+        this.onChange = new EventEmitter();
+        /**
+         * Callback to invoke on tab close.
+         * @param {TabViewCloseEvent} event - Custom tab close event
+         * @group Emits
+         */
+        this.onClose = new EventEmitter();
+        /**
+         * Callback to invoke on the active tab change.
+         * @param {number} index - New active index
+         * @group Emits
+         */
+        this.activeIndexChange = new EventEmitter();
+        // DI  
+        this.cd = inject(ChangeDetectorRef);
+    }
+    // Lifecycle hooks
+    ngAfterViewInit() {
+        this.tabPanels.changes.subscribe(() => this.refreshTabs());
+        // isInitialized/haveTabPanels/tabs are bound in the template but only
+        // computable once the content query has resolved, i.e. after the view was
+        // already checked. Defer the first computation to its own change-detection
+        // pass so neither this view nor the p-tabView subtree it creates is
+        // rendered inside an already-checked pass (avoids NG0100).
+        Promise.resolve().then(() => {
+            this.isInitialized = true;
+            this.refreshTabs();
+        });
+    }
+    // Events handlers
+    onActiveIndexChange(index) {
+        this.activeIndexChange.emit(index);
+    }
+    onTabClose(event) {
+        this.onClose.emit(event);
+    }
+    onTabChange(event) {
+        this.onChange.emit(event);
+    }
+    /**
+     * Recomputes the rendered panel set. Called by
+     * PresentationDesignerTabPanelDirective whenever a panel's visibility or
+     * design-mode state changes.
+     */
+    refreshTabs() {
+        if (!this.tabPanels) {
+            return;
+        }
+        this.calculateProperties();
+        this.cd.markForCheck();
+    }
+    // Utils
+    calculateProperties() {
+        this.tabs = this.tabPanels.toArray().filter(tab => tab.visible);
+        this.haveTabPanels = this.tabPanels && this.tabPanels.length > 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTabViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiTabViewComponent, selector: "tsi-tab-view", inputs: { style: "style", styleClass: "styleClass", controlClose: "controlClose", scrollable: "scrollable", activeIndex: "activeIndex", selectOnFocus: "selectOnFocus", nextButtonAriaLabel: "nextButtonAriaLabel", prevButtonAriaLabel: "prevButtonAriaLabel", autoHideButtons: "autoHideButtons", tabindex: "tabindex" }, outputs: { onChange: "onChange", onClose: "onClose", activeIndexChange: "activeIndexChange" }, queries: [{ propertyName: "tabPanels", predicate: TsiTabPanelComponent }], ngImport: i0, template: "<ng-container *ngIf=\"isInitialized\">\r\n  <ng-container *ngIf=\"haveTabPanels; else noTabPanels\">\r\n    <p-tabView\r\n      [style]=\"style\"\r\n      [styleClass]=\"styleClass\"\r\n      [controlClose]=\"controlClose\"\r\n      [scrollable]=\"scrollable\"\r\n      [activeIndex]=\"activeIndex\"\r\n      [selectOnFocus]=\"selectOnFocus\"\r\n      [nextButtonAriaLabel]=\"nextButtonAriaLabel\"\r\n      [prevButtonAriaLabel]=\"prevButtonAriaLabel\"\r\n      [autoHideButtons]=\"autoHideButtons\"\r\n      [tabindex]=\"tabindex\"\r\n      (activeIndexChange)=\"onActiveIndexChange($event)\"\r\n      (onClose)=\"onTabClose($event)\"\r\n      (onChange)=\"onTabChange($event)\">\r\n      <p-tabPanel *ngFor=\"let tab of tabs\"\r\n        [closable]=\"tab.closable\"\r\n        [headerStyle]=\"tab.headerStyle\"\r\n        [headerStyleClass]=\"tab.headerStyleClass\"\r\n        [cache]=\"tab.cache\"\r\n        [tooltip]=\"tab.tooltip\"\r\n        [tooltipPosition]=\"tab.tooltipPosition\"\r\n        [tooltipPositionStyle]=\"tab.tooltipPositionStyle\"\r\n        [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n        [selected]=\"tab.selected\"\r\n        [disabled]=\"tab.disabled\"\r\n        [header]=\"tab.header\"\r\n        [leftIcon]=\"tab.leftIcon\"\r\n        [rightIcon]=\"tab.rightIcon\">\r\n        <!-- LAZY LOADED CONTENT: This is the key part -->\r\n        <ng-template pTemplate=\"content\" *ngIf=\"tab.contentTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\r\n        </ng-template>\r\n\r\n        <!-- Custom header template if provided.\r\n             Also emitted for presentation-designer-eligible panels (PrimeNG\r\n             collects pTemplates only once in ngAfterContentInit, so the\r\n             design-mode checkbox must live in a template that exists from the\r\n             first render); the plain-header branch replicates PrimeNG's\r\n             default header markup. -->\r\n        <ng-template pTemplate=\"header\" *ngIf=\"tab.headerTemplateRef || tab.designerBlockName\">\r\n          <!-- Design mode: stack the show/hide checkbox above the header\r\n               content (top/start), matching the checkbox-on-top layout of the\r\n               other presentation-designer blocks. -->\r\n          <div *ngIf=\"tab.designerCheckboxVisible; else headerOnly\" class=\"tsi-designer-tab-header\">\r\n            <span class=\"tsi-designer-tab-header-content\">\r\n              <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n            </span>\r\n            <span class=\"tsi-designer-tab-checkbox\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (keydown)=\"$event.stopPropagation()\">\r\n              <Tsi-CheckBox\r\n                [isBinary]=\"true\"\r\n                [checked]=\"tab.designerChecked\"\r\n                (checkedChange)=\"tab.designerChecked = !!$event\"\r\n                [inputName]=\"tab.designerBlockName\"\r\n                [inputId]=\"(tab.designerBlockName ?? '') + '-show-hide-checkbox'\"></Tsi-CheckBox>\r\n            </span>\r\n          </div>\r\n          <ng-template #headerOnly>\r\n            <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n          </ng-template>\r\n          <ng-template #headerContent>\r\n            <ng-container *ngIf=\"tab.headerTemplateRef; else plainHeader\">\r\n              <ng-container *ngTemplateOutlet=\"tab.headerTemplateRef\"></ng-container>\r\n            </ng-container>\r\n          </ng-template>\r\n          <ng-template #plainHeader>\r\n            <span class=\"p-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplateRef\"></span>\r\n            <span *ngIf=\"tab.leftIconTemplateRef\" class=\"p-tabview-left-icon\">\r\n              <ng-container *ngTemplateOutlet=\"tab.leftIconTemplateRef\"></ng-container>\r\n            </span>\r\n            <span class=\"p-tabview-title\">{{ tab.header }}</span>\r\n            <span class=\"p-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplateRef\"></span>\r\n            <span *ngIf=\"tab.rightIconTemplateRef\" class=\"p-tabview-right-icon\">\r\n              <ng-container *ngTemplateOutlet=\"tab.rightIconTemplateRef\"></ng-container>\r\n            </span>\r\n          </ng-template>\r\n        </ng-template>\r\n\r\n        <!-- Custom icon templates if provided -->\r\n        <ng-template pTemplate=\"lefticon\" *ngIf=\"tab.leftIconTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.leftIconTemplateRef\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"righticon\" *ngIf=\"tab.rightIconTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.rightIconTemplateRef\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"closeicon\" *ngIf=\"tab.closeIconTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.closeIconTemplateRef\"></ng-container>\r\n        </ng-template>\r\n      </p-tabPanel>\r\n    </p-tabView>\r\n  </ng-container>\r\n\r\n  <ng-template #noTabPanels>\r\n    <p-tabView\r\n      [style]=\"style\"\r\n      [styleClass]=\"styleClass\"\r\n      [controlClose]=\"controlClose\"\r\n      [scrollable]=\"scrollable\"\r\n      [activeIndex]=\"activeIndex\"\r\n      [selectOnFocus]=\"selectOnFocus\"\r\n      [nextButtonAriaLabel]=\"nextButtonAriaLabel\"\r\n      [prevButtonAriaLabel]=\"prevButtonAriaLabel\"\r\n      [autoHideButtons]=\"autoHideButtons\"\r\n      [tabindex]=\"tabindex\"\r\n      (activeIndexChange)=\"onActiveIndexChange($event)\"\r\n      (onClose)=\"onTabClose($event)\"\r\n      (onChange)=\"onTabChange($event)\">\r\n      <ng-content></ng-content>\r\n    </p-tabView>\r\n  </ng-template>\r\n</ng-container>", styles: [".tsi-designer-tab-header{display:flex;flex-direction:row;align-items:center;gap:1rem;text-align:start}.tsi-designer-tab-header-content{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$1.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7$1.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: TsiCheckboxComponent, selector: "Tsi-CheckBox", inputs: ["class", "isBinary", "checked", "tooltipText", "tooltipPosition"], outputs: ["inputFieldChange", "checkedChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTabViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tsi-tab-view', template: "<ng-container *ngIf=\"isInitialized\">\r\n  <ng-container *ngIf=\"haveTabPanels; else noTabPanels\">\r\n    <p-tabView\r\n      [style]=\"style\"\r\n      [styleClass]=\"styleClass\"\r\n      [controlClose]=\"controlClose\"\r\n      [scrollable]=\"scrollable\"\r\n      [activeIndex]=\"activeIndex\"\r\n      [selectOnFocus]=\"selectOnFocus\"\r\n      [nextButtonAriaLabel]=\"nextButtonAriaLabel\"\r\n      [prevButtonAriaLabel]=\"prevButtonAriaLabel\"\r\n      [autoHideButtons]=\"autoHideButtons\"\r\n      [tabindex]=\"tabindex\"\r\n      (activeIndexChange)=\"onActiveIndexChange($event)\"\r\n      (onClose)=\"onTabClose($event)\"\r\n      (onChange)=\"onTabChange($event)\">\r\n      <p-tabPanel *ngFor=\"let tab of tabs\"\r\n        [closable]=\"tab.closable\"\r\n        [headerStyle]=\"tab.headerStyle\"\r\n        [headerStyleClass]=\"tab.headerStyleClass\"\r\n        [cache]=\"tab.cache\"\r\n        [tooltip]=\"tab.tooltip\"\r\n        [tooltipPosition]=\"tab.tooltipPosition\"\r\n        [tooltipPositionStyle]=\"tab.tooltipPositionStyle\"\r\n        [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n        [selected]=\"tab.selected\"\r\n        [disabled]=\"tab.disabled\"\r\n        [header]=\"tab.header\"\r\n        [leftIcon]=\"tab.leftIcon\"\r\n        [rightIcon]=\"tab.rightIcon\">\r\n        <!-- LAZY LOADED CONTENT: This is the key part -->\r\n        <ng-template pTemplate=\"content\" *ngIf=\"tab.contentTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\r\n        </ng-template>\r\n\r\n        <!-- Custom header template if provided.\r\n             Also emitted for presentation-designer-eligible panels (PrimeNG\r\n             collects pTemplates only once in ngAfterContentInit, so the\r\n             design-mode checkbox must live in a template that exists from the\r\n             first render); the plain-header branch replicates PrimeNG's\r\n             default header markup. -->\r\n        <ng-template pTemplate=\"header\" *ngIf=\"tab.headerTemplateRef || tab.designerBlockName\">\r\n          <!-- Design mode: stack the show/hide checkbox above the header\r\n               content (top/start), matching the checkbox-on-top layout of the\r\n               other presentation-designer blocks. -->\r\n          <div *ngIf=\"tab.designerCheckboxVisible; else headerOnly\" class=\"tsi-designer-tab-header\">\r\n            <span class=\"tsi-designer-tab-header-content\">\r\n              <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n            </span>\r\n            <span class=\"tsi-designer-tab-checkbox\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (keydown)=\"$event.stopPropagation()\">\r\n              <Tsi-CheckBox\r\n                [isBinary]=\"true\"\r\n                [checked]=\"tab.designerChecked\"\r\n                (checkedChange)=\"tab.designerChecked = !!$event\"\r\n                [inputName]=\"tab.designerBlockName\"\r\n                [inputId]=\"(tab.designerBlockName ?? '') + '-show-hide-checkbox'\"></Tsi-CheckBox>\r\n            </span>\r\n          </div>\r\n          <ng-template #headerOnly>\r\n            <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n          </ng-template>\r\n          <ng-template #headerContent>\r\n            <ng-container *ngIf=\"tab.headerTemplateRef; else plainHeader\">\r\n              <ng-container *ngTemplateOutlet=\"tab.headerTemplateRef\"></ng-container>\r\n            </ng-container>\r\n          </ng-template>\r\n          <ng-template #plainHeader>\r\n            <span class=\"p-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplateRef\"></span>\r\n            <span *ngIf=\"tab.leftIconTemplateRef\" class=\"p-tabview-left-icon\">\r\n              <ng-container *ngTemplateOutlet=\"tab.leftIconTemplateRef\"></ng-container>\r\n            </span>\r\n            <span class=\"p-tabview-title\">{{ tab.header }}</span>\r\n            <span class=\"p-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplateRef\"></span>\r\n            <span *ngIf=\"tab.rightIconTemplateRef\" class=\"p-tabview-right-icon\">\r\n              <ng-container *ngTemplateOutlet=\"tab.rightIconTemplateRef\"></ng-container>\r\n            </span>\r\n          </ng-template>\r\n        </ng-template>\r\n\r\n        <!-- Custom icon templates if provided -->\r\n        <ng-template pTemplate=\"lefticon\" *ngIf=\"tab.leftIconTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.leftIconTemplateRef\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"righticon\" *ngIf=\"tab.rightIconTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.rightIconTemplateRef\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"closeicon\" *ngIf=\"tab.closeIconTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.closeIconTemplateRef\"></ng-container>\r\n        </ng-template>\r\n      </p-tabPanel>\r\n    </p-tabView>\r\n  </ng-container>\r\n\r\n  <ng-template #noTabPanels>\r\n    <p-tabView\r\n      [style]=\"style\"\r\n      [styleClass]=\"styleClass\"\r\n      [controlClose]=\"controlClose\"\r\n      [scrollable]=\"scrollable\"\r\n      [activeIndex]=\"activeIndex\"\r\n      [selectOnFocus]=\"selectOnFocus\"\r\n      [nextButtonAriaLabel]=\"nextButtonAriaLabel\"\r\n      [prevButtonAriaLabel]=\"prevButtonAriaLabel\"\r\n      [autoHideButtons]=\"autoHideButtons\"\r\n      [tabindex]=\"tabindex\"\r\n      (activeIndexChange)=\"onActiveIndexChange($event)\"\r\n      (onClose)=\"onTabClose($event)\"\r\n      (onChange)=\"onTabChange($event)\">\r\n      <ng-content></ng-content>\r\n    </p-tabView>\r\n  </ng-template>\r\n</ng-container>", styles: [".tsi-designer-tab-header{display:flex;flex-direction:row;align-items:center;gap:1rem;text-align:start}.tsi-designer-tab-header-content{display:flex;align-items:center}\n"] }]
+        }], propDecorators: { tabPanels: [{
+                type: ContentChildren,
+                args: [TsiTabPanelComponent]
+            }], style: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], controlClose: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], activeIndex: [{
+                type: Input
+            }], selectOnFocus: [{
+                type: Input
+            }], nextButtonAriaLabel: [{
+                type: Input
+            }], prevButtonAriaLabel: [{
+                type: Input
+            }], autoHideButtons: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], onClose: [{
+                type: Output
+            }], activeIndexChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Presentation-designer participation for an individual tab panel.
+ *
+ * A tsi-tab-panel is not a free-standing DOM block: its host element is never
+ * attached to the DOM — TsiTabViewComponent consumes it through a content query
+ * and renders the tab header/content itself. So the base directive's DOM
+ * detach/re-attach mechanism is a no-op here. Instead, every hide/show entry
+ * point of the presentation-designer contract is re-targeted to the panel's
+ * `visible` flag, which the tab view uses to decide whether to render the
+ * panel (header and content) at all.
+ */
+class PresentationDesignerTabPanelDirective extends PresentationDesignerDirectiveBase {
+    constructor(el, renderer, viewContainerRef, _layoutHelperService, _workflowConfigurationService, _presentationDesignerBaseService, panel, tabView) {
+        super(el, renderer, viewContainerRef, _layoutHelperService, _workflowConfigurationService, _presentationDesignerBaseService);
+        this.el = el;
+        this.renderer = renderer;
+        this.viewContainerRef = viewContainerRef;
+        this._layoutHelperService = _layoutHelperService;
+        this._workflowConfigurationService = _workflowConfigurationService;
+        this._presentationDesignerBaseService = _presentationDesignerBaseService;
+        this.panel = panel;
+        this.tabView = tabView;
+    }
+    ngOnInit() {
+        this.panel.designerBlockName = this.presentationDesigner;
+        // Mirrors the base pattern: hide first, the orchestrator re-shows via
+        // execute(true) when the persisted setting says visible or none exists.
+        if (!this._layoutHelperService.isDesignMode) {
+            this.setPanelVisible(false);
+        }
+        this._presentationDesignerBaseService.register(this);
+    }
+    execute(condition, configuration) {
+        this.setPanelVisible(condition);
+        this.treated = true;
+    }
+    insertElement() {
+        this.setPanelVisible(true);
+    }
+    removeElement() {
+        this.setPanelVisible(false);
+    }
+    addCheckboxesToInputs(presentationSetting) {
+        const isBlockVisible = presentationSetting?.presentationSettingDetails
+            .find(x => x.blockName == this.presentationDesigner)?.isBlockVisible ?? true;
+        this.panel.designerChecked = !isBlockVisible;
+        this.panel.designerCheckboxVisible = true;
+        // The checkbox itself is rendered by TsiTabViewComponent in the tab
+        // header; expose its state through the shape the orchestrators read at
+        // save time (showHideCheckboxComponentRef.instance._checked).
+        const panel = this.panel;
+        this.showHideCheckboxComponentRef = {
+            instance: {
+                get _checked() {
+                    return panel.designerChecked;
+                }
+            }
+        };
+        this.tabView?.refreshTabs();
+    }
+    removeShowHideCheckbox() {
+        this.panel.designerCheckboxVisible = false;
+        this.showHideCheckboxComponentRef = null;
+        this.tabView?.refreshTabs();
+    }
+    disableInputs() {
+        // The panel host is empty and detached — there are no inputs to reach
+        // here. Inputs inside the panel content carry their own directives.
+        this.execute(true);
+    }
+    setPanelVisible(visible) {
+        this.panel.visible = visible;
+        this.tabView?.refreshTabs();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PresentationDesignerTabPanelDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: LayoutHelperService }, { token: WorkflowConfigurationService }, { token: PresentationDesignerBaseService }, { token: TsiTabPanelComponent }, { token: TsiTabViewComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PresentationDesignerTabPanelDirective, selector: "tsi-tab-panel[presentationDesigner]", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PresentationDesignerTabPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tsi-tab-panel[presentationDesigner]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: LayoutHelperService }, { type: WorkflowConfigurationService }, { type: PresentationDesignerBaseService }, { type: TsiTabPanelComponent }, { type: TsiTabViewComponent, decorators: [{
+                    type: Optional
+                }] }] });
+
 class CrudBaseService {
     constructor(_httpClient, endpoint) {
         this._httpClient = _httpClient;
@@ -3373,7 +3736,7 @@ class TsiButtonComponent {
         this.rightClick.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiButtonComponent, selector: "Tsi-Button", inputs: { disabled: "disabled", text: "text", style: "style", tooltipText: "tooltipText", tooltipPosition: "tooltipPosition", buttonType: "buttonType", icon: "icon", styleClass: "styleClass", iconSrc: "iconSrc", id: "id", iconWidth: "iconWidth", iconClass: "iconClass" }, outputs: { onClick: "onClick", rightClick: "rightClick" }, ngImport: i0, template: "<button \r\n  pButton \r\n  pRipple \r\n  class=\"{{styleClass}} p-button\" \r\n  [type]=\"buttonType\" \r\n  [disabled]=\"disabled\"\r\n  [tooltipPosition]=\"tooltipPosition\" [pTooltip]=\"tooltipText | localize\" \r\n  [style]=\"style\" \r\n  (click)=\"onClicked($event)\" \r\n  id=\"{{id}}\"\r\n  (contextmenu)=\"onContextMenu($event)\">\r\n    <ng-container *ngIf=\"iconSrc; else defaultIcon\">\r\n      <img [src]=\"iconSrc\" alt=\"Button Icon\"\r\n        [width]=\"iconWidth\"\r\n        [ngClass]=\"iconClass\"\r\n        [ngStyle]=\"isAr ? {'margin-left': '0.5rem'} : {}\" />\r\n    </ng-container>\r\n    <ng-template #defaultIcon>\r\n      <i [ngClass]=\"icon\" [ngStyle]=\"isAr ? {'margin-right': '0.5rem'} : {}\"></i>\r\n    </ng-template>\r\n    <ng-container *ngIf=\"isAr\">&nbsp;&nbsp;</ng-container>\r\n    <span [ngClass]=\"{'-mr-3': isAr && !icon}\">\r\n      {{ text | localize }}\r\n    </span>\r\n</button>", styles: ["@charset \"UTF-8\";.click-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;cursor:pointer;z-index:10}button:disabled+.click-overlay{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiButtonComponent, selector: "Tsi-Button", inputs: { disabled: "disabled", text: "text", style: "style", tooltipText: "tooltipText", tooltipPosition: "tooltipPosition", buttonType: "buttonType", icon: "icon", styleClass: "styleClass", iconSrc: "iconSrc", id: "id", iconWidth: "iconWidth", iconClass: "iconClass" }, outputs: { onClick: "onClick", rightClick: "rightClick" }, ngImport: i0, template: "<button \r\n  pButton \r\n  pRipple \r\n  class=\"{{styleClass}} p-button\" \r\n  [type]=\"buttonType\" \r\n  [disabled]=\"disabled\"\r\n  [tooltipPosition]=\"tooltipPosition\" [pTooltip]=\"tooltipText | localize\" \r\n  [style]=\"style\" \r\n  (click)=\"onClicked($event)\" \r\n  id=\"{{id}}\"\r\n  (contextmenu)=\"onContextMenu($event)\">\r\n    <ng-container *ngIf=\"iconSrc; else defaultIcon\">\r\n      <img [src]=\"iconSrc\" alt=\"Button Icon\"\r\n        [width]=\"iconWidth\"\r\n        [ngClass]=\"iconClass\"\r\n        [ngStyle]=\"isAr ? {'margin-left': '0.5rem'} : {}\" />\r\n    </ng-container>\r\n    <ng-template #defaultIcon>\r\n      <i [ngClass]=\"icon\" [ngStyle]=\"isAr ? {'margin-right': '0.5rem'} : {}\"></i>\r\n    </ng-template>\r\n    <ng-container *ngIf=\"isAr\">&nbsp;&nbsp;</ng-container>\r\n    <span [ngClass]=\"{'-mr-3': isAr && !icon}\">\r\n      {{ text | localize }}\r\n    </span>\r\n</button>", styles: ["@charset \"UTF-8\";.click-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;cursor:pointer;z-index:10}button:disabled+.click-overlay{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiButtonComponent, decorators: [{
             type: Component,
@@ -3447,7 +3810,7 @@ class TsiErrorMessageComponent {
         this._modalRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiErrorMessageComponent, deps: [{ token: i1$3.DynamicDialogRef }, { token: i1$3.DynamicDialogConfig }, { token: LocalizePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiErrorMessageComponent, selector: "app-tsi-error-message", ngImport: i0, template: "<div class=\"flex justify-content-center error-container\">\r\n    <p-card styleClass=\"error-card\" [ngStyle]=\"{ width: '90%', maxWidth: '90%', maxHeight: '80vh', overflow: 'auto' }\">\r\n\r\n        <div class=\"flex flex-column align-items-center mb-3\">\r\n            <i class=\"pi pi-times-circle error-icon-vibrate\"></i>\r\n            <p class=\"error-message\" role=\"alert\">\r\n                {{ errorLabel }}\r\n            </p>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"isMessages; else singleMessageView\">\r\n            <p-table [value]=\"messages\" class=\"error-table w-full\">\r\n                <ng-template pTemplate=\"header\">\r\n                    <tr>\r\n                        <th>\r\n                            <h6>{{ 'error_message' | localize }}</h6>\r\n                        </th>\r\n                    </tr>\r\n                </ng-template>\r\n\r\n                <ng-template pTemplate=\"body\" let-msg>\r\n                    <tr>\r\n                        <td class=\"error-cell\" [innerHTML]=\"msg\"></td>\r\n                    </tr>\r\n                </ng-template>\r\n            </p-table>\r\n        </ng-container>\r\n\r\n        <ng-template #singleMessageView>\r\n            <p-table [value]=\"[{ message: message }]\" class=\"error-table w-full\">\r\n                <ng-template pTemplate=\"header\">\r\n                    <tr>\r\n                        <th>{{ 'error_message' | localize }}</th>\r\n                    </tr>\r\n                </ng-template>\r\n\r\n                <ng-template pTemplate=\"body\">\r\n                    <tr>\r\n                        <td class=\"error-cell\" [innerHTML]=\"message\"></td>\r\n                    </tr>\r\n                </ng-template>\r\n            </p-table>\r\n        </ng-template>\r\n\r\n        <p-footer class=\"error-footer\">\r\n            <Tsi-Button text=\"{{ 'cancel_label' | localize }}\" icon=\"pi pi-times\"\r\n                styleClass=\"p-button-text p-button-outlined error-close-button\" (click)=\"onCancel()\"></Tsi-Button>\r\n        </p-footer>\r\n\r\n    </p-card>\r\n</div>", styles: [".error-card{border-radius:12px;padding:1.5rem 1.5rem 2rem;animation:fadeSlideIn .35s ease-out}.error-icon-vibrate{font-size:2.5rem;color:#e53935;animation:vibrateTilt .8s ease-in-out,pulseIcon 1.2s ease-in-out;filter:drop-shadow(0 0 6px #ff8a80)}@keyframes pulseIcon{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes vibrateTilt{0%{transform:translate(0) rotate(0) scale(1);filter:drop-shadow(0 0 4px #ff8a80)}10%{transform:translate(-1px) rotate(-2deg) scale(1.02)}20%{transform:translate(1px) rotate(2deg) scale(1.03)}30%{transform:translate(-1px) rotate(-1.5deg) scale(1.02)}40%{transform:translate(1px) rotate(1.5deg) scale(1.03)}50%{transform:translate(-.5px) rotate(-1deg) scale(1.02)}60%{transform:translate(.5px) rotate(1deg) scale(1.02)}70%{transform:translate(-.3px) rotate(-.5deg) scale(1.01)}85%{transform:translate(.3px) rotate(.5deg) scale(1.01)}to{transform:translate(0) rotate(0) scale(1);filter:drop-shadow(0 0 6px #ff8a80)}}body.dark-mode .error-icon-vibrate{filter:drop-shadow(0 0 8px rgba(255,82,82,.6))}.error-message{color:#e53935;font-size:1rem;font-weight:500;text-align:center;margin-top:.5rem}.error-table th{background:#fafafa;font-weight:600}.error-table td{padding:.75rem 1rem;font-size:.95rem}.error-cell td{transform:translate(10px)}.error-footer{margin-top:3rem;display:flex;justify-content:center}.error-close-button{border:1.5px solid #bdbdbd;color:#555;background:transparent;border-radius:8px;padding:.5rem 1.5rem;font-weight:500;transition:all .25s ease;animation:pulseBorder 2s infinite}.error-close-button:hover{background:#f5f5f5;border-color:#9e9e9e;color:#333}body.dark-mode .error-card{background:#1f1f1f;color:#f5f5f5}body.dark-mode .error-table th{background:#333;color:#fff}body.dark-mode .error-table td{background:#242424;color:#ddd}body.dark-mode .error-close-button{border-color:#777;color:#ddd}body.dark-mode .error-close-button:hover{background:#2a2a2a}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.Footer, selector: "p-footer" }, { kind: "directive", type: i2$2.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: "component", type: i6$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { 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: TsiErrorMessageComponent, selector: "app-tsi-error-message", ngImport: i0, template: "<div class=\"flex justify-content-center error-container\">\r\n    <p-card styleClass=\"error-card\" [ngStyle]=\"{ width: '90%', maxWidth: '90%', maxHeight: '80vh', overflow: 'auto' }\">\r\n\r\n        <div class=\"flex flex-column align-items-center mb-3\">\r\n            <i class=\"pi pi-times-circle error-icon-vibrate\"></i>\r\n            <p class=\"error-message\" role=\"alert\">\r\n                {{ errorLabel }}\r\n            </p>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"isMessages; else singleMessageView\">\r\n            <p-table [value]=\"messages\" class=\"error-table w-full\">\r\n                <ng-template pTemplate=\"header\">\r\n                    <tr>\r\n                        <th>\r\n                            <h6>{{ 'error_message' | localize }}</h6>\r\n                        </th>\r\n                    </tr>\r\n                </ng-template>\r\n\r\n                <ng-template pTemplate=\"body\" let-msg>\r\n                    <tr>\r\n                        <td class=\"error-cell\" [innerHTML]=\"msg\"></td>\r\n                    </tr>\r\n                </ng-template>\r\n            </p-table>\r\n        </ng-container>\r\n\r\n        <ng-template #singleMessageView>\r\n            <p-table [value]=\"[{ message: message }]\" class=\"error-table w-full\">\r\n                <ng-template pTemplate=\"header\">\r\n                    <tr>\r\n                        <th>{{ 'error_message' | localize }}</th>\r\n                    </tr>\r\n                </ng-template>\r\n\r\n                <ng-template pTemplate=\"body\">\r\n                    <tr>\r\n                        <td class=\"error-cell\" [innerHTML]=\"message\"></td>\r\n                    </tr>\r\n                </ng-template>\r\n            </p-table>\r\n        </ng-template>\r\n\r\n        <p-footer class=\"error-footer\">\r\n            <Tsi-Button text=\"{{ 'cancel_label' | localize }}\" icon=\"pi pi-times\"\r\n                styleClass=\"p-button-text p-button-outlined error-close-button\" (click)=\"onCancel()\"></Tsi-Button>\r\n        </p-footer>\r\n\r\n    </p-card>\r\n</div>", styles: [".error-card{border-radius:12px;padding:1.5rem 1.5rem 2rem;animation:fadeSlideIn .35s ease-out}.error-icon-vibrate{font-size:2.5rem;color:#e53935;animation:vibrateTilt .8s ease-in-out,pulseIcon 1.2s ease-in-out;filter:drop-shadow(0 0 6px #ff8a80)}@keyframes pulseIcon{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes vibrateTilt{0%{transform:translate(0) rotate(0) scale(1);filter:drop-shadow(0 0 4px #ff8a80)}10%{transform:translate(-1px) rotate(-2deg) scale(1.02)}20%{transform:translate(1px) rotate(2deg) scale(1.03)}30%{transform:translate(-1px) rotate(-1.5deg) scale(1.02)}40%{transform:translate(1px) rotate(1.5deg) scale(1.03)}50%{transform:translate(-.5px) rotate(-1deg) scale(1.02)}60%{transform:translate(.5px) rotate(1deg) scale(1.02)}70%{transform:translate(-.3px) rotate(-.5deg) scale(1.01)}85%{transform:translate(.3px) rotate(.5deg) scale(1.01)}to{transform:translate(0) rotate(0) scale(1);filter:drop-shadow(0 0 6px #ff8a80)}}body.dark-mode .error-icon-vibrate{filter:drop-shadow(0 0 8px rgba(255,82,82,.6))}.error-message{color:#e53935;font-size:1rem;font-weight:500;text-align:center;margin-top:.5rem}.error-table th{background:#fafafa;font-weight:600}.error-table td{padding:.75rem 1rem;font-size:.95rem}.error-cell td{transform:translate(10px)}.error-footer{margin-top:3rem;display:flex;justify-content:center}.error-close-button{border:1.5px solid #bdbdbd;color:#555;background:transparent;border-radius:8px;padding:.5rem 1.5rem;font-weight:500;transition:all .25s ease;animation:pulseBorder 2s infinite}.error-close-button:hover{background:#f5f5f5;border-color:#9e9e9e;color:#333}body.dark-mode .error-card{background:#1f1f1f;color:#f5f5f5}body.dark-mode .error-table th{background:#333;color:#fff}body.dark-mode .error-table td{background:#242424;color:#ddd}body.dark-mode .error-close-button{border-color:#777;color:#ddd}body.dark-mode .error-close-button:hover{background:#2a2a2a}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.Footer, selector: "p-footer" }, { 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: "component", type: i6$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { 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: TsiErrorMessageComponent, decorators: [{
             type: Component,
@@ -3467,7 +3830,7 @@ class TsiInfoMessageComponent {
     }
     onCancel() { this._modalRef.close(); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiInfoMessageComponent, deps: [{ 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: TsiInfoMessageComponent, selector: "app-tsi-info-message", ngImport: i0, template: "<div class=\"flex flex-column align-items-center justify-content-center p-4 text-center\">\r\n  <div class=\"mb-3\">\r\n    <i class=\"pi pi-info-circle text-primary\" style=\"font-size: 2rem;\"></i>\r\n    <p class=\"mb-4 message-multiline\">{{ header | localize}}</p>\r\n  </div>\r\n\r\n  <p class=\"mb-4 message-multiline\">{{ message | localize}}</p>\r\n\r\n  <p-footer>\r\n    <Tsi-Button \r\n      text=\"OK\" \r\n      icon=\"pi pi-check\" \r\n      styleClass=\"p-button p-button-text\" \r\n      (click)=\"onCancel()\">\r\n    </Tsi-Button>\r\n  </p-footer>\r\n</div>\r\n", styles: [".message-multiline{white-space:pre-line;text-align:left}\n"], dependencies: [{ kind: "component", type: i2$2.Footer, selector: "p-footer" }, { 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: TsiInfoMessageComponent, selector: "app-tsi-info-message", ngImport: i0, template: "<div class=\"flex flex-column align-items-center justify-content-center p-4 text-center\">\r\n  <div class=\"mb-3\">\r\n    <i class=\"pi pi-info-circle text-primary\" style=\"font-size: 2rem;\"></i>\r\n    <p class=\"mb-4 message-multiline\">{{ header | localize}}</p>\r\n  </div>\r\n\r\n  <p class=\"mb-4 message-multiline\">{{ message | localize}}</p>\r\n\r\n  <p-footer>\r\n    <Tsi-Button \r\n      text=\"OK\" \r\n      icon=\"pi pi-check\" \r\n      styleClass=\"p-button p-button-text\" \r\n      (click)=\"onCancel()\">\r\n    </Tsi-Button>\r\n  </p-footer>\r\n</div>\r\n", styles: [".message-multiline{white-space:pre-line;text-align:left}\n"], dependencies: [{ kind: "component", type: i2$1.Footer, selector: "p-footer" }, { 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: TsiInfoMessageComponent, decorators: [{
             type: Component,
@@ -3484,7 +3847,7 @@ class TsiSuccessMessageComponent {
     }
     onCancel() { this._modalRef.close(); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiSuccessMessageComponent, deps: [{ 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: TsiSuccessMessageComponent, selector: "app-tsi-success-message", ngImport: i0, template: "<div align-items-center class=\"m-1\">\r\n    <div class=\"flex align-items-center justify-content-center pb-4\">\r\n        <i class=\"layout-menuitem-icon ng-tns-c18-91 pi pi-fw pi-check-circle justify-content-center\"\r\n            style=\"font-size: 4rem;color: #28a745;\"></i>\r\n    </div>\r\n    <h3 class=\"justify-content-center flex align-items-center\">Success</h3>\r\n\r\n    <p class=\"d-flex justify-content-center align-items-center message-text\" [innerHTML]=\"message\">\r\n    </p> <p-footer class=\"justify-content-center flex align-items-center\">\r\n        <Tsi-Button text=\"Cancel\" icon=\"p-button-icon p-button-icon-left pi pi-times\"\r\n            styleClass=\"p-element p-button-text flex align-items-center justify-content-center p-button p-component p-button-label\"\r\n            (click)=\"onCancel()\"></Tsi-Button>\r\n    </p-footer>\r\n</div>", styles: [".message-text{white-space:normal;word-wrap:break-word;text-align:center;max-width:100%;margin:0}\n"], dependencies: [{ kind: "component", type: i2$2.Footer, selector: "p-footer" }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiSuccessMessageComponent, selector: "app-tsi-success-message", ngImport: i0, template: "<div align-items-center class=\"m-1\">\r\n    <div class=\"flex align-items-center justify-content-center pb-4\">\r\n        <i class=\"layout-menuitem-icon ng-tns-c18-91 pi pi-fw pi-check-circle justify-content-center\"\r\n            style=\"font-size: 4rem;color: #28a745;\"></i>\r\n    </div>\r\n    <h3 class=\"justify-content-center flex align-items-center\">Success</h3>\r\n\r\n    <p class=\"d-flex justify-content-center align-items-center message-text\" [innerHTML]=\"message\">\r\n    </p> <p-footer class=\"justify-content-center flex align-items-center\">\r\n        <Tsi-Button text=\"Cancel\" icon=\"p-button-icon p-button-icon-left pi pi-times\"\r\n            styleClass=\"p-element p-button-text flex align-items-center justify-content-center p-button p-component p-button-label\"\r\n            (click)=\"onCancel()\"></Tsi-Button>\r\n    </p-footer>\r\n</div>", styles: [".message-text{white-space:normal;word-wrap:break-word;text-align:center;max-width:100%;margin:0}\n"], dependencies: [{ kind: "component", type: i2$1.Footer, selector: "p-footer" }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiSuccessMessageComponent, decorators: [{
             type: Component,
@@ -3619,7 +3982,7 @@ class TsiConfirmationService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiConfirmationService, deps: [{ token: i2$2.ConfirmationService }, { token: LocalizePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiConfirmationService, deps: [{ token: i2$1.ConfirmationService }, { token: LocalizePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiConfirmationService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiConfirmationService, decorators: [{
@@ -3627,7 +3990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i2$2.ConfirmationService }, { type: LocalizePipe }] });
+        }], ctorParameters: () => [{ type: i2$1.ConfirmationService }, { type: LocalizePipe }] });
 
 class TsiNotificationService {
     constructor(_messageService, localizePipe, tsiMessageService) {
@@ -3658,7 +4021,7 @@ class TsiNotificationService {
             summary: header ? header : 'Notification',
             detail: this.localizePipe.transform(error.message) });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotificationService, deps: [{ token: i2$2.MessageService }, { token: LocalizePipe }, { token: TsiMessageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotificationService, deps: [{ token: i2$1.MessageService }, { token: LocalizePipe }, { token: TsiMessageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotificationService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotificationService, decorators: [{
@@ -3666,7 +4029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i2$2.MessageService }, { type: LocalizePipe }, { type: TsiMessageService }] });
+        }], ctorParameters: () => [{ type: i2$1.MessageService }, { type: LocalizePipe }, { type: TsiMessageService }] });
 
 class PresentationDesignerService extends PresentationDesignerBaseService {
     constructor() {
@@ -6412,7 +6775,7 @@ class TsiSearchComboComponent extends TsiInputBase {
         return bestLabelPropertyName;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiSearchComboComponent, deps: [{ token: EntityConfigurationService }, { token: TsiModalService }, { token: TsiNotificationService }, { token: i1.HttpClient }, { token: LocalizePipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: { elementSourceUrl: "elementSourceUrl", listSourceUrl: "listSourceUrl", listSourceParams: "listSourceParams", idField: ["id-field", "idField"], labelField: ["label-field", "labelField"], multiple: "multiple", sort: "sort", showClear: "showClear", reloadDataSource: "reloadDataSource", isFiltered: "isFiltered", selectedLabel: "selectedLabel", maxWidth: "maxWidth", businessClass: "businessClass", searchDebounceTime: "searchDebounceTime", comboType: "comboType", statusMetadata: "statusMetadata", currentRowItem: "currentRowItem", datasource: "datasource", bind: "bind", maxSelectedLabels: "maxSelectedLabels", tooltipMaxDisplayedItems: "tooltipMaxDisplayedItems", bindMode: "bindMode", showSearchButton: "showSearchButton", showAddButton: "showAddButton", showConsultButton: "showConsultButton", showUpdateButton: "showUpdateButton" }, outputs: { bindChange: "bindChange", dataSourceLoaded: "datasource-loaded", init: "init", isLoaded: "isLoaded", selectedLabelChange: "selectedLabelChange", onClick: "onClick", onSearchButtonClick: "onSearchButtonClick", selectionChange: "selectionChange" }, host: { listeners: { "keydown.enter": "onEnterKey($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!multiple; else multiSelect\" class=\"flex\">\r\n  <p-dropdown \r\n    [options]=\"datasource\"\r\n    [ngModel]=\"bind\"\r\n    optionLabel=\"label\"\r\n    optionValue=\"id\"\r\n    [loading]=\"!dataLoaded\"\r\n    filterBy=\"label\" \r\n    [filter]=\"true\" \r\n    [autoDisplayFirst]=\"false\"\r\n    [required]=\"isRequired\"\r\n    [showClear]=\"showClear\" \r\n    [disabled]=\"disabled\"\r\n    (onChange)=\"handleChangeEvent($event)\"\r\n    (onShow)=\"onOpen()\" (onFilter)=\"searchValueChanged($event)\" (onClick)=\"onSearchComboClick($event)\"\r\n    [style]=\"{'max-width': maxWidth, 'width':'100%', 'height': '1.7rem'}\"\r\n    [ngClass]=\"isAr ? 'p-dropdown-clear-iconAR': 'p-dropdown-clear-iconFR'\"\r\n    [placeholder]=\"placeHolder\" \r\n    class=\"{{myStyleClass}}\" \r\n    styleClass=\"{{myStyleClass}} border-radius-7 {{validationStatusCssClass}}\" \r\n    appendTo=\"body\">\r\n\r\n    <ng-template pTemplate=\"header\">\r\n      <div class=\"dropdown-header flex gap-1 pt-2 px-2\">\r\n        <Tsi-Button *ngIf=\"showSearchButton\" type=\"button\" icon=\"pi pi-search\" tooltipText=\"sharedUi-searchCombo-action-search\"\r\n          [tooltipPosition]=\"tooltipPosition.Bottom\" styleClass=\"p-button-primary hover:shadow-6 h-2rem p-button-icon-only\" (click)=\"openSearchDialog()\">\r\n        </Tsi-Button>\r\n\r\n        <Tsi-Button *ngIf=\"showAdvancedSearchButton\" type=\"button\" icon=\"pi pi-sort-amount-down\" tooltipText=\"sharedUi-searchCombo-action-advancedSearch\"\r\n          [tooltipPosition]=\"tooltipPosition.Bottom\" styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n          (click)=\"openAdvancedSearchComponent()\">\r\n        </Tsi-Button>\r\n\r\n        <Tsi-Button *ngIf=\"showAddButton\" type=\"button\" icon=\"pi pi-plus\" tooltipText=\"sharedUi-searchCombo-action-add\"\r\n          [tooltipPosition]=\"tooltipPosition.Bottom\" styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\" (click)=\"addElement()\">\r\n        </Tsi-Button>\r\n\r\n        <Tsi-Button *ngIf=\"showUpdateButton\" type=\"button\" icon=\"pi pi-pencil\" tooltipText=\"sharedUi-searchCombo-action-edit\"\r\n          [tooltipPosition]=\"tooltipPosition.Bottom\" styleClass=\"p-button-primary hover:shadow-6 h-2rem p-button-icon-only\" (click)=\"updateElement()\">\r\n        </Tsi-Button>\r\n\r\n        <Tsi-Button *ngIf=\"showConsultButton\" type=\"button\" icon=\"pi pi-eye\" tooltipText=\"sharedUi-searchCombo-action-consult\"\r\n          [tooltipPosition]=\"tooltipPosition.Bottom\" styleClass=\"p-button-primary hover:shadow-6 h-2rem p-button-icon-only\" (click)=\"consultElement()\">\r\n        </Tsi-Button>\r\n\r\n      </div>\r\n    </ng-template>\r\n    \r\n\r\n    <ng-template pTemplate=\"empty\">\r\n       <div class=\"flex align-items-center justify-content-center py-3 gap-2\">\r\n        \r\n          <ng-container *ngIf=\"!isApiError; else apiError\">\r\n\r\n            <div\r\n              *ngIf=\"isDatasourceEmpty && !isFiltering\"\r\n              class=\"flex align-items-center gap-2 text-gray-500\">\r\n              <i class=\"pi pi-info-circle\"></i>\r\n              <span>{{ 'search_combo_no_element' | localize }}</span>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"isNoResultAfterFilter\"\r\n              class=\"flex align-items-center gap-2 text-gray-500\">\r\n              <i class=\"pi pi-info-circle\"></i>\r\n              <span>{{ 'search_combo_no_result' | localize }}</span>\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n          <ng-template #apiError>\r\n            <i class=\"pi pi-exclamation-triangle text-orange-500\"></i>\r\n            <span>\r\n              {{ 'search_combo_load_error' | localize }}\r\n            </span>\r\n          </ng-template>\r\n\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"selectedItem\" let-selectedOption>\r\n      <div pTooltip=\"{{selectedOption.label}}\" tooltipPosition=\"top\" tooltipStyleClass=\"custom-tooltip\">\r\n        <ng-container *ngIf=\"isStatusCombo && statusMetadata; else normalSelected\">\r\n          <ng-container *ngIf=\"selectedOption && getStatusOption(selectedOption.label) as opt\">\r\n            <span\r\n              class=\"font-bold status-badge\"\r\n              [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n              [style.color]=\"getReadableTextColor(opt.colorHex)\">\r\n              {{ selectedOption.label }}\r\n            </span>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #normalSelected>\r\n          <span>{{ selectedOption.label }}</span>\r\n        </ng-template>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template let-target pTemplate=\"item\">\r\n      <div pTooltip=\"{{target.label}}\" tooltipPosition=\"top\" tooltipStyleClass=\"custom-tooltip\">\r\n\r\n        <ng-container *ngIf=\"isStatusCombo && statusMetadata; else normalOption\">\r\n          <ng-container *ngIf=\"getStatusOption(target.label) as opt\">\r\n            <span\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                {{target.label}}\r\n            </span>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #normalOption>\r\n          <span>{{target.label}}</span>\r\n        </ng-template>\r\n      </div>\r\n    </ng-template>\r\n\r\n  </p-dropdown>\r\n\r\n  <!-- Bubble Info -->\r\n  <Tsi-Bubble-Info [infoText]=\"infoText\"></Tsi-Bubble-Info>\r\n\r\n</div>\r\n\r\n<ng-template #multiSelect>\r\n  <p-multiSelect\r\n    #multiSelectElement\r\n    [options]=\"grouppedDataSource\"\r\n    [group]=\"true\" \r\n    [ngModel]=\"bind\"\r\n    [optionLabel]=\"'label'\"\r\n    [optionValue]=\"'id'\"\r\n    [loading]=\"!dataLoaded\"\r\n    [filterBy]=\"'label'\"\r\n    [filter]=\"true\"\r\n    [required]=\"isRequired\"\r\n    [showClear]=\"showClear\"\r\n    [disabled]=\"disabled\"\r\n    [selectedItemsLabel]=\"'shared_component_multiselect_selected_items_count' | localize\"\r\n    [maxSelectedLabels]=\"maxSelectedLabels\"\r\n    [showToggleAll]=\"false\"\r\n    [style]=\"{'max-width': maxWidth, 'width':'100%', 'height': '1.7rem'}\"\r\n    [placeholder]=\"placeHolder\"\r\n    [ngClass]=\"isAr ? 'p-dropdown-clear-iconAR': 'p-dropdown-clear-iconFR'\"\r\n    class=\"{{myStyleClass}}\" \r\n    styleClass=\"{{myStyleClass}} border-radius-7 {{validationStatusCssClass}}\"\r\n    panelStyleClass=\"tsi-multiselect-panel\"\r\n    appendTo=\"body\"\r\n    (ngModelChange)=\"onMultiSelectModelChange($event)\"\r\n    (onPanelShow)=\"onOpen()\"\r\n    (onFilter)=\"searchValueChanged($event)\"\r\n    (onClick)=\"onSearchComboClick($event)\"\r\n    [pTooltip]=\"multiSelectElement?.selectedOptions?.length ? multiSelectTooltipContent : undefined\" tooltipPosition=\"bottom\">\r\n\r\n    <ng-template pTemplate=\"item\" let-option>\r\n      <div #labelRef class=\"tsi-multiselect-option-label\" tooltipPosition=\"bottom\" tooltipAppendTo=\"body\" [pTooltip]=\"isTextOverflowing(labelRef) ? option.label : null\">\r\n        {{ option.label }}\r\n      </div>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"header\">\r\n      <div class=\"dropdown-header flex gap-1 p-1\">\r\n        <Tsi-Button *ngIf=\"showSearchButton\" type=\"button\" icon=\"pi pi-search\" tooltipText=\"sharedUi-multiselect-action-search\"\r\n          [tooltipPosition]=\"tooltipPosition.Bottom\" styleClass=\"p-button-primary hover:shadow-6 h-2rem p-button-icon-only\"\r\n          (click)=\"openSearchDialog()\">\r\n        </Tsi-Button>\r\n\r\n        <Tsi-Button *ngIf=\"showAdvancedSearchButton\" type=\"button\" icon=\"pi pi-sort-amount-down\" tooltipText=\"sharedUi-multiselect-action-advancedSearch\"\r\n        [tooltipPosition]=\"tooltipPosition.Bottom\" styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n        (click)=\"openAdvancedSearchComponent()\">\r\n        </Tsi-Button>\r\n      </div>\r\n    </ng-template>\r\n  </p-multiSelect>\r\n\r\n  <ng-template #multiSelectTooltipContent>\r\n    <div class=\"p-2\">\r\n      <!-- If there are selected items -->\r\n      <ng-container *ngIf=\"multiSelectElement?.selectedOptions?.length; else noItems\">\r\n\r\n        <div class=\"font-semibold mb-1\">\r\n          {{ 'shared_component_multiselect_selected_items_title' | localize }}\r\n          ({{ multiSelectElement.selectedOptions.length }})\r\n        </div>\r\n\r\n        <ul class=\"m-0 pl-3\">\r\n          <!-- Show only first 10 items -->\r\n          <li *ngFor=\"let option of getTopSelectedOptions(multiSelectElement)\">\r\n            {{ option.label }}\r\n          </li>\r\n        </ul>\r\n\r\n        <!-- Show message if more than 10 -->\r\n        <div *ngIf=\"multiSelectElement.selectedOptions.length > 10\" class=\"text-sm mt-1 text-gray-500\">\r\n          {{ multiSelectElement.selectedOptions.length - 10 }}\r\n          {{ 'shared_component_multiselect_selected_items_more_message' | localize }}\r\n        </div>\r\n\r\n      </ng-container>\r\n\r\n      <!-- If no items selected -->\r\n      <ng-template #noItems>\r\n        <span class=\"text-sm text-500\">\r\n          {{ 'shared_component_multiselect_selected_items_empty' | localize }}\r\n        </span>\r\n      </ng-template>\r\n\r\n    </div>\r\n  </ng-template>\r\n</ng-template>", styles: [".ng-select .ng-select-container .ng-value-container .ng-input>input{z-index:10!important}::ng-deep .p-icon-wrapper{align-items:center!important;justify-content:center!important}::ng-deep .p-dropdown-clear-icon{position:unset!important;top:unset!important;margin-top:unset!important}::ng-deep .p-dropdown-panel{max-width:30rem!important}::ng-deep .p-dropdown-clear-iconAR svg{left:0!important}::ng-deep .p-dropdown-clear-iconFR svg{right:2.5rem;left:auto}::ng-deep .custom-tooltip{max-width:300px;white-space:normal;word-wrap:break-word}.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;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)}::ng-deep .tsi-component.p-multiselect .p-multiselect-label{padding:.25rem .75rem!important}.p-multiselect-panel .p-multiselect-items .p-multiselect-item{gap:.5rem}.tsi-multiselect-panel{max-width:25rem!important}.tsi-multiselect-panel .tsi-multiselect-option-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i10.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: i11.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "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: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: { elementSourceUrl: "elementSourceUrl", listSourceUrl: "listSourceUrl", listSourceParams: "listSourceParams", idField: ["id-field", "idField"], labelField: ["label-field", "labelField"], multiple: "multiple", sort: "sort", showClear: "showClear", reloadDataSource: "reloadDataSource", isFiltered: "isFiltered", selectedLabel: "selectedLabel", maxWidth: "maxWidth", businessClass: "businessClass", searchDebounceTime: "searchDebounceTime", comboType: "comboType", statusMetadata: "statusMetadata", currentRowItem: "currentRowItem", datasource: "datasource", bind: "bind", maxSelectedLabels: "maxSelectedLabels", tooltipMaxDisplayedItems: "tooltipMaxDisplayedItems", bindMode: "bindMode", showSearchButton: "showSearchButton", showAddButton: "showAddButton", showConsultButton: "showConsultButton", showUpdateButton: "showUpdateButton" }, outputs: { bindChange: "bindChange", dataSourceLoaded: "datasource-loaded", init: "init", isLoaded: "isLoaded", selectedLabelChange: "selectedLabelChange", onClick: "onClick", onSearchButtonClick: "onSearchButtonClick", selectionChange: "selectionChange" }, host: { listeners: { "keydown.enter": "onEnterKey($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!multiple; else multiSelect\" class=\"flex\">\r\n  <p-dropdown \r\n    [options]=\"datasource\"\r\n    [ngModel]=\"bind\"\r\n    optionLabel=\"label\"\r\n    optionValue=\"id\"\r\n    [loading]=\"!dataLoaded\"\r\n    filterBy=\"label\" \r\n    [filter]=\"true\" \r\n    [autoDisplayFirst]=\"false\"\r\n    [required]=\"isRequired\"\r\n    [showClear]=\"showClear\" \r\n    [disabled]=\"disabled\"\r\n    (onChange)=\"handleChangeEvent($event)\"\r\n    (onShow)=\"onOpen()\" (onFilter)=\"searchValueChanged($event)\" (onClick)=\"onSearchComboClick($event)\"\r\n    [style]=\"{'max-width': maxWidth, 'width':'100%', 'height': '1.7rem'}\"\r\n    [ngClass]=\"isAr ? 'p-dropdown-clear-iconAR': 'p-dropdown-clear-iconFR'\"\r\n    [placeholder]=\"placeHolder\" \r\n    class=\"{{myStyleClass}}\" \r\n    styleClass=\"{{myStyleClass}} border-radius-7 {{validationStatusCssClass}}\" \r\n    appendTo=\"body\">\r\n\r\n    <ng-template pTemplate=\"header\">\r\n      <div class=\"dropdown-header flex gap-1 pt-2 px-2\">\r\n        <Tsi-Button *ngIf=\"showSearchButton\" type=\"button\" icon=\"pi pi-search\" tooltipText=\"sharedUi-searchCombo-action-search\"\r\n          [tooltipPosition]=\"tooltipPosition.Bottom\" styleClass=\"p-button-primary hover:shadow-6 h-2rem p-button-icon-only\" (click)=\"openSearchDialog()\">\r\n        </Tsi-Button>\r\n\r\n        <Tsi-Button *ngIf=\"showAdvancedSearchButton\" type=\"button\" icon=\"pi pi-sort-amount-down\" tooltipText=\"sharedUi-searchCombo-action-advancedSearch\"\r\n          [tooltipPosition]=\"tooltipPosition.Bottom\" styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n          (click)=\"openAdvancedSearchComponent()\">\r\n        </Tsi-Button>\r\n\r\n        <Tsi-Button *ngIf=\"showAddButton\" type=\"button\" icon=\"pi pi-plus\" tooltipText=\"sharedUi-searchCombo-action-add\"\r\n          [tooltipPosition]=\"tooltipPosition.Bottom\" styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\" (click)=\"addElement()\">\r\n        </Tsi-Button>\r\n\r\n        <Tsi-Button *ngIf=\"showUpdateButton\" type=\"button\" icon=\"pi pi-pencil\" tooltipText=\"sharedUi-searchCombo-action-edit\"\r\n          [tooltipPosition]=\"tooltipPosition.Bottom\" styleClass=\"p-button-primary hover:shadow-6 h-2rem p-button-icon-only\" (click)=\"updateElement()\">\r\n        </Tsi-Button>\r\n\r\n        <Tsi-Button *ngIf=\"showConsultButton\" type=\"button\" icon=\"pi pi-eye\" tooltipText=\"sharedUi-searchCombo-action-consult\"\r\n          [tooltipPosition]=\"tooltipPosition.Bottom\" styleClass=\"p-button-primary hover:shadow-6 h-2rem p-button-icon-only\" (click)=\"consultElement()\">\r\n        </Tsi-Button>\r\n\r\n      </div>\r\n    </ng-template>\r\n    \r\n\r\n    <ng-template pTemplate=\"empty\">\r\n       <div class=\"flex align-items-center justify-content-center py-3 gap-2\">\r\n        \r\n          <ng-container *ngIf=\"!isApiError; else apiError\">\r\n\r\n            <div\r\n              *ngIf=\"isDatasourceEmpty && !isFiltering\"\r\n              class=\"flex align-items-center gap-2 text-gray-500\">\r\n              <i class=\"pi pi-info-circle\"></i>\r\n              <span>{{ 'search_combo_no_element' | localize }}</span>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"isNoResultAfterFilter\"\r\n              class=\"flex align-items-center gap-2 text-gray-500\">\r\n              <i class=\"pi pi-info-circle\"></i>\r\n              <span>{{ 'search_combo_no_result' | localize }}</span>\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n          <ng-template #apiError>\r\n            <i class=\"pi pi-exclamation-triangle text-orange-500\"></i>\r\n            <span>\r\n              {{ 'search_combo_load_error' | localize }}\r\n            </span>\r\n          </ng-template>\r\n\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"selectedItem\" let-selectedOption>\r\n      <div pTooltip=\"{{selectedOption.label}}\" tooltipPosition=\"top\" tooltipStyleClass=\"custom-tooltip\">\r\n        <ng-container *ngIf=\"isStatusCombo && statusMetadata; else normalSelected\">\r\n          <ng-container *ngIf=\"selectedOption && getStatusOption(selectedOption.label) as opt\">\r\n            <span\r\n              class=\"font-bold status-badge\"\r\n              [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n              [style.color]=\"getReadableTextColor(opt.colorHex)\">\r\n              {{ selectedOption.label }}\r\n            </span>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #normalSelected>\r\n          <span>{{ selectedOption.label }}</span>\r\n        </ng-template>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template let-target pTemplate=\"item\">\r\n      <div pTooltip=\"{{target.label}}\" tooltipPosition=\"top\" tooltipStyleClass=\"custom-tooltip\">\r\n\r\n        <ng-container *ngIf=\"isStatusCombo && statusMetadata; else normalOption\">\r\n          <ng-container *ngIf=\"getStatusOption(target.label) as opt\">\r\n            <span\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                {{target.label}}\r\n            </span>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #normalOption>\r\n          <span>{{target.label}}</span>\r\n        </ng-template>\r\n      </div>\r\n    </ng-template>\r\n\r\n  </p-dropdown>\r\n\r\n  <!-- Bubble Info -->\r\n  <Tsi-Bubble-Info [infoText]=\"infoText\"></Tsi-Bubble-Info>\r\n\r\n</div>\r\n\r\n<ng-template #multiSelect>\r\n  <p-multiSelect\r\n    #multiSelectElement\r\n    [options]=\"grouppedDataSource\"\r\n    [group]=\"true\" \r\n    [ngModel]=\"bind\"\r\n    [optionLabel]=\"'label'\"\r\n    [optionValue]=\"'id'\"\r\n    [loading]=\"!dataLoaded\"\r\n    [filterBy]=\"'label'\"\r\n    [filter]=\"true\"\r\n    [required]=\"isRequired\"\r\n    [showClear]=\"showClear\"\r\n    [disabled]=\"disabled\"\r\n    [selectedItemsLabel]=\"'shared_component_multiselect_selected_items_count' | localize\"\r\n    [maxSelectedLabels]=\"maxSelectedLabels\"\r\n    [showToggleAll]=\"false\"\r\n    [style]=\"{'max-width': maxWidth, 'width':'100%', 'height': '1.7rem'}\"\r\n    [placeholder]=\"placeHolder\"\r\n    [ngClass]=\"isAr ? 'p-dropdown-clear-iconAR': 'p-dropdown-clear-iconFR'\"\r\n    class=\"{{myStyleClass}}\" \r\n    styleClass=\"{{myStyleClass}} border-radius-7 {{validationStatusCssClass}}\"\r\n    panelStyleClass=\"tsi-multiselect-panel\"\r\n    appendTo=\"body\"\r\n    (ngModelChange)=\"onMultiSelectModelChange($event)\"\r\n    (onPanelShow)=\"onOpen()\"\r\n    (onFilter)=\"searchValueChanged($event)\"\r\n    (onClick)=\"onSearchComboClick($event)\"\r\n    [pTooltip]=\"multiSelectElement?.selectedOptions?.length ? multiSelectTooltipContent : undefined\" tooltipPosition=\"bottom\">\r\n\r\n    <ng-template pTemplate=\"item\" let-option>\r\n      <div #labelRef class=\"tsi-multiselect-option-label\" tooltipPosition=\"bottom\" tooltipAppendTo=\"body\" [pTooltip]=\"isTextOverflowing(labelRef) ? option.label : null\">\r\n        {{ option.label }}\r\n      </div>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"header\">\r\n      <div class=\"dropdown-header flex gap-1 p-1\">\r\n        <Tsi-Button *ngIf=\"showSearchButton\" type=\"button\" icon=\"pi pi-search\" tooltipText=\"sharedUi-multiselect-action-search\"\r\n          [tooltipPosition]=\"tooltipPosition.Bottom\" styleClass=\"p-button-primary hover:shadow-6 h-2rem p-button-icon-only\"\r\n          (click)=\"openSearchDialog()\">\r\n        </Tsi-Button>\r\n\r\n        <Tsi-Button *ngIf=\"showAdvancedSearchButton\" type=\"button\" icon=\"pi pi-sort-amount-down\" tooltipText=\"sharedUi-multiselect-action-advancedSearch\"\r\n        [tooltipPosition]=\"tooltipPosition.Bottom\" styleClass=\"p-button-secondary hover:shadow-6 h-2rem p-button-icon-only\"\r\n        (click)=\"openAdvancedSearchComponent()\">\r\n        </Tsi-Button>\r\n      </div>\r\n    </ng-template>\r\n  </p-multiSelect>\r\n\r\n  <ng-template #multiSelectTooltipContent>\r\n    <div class=\"p-2\">\r\n      <!-- If there are selected items -->\r\n      <ng-container *ngIf=\"multiSelectElement?.selectedOptions?.length; else noItems\">\r\n\r\n        <div class=\"font-semibold mb-1\">\r\n          {{ 'shared_component_multiselect_selected_items_title' | localize }}\r\n          ({{ multiSelectElement.selectedOptions.length }})\r\n        </div>\r\n\r\n        <ul class=\"m-0 pl-3\">\r\n          <!-- Show only first 10 items -->\r\n          <li *ngFor=\"let option of getTopSelectedOptions(multiSelectElement)\">\r\n            {{ option.label }}\r\n          </li>\r\n        </ul>\r\n\r\n        <!-- Show message if more than 10 -->\r\n        <div *ngIf=\"multiSelectElement.selectedOptions.length > 10\" class=\"text-sm mt-1 text-gray-500\">\r\n          {{ multiSelectElement.selectedOptions.length - 10 }}\r\n          {{ 'shared_component_multiselect_selected_items_more_message' | localize }}\r\n        </div>\r\n\r\n      </ng-container>\r\n\r\n      <!-- If no items selected -->\r\n      <ng-template #noItems>\r\n        <span class=\"text-sm text-500\">\r\n          {{ 'shared_component_multiselect_selected_items_empty' | localize }}\r\n        </span>\r\n      </ng-template>\r\n\r\n    </div>\r\n  </ng-template>\r\n</ng-template>", styles: [".ng-select .ng-select-container .ng-value-container .ng-input>input{z-index:10!important}::ng-deep .p-icon-wrapper{align-items:center!important;justify-content:center!important}::ng-deep .p-dropdown-clear-icon{position:unset!important;top:unset!important;margin-top:unset!important}::ng-deep .p-dropdown-panel{max-width:30rem!important}::ng-deep .p-dropdown-clear-iconAR svg{left:0!important}::ng-deep .p-dropdown-clear-iconFR svg{right:2.5rem;left:auto}::ng-deep .custom-tooltip{max-width:300px;white-space:normal;word-wrap:break-word}.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;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)}::ng-deep .tsi-component.p-multiselect .p-multiselect-label{padding:.25rem .75rem!important}.p-multiselect-panel .p-multiselect-items .p-multiselect-item{gap:.5rem}.tsi-multiselect-panel{max-width:25rem!important}.tsi-multiselect-panel .tsi-multiselect-option-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i10.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: i11.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "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: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiSearchComboComponent, decorators: [{
             type: Component,
@@ -6735,13 +7098,13 @@ class TsiDatePickerComponent extends TsiInputBase {
     onFocusHandler(event) {
         this.calendarRef.overlayVisible = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiDatePickerComponent, deps: [{ token: i1$1.DatePipe }, { token: DateHelperService }, { token: i2$2.PrimeNGConfig }, { token: LayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiDatePickerComponent, deps: [{ token: i1$1.DatePipe }, { token: DateHelperService }, { token: i2$1.PrimeNGConfig }, { token: LayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiDatePickerComponent, selector: "Tsi-Date-Picker", inputs: { required: "required", showTime: "showTime", showButtonBar: "showButtonBar" }, outputs: { inputFieldChange: "inputFieldChange" }, viewQueries: [{ propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex\">\r\n    <p-calendar #calendarRef\r\n        [dataType]=\"'string'\"\r\n        [appendTo]=\"'body'\"\r\n        [disabled]=\"disabled\"\r\n        [showIcon]=\"true\"\r\n        [showButtonBar]=\"showButtonBar\"\r\n        [dateFormat]=\"datePickerFormat\"\r\n        class=\"{{myStyleClass}}\"\r\n        styleClass=\"{{myStyleClass}} border-radius-7\"\r\n        inputStyleClass=\"{{myStyleClass}} {{validationStatusCssClass}}\"\r\n        [showTime]=\"showTime\"\r\n        [showSeconds]=\"showTime\"\r\n        [(ngModel)]=\"dateString\"\r\n        (onBlur)=\"onFocusOut()\"\r\n        (onSelect)=\"onSelect()\"\r\n        (onFocus)=\"onFocusHandler($event)\"\r\n        (ngModelChange)=\"onModelChange($event)\"\r\n        ></p-calendar>\r\n    <Tsi-Bubble-Info [infoText]=\"infoText\"></Tsi-Bubble-Info>\r\n</div>", styles: [".ColorClass{background-color:#2bff00;text-align:right}.p-datepicker-trigger{border-top-right-radius:7px!important;border-bottom-right-radius:7px!important}\n"], dependencies: [{ 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: 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: TsiBubbleInfoComponent, selector: "Tsi-Bubble-Info", inputs: ["infoText"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'Tsi-Date-Picker', encapsulation: ViewEncapsulation.None, template: "<div class=\"flex\">\r\n    <p-calendar #calendarRef\r\n        [dataType]=\"'string'\"\r\n        [appendTo]=\"'body'\"\r\n        [disabled]=\"disabled\"\r\n        [showIcon]=\"true\"\r\n        [showButtonBar]=\"showButtonBar\"\r\n        [dateFormat]=\"datePickerFormat\"\r\n        class=\"{{myStyleClass}}\"\r\n        styleClass=\"{{myStyleClass}} border-radius-7\"\r\n        inputStyleClass=\"{{myStyleClass}} {{validationStatusCssClass}}\"\r\n        [showTime]=\"showTime\"\r\n        [showSeconds]=\"showTime\"\r\n        [(ngModel)]=\"dateString\"\r\n        (onBlur)=\"onFocusOut()\"\r\n        (onSelect)=\"onSelect()\"\r\n        (onFocus)=\"onFocusHandler($event)\"\r\n        (ngModelChange)=\"onModelChange($event)\"\r\n        ></p-calendar>\r\n    <Tsi-Bubble-Info [infoText]=\"infoText\"></Tsi-Bubble-Info>\r\n</div>", styles: [".ColorClass{background-color:#2bff00;text-align:right}.p-datepicker-trigger{border-top-right-radius:7px!important;border-bottom-right-radius:7px!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DatePipe }, { type: DateHelperService }, { type: i2$2.PrimeNGConfig }, { type: LayoutService }], propDecorators: { calendarRef: [{
+        }], ctorParameters: () => [{ type: i1$1.DatePipe }, { type: DateHelperService }, { type: i2$1.PrimeNGConfig }, { type: LayoutService }], propDecorators: { calendarRef: [{
                 type: ViewChild,
                 args: ['calendarRef']
             }], required: [{
@@ -6952,7 +7315,7 @@ class TsiTextBoxComponent extends TsiInputBase {
         this.inputFieldChange.emit(this.inputField);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTextBoxComponent, deps: [{ token: LocalizePipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiTextBoxComponent, selector: "Tsi-Text-Box", inputs: { textBoxType: "textBoxType", autocomplete: "autocomplete" }, outputs: { newItemEvent: "newItemEvent", inputFieldChange: "inputFieldChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex h-2rem flex-row gap-2 align-items-center\">\r\n        <input autoSelect class=\"{{myStyleClass}} border-radius-7 {{validationStatusCssClass}}\" pInputText\r\n                pTooltip=\"{{ isRequired ? requiredMessage + ' - ' : '' }}{{ maxLength ? maxLength + ' ' + maxLengthMessage : '' }}\" tooltipPosition=\"top\"\r\n                [type]=\"textBoxType\" name=\"{{inputName}}\" id=\"{{inputName}}\" [ngModel]=\"inputField\"\r\n                [required]=\"isRequired\" autocomplete=\"{{autocomplete}}\" [disabled]=\"disabled\"\r\n                (ngModelChange)=\"onChangeofOptions($event)\" placeholder=\"{{placeHolder}}\"/>\r\n\r\n        <span *ngIf=\"isInputNameNotFound\" (click)=\"op.toggle($event)\"\r\n                class=\"pi pi-exclamation-circle text-red-500 cursor-pointer tsi-input-alert-container\"> </span>\r\n\r\n        <p-overlayPanel #op>\r\n                <ng-template pTemplate>\r\n                        <div class=\"d-flex flex-row gap-2\">\r\n                                <span> Input name : </span>\r\n                                <span class=\"text-red-500\"> {{inputName}} </span>\r\n                        </div>\r\n                </ng-template>\r\n        </p-overlayPanel>\r\n        <!--<input class=\"{{myStyleClass}} border-radius-7\" styleClass=\"border-radius-7\" pInputText type=\"text\"\r\n                name=\"{{inputName}}\" id=\"{{inputName}}\" [(ngModel)]=\"inputField\" [required]=\"required\"\r\n                [disabled]=\"disabled\" (ngModelChange)=\"onChangeofOptions($event)\" [formControl]=\"myFormControl\" />-->\r\n        <Tsi-Bubble-Info [infoText]=\"infoText\"></Tsi-Bubble-Info>\r\n</div>\r\n\r\n<div *ngIf=\"myFormControl.invalid && (myFormControl.dirty || myFormControl.touched)\">\r\n        <div *ngIf=\"myFormControl.errors && myFormControl.errors['required']\" [ngClass]=\"{'error-message': true}\">\r\n                This field is required.\r\n        </div>\r\n        <div *ngIf=\"myFormControl.errors && myFormControl.errors['maxlength']\" [ngClass]=\"{'error-message': true}\">\r\n                Maximum length exceeded.\r\n        </div>\r\n</div>", styles: [".ColorClass{background-color:#ff0}.error-message{color:red}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: 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: TsiBubbleInfoComponent, selector: "Tsi-Bubble-Info", inputs: ["infoText"] }, { kind: "directive", type: AutoSelectDirective, selector: "[autoSelect]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiTextBoxComponent, selector: "Tsi-Text-Box", inputs: { textBoxType: "textBoxType", autocomplete: "autocomplete" }, outputs: { newItemEvent: "newItemEvent", inputFieldChange: "inputFieldChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex h-2rem flex-row gap-2 align-items-center\">\r\n        <input autoSelect class=\"{{myStyleClass}} border-radius-7 {{validationStatusCssClass}}\" pInputText\r\n                pTooltip=\"{{ isRequired ? requiredMessage + ' - ' : '' }}{{ maxLength ? maxLength + ' ' + maxLengthMessage : '' }}\" tooltipPosition=\"top\"\r\n                [type]=\"textBoxType\" name=\"{{inputName}}\" id=\"{{inputName}}\" [ngModel]=\"inputField\"\r\n                [required]=\"isRequired\" autocomplete=\"{{autocomplete}}\" [disabled]=\"disabled\"\r\n                (ngModelChange)=\"onChangeofOptions($event)\" placeholder=\"{{placeHolder}}\"/>\r\n\r\n        <span *ngIf=\"isInputNameNotFound\" (click)=\"op.toggle($event)\"\r\n                class=\"pi pi-exclamation-circle text-red-500 cursor-pointer tsi-input-alert-container\"> </span>\r\n\r\n        <p-overlayPanel #op>\r\n                <ng-template pTemplate>\r\n                        <div class=\"d-flex flex-row gap-2\">\r\n                                <span> Input name : </span>\r\n                                <span class=\"text-red-500\"> {{inputName}} </span>\r\n                        </div>\r\n                </ng-template>\r\n        </p-overlayPanel>\r\n        <!--<input class=\"{{myStyleClass}} border-radius-7\" styleClass=\"border-radius-7\" pInputText type=\"text\"\r\n                name=\"{{inputName}}\" id=\"{{inputName}}\" [(ngModel)]=\"inputField\" [required]=\"required\"\r\n                [disabled]=\"disabled\" (ngModelChange)=\"onChangeofOptions($event)\" [formControl]=\"myFormControl\" />-->\r\n        <Tsi-Bubble-Info [infoText]=\"infoText\"></Tsi-Bubble-Info>\r\n</div>\r\n\r\n<div *ngIf=\"myFormControl.invalid && (myFormControl.dirty || myFormControl.touched)\">\r\n        <div *ngIf=\"myFormControl.errors && myFormControl.errors['required']\" [ngClass]=\"{'error-message': true}\">\r\n                This field is required.\r\n        </div>\r\n        <div *ngIf=\"myFormControl.errors && myFormControl.errors['maxlength']\" [ngClass]=\"{'error-message': true}\">\r\n                Maximum length exceeded.\r\n        </div>\r\n</div>", styles: [".ColorClass{background-color:#ff0}.error-message{color:red}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: 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: TsiBubbleInfoComponent, selector: "Tsi-Bubble-Info", inputs: ["infoText"] }, { kind: "directive", type: AutoSelectDirective, selector: "[autoSelect]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTextBoxComponent, decorators: [{
             type: Component,
@@ -8028,13 +8391,13 @@ class EditableGridComponent extends TsiInputBase {
     _getShadowSearchColumnLabel(column) {
         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$2.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\"\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                  [numOfDecimal]=\"col.numOfDecimal\" [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)\" [numOfDecimal]=\"col.numOfDecimal\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\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.currencyCode\" [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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: 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$2.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: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i11.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "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: ["numOfDecimal", "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: ["inputData", "currency"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDateDisplayComponent, selector: "Tsi-Date-Display", inputs: ["inputData", "showTime"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: 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]", inputs: ["presentationDesigner", "presentationDesignerBase"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    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\"\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                  [numOfDecimal]=\"col.numOfDecimal\" [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)\" [numOfDecimal]=\"col.numOfDecimal\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\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.currencyCode\" [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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: 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: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i11.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "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: ["numOfDecimal", "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: ["inputData", "currency"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDateDisplayComponent, selector: "Tsi-Date-Display", inputs: ["inputData", "showTime"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: 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\"\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                  [numOfDecimal]=\"col.numOfDecimal\" [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)\" [numOfDecimal]=\"col.numOfDecimal\"\r\n                      [validationStatusCssClass]=\"col.validationStatusCssClass\">\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.currencyCode\" [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$2.FilterService }], propDecorators: { editableTable: [{
+        }], ctorParameters: () => [{ type: LocalizePipe }, { type: i2$1.FilterService }], propDecorators: { editableTable: [{
                 type: ViewChild,
                 args: ["editableTable"]
             }], selectedItems: [{
@@ -8562,7 +8925,7 @@ class TsiSearchBoxComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiSearchBoxComponent, deps: [{ token: EntityStatusService }, { token: WorkflowConfigurationService }, { token: LocalizePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiSearchBoxComponent, selector: "tsi-search-box", inputs: { searchFields: "searchFields", businessClass: "businessClass", descriminatorValue: "descriminatorValue", isRtlMode: "isRtlMode", isSearchButtonDisabled: "isSearchButtonDisabled", entityInfo: "entityInfo", statusMetadata: "statusMetadata" }, outputs: { searchFieldsChange: "searchFieldsChange", searchFieldsApplied: "searchFieldsApplied", keywordValueChanged: "keywordValueChanged", statusFilterChanged: "statusFilterChanged", workflowEtatFilterChanged: "workflowEtatFilterChanged", comboBoxLabelChanged: "comboBoxLabelChanged" }, host: { listeners: { "window:keydown": "handleKeyDown($event)" } }, ngImport: i0, template: "<div class=\"card\">\r\n  <div class=\"grid p-2\" [ngClass]=\"{'p-3': isRtlMode}\">\r\n\r\n    <div *ngFor=\"let searchField of searchFields\" class=\"{{searchField.styleClass}} grid no-pad\"\r\n    presentationDesignerBase=\"{{searchField.field}}\">\r\n      <!-- Not MaxMin === Single Filter Input -->\r\n      <!-- Fake element to escape bizarre input format -->\r\n      <div *ngIf=\"fakeAlwaysFalseCondition; else searchComboBlock\">\r\n      </div>\r\n      <!-- Tsi-Search-Combo -->\r\n      <ng-template #searchComboBlock>\r\n        <ng-container *ngIf=\"searchField.type == inputTypes.SEARCH_COMBO; else currencySocieteInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}} pr-1\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Search-Combo class=\"{{searchField.inputStyleClass}}\" [elementSourceUrl]=\"searchField.elementSourceUrl\"\r\n              [listSourceUrl]=\"searchField.listSourceUrl\" [(bind)]=\"searchField.value\"\r\n              id-field=\"{{searchField.idField}}\" label-field=\"{{searchField.labelField}}\"\r\n              [isFiltered]=\"searchField.isFiltered\" (bindChange)=\"onSearchFieldValueChange(searchField)\"\r\n              [disabled]=\"searchField.disabled ?? false\" [(selectedLabel)]=\"searchField.comboboxLabel\"\r\n              (selectedLabelChange)=\"getComboLabel(searchField,$event)\"\r\n              [businessClass]=\"searchField.businessClass ?? ''\" [showAddButton]=\"searchField.showAddButton ?? true\" [showUpdateButton]=\"searchField.showUpdateButton ?? undefined\" [showConsultButton]=\"searchField.showConsultButton ?? undefined\"\r\n              [showSearchButton]=\"searchField.showSearchButton ?? true\"\r\n              [multiple]=\"searchField.multiple ?? false\"></Tsi-Search-Combo>\r\n        </ng-container>\r\n\r\n      </ng-template>\r\n\r\n      <!-- Tsi-Currency-Societe-Input -->\r\n      <ng-template #currencySocieteInputBlock>\r\n        <ng-container *ngIf=\"searchField.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Currency-Societe-Input class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              (inputFieldChange)=\"onSearchFieldValueChange(searchField)\" [disabled]=\"searchField.disabled ?? false\">\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=\"searchField.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Currency-Other-Input class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              (inputFieldChange)=\"onSearchFieldValueChange(searchField)\" [disabled]=\"searchField.disabled ?? false\"\r\n              [currency]=\"searchField.currency\">\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=\"searchField.type == inputTypes.DATE; else datetimePickerInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Date-Picker class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              [disabled]=\"searchField.disabled ?? false\" (inputFieldChange)=\"onSearchFieldValueChange(searchField)\">\r\n            </Tsi-Date-Picker>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      <!-- Tsi-Date-Picker -->\r\n      <ng-template #datetimePickerInputBlock>\r\n        <ng-container *ngIf=\"searchField.type == inputTypes.DATETIME; else checkBoxInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Date-Picker class=\"{{searchField.inputStyleClass}}\" [showTime]=\"true\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              [disabled]=\"searchField.disabled ?? false\" (inputFieldChange)=\"onSearchFieldValueChange(searchField)\">\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=\"searchField.type == inputTypes.CHECKBOX; else decimalInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-CheckBox class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              [disabled]=\"searchField.disabled ?? false\" (inputFieldChange)=\"onSearchFieldValueChange(searchField)\"\r\n              [isBinary]=\"searchField.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=\"searchField.type == inputTypes.DECIMAL_INPUT; else integerInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Decimal-Input class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              (inputFieldChange)=\"onSearchFieldValueChange(searchField)\" [disabled]=\"searchField.disabled ?? false\"\r\n              [numOfDecimal]=\"searchField.numOfDecimal\">\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=\"searchField.type == inputTypes.INTEGER; else rateInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <div class=\"{{searchField?.inputStyleClass}}\">\r\n              <Tsi-Integer [inputName]=\"searchField.field\" [inputId]=\"searchField.field\"\r\n                [(inputField)]=\"searchField.value\" (inputFieldChange)=\"onSearchFieldValueChange(searchField)\"\r\n                [disabled]=\"searchField.disabled ?? false\">\r\n              </Tsi-Integer>\r\n            </div>\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=\"searchField.type == inputTypes.RATE_INPUT; else radioInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Rate-Input class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              (inputFieldChange)=\"onSearchFieldValueChange(searchField)\" [isFraction]=\"searchField.isFraction\"\r\n              [disabled]=\"searchField.disabled ?? false\">\r\n            </Tsi-Rate-Input>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      <ng-template #radioInputBlock>\r\n        <ng-container *ngIf=\"searchField.type == inputTypes.RADIO_BUTTON; else defaultTextInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Radio-Button class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [(inputField)]=\"searchField.value\"\r\n              (inputFieldChange)=\"onSearchFieldValueChange(searchField)\"\r\n              [disabled]=\"searchField.disabled ?? false\"\r\n              [dataSource]=\"searchField.radioButtonDatasource\"\r\n              [layoutOrientation]=\"searchField.layoutOrientation ?? layoutOrientationRef.vertical\">\r\n            </Tsi-Radio-Button>\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-Label class=\"{{searchField.labelStyleClass}} pr-1\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Text-Box class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              (inputFieldChange)=\"onSearchFieldValueChange(searchField)\" [disabled]=\"searchField.disabled ?? false\">\r\n            </Tsi-Text-Box>\r\n        </ng-container>\r\n      </ng-template>\r\n      <!--  -->\r\n    </div>\r\n    <div class=\"w-full flex px-2\">\r\n      <div [ngClass]=\"isRtlMode ? 'rtl-mode' : 'ltr-mode' \" class=\"p-inputgroup rtl-mode h-2rem no-pad\">\r\n        <div presentationDesignerBase=\"global_search\" class=\"p-inputgroup rtl-mode h-2rem no-pad\">\r\n          <input class=\"\" type=\"text\" [(ngModel)]=\"keyword\" pInputText [placeholder]=\"'global_search' | localize\">\r\n\r\n          <!-- Workflow etat filter -->\r\n            <div *ngIf=\"businessClass && workflowEtatList && workflowEtatList.length > 0\" id=\"workflow-etat-filter\"\r\n                  class=\"flex align-items-center gap-2\" [presentationDesignerBase]=\"'WorkflowEtat'\">\r\n              <Tsi-Search-Combo \r\n                [placeHolder]=\"'Workflow Etat'\" \r\n                [id-field]=\"'key'\" \r\n                [label-field]=\"'value'\" \r\n                [isFiltered]=\"false\"\r\n                (bindChange)=\"onWorkflowEtatFilterChange($event)\"\r\n                [datasource]=\"workflowEtatList\"\r\n                [maxWidth]=\"'10'\">\r\n              </Tsi-Search-Combo>\r\n            </div>\r\n\r\n            <div *ngIf=\"businessClass && entityStatusList && entityStatusList.length > 0\" id=\"status-filter\"\r\n                  class=\"flex align-items-center gap-2\" [presentationDesignerBase]=\"entityInfo?.statusColumnName\">\r\n              <Tsi-Search-Combo \r\n                [placeHolder]=\"'Statut'\" \r\n                [id-field]=\"'key'\" \r\n                [label-field]=\"'value'\" \r\n                (bindChange)=\"onStatusChange($event)\"\r\n                [comboType]=\"'status'\"\r\n                [statusMetadata]=\"statusMetadata\"\r\n                [datasource]=\"entityStatusList\" >\r\n              </Tsi-Search-Combo>\r\n            </div>\r\n        </div>\r\n        <div presentationDesignerBase=\"search_button\">\r\n          <Tsi-Button styleClass=\"p-element ng-tns-c79583503-1221 p-button p-component p-button-icon-only\" type=\"button\"\r\n            [disabled]=\"isSearchButtonDisabled\" icon=\"pi pi-search\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n            tooltipText=\"shared_tsi_search_box_rechercher\" (click)=\"onSearch()\"></Tsi-Button>\r\n        </div>\r\n\r\n        <div class=\"flex justify-content-center align-items-center px-2\">\r\n          <i class=\"pi pi-info-circle\" [pTooltip]=\"tooltipText ? globalSearchTooltipContent : undefined\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n            tooltipStyleClass=\"custom-tooltip\"></i>\r\n\r\n          <ng-template #globalSearchTooltipContent>\r\n            <div class=\"tooltip-content\">\r\n              <span>{{ tooltipText }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".no-pad{padding:0 0 0 5px!important}.pt-5{padding-top:5px}:host ::ng-deep #status-filter Tsi-Search-Combo p-dropdown .p-dropdown{width:140px!important;height:28px!important;border-left:none!important;border-radius:0!important}:host ::ng-deep #workflow-etat-filter Tsi-Search-Combo p-dropdown .p-dropdown{width:140px!important;height:28px!important;border-left:none!important;border-radius:0!important}.custom-tooltip{max-width:450px;white-space:pre-line;overflow-x:auto;overflow-y:hidden;line-height:1.4;font-size:13px;padding:.5rem}.tooltip-content{display:inline-block;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "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: ["numOfDecimal", "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: TsiRadioButtonComponent, selector: "Tsi-Radio-Button", inputs: ["dataSource", "class", "layoutOrientation"], outputs: ["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: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "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: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]", inputs: ["presentationDesigner", "presentationDesignerBase"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiSearchBoxComponent, selector: "tsi-search-box", inputs: { searchFields: "searchFields", businessClass: "businessClass", descriminatorValue: "descriminatorValue", isRtlMode: "isRtlMode", isSearchButtonDisabled: "isSearchButtonDisabled", entityInfo: "entityInfo", statusMetadata: "statusMetadata" }, outputs: { searchFieldsChange: "searchFieldsChange", searchFieldsApplied: "searchFieldsApplied", keywordValueChanged: "keywordValueChanged", statusFilterChanged: "statusFilterChanged", workflowEtatFilterChanged: "workflowEtatFilterChanged", comboBoxLabelChanged: "comboBoxLabelChanged" }, host: { listeners: { "window:keydown": "handleKeyDown($event)" } }, ngImport: i0, template: "<div class=\"card\">\r\n  <div class=\"grid p-2\" [ngClass]=\"{'p-3': isRtlMode}\">\r\n\r\n    <div *ngFor=\"let searchField of searchFields\" class=\"{{searchField.styleClass}} grid no-pad\"\r\n    presentationDesignerBase=\"{{searchField.field}}\">\r\n      <!-- Not MaxMin === Single Filter Input -->\r\n      <!-- Fake element to escape bizarre input format -->\r\n      <div *ngIf=\"fakeAlwaysFalseCondition; else searchComboBlock\">\r\n      </div>\r\n      <!-- Tsi-Search-Combo -->\r\n      <ng-template #searchComboBlock>\r\n        <ng-container *ngIf=\"searchField.type == inputTypes.SEARCH_COMBO; else currencySocieteInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}} pr-1\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Search-Combo class=\"{{searchField.inputStyleClass}}\" [elementSourceUrl]=\"searchField.elementSourceUrl\"\r\n              [listSourceUrl]=\"searchField.listSourceUrl\" [(bind)]=\"searchField.value\"\r\n              id-field=\"{{searchField.idField}}\" label-field=\"{{searchField.labelField}}\"\r\n              [isFiltered]=\"searchField.isFiltered\" (bindChange)=\"onSearchFieldValueChange(searchField)\"\r\n              [disabled]=\"searchField.disabled ?? false\" [(selectedLabel)]=\"searchField.comboboxLabel\"\r\n              (selectedLabelChange)=\"getComboLabel(searchField,$event)\"\r\n              [businessClass]=\"searchField.businessClass ?? ''\" [showAddButton]=\"searchField.showAddButton ?? true\" [showUpdateButton]=\"searchField.showUpdateButton ?? undefined\" [showConsultButton]=\"searchField.showConsultButton ?? undefined\"\r\n              [showSearchButton]=\"searchField.showSearchButton ?? true\"\r\n              [multiple]=\"searchField.multiple ?? false\"></Tsi-Search-Combo>\r\n        </ng-container>\r\n\r\n      </ng-template>\r\n\r\n      <!-- Tsi-Currency-Societe-Input -->\r\n      <ng-template #currencySocieteInputBlock>\r\n        <ng-container *ngIf=\"searchField.type == inputTypes.CURRENCY_SOCIETE_INPUT; else currencyOtherInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Currency-Societe-Input class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              (inputFieldChange)=\"onSearchFieldValueChange(searchField)\" [disabled]=\"searchField.disabled ?? false\">\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=\"searchField.type == inputTypes.CURRENCY_OTHER_INPUT; else datePickerInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Currency-Other-Input class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              (inputFieldChange)=\"onSearchFieldValueChange(searchField)\" [disabled]=\"searchField.disabled ?? false\"\r\n              [currency]=\"searchField.currency\">\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=\"searchField.type == inputTypes.DATE; else datetimePickerInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Date-Picker class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              [disabled]=\"searchField.disabled ?? false\" (inputFieldChange)=\"onSearchFieldValueChange(searchField)\">\r\n            </Tsi-Date-Picker>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      <!-- Tsi-Date-Picker -->\r\n      <ng-template #datetimePickerInputBlock>\r\n        <ng-container *ngIf=\"searchField.type == inputTypes.DATETIME; else checkBoxInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Date-Picker class=\"{{searchField.inputStyleClass}}\" [showTime]=\"true\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              [disabled]=\"searchField.disabled ?? false\" (inputFieldChange)=\"onSearchFieldValueChange(searchField)\">\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=\"searchField.type == inputTypes.CHECKBOX; else decimalInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-CheckBox class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              [disabled]=\"searchField.disabled ?? false\" (inputFieldChange)=\"onSearchFieldValueChange(searchField)\"\r\n              [isBinary]=\"searchField.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=\"searchField.type == inputTypes.DECIMAL_INPUT; else integerInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Decimal-Input class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              (inputFieldChange)=\"onSearchFieldValueChange(searchField)\" [disabled]=\"searchField.disabled ?? false\"\r\n              [numOfDecimal]=\"searchField.numOfDecimal\">\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=\"searchField.type == inputTypes.INTEGER; else rateInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <div class=\"{{searchField?.inputStyleClass}}\">\r\n              <Tsi-Integer [inputName]=\"searchField.field\" [inputId]=\"searchField.field\"\r\n                [(inputField)]=\"searchField.value\" (inputFieldChange)=\"onSearchFieldValueChange(searchField)\"\r\n                [disabled]=\"searchField.disabled ?? false\">\r\n              </Tsi-Integer>\r\n            </div>\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=\"searchField.type == inputTypes.RATE_INPUT; else radioInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Rate-Input class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              (inputFieldChange)=\"onSearchFieldValueChange(searchField)\" [isFraction]=\"searchField.isFraction\"\r\n              [disabled]=\"searchField.disabled ?? false\">\r\n            </Tsi-Rate-Input>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      <ng-template #radioInputBlock>\r\n        <ng-container *ngIf=\"searchField.type == inputTypes.RADIO_BUTTON; else defaultTextInputBlock\">\r\n            <Tsi-Label class=\"{{searchField.labelStyleClass}}\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Radio-Button class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [(inputField)]=\"searchField.value\"\r\n              (inputFieldChange)=\"onSearchFieldValueChange(searchField)\"\r\n              [disabled]=\"searchField.disabled ?? false\"\r\n              [dataSource]=\"searchField.radioButtonDatasource\"\r\n              [layoutOrientation]=\"searchField.layoutOrientation ?? layoutOrientationRef.vertical\">\r\n            </Tsi-Radio-Button>\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-Label class=\"{{searchField.labelStyleClass}} pr-1\"\r\n              [labelValue]=\"searchField.labelValue | localize\"></Tsi-Label>\r\n            <Tsi-Text-Box class=\"{{searchField.inputStyleClass}}\" [inputName]=\"searchField.field\"\r\n              [inputId]=\"searchField.field\" [(inputField)]=\"searchField.value\"\r\n              (inputFieldChange)=\"onSearchFieldValueChange(searchField)\" [disabled]=\"searchField.disabled ?? false\">\r\n            </Tsi-Text-Box>\r\n        </ng-container>\r\n      </ng-template>\r\n      <!--  -->\r\n    </div>\r\n    <div class=\"w-full flex px-2\">\r\n      <div [ngClass]=\"isRtlMode ? 'rtl-mode' : 'ltr-mode' \" class=\"p-inputgroup rtl-mode h-2rem no-pad\">\r\n        <div presentationDesignerBase=\"global_search\" class=\"p-inputgroup rtl-mode h-2rem no-pad\">\r\n          <input class=\"\" type=\"text\" [(ngModel)]=\"keyword\" pInputText [placeholder]=\"'global_search' | localize\">\r\n\r\n          <!-- Workflow etat filter -->\r\n            <div *ngIf=\"businessClass && workflowEtatList && workflowEtatList.length > 0\" id=\"workflow-etat-filter\"\r\n                  class=\"flex align-items-center gap-2\" [presentationDesignerBase]=\"'WorkflowEtat'\">\r\n              <Tsi-Search-Combo \r\n                [placeHolder]=\"'Workflow Etat'\" \r\n                [id-field]=\"'key'\" \r\n                [label-field]=\"'value'\" \r\n                [isFiltered]=\"false\"\r\n                (bindChange)=\"onWorkflowEtatFilterChange($event)\"\r\n                [datasource]=\"workflowEtatList\"\r\n                [maxWidth]=\"'10'\">\r\n              </Tsi-Search-Combo>\r\n            </div>\r\n\r\n            <div *ngIf=\"businessClass && entityStatusList && entityStatusList.length > 0\" id=\"status-filter\"\r\n                  class=\"flex align-items-center gap-2\" [presentationDesignerBase]=\"entityInfo?.statusColumnName\">\r\n              <Tsi-Search-Combo \r\n                [placeHolder]=\"'Statut'\" \r\n                [id-field]=\"'key'\" \r\n                [label-field]=\"'value'\" \r\n                (bindChange)=\"onStatusChange($event)\"\r\n                [comboType]=\"'status'\"\r\n                [statusMetadata]=\"statusMetadata\"\r\n                [datasource]=\"entityStatusList\" >\r\n              </Tsi-Search-Combo>\r\n            </div>\r\n        </div>\r\n        <div presentationDesignerBase=\"search_button\">\r\n          <Tsi-Button styleClass=\"p-element ng-tns-c79583503-1221 p-button p-component p-button-icon-only\" type=\"button\"\r\n            [disabled]=\"isSearchButtonDisabled\" icon=\"pi pi-search\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n            tooltipText=\"shared_tsi_search_box_rechercher\" (click)=\"onSearch()\"></Tsi-Button>\r\n        </div>\r\n\r\n        <div class=\"flex justify-content-center align-items-center px-2\">\r\n          <i class=\"pi pi-info-circle\" [pTooltip]=\"tooltipText ? globalSearchTooltipContent : undefined\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n            tooltipStyleClass=\"custom-tooltip\"></i>\r\n\r\n          <ng-template #globalSearchTooltipContent>\r\n            <div class=\"tooltip-content\">\r\n              <span>{{ tooltipText }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".no-pad{padding:0 0 0 5px!important}.pt-5{padding-top:5px}:host ::ng-deep #status-filter Tsi-Search-Combo p-dropdown .p-dropdown{width:140px!important;height:28px!important;border-left:none!important;border-radius:0!important}:host ::ng-deep #workflow-etat-filter Tsi-Search-Combo p-dropdown .p-dropdown{width:140px!important;height:28px!important;border-left:none!important;border-radius:0!important}.custom-tooltip{max-width:450px;white-space:pre-line;overflow-x:auto;overflow-y:hidden;line-height:1.4;font-size:13px;padding:.5rem}.tooltip-content{display:inline-block;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "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: ["numOfDecimal", "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: TsiRadioButtonComponent, selector: "Tsi-Radio-Button", inputs: ["dataSource", "class", "layoutOrientation"], outputs: ["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: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "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: "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: TsiSearchBoxComponent, decorators: [{
             type: Component,
@@ -8744,7 +9107,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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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$2.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiCardComponent, decorators: [{
             type: Component,
@@ -9282,7 +9645,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 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiKanbanComponent, selector: "Tsi-kanban", inputs: { cardBusinessClass: "cardBusinessClass", header: "header", id: "id", page$: "page$", crudService: "crudService", overflowActionsMenu: "overflowActionsMenu", selectKeyOnly: "selectKeyOnly", key: "key", page: "page" }, outputs: { buttonClicked: "buttonClicked", callSearch: "callSearch" }, usesInheritance: true, ngImport: i0, template: "<div class=\"card flex justify-content-center\">\r\n  <p-paginator [first]=\"first\" [rows]=\"rows\" [totalRecords]=\"totalCount\" [rowsPerPageOptions]=\"[1, 10, 25, 50]\"\r\n    (onPageChange)=\"onPageChange($event)\" [showCurrentPageReport]=\"true\"\r\n    currentPageReportTemplate=\"{{ 'Showing' | localize }} {first} {{'to' | localize}} {last} {{ 'of' | localize }} {totalRecords}\">\r\n  </p-paginator>\r\n</div>\r\n\r\n<div class=\"kanban-board flex gap-4 overflow-auto\">\r\n  <div *ngFor=\"let status of localizedStatusLabels; trackBy: trackByStatus\"\r\n    class=\"kanban-column flex flex-column border-round surface-0 shadow-2\" (dragover)=\"allowDrop($event)\"\r\n    (drop)=\"drop($event, status.key)\">\r\n\r\n    <div class=\"column-header p-3 border-bottom-1 surface-border font-semibold\">\r\n      {{ status.localized }}\r\n      <span class=\"text-sm font-normal text-gray-500\">\r\n        ({{ cardMapByStatus.get(status.key)?.length || 0 }})\r\n      </span>\r\n    </div>\r\n\r\n    <div class=\"column-cards flex-1 overflow-auto p-3\">\r\n      <div *ngFor=\"let card of cardMapByStatus.get(status.key); trackBy: trackByCard\"\r\n        class=\"kanban-card p-3 border-round bg-white mb-3 shadow-1\"\r\n        [ngClass]=\"getStatusClass(card)\"\r\n        draggable=\"true\"\r\n        (dragstart)=\"dragStart($event, card)\" \r\n        (dragend)=\"dragEnd()\">\r\n\r\n        <div class=\"font-bold mb-2\">{{ card.headerTitle }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">{{ card.subHeaderTitle }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">{{ card.description }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">\r\n          <span class=\"font-semibold\">{{ 'gesc_document_statut' | localize }}:</span>\r\n          <span>{{ getLocalizedStatus(card.status) }}</span>\r\n        </div>\r\n        <p-menu appendTo=\"body\" #menuMoreActions \r\n             [model]=\"overflowActionsMenu\" \r\n             [popup]=\"true\" styleClass=\"overflow-menu\"\r\n             [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n          <ng-template pTemplate=\"item\" let-menuItem>\r\n            <a pRipple class=\"flex align-items-center p-menuitem-link\" \r\n              [ngClass]=\"menuItem.styleClass\"\r\n              (click)=\"onOverflowActionClicked(card, menuItem)\">\r\n              <i *ngIf=\"menuItem.id === 'notes'\" class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                [ngClass]=\"menuItem.iconStyleClass\" pBadge severity=\"danger\" \r\n                [value]=\"card.fullRecord.notesCount\"\r\n                [badgeDisabled]=\"card.fullRecord.notesCount == null\" badgePosition=\"top-right\">\r\n              </i>\r\n\r\n              <i *ngIf=\"menuItem.id !== 'notes'\" class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                [ngClass]=\"menuItem.iconStyleClass\">\r\n              </i>\r\n\r\n              <span class=\"menu-label\">\r\n                {{ menuItem.label | localize }}\r\n              </span>\r\n            </a>\r\n          </ng-template>\r\n        </p-menu>\r\n\r\n        <div class=\"flex justify-content-end align-items-center mt-1 gap-2 p-0\">\r\n          <Tsi-Button [styleClass]=\"'p-button-rounded p-button-text p-0-5'\" type=\"button\" icon=\"pi pi-pencil\"\r\n            (click)=\"edit(card.uid)\">\r\n          </Tsi-Button>\r\n          <p-button type=\"button\" icon=\"pi pi-ellipsis-v\" styleClass=\"overflow-btn\"\r\n            (onClick)=\"overflowColumnClicked(menuMoreActions, $event, card)\">\r\n          </p-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"overlay\" *ngIf=\"isLoading\">\r\n      <div class=\"spinner-wrapper\">\r\n        <app-spinner></app-spinner>\r\n      </div>\r\n    </div>", styles: [":host{display:block;padding:1rem}[draggable=true]{-webkit-user-select:none;user-select:none}.kanban-board{height:calc(100vh - 100px);padding:1rem}.kanban-column{width:300px;max-height:100%;display:flex;flex-direction:column;background-color:#f8f9fa}.column-header{font-size:1rem;font-weight:700;background-color:#fff;border-radius:6px 6px 0 0}.column-cards{overflow-y:auto;flex:1}.kanban-card{border-left:4px solid;cursor:move;transition:border-color .3s ease}.status-0{border-left-color:#7269ef}.status-1{border-left-color:#00c853}.status-2{border-left-color:#ffab00}.status-3{border-left-color:#d50000}[class*=status-]{border-left-style:solid;border-left-width:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i2$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i6$3.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiKanbanComponent, selector: "Tsi-kanban", inputs: { cardBusinessClass: "cardBusinessClass", header: "header", id: "id", page$: "page$", crudService: "crudService", overflowActionsMenu: "overflowActionsMenu", selectKeyOnly: "selectKeyOnly", key: "key", page: "page" }, outputs: { buttonClicked: "buttonClicked", callSearch: "callSearch" }, usesInheritance: true, ngImport: i0, template: "<div class=\"card flex justify-content-center\">\r\n  <p-paginator [first]=\"first\" [rows]=\"rows\" [totalRecords]=\"totalCount\" [rowsPerPageOptions]=\"[1, 10, 25, 50]\"\r\n    (onPageChange)=\"onPageChange($event)\" [showCurrentPageReport]=\"true\"\r\n    currentPageReportTemplate=\"{{ 'Showing' | localize }} {first} {{'to' | localize}} {last} {{ 'of' | localize }} {totalRecords}\">\r\n  </p-paginator>\r\n</div>\r\n\r\n<div class=\"kanban-board flex gap-4 overflow-auto\">\r\n  <div *ngFor=\"let status of localizedStatusLabels; trackBy: trackByStatus\"\r\n    class=\"kanban-column flex flex-column border-round surface-0 shadow-2\" (dragover)=\"allowDrop($event)\"\r\n    (drop)=\"drop($event, status.key)\">\r\n\r\n    <div class=\"column-header p-3 border-bottom-1 surface-border font-semibold\">\r\n      {{ status.localized }}\r\n      <span class=\"text-sm font-normal text-gray-500\">\r\n        ({{ cardMapByStatus.get(status.key)?.length || 0 }})\r\n      </span>\r\n    </div>\r\n\r\n    <div class=\"column-cards flex-1 overflow-auto p-3\">\r\n      <div *ngFor=\"let card of cardMapByStatus.get(status.key); trackBy: trackByCard\"\r\n        class=\"kanban-card p-3 border-round bg-white mb-3 shadow-1\"\r\n        [ngClass]=\"getStatusClass(card)\"\r\n        draggable=\"true\"\r\n        (dragstart)=\"dragStart($event, card)\" \r\n        (dragend)=\"dragEnd()\">\r\n\r\n        <div class=\"font-bold mb-2\">{{ card.headerTitle }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">{{ card.subHeaderTitle }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">{{ card.description }}</div>\r\n        <div class=\"text-sm text-gray-600 mb-3\">\r\n          <span class=\"font-semibold\">{{ 'gesc_document_statut' | localize }}:</span>\r\n          <span>{{ getLocalizedStatus(card.status) }}</span>\r\n        </div>\r\n        <p-menu appendTo=\"body\" #menuMoreActions \r\n             [model]=\"overflowActionsMenu\" \r\n             [popup]=\"true\" styleClass=\"overflow-menu\"\r\n             [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n          <ng-template pTemplate=\"item\" let-menuItem>\r\n            <a pRipple class=\"flex align-items-center p-menuitem-link\" \r\n              [ngClass]=\"menuItem.styleClass\"\r\n              (click)=\"onOverflowActionClicked(card, menuItem)\">\r\n              <i *ngIf=\"menuItem.id === 'notes'\" class=\"{{ menuItem.iconClass }} p-menuitem-icon badge-icon has-badge\"\r\n                [ngClass]=\"menuItem.iconStyleClass\" pBadge severity=\"danger\" \r\n                [value]=\"card.fullRecord.notesCount\"\r\n                [badgeDisabled]=\"card.fullRecord.notesCount == null\" badgePosition=\"top-right\">\r\n              </i>\r\n\r\n              <i *ngIf=\"menuItem.id !== 'notes'\" class=\"{{menuItem.iconClass}} p-menuitem-icon\"\r\n                [ngClass]=\"menuItem.iconStyleClass\">\r\n              </i>\r\n\r\n              <span class=\"menu-label\">\r\n                {{ menuItem.label | localize }}\r\n              </span>\r\n            </a>\r\n          </ng-template>\r\n        </p-menu>\r\n\r\n        <div class=\"flex justify-content-end align-items-center mt-1 gap-2 p-0\">\r\n          <Tsi-Button [styleClass]=\"'p-button-rounded p-button-text p-0-5'\" type=\"button\" icon=\"pi pi-pencil\"\r\n            (click)=\"edit(card.uid)\">\r\n          </Tsi-Button>\r\n          <p-button type=\"button\" icon=\"pi pi-ellipsis-v\" styleClass=\"overflow-btn\"\r\n            (onClick)=\"overflowColumnClicked(menuMoreActions, $event, card)\">\r\n          </p-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"overlay\" *ngIf=\"isLoading\">\r\n      <div class=\"spinner-wrapper\">\r\n        <app-spinner></app-spinner>\r\n      </div>\r\n    </div>", styles: [":host{display:block;padding:1rem}[draggable=true]{-webkit-user-select:none;user-select:none}.kanban-board{height:calc(100vh - 100px);padding:1rem}.kanban-column{width:300px;max-height:100%;display:flex;flex-direction:column;background-color:#f8f9fa}.column-header{font-size:1rem;font-weight:700;background-color:#fff;border-radius:6px 6px 0 0}.column-cards{overflow-y:auto;flex:1}.kanban-card{border-left:4px solid;cursor:move;transition:border-color .3s ease}.status-0{border-left-color:#7269ef}.status-1{border-left-color:#00c853}.status-2{border-left-color:#ffab00}.status-3{border-left-color:#d50000}[class*=status-]{border-left-style:solid;border-left-width:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i2$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i6$3.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiKanbanComponent, decorators: [{
             type: Component,
@@ -11698,8 +12061,8 @@ class TsiGenericGridComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiGenericGridComponent, deps: [{ token: StatusColorService }, { token: FichierService }, { token: HtmlTemplateGeneratorService }, { token: i1$1.DatePipe }, { token: TsiNotificationService }, { token: LocalizePipe }, { token: LayoutHelperService }, { token: LayoutService }, { token: i2$2.PrimeNGConfig }, { token: AppSettingsService }, { token: ErrorResponseManagerService }, { token: i0.EnvironmentInjector }, { token: i1$3.DynamicDialogConfig }, { token: i1$3.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: { cudComponent: "cudComponent", modalSize: "modalSize", showInfoButton: "showInfoButton", showDownloadButton: "showDownloadButton", showUploadButton: "showUploadButton", showNoteButton: "showNoteButton", showActionButton: "showActionButton", sizingMode: "sizingMode", formName: "formName", id: "id", pagedRequest: "pagedRequest", configuration: "configuration", page: "page", key: "key", columns: "columns", isSearchButtonDisabled: "isSearchButtonDisabled", filteredColumns: "filteredColumns", gridData: "gridData", isTableLoading: "isTableLoading", parent: "parent", showSearchBox: "showSearchBox", showActionColumn: "showActionColumn", showHeaderFilters: "showHeaderFilters", showFilterButton: "showFilterButton", isGridDataPagedInApi: "isGridDataPagedInApi", header: "header", ShowFilterColumns: "ShowFilterColumns", showImportExportButton: "showImportExportButton", crudService: "crudService", searchFields: "searchFields", sortMode: "sortMode", filtersHtmlTemplate: "filtersHtmlTemplate", presentationSettings: "presentationSettings", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", searchOnInit: "searchOnInit", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showSearchField: "showSearchField", showCalenderView: "showCalenderView", calenderSchema: "calenderSchema", showCardView: "showCardView", showKanbanView: "showKanbanView", showKanbanViewOfWorkFlowEtat: "showKanbanViewOfWorkFlowEtat", page$: "page$", checkedByField: "checkedByField", selectAll: "selectAll", targetBusinessClass: "targetBusinessClass", descriminatorValue: "descriminatorValue", businessClass: "businessClass", entityInfo: "entityInfo" }, outputs: { onSave: "onSave", editRow: "editRow", deleteRow: "deleteRow", load: "load", buttonColumnClicked: "buttonColumnClicked", filtersHtmlTemplateChange: "filtersHtmlTemplateChange", selectedItemsChange: "selectedItemsChange", searchFieldsValueChanged: "searchFieldsValueChanged", calendarEventClick: "calendarEventClick", statusFilterChanged: "statusFilterChanged" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableHeaderCheckbox", first: true, predicate: ["tableHeaderCheckbox"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n\r\n  <div class=\"col-12\" [@slideInOut]=\"showSearchField ? 'in' : 'out'\" *ngIf=\"showGlobalSearch\">\r\n    <tsi-search-box \r\n      [isRtlMode]=\"isRtlMode\" \r\n      [(searchFields)]=\"searchFields\" \r\n      [businessClass]=\"businessClass\"\r\n      [entityInfo]=\"entityInfo\"\r\n      [statusMetadata]=\"statusMetadata\"\r\n      [descriminatorValue]=\"descriminatorValue\"\r\n      (searchFieldsChange)=\"searchFieldsValueChanges($event)\" \r\n      (keywordValueChanged)=\"keywordValueChanged($event)\"\r\n      (searchFieldsApplied)=\"search($event)\"\r\n      (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n      (workflowEtatFilterChanged)=\"onWorkflowEtatFilterChanged($event)\"\r\n      (comboBoxLabelChanged)=\"comboBoxLabelChanged($event)\">\r\n    </tsi-search-box>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === false && _showCardView === false && _showKanbanView === false\" class=\"col-12\">\r\n    \r\n    <p-table #dt \r\n      [lazy]=\"isGridDataPagedInApi\" \r\n      [lazyLoadOnInit]=\"searchOnInit\" \r\n      [totalRecords]=\"page.totalCount\" \r\n      [loading]=\"page.loading\" \r\n      [reorderableColumns]=\"true\"\r\n      [resizableColumns]=\"true\" \r\n      [columns]=\"selectedColumns\" \r\n      [value]=\"page.items\"\r\n      [paginator]=\"true\" \r\n      [scrollable]=\"true\" \r\n      [(rows)]=\"page.pageSize\"\r\n      [showCurrentPageReport]=\"true\" \r\n      [globalFilterFields]=\"fields()\" \r\n      [tableStyle]=\"tableStyle\"\r\n      [rowsPerPageOptions]=\"[1, 10, 25, 50]\" \r\n      [sortMode]=\"sortMode\"\r\n      [multiSortMeta]=\"sortMetas\" \r\n      [selectAll]=\"selectAll\"\r\n      [selectionMode]=\"selectionMode\" \r\n      [(selection)]=\"selection\" \r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      (onRowUnselect)=\"onSelectedItemsChanged()\"\r\n      (selectAllChange)=\"onSelectAllChange($event)\" \r\n      (onRowSelect)=\"onSelectedItemsChanged()\"\r\n      (onColResize)=\"onColResize($event)\"\r\n      columnResizeMode=\"expand\"\r\n      dataKey=\"{{ key }}\" \r\n      scrollHeight=\"600px\" \r\n      styleClass=\"p-datatable-gridlines\" \r\n      currentPageReportTemplate=\"{{ 'Showing' | localize }} {{getFirstElementIndex()}} {{\r\n        'to' | localize\r\n      }} {last} {{ 'of' | localize }} \r\n      {totalRecords} {{ 'entries' | localize }}\" \r\n      >\r\n\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex justify-content-between align-items-center\">\r\n          <div class=\"ml-2\">\r\n            {{ header | localize }}\r\n          </div>\r\n\r\n          <div class=\"p-1 flex align-items-center\">\r\n            <div *ngIf=\"showFilterButton\" presentationDesignerBase=\"grid_toggle_header_filters\">\r\n              <Tsi-Button [icon]=\"filterIcon\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"filterTooltip\"\r\n                styleClass=\"p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"toggleHeaderFilters()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showHeaderFilters\" presentationDesignerBase=\"grid_toggle_header_filter_mode\">\r\n              <Tsi-Button [icon]=\"filterModeIcon\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n                [tooltipText]=\"filterModeTooltip\" [styleClass]=\"'ml-1 p-button-primary p-button-icon-only'\"\r\n                (click)=\"toggleHeaderFiltersMode()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div presentationDesignerBase=\"grid_clear_filter_button\">\r\n              <Tsi-Button [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"'icon-clear-filter'\"\r\n                styleClass=\"ml-1 p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"onClearFilters()\" icon=\"pi pi-eraser\">\r\n              </Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showExportButton\" presentationDesignerBase=\"grid_export_button\">\r\n              <Tsi-Button icon=\"p-button-icon pi pi-file-excel\" (onClick)=\"exportExcel()\"\r\n                styleClass=\"p-element p-button-success hover:shadow-6 ml-2 p-1 p-button p-component p-button-icon-only\"\r\n                [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"XLS\"></Tsi-Button>\r\n            </div>\r\n\r\n            <p-multiSelect class=\"ml-1\" [options]=\"columns\" [ngModel]=\"selectedColumns\" optionLabel=\"translatedHeader\"\r\n              selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" [style]=\"{ 'min-width': '180px' }\"\r\n              placeholder=\"{{ 'choose_columns' | localize }}\" (ngModelChange)=\"onSelectedColumnsChange($event)\">\r\n            </p-multiSelect>\r\n          </div>\r\n\r\n          <!-- <div> -->\r\n          <!-- <button *ngIf=\"showGlobalSearch\" type=\"button\" pButton pRipple icon=\"pi pi-search\" (click)=\"search()\"></button> -->\r\n          <!-- </div> -->\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          <th [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\"\r\n            [ngClass]=\"page.loading ? 'no-z-index' : 'z-1'\" *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n            <div class=\"flex align-items-center justify-content-center\">\r\n              <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </div>\r\n          </th>\r\n          \r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <th *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\"\r\n              scope=\"col\" [attr.data-field]=\"col.field\" [style]=\"col.style\" pTooltip=\"{{ col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n              [pSortableColumn]=\"(!col.isButton || !isOverflowColumn(col.field) || !(col.type == displayTypes.IMAGE_DISPLAY)) ? \r\n              col.field : null\"\r\n              [pResizableColumnDisabled]=\"col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)\"\r\n              [tooltipDisabled]=\"col.isButton || isOverflowColumn(col.field)\" \r\n              [pReorderableColumnDisabled]=\"col.isButton || isOverflowColumn(col.field)\" pReorderableColumn\r\n              pResizableColumn [ngStyle]=\"getHeaderColumnStyle(col)\"\r\n              [class.disabled-column]=\"col.isButton || isOverflowColumn(col.field) || col.type === displayTypes.IMAGE_DISPLAY\"\r\n              [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n              [ngClass]=\"[\r\n                getHeaderClassColor(col.type),\r\n                (col.isButton || isOverflowColumn(col.field)) ? 'w-1rem' : '',\r\n                (col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)) ? 'non-resizable-column' : '',\r\n                ]\">\r\n\r\n              <ng-container *ngIf=\"notInSpecifiedColumn(col.field)\">\r\n                <span>\r\n                  <table class=\"p-0 m-0\">\r\n                    <tr>\r\n                      <td class=\"col p-0 m-0\" [ngClass]=\"{'w-1rem': col.isButton}\">\r\n                          {{ col.header | localize }}\r\n                      </td>\r\n                      <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\">\r\n                        <p-sortIcon \r\n                          *ngIf=\"col.type !== displayTypes.IMAGE_DISPLAY\"\r\n                          class=\"w-1rem m-0 p-0\"\r\n                          field=\"{{ col.field }}\"\r\n                          ></p-sortIcon>\r\n                      </td>\r\n                    </tr>\r\n                  </table>\r\n                </span>\r\n              </ng-container>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n\r\n        <tr *ngIf=\"showHeaderFilters\">\r\n          <!-- <th scope=\"col\" style=\"width:3rem\"></th>\r\n                        <th scope=\"col\" style=\"width:3rem\"></th> -->\r\n          <th [ngClass]=\"page.loading ? 'no-z-index' : ''\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n            style=\"width: 4rem\"></th>\r\n\r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <ng-container *ngIf=\"col.actionDisplay != actionPlacement.Overflow\">\r\n              <th style=\"overflow: inherit\" scope=\"col\">\r\n                <ng-container *ngIf=\"!col.isButton && col.field != overflowColumnField ; else filterLessColumn\">\r\n                  <ng-container [ngSwitch]=\"col.type\">\r\n\r\n                    <!-- DATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDate [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDate.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDate.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DATETIME -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATETIME_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDateTime [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDateTime.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDateTime.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY SOCIETE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Societe-Input #currSocieteInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currSocieteInput.inputField)\">\r\n                          </Tsi-Currency-Societe-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY OTHER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Other-Input #currOtherInput [inputField]=\"value\" [currency]=\"col.currencyOtherCode\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currOtherInput.inputField)\">\r\n                          </Tsi-Currency-Other-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- INTEGER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Integer #integerInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(integerInput.inputField)\">\r\n                          </Tsi-Integer>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DECIMAL -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Decimal-Input #decimalInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(decimalInput.inputField)\">\r\n                          </Tsi-Decimal-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- RATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.RATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Rate-Input #rateInput [inputField]=\"value\" [isFraction]=\"col.isFraction\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(rateInput.inputField)\">\r\n                          </Tsi-Rate-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DEFAULT (text, boolean, or any unhandled type) -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <p-columnFilter [type]=\"col.filterInputType\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [minFractionDigits]=\"col.numOfDecimal\" [maxFractionDigits]=\"col.numOfDecimal\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-template #filterLessColumn></ng-template>\r\n              </th>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </tr>\r\n        \r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n\r\n        <!-- CASE : multiple selection -->\r\n        <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\" *ngIf=\"\r\n            selectionMode == multipleGridSelectionMode;\r\n            else notMultipleSelectionModeBlock\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event,item)\" (dragenter)=\"onDragEnter($event)\"\r\n                    (dragleave)=\"onDragLeave($event)\">\r\n          <td [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\">\r\n              <div class=\"flex align-items-center justify-content-center\">\r\n                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n              </div>\r\n          </td>\r\n          <!-- <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n                            (click)=\"edit(item)\"></button>\r\n                    </div>\r\n                </td>\r\n                <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n                            class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n                    </div>\r\n                </td> -->\r\n                \r\n          <ng-container *ngFor=\"let col of columns\">\r\n\r\n            <td  *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\" [class.tsi-col-wrap]=\"shouldWrapColumn(col)\" [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n              >\r\n\r\n              <!-- style=\"height: min-content; margin-left: -.5rem;\" -->\r\n              <!-- Tsi-Currency-Societe-Input -->\r\n\r\n              <div *ngIf=\"\r\n                  col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                  else currencyOtherOutputBlock\r\n                \">\r\n                <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                </Tsi-Currency-Societe-Display>\r\n              </div>\r\n\r\n              <!-- Tsi-Currency-Other-Input -->\r\n              <ng-template #currencyOtherOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                    else datePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Date-Picker -->\r\n              <ng-template #datePickerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DATE_DISPLAY;\r\n                    else dateTimePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Date-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n              <!-- Tsi-CheckBox -->\r\n              <ng-template #checkBoxOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                    else decimalOutputBlock\r\n                  \">\r\n                  <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Checkbox-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Decimal-Input -->\r\n              <ng-template #decimalOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DECIMAL_DISPLAY;\r\n                    else integerOutputBlock\r\n                  \">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Integer -->\r\n              <ng-template #integerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.INTEGER_DISPLAY;\r\n                    else rateOutputBlock\r\n                  \">\r\n                  <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Integer-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Rate-Input -->\r\n              <ng-template #rateOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.RATE_DISPLAY;\r\n                    else displayNestedPropOutputBlock\r\n                  \">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Rate-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayNestedPropOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                    else displayStatusColorBlock\r\n                  \">\r\n                  <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                    [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                  </Tsi-Display-Nested-Prop>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusColorBlock>\r\n                <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                  </div> \r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusValueColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                          class=\"px-2 py-1 font-bold status-badge\"\r\n                          [style.background-color]=\"opt.colorHex\"\r\n                          [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                          [ngClass]=\"{\r\n                              'text-black bg-white': !opt.colorHex,\r\n                              'text-white': opt.colorHex\r\n                            }\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                          class=\"px-2 py-1 font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-status-column -->\r\n              <ng-template #displayStatusColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n\r\n                        <span\r\n                          *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                          class=\"font-bold status-badge\"\r\n                          [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                          [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                          [style.padding-top]=\"'0.1rem'\"\r\n                          [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n                          class=\"font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayButtonBlock>\r\n                <ng-container *ngIf=\"col.isButton; else displayImage\" >\r\n                  <div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n                    <Tsi-Button  [styleClass]=\"col.styleClass\" type=\"button\"\r\n                      icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                      [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n                      (click)=\"buttonClicked(item, col.field)\" ></Tsi-Button>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-image -->\r\n              <ng-template #displayImage>\r\n                <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                  <div class=\"h-2rem\">\r\n                    <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                      [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                      [width]=\"'100%'\" [height]=\"'100%'\">\r\n                    </tsi-image-display>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-icon (file-type logo) -->\r\n              <ng-template #displayIconBlock>\r\n                <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                  <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                    <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                      [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                      style=\"font-size: 1.25rem\"></i>\r\n                    <span>{{ item[col.field] }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-text-eye -->\r\n              <ng-template #displayTextEyeBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.TEXT_DISPLAY;\r\n                    else moreActionsBlock\r\n                  \">\r\n                  <span>\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>\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n                    class=\"drag-message cursor-follow\">\r\n                    {{ \"Jointure\" | localize }}\r\n                  </div>\r\n        </tr>\r\n                          \r\n        <!-- CASE : single or none selection -->\r\n        <ng-template #notMultipleSelectionModeBlock>\r\n          <ng-container>\r\n            <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\"\r\n              [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"index\" id=\"tsi-grid-row-{{index}}\">\r\n\r\n              <ng-container *ngFor=\"let col of columns\">\r\n\r\n                <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\"\r\n                  [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n                  style=\"height: min-content;\"\r\n                  [ngClass]=\"{\r\n                    'w-1rem': col.isButton,\r\n                    'bg-white': col.isButton\r\n                  }\">\r\n\r\n                  <div *ngIf=\"\r\n                      col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                      else currencyOtherOutputBlock\r\n                    \">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </div>\r\n\r\n                  <!-- Tsi-Currency-Other-Input -->\r\n                  <ng-template #currencyOtherOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                        else datePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Currency-Other-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #datePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATE_DISPLAY;\r\n                        else dateTimePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <!-- Tsi-CheckBox -->\r\n                  <ng-template #checkBoxOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                        else decimalOutputBlock\r\n                      \">\r\n                      <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Checkbox-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Decimal-Input -->\r\n                  <ng-template #decimalOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DECIMAL_DISPLAY;\r\n                        else integerOutputBlock\r\n                      \">\r\n                      <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                        [numOfDecimal]=\"col.numOfDecimal\">\r\n                      </Tsi-Decimal-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Integer -->\r\n                  <ng-template #integerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.INTEGER_DISPLAY;\r\n                        else rateOutputBlock\r\n                      \">\r\n                      <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Integer-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Rate-Input -->\r\n                  <ng-template #rateOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.RATE_DISPLAY;\r\n                        else displayNestedPropOutputBlock\r\n                      \">\r\n                      <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Rate-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayNestedPropOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                        else displayStatusColorBlock\r\n                      \">\r\n                      <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                        [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                      </Tsi-Display-Nested-Prop>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <ng-template #displayStatusColorBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <ng-template #displayStatusValueColumnBlock>\r\n                      <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                        <div class=\"align-items-center justify-content-center p-2\">\r\n                          <!--<p-tag \r\n                              [value]=\"item[col.field]\"\r\n                              [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                          </p-tag>-->\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                                class=\"px-2 py-1 font-bold status-badge\"\r\n                                [style.background-color]=\"opt.colorHex\"\r\n                                [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                                [ngClass]=\"{\r\n                                    'text-black bg-white': !opt.colorHex,\r\n                                    'text-white': opt.colorHex\r\n                                  }\"\r\n                                >\r\n                                {{ opt.translatedLabel }}\r\n                              </span>\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                                class=\"px-2 py-1 font-bold status-badge\">\r\n                                {{ item[col.field] }}\r\n                              </span>\r\n                        </div>\r\n                      </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-status-prop -->\r\n                  <ng-template #displayStatusColumnBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                        <!--<p-tag \r\n                          [value]=\"item[col.field]\"\r\n                          [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                        </p-tag>-->\r\n\r\n                        <span\r\n                            *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                            class=\"status-badge font-bold\"\r\n                            [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                            [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                            [style.padding-top]=\"'0.1rem'\"\r\n                            [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                            {{ opt.translatedLabel }}\r\n                          </span>\r\n                          <span\r\n                            *ngIf=\"statusMetadata &&  !getStatusOption(item[col.field])\"\r\n                            class=\"status-badge font-bold\">\r\n                            {{ item[col.field] }}\r\n                        </span>\r\n                        \r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                  \r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayButtonBlock>\r\n                    <ng-container *ngIf=\"col.isButton; else displayImage\">\r\n                      <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n                        [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n                        class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n                        <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n                          [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                          (click)=\"buttonClicked(item, col.field)\"\r\n                          [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-image -->\r\n                  <ng-template #displayImage>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                      <div class=\"h-2rem\">\r\n                        <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                          [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                          [width]=\"'100%'\" [height]=\"'100%'\">\r\n                        </tsi-image-display>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-icon (file-type logo) -->\r\n                  <ng-template #displayIconBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                      <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                        <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                          [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                          style=\"font-size: 1.25rem\"></i>\r\n                        <span>{{ item[col.field] }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-text-eye -->\r\n                  <ng-template #displayTextEyeBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.TEXT_DISPLAY;\r\n                        else moreActionsBlock\r\n                      \">\r\n                      <span>\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>\r\n                        {{ item[col.field] }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                </td>\r\n\r\n              </ng-container>\r\n            </tr>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"footer\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == multipleGridSelectionMode\"></td>\r\n\r\n          <ng-container *ngFor=\"let col of selectedColumns\">\r\n            <td class=\"pr-0\" *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\">\r\n              <div *ngIf=\"col.showSummary\">\r\n                <!-- CURRENCY_SOCIETE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                  <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Societe-Display>\r\n                </div>\r\n\r\n                <!-- INTEGER_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.INTEGER_DISPLAY\">\r\n                  <Tsi-Integer-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Integer-Display>\r\n                </div>\r\n\r\n                <!-- RATE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.RATE_DISPLAY\">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction ?? false\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Rate-Display>\r\n                </div>\r\n\r\n                <!-- DECIMAL_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY\">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col.field)\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </div>\r\n\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </div>\r\n              </div>\r\n            </td>\r\n          </ng-container>  \r\n        </tr>\r\n      </ng-template>\r\n      \r\n      <ng-template pTemplate=\"summary\">\r\n        {{ page.totalCount }} {{ \"records_label\" | localize }}\r\n        <span *ngIf=\"colorful\">\r\n          <span>View Grid</span>\r\n          <span class=\"pl-2\">| SearchOnInit : {{ searchOnInit }}</span>\r\n          <span class=\"pl-2\">| Pagination In Api : {{ isGridDataPagedInApi }}</span>\r\n        </span>\r\n      </ng-template>\r\n    </p-table>\r\n\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === true\" class=\"col-12\">\r\n    <tsi-calender \r\n  [schema]=\"calenderSchema\" \r\n  [eventsData]=\"page.items\" \r\n  [crudService]=\"crudService\"\r\n  [showInfoButton]=\"showInfoButton\"\r\n  [showDownloadButton]=\"showDownloadButton\"\r\n  [showUploadButton]=\"showUploadButton\"\r\n  [showNoteButton]=\"showNoteButton\"\r\n  [showActionButton]=\"showActionButton\"\r\n  (dateRangeChange)=\"handleDateRangeChange($event)\" \r\n  (eventClick)=\"handleCalendarEventClick($event)\">\r\n</tsi-calender>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCardView === true\" class=\"col-12\">\r\n    <Tsi-card-list [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\"[selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\">\r\n    </Tsi-card-list>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && !_showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\" [crudService]=\"crudService\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\">\r\n    </Tsi-kanban>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && _showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban-workflow-etat [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" [descriminatorValue]=\"descriminatorValue\" (callSearch)=\"callSearchHandler($event)\">\r\n    </Tsi-kanban-workflow-etat>\r\n  </div>\r\n\r\n  <div *ngIf=\"isAdvancedSearch && selectionMode == multipleGridSelectionMode\">\r\n    <Tsi-Modal-Footer [showSaveAndCloseButton]=\"false\" (onSaveClick)=\"onConfirmSelection()\" (onCancelClick)=\"onCancelSelection()\" />\r\n  </div>\r\n</div>", styles: [".p-button.p-button-icon-only.p-button-rounded{border-radius:50%;height:1rem}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.p-inputgroup.rtl-mode .p-inputgroup-addon:last-child,.p-inputgroup.rtl-mode button:last-child,.p-inputgroup.rtl-mode input:last-child,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:6px 0 0 6px/6px 0px 0px 6px!important}.p-inputgroup.ltr-mode .p-inputgroup-addon:last-child,.p-inputgroup.ltr-mode button:last-child,.p-inputgroup.ltr-mode input:last-child,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:0 6px 6px 0/0px 6px 6px 0px!important}.p-paginator .p-dropdown{height:auto;border:none;border-bottom:1px solid}.p-datatable .frozen-column{position:sticky;left:0;z-index:1;background:#fff}.frozen-column-ltr-mode{min-width:2rem;position:sticky;left:0;background-color:#fff}.frozen-column-rtl-mode{min-width:2rem;position:sticky;right:0;background-color:#fff}.disabled-column{background-color:#f5f5f5;color:#d3d3d3;pointer-events:none}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:max-content;width:100%;text-align:center;white-space:nowrap;border-radius:.4rem;padding:.1rem .2rem;font-weight:600;line-height:1.2;color:#fff;box-shadow:0 1px 2px #0000000d;transition:all .2s ease-in-out;cursor:default;transform-origin:top center;border-top-left-radius:inherit;border-bottom-right-radius:inherit}.status-badge:hover{transform:scale(1.06);box-shadow:0 2px 4px #0000001a;filter:brightness(1.2)}td span,td div{padding:0 .5rem}.tsi-col-wrap,.tsi-col-wrap>span:not(.status-badge),.tsi-col-wrap>div:not(.status-badge){white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}td.tsi-col-wrap>span:not(.status-badge),td.tsi-col-wrap>div:not(.status-badge){display:inline-block}.custom-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.button-icon{width:1.5rem;height:1.5rem}.custom-button:hover{background-color:#f0f0f0}table{width:100%!important}.right-to-left{text-align:start}::ng-deep th.non-resizable-column .p-column-resizer{display:none!important;pointer-events:none!important}::ng-deep .cursor-follow{position:fixed;background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.85rem;z-index:1000;pointer-events:none;white-space:nowrap}::ng-deep .overflow-menu.p-menu-overlay{border-radius:8px;border:none;padding:.4rem;min-width:0!important;background:#fff;box-shadow:0 8px 24px #0000001f;animation:fadeScaleIn .12s ease-out}::ng-deep .overflow-menu .p-menuitem-link{overflow:visible!important;position:relative;padding:0}::ng-deep .overflow-menu-item{padding:.55rem .75rem;border-radius:8px;gap:.5rem;font-size:.85rem;white-space:nowrap;transition:all .15s ease}::ng-deep .overflow-menu-item:hover{background-color:#f5f7fa}::ng-deep .menu-icon{font-size:.9rem;width:18px;text-align:center;opacity:.8}::ng-deep .menu-label{font-weight:400}::ng-deep .overflow-btn{width:28px;height:28px;padding:0}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}::ng-deep .overflow-menu .p-badge{font-size:.55rem;min-width:.9rem;height:.9rem;line-height:.9rem;font-family:inherit}::ng-deep .badge-icon.has-badge{transition:transform .2s ease-in-out;display:inline-block;position:relative;z-index:2}::ng-deep .badge-icon.has-badge:hover{transform:scale(1.4);z-index:10}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i6.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i6.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i11.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$3.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherInputComponent, selector: "Tsi-Currency-Other-Input", inputs: ["numOfDecimal", "currency", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiCurrencySocieteInputComponent, selector: "Tsi-Currency-Societe-Input", inputs: ["class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiDecimalInputComponent, selector: "Tsi-Decimal-Input", inputs: ["numOfDecimal", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiRateInputComponent, selector: "Tsi-Rate-Input", inputs: ["required", "isFraction", "numOfDecimal"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiCheckboxDisplayComponent, selector: "Tsi-Checkbox-Display", inputs: ["inputData"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["inputData", "currency"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDateDisplayComponent, selector: "Tsi-Date-Display", inputs: ["inputData", "showTime"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: TsiModalFooterComponent, selector: "Tsi-Modal-Footer", inputs: ["cancelDisabled", "saveDisabled", "cancelLabel", "saveLabel", "isConsult", "isDuplicate", "isOnlyCreate", "additionalButtonLabel", "additionalButtonIcon", "additionalButtonDisabled", "showAdditionalButton", "showSaveAndCloseButton", "mode"], outputs: ["onCancelClick", "onSaveClick", "onAdditionalButtonClick"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: TsiSearchBoxComponent, selector: "tsi-search-box", inputs: ["searchFields", "businessClass", "descriminatorValue", "isRtlMode", "isSearchButtonDisabled", "entityInfo", "statusMetadata"], outputs: ["searchFieldsChange", "searchFieldsApplied", "keywordValueChanged", "statusFilterChanged", "workflowEtatFilterChanged", "comboBoxLabelChanged"] }, { kind: "component", type: TsiCardListComponent, selector: "Tsi-card-list", inputs: ["cardBusinessClass", "header", "id", "page", "page$", "overflowActionsMenu", "selectKeyOnly", "key"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiImageDisplayComponent, selector: "tsi-image-display", inputs: ["src", "alt", "width", "height", "isRounded", "headerTitles"] }, { kind: "component", type: TsiKanbanComponent, selector: "Tsi-kanban", inputs: ["cardBusinessClass", "header", "id", "page$", "crudService", "overflowActionsMenu", "selectKeyOnly", "key", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiCalenderComponent, selector: "tsi-calender", inputs: ["crudService", "schema", "eventsData", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton"], outputs: ["eventClick", "dateRangeChange"] }, { kind: "component", type: TsiKanbanWorkflowEtatComponent, selector: "Tsi-kanban-workflow-etat", inputs: ["cardBusinessClass", "header", "id", "page$", "descriminatorValue", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiGenericGridComponent, deps: [{ token: StatusColorService }, { token: FichierService }, { token: HtmlTemplateGeneratorService }, { token: i1$1.DatePipe }, { token: TsiNotificationService }, { token: LocalizePipe }, { token: LayoutHelperService }, { token: LayoutService }, { token: i2$1.PrimeNGConfig }, { token: AppSettingsService }, { token: ErrorResponseManagerService }, { token: i0.EnvironmentInjector }, { token: i1$3.DynamicDialogConfig }, { token: i1$3.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: { cudComponent: "cudComponent", modalSize: "modalSize", showInfoButton: "showInfoButton", showDownloadButton: "showDownloadButton", showUploadButton: "showUploadButton", showNoteButton: "showNoteButton", showActionButton: "showActionButton", sizingMode: "sizingMode", formName: "formName", id: "id", pagedRequest: "pagedRequest", configuration: "configuration", page: "page", key: "key", columns: "columns", isSearchButtonDisabled: "isSearchButtonDisabled", filteredColumns: "filteredColumns", gridData: "gridData", isTableLoading: "isTableLoading", parent: "parent", showSearchBox: "showSearchBox", showActionColumn: "showActionColumn", showHeaderFilters: "showHeaderFilters", showFilterButton: "showFilterButton", isGridDataPagedInApi: "isGridDataPagedInApi", header: "header", ShowFilterColumns: "ShowFilterColumns", showImportExportButton: "showImportExportButton", crudService: "crudService", searchFields: "searchFields", sortMode: "sortMode", filtersHtmlTemplate: "filtersHtmlTemplate", presentationSettings: "presentationSettings", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", searchOnInit: "searchOnInit", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showSearchField: "showSearchField", showCalenderView: "showCalenderView", calenderSchema: "calenderSchema", showCardView: "showCardView", showKanbanView: "showKanbanView", showKanbanViewOfWorkFlowEtat: "showKanbanViewOfWorkFlowEtat", page$: "page$", checkedByField: "checkedByField", selectAll: "selectAll", targetBusinessClass: "targetBusinessClass", descriminatorValue: "descriminatorValue", businessClass: "businessClass", entityInfo: "entityInfo" }, outputs: { onSave: "onSave", editRow: "editRow", deleteRow: "deleteRow", load: "load", buttonColumnClicked: "buttonColumnClicked", filtersHtmlTemplateChange: "filtersHtmlTemplateChange", selectedItemsChange: "selectedItemsChange", searchFieldsValueChanged: "searchFieldsValueChanged", calendarEventClick: "calendarEventClick", statusFilterChanged: "statusFilterChanged" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableHeaderCheckbox", first: true, predicate: ["tableHeaderCheckbox"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n\r\n  <div class=\"col-12\" [@slideInOut]=\"showSearchField ? 'in' : 'out'\" *ngIf=\"showGlobalSearch\">\r\n    <tsi-search-box \r\n      [isRtlMode]=\"isRtlMode\" \r\n      [(searchFields)]=\"searchFields\" \r\n      [businessClass]=\"businessClass\"\r\n      [entityInfo]=\"entityInfo\"\r\n      [statusMetadata]=\"statusMetadata\"\r\n      [descriminatorValue]=\"descriminatorValue\"\r\n      (searchFieldsChange)=\"searchFieldsValueChanges($event)\" \r\n      (keywordValueChanged)=\"keywordValueChanged($event)\"\r\n      (searchFieldsApplied)=\"search($event)\"\r\n      (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n      (workflowEtatFilterChanged)=\"onWorkflowEtatFilterChanged($event)\"\r\n      (comboBoxLabelChanged)=\"comboBoxLabelChanged($event)\">\r\n    </tsi-search-box>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === false && _showCardView === false && _showKanbanView === false\" class=\"col-12\">\r\n    \r\n    <p-table #dt \r\n      [lazy]=\"isGridDataPagedInApi\" \r\n      [lazyLoadOnInit]=\"searchOnInit\" \r\n      [totalRecords]=\"page.totalCount\" \r\n      [loading]=\"page.loading\" \r\n      [reorderableColumns]=\"true\"\r\n      [resizableColumns]=\"true\" \r\n      [columns]=\"selectedColumns\" \r\n      [value]=\"page.items\"\r\n      [paginator]=\"true\" \r\n      [scrollable]=\"true\" \r\n      [(rows)]=\"page.pageSize\"\r\n      [showCurrentPageReport]=\"true\" \r\n      [globalFilterFields]=\"fields()\" \r\n      [tableStyle]=\"tableStyle\"\r\n      [rowsPerPageOptions]=\"[1, 10, 25, 50]\" \r\n      [sortMode]=\"sortMode\"\r\n      [multiSortMeta]=\"sortMetas\" \r\n      [selectAll]=\"selectAll\"\r\n      [selectionMode]=\"selectionMode\" \r\n      [(selection)]=\"selection\" \r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      (onRowUnselect)=\"onSelectedItemsChanged()\"\r\n      (selectAllChange)=\"onSelectAllChange($event)\" \r\n      (onRowSelect)=\"onSelectedItemsChanged()\"\r\n      (onColResize)=\"onColResize($event)\"\r\n      columnResizeMode=\"expand\"\r\n      dataKey=\"{{ key }}\" \r\n      scrollHeight=\"600px\" \r\n      styleClass=\"p-datatable-gridlines\" \r\n      currentPageReportTemplate=\"{{ 'Showing' | localize }} {{getFirstElementIndex()}} {{\r\n        'to' | localize\r\n      }} {last} {{ 'of' | localize }} \r\n      {totalRecords} {{ 'entries' | localize }}\" \r\n      >\r\n\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex justify-content-between align-items-center\">\r\n          <div class=\"ml-2\">\r\n            {{ header | localize }}\r\n          </div>\r\n\r\n          <div class=\"p-1 flex align-items-center\">\r\n            <div *ngIf=\"showFilterButton\" presentationDesignerBase=\"grid_toggle_header_filters\">\r\n              <Tsi-Button [icon]=\"filterIcon\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"filterTooltip\"\r\n                styleClass=\"p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"toggleHeaderFilters()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showHeaderFilters\" presentationDesignerBase=\"grid_toggle_header_filter_mode\">\r\n              <Tsi-Button [icon]=\"filterModeIcon\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n                [tooltipText]=\"filterModeTooltip\" [styleClass]=\"'ml-1 p-button-primary p-button-icon-only'\"\r\n                (click)=\"toggleHeaderFiltersMode()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div presentationDesignerBase=\"grid_clear_filter_button\">\r\n              <Tsi-Button [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"'icon-clear-filter'\"\r\n                styleClass=\"ml-1 p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"onClearFilters()\" icon=\"pi pi-eraser\">\r\n              </Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showExportButton\" presentationDesignerBase=\"grid_export_button\">\r\n              <Tsi-Button icon=\"p-button-icon pi pi-file-excel\" (onClick)=\"exportExcel()\"\r\n                styleClass=\"p-element p-button-success hover:shadow-6 ml-2 p-1 p-button p-component p-button-icon-only\"\r\n                [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"XLS\"></Tsi-Button>\r\n            </div>\r\n\r\n            <p-multiSelect class=\"ml-1\" [options]=\"columns\" [ngModel]=\"selectedColumns\" optionLabel=\"translatedHeader\"\r\n              selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" [style]=\"{ 'min-width': '180px' }\"\r\n              placeholder=\"{{ 'choose_columns' | localize }}\" (ngModelChange)=\"onSelectedColumnsChange($event)\">\r\n            </p-multiSelect>\r\n          </div>\r\n\r\n          <!-- <div> -->\r\n          <!-- <button *ngIf=\"showGlobalSearch\" type=\"button\" pButton pRipple icon=\"pi pi-search\" (click)=\"search()\"></button> -->\r\n          <!-- </div> -->\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          <th [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\"\r\n            [ngClass]=\"page.loading ? 'no-z-index' : 'z-1'\" *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n            <div class=\"flex align-items-center justify-content-center\">\r\n              <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </div>\r\n          </th>\r\n          \r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <th *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\"\r\n              scope=\"col\" [attr.data-field]=\"col.field\" [style]=\"col.style\" pTooltip=\"{{ col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n              [pSortableColumn]=\"(!col.isButton || !isOverflowColumn(col.field) || !(col.type == displayTypes.IMAGE_DISPLAY)) ? \r\n              col.field : null\"\r\n              [pResizableColumnDisabled]=\"col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)\"\r\n              [tooltipDisabled]=\"col.isButton || isOverflowColumn(col.field)\" \r\n              [pReorderableColumnDisabled]=\"col.isButton || isOverflowColumn(col.field)\" pReorderableColumn\r\n              pResizableColumn [ngStyle]=\"getHeaderColumnStyle(col)\"\r\n              [class.disabled-column]=\"col.isButton || isOverflowColumn(col.field) || col.type === displayTypes.IMAGE_DISPLAY\"\r\n              [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n              [ngClass]=\"[\r\n                getHeaderClassColor(col.type),\r\n                (col.isButton || isOverflowColumn(col.field)) ? 'w-1rem' : '',\r\n                (col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)) ? 'non-resizable-column' : '',\r\n                ]\">\r\n\r\n              <ng-container *ngIf=\"notInSpecifiedColumn(col.field)\">\r\n                <span>\r\n                  <table class=\"p-0 m-0\">\r\n                    <tr>\r\n                      <td class=\"col p-0 m-0\" [ngClass]=\"{'w-1rem': col.isButton}\">\r\n                          {{ col.header | localize }}\r\n                      </td>\r\n                      <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\">\r\n                        <p-sortIcon \r\n                          *ngIf=\"col.type !== displayTypes.IMAGE_DISPLAY\"\r\n                          class=\"w-1rem m-0 p-0\"\r\n                          field=\"{{ col.field }}\"\r\n                          ></p-sortIcon>\r\n                      </td>\r\n                    </tr>\r\n                  </table>\r\n                </span>\r\n              </ng-container>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n\r\n        <tr *ngIf=\"showHeaderFilters\">\r\n          <!-- <th scope=\"col\" style=\"width:3rem\"></th>\r\n                        <th scope=\"col\" style=\"width:3rem\"></th> -->\r\n          <th [ngClass]=\"page.loading ? 'no-z-index' : ''\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n            style=\"width: 4rem\"></th>\r\n\r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <ng-container *ngIf=\"col.actionDisplay != actionPlacement.Overflow\">\r\n              <th style=\"overflow: inherit\" scope=\"col\">\r\n                <ng-container *ngIf=\"!col.isButton && col.field != overflowColumnField ; else filterLessColumn\">\r\n                  <ng-container [ngSwitch]=\"col.type\">\r\n\r\n                    <!-- DATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDate [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDate.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDate.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DATETIME -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATETIME_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDateTime [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDateTime.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDateTime.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY SOCIETE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Societe-Input #currSocieteInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currSocieteInput.inputField)\">\r\n                          </Tsi-Currency-Societe-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY OTHER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Other-Input #currOtherInput [inputField]=\"value\" [currency]=\"col.currencyOtherCode\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currOtherInput.inputField)\">\r\n                          </Tsi-Currency-Other-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- INTEGER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Integer #integerInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(integerInput.inputField)\">\r\n                          </Tsi-Integer>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DECIMAL -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Decimal-Input #decimalInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(decimalInput.inputField)\">\r\n                          </Tsi-Decimal-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- RATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.RATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Rate-Input #rateInput [inputField]=\"value\" [isFraction]=\"col.isFraction\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(rateInput.inputField)\">\r\n                          </Tsi-Rate-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DEFAULT (text, boolean, or any unhandled type) -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <p-columnFilter [type]=\"col.filterInputType\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [minFractionDigits]=\"col.numOfDecimal\" [maxFractionDigits]=\"col.numOfDecimal\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-template #filterLessColumn></ng-template>\r\n              </th>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </tr>\r\n        \r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n\r\n        <!-- CASE : multiple selection -->\r\n        <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\" *ngIf=\"\r\n            selectionMode == multipleGridSelectionMode;\r\n            else notMultipleSelectionModeBlock\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event,item)\" (dragenter)=\"onDragEnter($event)\"\r\n                    (dragleave)=\"onDragLeave($event)\">\r\n          <td [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\">\r\n              <div class=\"flex align-items-center justify-content-center\">\r\n                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n              </div>\r\n          </td>\r\n          <!-- <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n                            (click)=\"edit(item)\"></button>\r\n                    </div>\r\n                </td>\r\n                <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n                            class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n                    </div>\r\n                </td> -->\r\n                \r\n          <ng-container *ngFor=\"let col of columns\">\r\n\r\n            <td  *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\" [class.tsi-col-wrap]=\"shouldWrapColumn(col)\" [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n              >\r\n\r\n              <!-- style=\"height: min-content; margin-left: -.5rem;\" -->\r\n              <!-- Tsi-Currency-Societe-Input -->\r\n\r\n              <div *ngIf=\"\r\n                  col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                  else currencyOtherOutputBlock\r\n                \">\r\n                <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                </Tsi-Currency-Societe-Display>\r\n              </div>\r\n\r\n              <!-- Tsi-Currency-Other-Input -->\r\n              <ng-template #currencyOtherOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                    else datePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Date-Picker -->\r\n              <ng-template #datePickerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DATE_DISPLAY;\r\n                    else dateTimePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Date-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n              <!-- Tsi-CheckBox -->\r\n              <ng-template #checkBoxOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                    else decimalOutputBlock\r\n                  \">\r\n                  <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Checkbox-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Decimal-Input -->\r\n              <ng-template #decimalOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DECIMAL_DISPLAY;\r\n                    else integerOutputBlock\r\n                  \">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Integer -->\r\n              <ng-template #integerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.INTEGER_DISPLAY;\r\n                    else rateOutputBlock\r\n                  \">\r\n                  <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Integer-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Rate-Input -->\r\n              <ng-template #rateOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.RATE_DISPLAY;\r\n                    else displayNestedPropOutputBlock\r\n                  \">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Rate-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayNestedPropOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                    else displayStatusColorBlock\r\n                  \">\r\n                  <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                    [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                  </Tsi-Display-Nested-Prop>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusColorBlock>\r\n                <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                  </div> \r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusValueColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                          class=\"px-2 py-1 font-bold status-badge\"\r\n                          [style.background-color]=\"opt.colorHex\"\r\n                          [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                          [ngClass]=\"{\r\n                              'text-black bg-white': !opt.colorHex,\r\n                              'text-white': opt.colorHex\r\n                            }\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                          class=\"px-2 py-1 font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-status-column -->\r\n              <ng-template #displayStatusColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n\r\n                        <span\r\n                          *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                          class=\"font-bold status-badge\"\r\n                          [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                          [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                          [style.padding-top]=\"'0.1rem'\"\r\n                          [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n                          class=\"font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayButtonBlock>\r\n                <ng-container *ngIf=\"col.isButton; else displayImage\" >\r\n                  <div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n                    <Tsi-Button  [styleClass]=\"col.styleClass\" type=\"button\"\r\n                      icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                      [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n                      (click)=\"buttonClicked(item, col.field)\" ></Tsi-Button>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-image -->\r\n              <ng-template #displayImage>\r\n                <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                  <div class=\"h-2rem\">\r\n                    <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                      [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                      [width]=\"'100%'\" [height]=\"'100%'\">\r\n                    </tsi-image-display>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-icon (file-type logo) -->\r\n              <ng-template #displayIconBlock>\r\n                <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                  <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                    <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                      [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                      style=\"font-size: 1.25rem\"></i>\r\n                    <span>{{ item[col.field] }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-text-eye -->\r\n              <ng-template #displayTextEyeBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.TEXT_DISPLAY;\r\n                    else moreActionsBlock\r\n                  \">\r\n                  <span>\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>\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n                    class=\"drag-message cursor-follow\">\r\n                    {{ \"Jointure\" | localize }}\r\n                  </div>\r\n        </tr>\r\n                          \r\n        <!-- CASE : single or none selection -->\r\n        <ng-template #notMultipleSelectionModeBlock>\r\n          <ng-container>\r\n            <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\"\r\n              [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"index\" id=\"tsi-grid-row-{{index}}\">\r\n\r\n              <ng-container *ngFor=\"let col of columns\">\r\n\r\n                <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\"\r\n                  [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n                  style=\"height: min-content;\"\r\n                  [ngClass]=\"{\r\n                    'w-1rem': col.isButton,\r\n                    'bg-white': col.isButton\r\n                  }\">\r\n\r\n                  <div *ngIf=\"\r\n                      col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                      else currencyOtherOutputBlock\r\n                    \">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </div>\r\n\r\n                  <!-- Tsi-Currency-Other-Input -->\r\n                  <ng-template #currencyOtherOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                        else datePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Currency-Other-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #datePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATE_DISPLAY;\r\n                        else dateTimePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <!-- Tsi-CheckBox -->\r\n                  <ng-template #checkBoxOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                        else decimalOutputBlock\r\n                      \">\r\n                      <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Checkbox-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Decimal-Input -->\r\n                  <ng-template #decimalOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DECIMAL_DISPLAY;\r\n                        else integerOutputBlock\r\n                      \">\r\n                      <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                        [numOfDecimal]=\"col.numOfDecimal\">\r\n                      </Tsi-Decimal-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Integer -->\r\n                  <ng-template #integerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.INTEGER_DISPLAY;\r\n                        else rateOutputBlock\r\n                      \">\r\n                      <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Integer-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Rate-Input -->\r\n                  <ng-template #rateOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.RATE_DISPLAY;\r\n                        else displayNestedPropOutputBlock\r\n                      \">\r\n                      <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Rate-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayNestedPropOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                        else displayStatusColorBlock\r\n                      \">\r\n                      <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                        [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                      </Tsi-Display-Nested-Prop>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <ng-template #displayStatusColorBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <ng-template #displayStatusValueColumnBlock>\r\n                      <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                        <div class=\"align-items-center justify-content-center p-2\">\r\n                          <!--<p-tag \r\n                              [value]=\"item[col.field]\"\r\n                              [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                          </p-tag>-->\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                                class=\"px-2 py-1 font-bold status-badge\"\r\n                                [style.background-color]=\"opt.colorHex\"\r\n                                [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                                [ngClass]=\"{\r\n                                    'text-black bg-white': !opt.colorHex,\r\n                                    'text-white': opt.colorHex\r\n                                  }\"\r\n                                >\r\n                                {{ opt.translatedLabel }}\r\n                              </span>\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                                class=\"px-2 py-1 font-bold status-badge\">\r\n                                {{ item[col.field] }}\r\n                              </span>\r\n                        </div>\r\n                      </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-status-prop -->\r\n                  <ng-template #displayStatusColumnBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                        <!--<p-tag \r\n                          [value]=\"item[col.field]\"\r\n                          [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                        </p-tag>-->\r\n\r\n                        <span\r\n                            *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                            class=\"status-badge font-bold\"\r\n                            [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                            [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                            [style.padding-top]=\"'0.1rem'\"\r\n                            [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                            {{ opt.translatedLabel }}\r\n                          </span>\r\n                          <span\r\n                            *ngIf=\"statusMetadata &&  !getStatusOption(item[col.field])\"\r\n                            class=\"status-badge font-bold\">\r\n                            {{ item[col.field] }}\r\n                        </span>\r\n                        \r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                  \r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayButtonBlock>\r\n                    <ng-container *ngIf=\"col.isButton; else displayImage\">\r\n                      <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n                        [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n                        class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n                        <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n                          [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                          (click)=\"buttonClicked(item, col.field)\"\r\n                          [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-image -->\r\n                  <ng-template #displayImage>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                      <div class=\"h-2rem\">\r\n                        <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                          [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                          [width]=\"'100%'\" [height]=\"'100%'\">\r\n                        </tsi-image-display>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-icon (file-type logo) -->\r\n                  <ng-template #displayIconBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                      <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                        <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                          [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                          style=\"font-size: 1.25rem\"></i>\r\n                        <span>{{ item[col.field] }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-text-eye -->\r\n                  <ng-template #displayTextEyeBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.TEXT_DISPLAY;\r\n                        else moreActionsBlock\r\n                      \">\r\n                      <span>\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>\r\n                        {{ item[col.field] }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                </td>\r\n\r\n              </ng-container>\r\n            </tr>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"footer\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == multipleGridSelectionMode\"></td>\r\n\r\n          <ng-container *ngFor=\"let col of selectedColumns\">\r\n            <td class=\"pr-0\" *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\">\r\n              <div *ngIf=\"col.showSummary\">\r\n                <!-- CURRENCY_SOCIETE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                  <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Societe-Display>\r\n                </div>\r\n\r\n                <!-- INTEGER_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.INTEGER_DISPLAY\">\r\n                  <Tsi-Integer-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Integer-Display>\r\n                </div>\r\n\r\n                <!-- RATE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.RATE_DISPLAY\">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction ?? false\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Rate-Display>\r\n                </div>\r\n\r\n                <!-- DECIMAL_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY\">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col.field)\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </div>\r\n\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </div>\r\n              </div>\r\n            </td>\r\n          </ng-container>  \r\n        </tr>\r\n      </ng-template>\r\n      \r\n      <ng-template pTemplate=\"summary\">\r\n        {{ page.totalCount }} {{ \"records_label\" | localize }}\r\n        <span *ngIf=\"colorful\">\r\n          <span>View Grid</span>\r\n          <span class=\"pl-2\">| SearchOnInit : {{ searchOnInit }}</span>\r\n          <span class=\"pl-2\">| Pagination In Api : {{ isGridDataPagedInApi }}</span>\r\n        </span>\r\n      </ng-template>\r\n    </p-table>\r\n\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === true\" class=\"col-12\">\r\n    <tsi-calender \r\n  [schema]=\"calenderSchema\" \r\n  [eventsData]=\"page.items\" \r\n  [crudService]=\"crudService\"\r\n  [showInfoButton]=\"showInfoButton\"\r\n  [showDownloadButton]=\"showDownloadButton\"\r\n  [showUploadButton]=\"showUploadButton\"\r\n  [showNoteButton]=\"showNoteButton\"\r\n  [showActionButton]=\"showActionButton\"\r\n  (dateRangeChange)=\"handleDateRangeChange($event)\" \r\n  (eventClick)=\"handleCalendarEventClick($event)\">\r\n</tsi-calender>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCardView === true\" class=\"col-12\">\r\n    <Tsi-card-list [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\"[selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\">\r\n    </Tsi-card-list>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && !_showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\" [crudService]=\"crudService\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\">\r\n    </Tsi-kanban>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && _showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban-workflow-etat [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" [descriminatorValue]=\"descriminatorValue\" (callSearch)=\"callSearchHandler($event)\">\r\n    </Tsi-kanban-workflow-etat>\r\n  </div>\r\n\r\n  <div *ngIf=\"isAdvancedSearch && selectionMode == multipleGridSelectionMode\">\r\n    <Tsi-Modal-Footer [showSaveAndCloseButton]=\"false\" (onSaveClick)=\"onConfirmSelection()\" (onCancelClick)=\"onCancelSelection()\" />\r\n  </div>\r\n</div>", styles: [".p-button.p-button-icon-only.p-button-rounded{border-radius:50%;height:1rem}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.p-inputgroup.rtl-mode .p-inputgroup-addon:last-child,.p-inputgroup.rtl-mode button:last-child,.p-inputgroup.rtl-mode input:last-child,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:6px 0 0 6px/6px 0px 0px 6px!important}.p-inputgroup.ltr-mode .p-inputgroup-addon:last-child,.p-inputgroup.ltr-mode button:last-child,.p-inputgroup.ltr-mode input:last-child,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:0 6px 6px 0/0px 6px 6px 0px!important}.p-paginator .p-dropdown{height:auto;border:none;border-bottom:1px solid}.p-datatable .frozen-column{position:sticky;left:0;z-index:1;background:#fff}.frozen-column-ltr-mode{min-width:2rem;position:sticky;left:0;background-color:#fff}.frozen-column-rtl-mode{min-width:2rem;position:sticky;right:0;background-color:#fff}.disabled-column{background-color:#f5f5f5;color:#d3d3d3;pointer-events:none}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:max-content;width:100%;text-align:center;white-space:nowrap;border-radius:.4rem;padding:.1rem .2rem;font-weight:600;line-height:1.2;color:#fff;box-shadow:0 1px 2px #0000000d;transition:all .2s ease-in-out;cursor:default;transform-origin:top center;border-top-left-radius:inherit;border-bottom-right-radius:inherit}.status-badge:hover{transform:scale(1.06);box-shadow:0 2px 4px #0000001a;filter:brightness(1.2)}td span,td div{padding:0 .5rem}.tsi-col-wrap,.tsi-col-wrap>span:not(.status-badge),.tsi-col-wrap>div:not(.status-badge){white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}td.tsi-col-wrap>span:not(.status-badge),td.tsi-col-wrap>div:not(.status-badge){display:inline-block}.custom-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.button-icon{width:1.5rem;height:1.5rem}.custom-button:hover{background-color:#f0f0f0}table{width:100%!important}.right-to-left{text-align:start}::ng-deep th.non-resizable-column .p-column-resizer{display:none!important;pointer-events:none!important}::ng-deep .cursor-follow{position:fixed;background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.85rem;z-index:1000;pointer-events:none;white-space:nowrap}::ng-deep .overflow-menu.p-menu-overlay{border-radius:8px;border:none;padding:.4rem;min-width:0!important;background:#fff;box-shadow:0 8px 24px #0000001f;animation:fadeScaleIn .12s ease-out}::ng-deep .overflow-menu .p-menuitem-link{overflow:visible!important;position:relative;padding:0}::ng-deep .overflow-menu-item{padding:.55rem .75rem;border-radius:8px;gap:.5rem;font-size:.85rem;white-space:nowrap;transition:all .15s ease}::ng-deep .overflow-menu-item:hover{background-color:#f5f7fa}::ng-deep .menu-icon{font-size:.9rem;width:18px;text-align:center;opacity:.8}::ng-deep .menu-label{font-weight:400}::ng-deep .overflow-btn{width:28px;height:28px;padding:0}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}::ng-deep .overflow-menu .p-badge{font-size:.55rem;min-width:.9rem;height:.9rem;line-height:.9rem;font-family:inherit}::ng-deep .badge-icon.has-badge{transition:transform .2s ease-in-out;display:inline-block;position:relative;z-index:2}::ng-deep .badge-icon.has-badge:hover{transform:scale(1.4);z-index:10}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i6.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i6.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i11.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i6$3.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: TsiCurrencyOtherInputComponent, selector: "Tsi-Currency-Other-Input", inputs: ["numOfDecimal", "currency", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiCurrencySocieteInputComponent, selector: "Tsi-Currency-Societe-Input", inputs: ["class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiDecimalInputComponent, selector: "Tsi-Decimal-Input", inputs: ["numOfDecimal", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiRateInputComponent, selector: "Tsi-Rate-Input", inputs: ["required", "isFraction", "numOfDecimal"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiCheckboxDisplayComponent, selector: "Tsi-Checkbox-Display", inputs: ["inputData"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["inputData", "currency"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDateDisplayComponent, selector: "Tsi-Date-Display", inputs: ["inputData", "showTime"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "component", type: TsiModalFooterComponent, selector: "Tsi-Modal-Footer", inputs: ["cancelDisabled", "saveDisabled", "cancelLabel", "saveLabel", "isConsult", "isDuplicate", "isOnlyCreate", "additionalButtonLabel", "additionalButtonIcon", "additionalButtonDisabled", "showAdditionalButton", "showSaveAndCloseButton", "mode"], outputs: ["onCancelClick", "onSaveClick", "onAdditionalButtonClick"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: TsiSearchBoxComponent, selector: "tsi-search-box", inputs: ["searchFields", "businessClass", "descriminatorValue", "isRtlMode", "isSearchButtonDisabled", "entityInfo", "statusMetadata"], outputs: ["searchFieldsChange", "searchFieldsApplied", "keywordValueChanged", "statusFilterChanged", "workflowEtatFilterChanged", "comboBoxLabelChanged"] }, { kind: "component", type: TsiCardListComponent, selector: "Tsi-card-list", inputs: ["cardBusinessClass", "header", "id", "page", "page$", "overflowActionsMenu", "selectKeyOnly", "key"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiImageDisplayComponent, selector: "tsi-image-display", inputs: ["src", "alt", "width", "height", "isRounded", "headerTitles"] }, { kind: "component", type: TsiKanbanComponent, selector: "Tsi-kanban", inputs: ["cardBusinessClass", "header", "id", "page$", "crudService", "overflowActionsMenu", "selectKeyOnly", "key", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiCalenderComponent, selector: "tsi-calender", inputs: ["crudService", "schema", "eventsData", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton"], outputs: ["eventClick", "dateRangeChange"] }, { kind: "component", type: TsiKanbanWorkflowEtatComponent, selector: "Tsi-kanban-workflow-etat", inputs: ["cardBusinessClass", "header", "id", "page$", "descriminatorValue", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]:not(tsi-tab-panel)", inputs: ["presentationDesigner", "presentationDesignerBase"] }, { kind: "component", type: DisplayNestedPropComponent, selector: "Tsi-Display-Nested-Prop", inputs: ["id", "displayValue", "sourceUrl"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('slideInOut', [
                 state('in', style({
                     height: '*',
@@ -11732,7 +12095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             transition('in <=> out', animate('600ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
                         ])
                     ], template: "<div class=\"grid\">\r\n\r\n  <div class=\"col-12\" [@slideInOut]=\"showSearchField ? 'in' : 'out'\" *ngIf=\"showGlobalSearch\">\r\n    <tsi-search-box \r\n      [isRtlMode]=\"isRtlMode\" \r\n      [(searchFields)]=\"searchFields\" \r\n      [businessClass]=\"businessClass\"\r\n      [entityInfo]=\"entityInfo\"\r\n      [statusMetadata]=\"statusMetadata\"\r\n      [descriminatorValue]=\"descriminatorValue\"\r\n      (searchFieldsChange)=\"searchFieldsValueChanges($event)\" \r\n      (keywordValueChanged)=\"keywordValueChanged($event)\"\r\n      (searchFieldsApplied)=\"search($event)\"\r\n      (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n      (workflowEtatFilterChanged)=\"onWorkflowEtatFilterChanged($event)\"\r\n      (comboBoxLabelChanged)=\"comboBoxLabelChanged($event)\">\r\n    </tsi-search-box>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === false && _showCardView === false && _showKanbanView === false\" class=\"col-12\">\r\n    \r\n    <p-table #dt \r\n      [lazy]=\"isGridDataPagedInApi\" \r\n      [lazyLoadOnInit]=\"searchOnInit\" \r\n      [totalRecords]=\"page.totalCount\" \r\n      [loading]=\"page.loading\" \r\n      [reorderableColumns]=\"true\"\r\n      [resizableColumns]=\"true\" \r\n      [columns]=\"selectedColumns\" \r\n      [value]=\"page.items\"\r\n      [paginator]=\"true\" \r\n      [scrollable]=\"true\" \r\n      [(rows)]=\"page.pageSize\"\r\n      [showCurrentPageReport]=\"true\" \r\n      [globalFilterFields]=\"fields()\" \r\n      [tableStyle]=\"tableStyle\"\r\n      [rowsPerPageOptions]=\"[1, 10, 25, 50]\" \r\n      [sortMode]=\"sortMode\"\r\n      [multiSortMeta]=\"sortMetas\" \r\n      [selectAll]=\"selectAll\"\r\n      [selectionMode]=\"selectionMode\" \r\n      [(selection)]=\"selection\" \r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      (onRowUnselect)=\"onSelectedItemsChanged()\"\r\n      (selectAllChange)=\"onSelectAllChange($event)\" \r\n      (onRowSelect)=\"onSelectedItemsChanged()\"\r\n      (onColResize)=\"onColResize($event)\"\r\n      columnResizeMode=\"expand\"\r\n      dataKey=\"{{ key }}\" \r\n      scrollHeight=\"600px\" \r\n      styleClass=\"p-datatable-gridlines\" \r\n      currentPageReportTemplate=\"{{ 'Showing' | localize }} {{getFirstElementIndex()}} {{\r\n        'to' | localize\r\n      }} {last} {{ 'of' | localize }} \r\n      {totalRecords} {{ 'entries' | localize }}\" \r\n      >\r\n\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex justify-content-between align-items-center\">\r\n          <div class=\"ml-2\">\r\n            {{ header | localize }}\r\n          </div>\r\n\r\n          <div class=\"p-1 flex align-items-center\">\r\n            <div *ngIf=\"showFilterButton\" presentationDesignerBase=\"grid_toggle_header_filters\">\r\n              <Tsi-Button [icon]=\"filterIcon\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"filterTooltip\"\r\n                styleClass=\"p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"toggleHeaderFilters()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showHeaderFilters\" presentationDesignerBase=\"grid_toggle_header_filter_mode\">\r\n              <Tsi-Button [icon]=\"filterModeIcon\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n                [tooltipText]=\"filterModeTooltip\" [styleClass]=\"'ml-1 p-button-primary p-button-icon-only'\"\r\n                (click)=\"toggleHeaderFiltersMode()\"></Tsi-Button>\r\n            </div>\r\n\r\n            <div presentationDesignerBase=\"grid_clear_filter_button\">\r\n              <Tsi-Button [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"'icon-clear-filter'\"\r\n                styleClass=\"ml-1 p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n                (click)=\"onClearFilters()\" icon=\"pi pi-eraser\">\r\n              </Tsi-Button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showExportButton\" presentationDesignerBase=\"grid_export_button\">\r\n              <Tsi-Button icon=\"p-button-icon pi pi-file-excel\" (onClick)=\"exportExcel()\"\r\n                styleClass=\"p-element p-button-success hover:shadow-6 ml-2 p-1 p-button p-component p-button-icon-only\"\r\n                [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"XLS\"></Tsi-Button>\r\n            </div>\r\n\r\n            <p-multiSelect class=\"ml-1\" [options]=\"columns\" [ngModel]=\"selectedColumns\" optionLabel=\"translatedHeader\"\r\n              selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" [style]=\"{ 'min-width': '180px' }\"\r\n              placeholder=\"{{ 'choose_columns' | localize }}\" (ngModelChange)=\"onSelectedColumnsChange($event)\">\r\n            </p-multiSelect>\r\n          </div>\r\n\r\n          <!-- <div> -->\r\n          <!-- <button *ngIf=\"showGlobalSearch\" type=\"button\" pButton pRipple icon=\"pi pi-search\" (click)=\"search()\"></button> -->\r\n          <!-- </div> -->\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          <th [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\"\r\n            [ngClass]=\"page.loading ? 'no-z-index' : 'z-1'\" *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n            <div class=\"flex align-items-center justify-content-center\">\r\n              <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </div>\r\n          </th>\r\n          \r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <th *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\"\r\n              scope=\"col\" [attr.data-field]=\"col.field\" [style]=\"col.style\" pTooltip=\"{{ col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n              [pSortableColumn]=\"(!col.isButton || !isOverflowColumn(col.field) || !(col.type == displayTypes.IMAGE_DISPLAY)) ? \r\n              col.field : null\"\r\n              [pResizableColumnDisabled]=\"col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)\"\r\n              [tooltipDisabled]=\"col.isButton || isOverflowColumn(col.field)\" \r\n              [pReorderableColumnDisabled]=\"col.isButton || isOverflowColumn(col.field)\" pReorderableColumn\r\n              pResizableColumn [ngStyle]=\"getHeaderColumnStyle(col)\"\r\n              [class.disabled-column]=\"col.isButton || isOverflowColumn(col.field) || col.type === displayTypes.IMAGE_DISPLAY\"\r\n              [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n              [ngClass]=\"[\r\n                getHeaderClassColor(col.type),\r\n                (col.isButton || isOverflowColumn(col.field)) ? 'w-1rem' : '',\r\n                (col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)) ? 'non-resizable-column' : '',\r\n                ]\">\r\n\r\n              <ng-container *ngIf=\"notInSpecifiedColumn(col.field)\">\r\n                <span>\r\n                  <table class=\"p-0 m-0\">\r\n                    <tr>\r\n                      <td class=\"col p-0 m-0\" [ngClass]=\"{'w-1rem': col.isButton}\">\r\n                          {{ col.header | localize }}\r\n                      </td>\r\n                      <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\">\r\n                        <p-sortIcon \r\n                          *ngIf=\"col.type !== displayTypes.IMAGE_DISPLAY\"\r\n                          class=\"w-1rem m-0 p-0\"\r\n                          field=\"{{ col.field }}\"\r\n                          ></p-sortIcon>\r\n                      </td>\r\n                    </tr>\r\n                  </table>\r\n                </span>\r\n              </ng-container>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n\r\n        <tr *ngIf=\"showHeaderFilters\">\r\n          <!-- <th scope=\"col\" style=\"width:3rem\"></th>\r\n                        <th scope=\"col\" style=\"width:3rem\"></th> -->\r\n          <th [ngClass]=\"page.loading ? 'no-z-index' : ''\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n            style=\"width: 4rem\"></th>\r\n\r\n          <ng-container *ngFor=\"let col of columns\">\r\n            <ng-container *ngIf=\"col.actionDisplay != actionPlacement.Overflow\">\r\n              <th style=\"overflow: inherit\" scope=\"col\">\r\n                <ng-container *ngIf=\"!col.isButton && col.field != overflowColumnField ; else filterLessColumn\">\r\n                  <ng-container [ngSwitch]=\"col.type\">\r\n\r\n                    <!-- DATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDate [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDate.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDate.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DATETIME -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DATETIME_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'date'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.DATE_IS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <p-calendar #calDateTime [ngModel]=\"value\" appendTo=\"body\"\r\n                            (onSelect)=\"filter($event)\"\r\n                            (onBlur)=\"filter(calDateTime.value)\"\r\n                            (onClearClick)=\"filter(null)\"\r\n                            (keydown.enter)=\"filter(calDateTime.value)\">\r\n                          </p-calendar>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY SOCIETE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Societe-Input #currSocieteInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currSocieteInput.inputField)\">\r\n                          </Tsi-Currency-Societe-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- CURRENCY OTHER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Currency-Other-Input #currOtherInput [inputField]=\"value\" [currency]=\"col.currencyOtherCode\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(currOtherInput.inputField)\">\r\n                          </Tsi-Currency-Other-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- INTEGER -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.INTEGER_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Integer #integerInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(integerInput.inputField)\">\r\n                          </Tsi-Integer>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DECIMAL -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.DECIMAL_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Decimal-Input #decimalInput [inputField]=\"value\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(decimalInput.inputField)\">\r\n                          </Tsi-Decimal-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- RATE -->\r\n                    <ng-container *ngSwitchCase=\"displayTypes.RATE_DISPLAY\">\r\n                      <p-columnFilter [type]=\"'numeric'\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                        <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                          <Tsi-Rate-Input #rateInput [inputField]=\"value\" [isFraction]=\"col.isFraction\"\r\n                            (inputFieldChange)=\"filter($event)\"\r\n                            (keydown.enter)=\"filter(rateInput.inputField)\">\r\n                          </Tsi-Rate-Input>\r\n                        </ng-template>\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                    <!-- DEFAULT (text, boolean, or any unhandled type) -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <p-columnFilter [type]=\"col.filterInputType\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n                        [minFractionDigits]=\"col.numOfDecimal\" [maxFractionDigits]=\"col.numOfDecimal\"\r\n                        [showButtons]=\"false\" [matchMode]=\"filterMatchMode.EQUALS\">\r\n                      </p-columnFilter>\r\n                    </ng-container>\r\n\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-template #filterLessColumn></ng-template>\r\n              </th>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </tr>\r\n        \r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n\r\n        <!-- CASE : multiple selection -->\r\n        <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\" *ngIf=\"\r\n            selectionMode == multipleGridSelectionMode;\r\n            else notMultipleSelectionModeBlock\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event,item)\" (dragenter)=\"onDragEnter($event)\"\r\n                    (dragleave)=\"onDragLeave($event)\">\r\n          <td [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\">\r\n              <div class=\"flex align-items-center justify-content-center\">\r\n                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n              </div>\r\n          </td>\r\n          <!-- <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n                            (click)=\"edit(item)\"></button>\r\n                    </div>\r\n                </td>\r\n                <td class=\"p-1\">\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n                            class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n                    </div>\r\n                </td> -->\r\n                \r\n          <ng-container *ngFor=\"let col of columns\">\r\n\r\n            <td  *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\" [class.tsi-col-wrap]=\"shouldWrapColumn(col)\" [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n              >\r\n\r\n              <!-- style=\"height: min-content; margin-left: -.5rem;\" -->\r\n              <!-- Tsi-Currency-Societe-Input -->\r\n\r\n              <div *ngIf=\"\r\n                  col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                  else currencyOtherOutputBlock\r\n                \">\r\n                <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                </Tsi-Currency-Societe-Display>\r\n              </div>\r\n\r\n              <!-- Tsi-Currency-Other-Input -->\r\n              <ng-template #currencyOtherOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                    else datePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Date-Picker -->\r\n              <ng-template #datePickerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DATE_DISPLAY;\r\n                    else dateTimePickerOutputBlock\r\n                  \">\r\n                  <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Date-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n              <!-- Tsi-CheckBox -->\r\n              <ng-template #checkBoxOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                    else decimalOutputBlock\r\n                  \">\r\n                  <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Checkbox-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Decimal-Input -->\r\n              <ng-template #decimalOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.DECIMAL_DISPLAY;\r\n                    else integerOutputBlock\r\n                  \">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Integer -->\r\n              <ng-template #integerOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.INTEGER_DISPLAY;\r\n                    else rateOutputBlock\r\n                  \">\r\n                  <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                  </Tsi-Integer-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- Tsi-Rate-Input -->\r\n              <ng-template #rateOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.RATE_DISPLAY;\r\n                    else displayNestedPropOutputBlock\r\n                  \">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                  </Tsi-Rate-Display>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayNestedPropOutputBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                    else displayStatusColorBlock\r\n                  \">\r\n                  <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                    [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                  </Tsi-Display-Nested-Prop>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusColorBlock>\r\n                <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                  </div> \r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <ng-template #displayStatusValueColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                          class=\"px-2 py-1 font-bold status-badge\"\r\n                          [style.background-color]=\"opt.colorHex\"\r\n                          [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                          [ngClass]=\"{\r\n                              'text-black bg-white': !opt.colorHex,\r\n                              'text-white': opt.colorHex\r\n                            }\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                          class=\"px-2 py-1 font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-status-column -->\r\n              <ng-template #displayStatusColumnBlock>\r\n                <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                  <div class=\"align-items-center justify-content-center p-2\">\r\n                    <!--<p-tag \r\n                        [value]=\"item[col.field]\"\r\n                        [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                    </p-tag>-->\r\n\r\n                        <span\r\n                          *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                          class=\"font-bold status-badge\"\r\n                          [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                          [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                          [style.padding-top]=\"'0.1rem'\"\r\n                          [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                          {{ opt.translatedLabel }}\r\n                        </span>\r\n                        <span\r\n                          *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n                          class=\"font-bold status-badge\">\r\n                          {{ item[col.field] }}\r\n                        </span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-nested-prop -->\r\n              <ng-template #displayButtonBlock>\r\n                <ng-container *ngIf=\"col.isButton; else displayImage\" >\r\n                  <div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n                    <Tsi-Button  [styleClass]=\"col.styleClass\" type=\"button\"\r\n                      icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                      [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n                      (click)=\"buttonClicked(item, col.field)\" ></Tsi-Button>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-image -->\r\n              <ng-template #displayImage>\r\n                <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                  <div class=\"h-2rem\">\r\n                    <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                      [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                      [width]=\"'100%'\" [height]=\"'100%'\">\r\n                    </tsi-image-display>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-icon (file-type logo) -->\r\n              <ng-template #displayIconBlock>\r\n                <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                  <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                    <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                      [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                      style=\"font-size: 1.25rem\"></i>\r\n                    <span>{{ item[col.field] }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-template>\r\n\r\n              <!-- display-text-eye -->\r\n              <ng-template #displayTextEyeBlock>\r\n                <ng-container *ngIf=\"\r\n                    col.type == displayTypes.TEXT_DISPLAY;\r\n                    else moreActionsBlock\r\n                  \">\r\n                  <span>\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>\r\n                    {{ item[col.field] }}\r\n                  </span>\r\n                </ng-container>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n                    class=\"drag-message cursor-follow\">\r\n                    {{ \"Jointure\" | localize }}\r\n                  </div>\r\n        </tr>\r\n                          \r\n        <!-- CASE : single or none selection -->\r\n        <ng-template #notMultipleSelectionModeBlock>\r\n          <ng-container>\r\n            <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\"\r\n              [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"index\" id=\"tsi-grid-row-{{index}}\">\r\n\r\n              <ng-container *ngFor=\"let col of columns\">\r\n\r\n                <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"getBodyColumnStyle(col)\"\r\n                  [class.tsi-col-wrap]=\"shouldWrapColumn(col)\"\r\n                  style=\"height: min-content;\"\r\n                  [ngClass]=\"{\r\n                    'w-1rem': col.isButton,\r\n                    'bg-white': col.isButton\r\n                  }\">\r\n\r\n                  <div *ngIf=\"\r\n                      col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n                      else currencyOtherOutputBlock\r\n                    \">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                  </div>\r\n\r\n                  <!-- Tsi-Currency-Other-Input -->\r\n                  <ng-template #currencyOtherOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n                        else datePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Currency-Other-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #datePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATE_DISPLAY;\r\n                        else dateTimePickerOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Date-Picker -->\r\n                  <ng-template #dateTimePickerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DATETIME_DISPLAY;\r\n                        else checkBoxOutputBlock\r\n                      \">\r\n                      <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n                      </Tsi-Date-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <!-- Tsi-CheckBox -->\r\n                  <ng-template #checkBoxOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.CHECKBOX_DISPLAY;\r\n                        else decimalOutputBlock\r\n                      \">\r\n                      <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Checkbox-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Decimal-Input -->\r\n                  <ng-template #decimalOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.DECIMAL_DISPLAY;\r\n                        else integerOutputBlock\r\n                      \">\r\n                      <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n                        [numOfDecimal]=\"col.numOfDecimal\">\r\n                      </Tsi-Decimal-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Integer -->\r\n                  <ng-template #integerOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.INTEGER_DISPLAY;\r\n                        else rateOutputBlock\r\n                      \">\r\n                      <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n                      </Tsi-Integer-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- Tsi-Rate-Input -->\r\n                  <ng-template #rateOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.RATE_DISPLAY;\r\n                        else displayNestedPropOutputBlock\r\n                      \">\r\n                      <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n                      </Tsi-Rate-Display>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayNestedPropOutputBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n                        else displayStatusColorBlock\r\n                      \">\r\n                      <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n                        [displayValue]=\"col.displayNestedPropertylabelField\">\r\n                      </Tsi-Display-Nested-Prop>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <ng-template #displayStatusColorBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                            <span\r\n                              class=\"px-2 py-1 rounded text-white text-sm\"\r\n                              [style.background-color]=\"item[col.field]\">\r\n                                {{item[col.field]}}\r\n                            </span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n\r\n                  <ng-template #displayStatusValueColumnBlock>\r\n                      <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n                        <div class=\"align-items-center justify-content-center p-2\">\r\n                          <!--<p-tag \r\n                              [value]=\"item[col.field]\"\r\n                              [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                          </p-tag>-->\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n                                class=\"px-2 py-1 font-bold status-badge\"\r\n                                [style.background-color]=\"opt.colorHex\"\r\n                                [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n                                [ngClass]=\"{\r\n                                    'text-black bg-white': !opt.colorHex,\r\n                                    'text-white': opt.colorHex\r\n                                  }\"\r\n                                >\r\n                                {{ opt.translatedLabel }}\r\n                              </span>\r\n                              <span\r\n                                *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n                                class=\"px-2 py-1 font-bold status-badge\">\r\n                                {{ item[col.field] }}\r\n                              </span>\r\n                        </div>\r\n                      </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-status-prop -->\r\n                  <ng-template #displayStatusColumnBlock>\r\n                    <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n                      <div class=\"align-items-center justify-content-center p-2\">\r\n                        <!--<p-tag \r\n                          [value]=\"item[col.field]\"\r\n                          [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n                        </p-tag>-->\r\n\r\n                        <span\r\n                            *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n                            class=\"status-badge font-bold\"\r\n                            [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n                            [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n                            [style.padding-top]=\"'0.1rem'\"\r\n                            [style.padding-bottom]=\"'0.1rem'\"\r\n                          >\r\n                            {{ opt.translatedLabel }}\r\n                          </span>\r\n                          <span\r\n                            *ngIf=\"statusMetadata &&  !getStatusOption(item[col.field])\"\r\n                            class=\"status-badge font-bold\">\r\n                            {{ item[col.field] }}\r\n                        </span>\r\n                        \r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                  \r\n                  <!-- display-nested-prop -->\r\n                  <ng-template #displayButtonBlock>\r\n                    <ng-container *ngIf=\"col.isButton; else displayImage\">\r\n                      <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n                        [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n                        class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n                        <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n                          [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n                          (click)=\"buttonClicked(item, col.field)\"\r\n                          [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-image -->\r\n                  <ng-template #displayImage>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayIconBlock\">\r\n                      <div class=\"h-2rem\">\r\n                        <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n                          [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n                          [width]=\"'100%'\" [height]=\"'100%'\">\r\n                        </tsi-image-display>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-icon (file-type logo) -->\r\n                  <ng-template #displayIconBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.ICON_DISPLAY; else displayTextEyeBlock\">\r\n                      <div *ngIf=\"item[col.field]\" class=\"flex align-items-center justify-content-center gap-2\">\r\n                        <i [class]=\"getFileTypeIconClass(item[col.field])\"\r\n                          [style.color]=\"getFileTypeIconColor(item[col.field])\"\r\n                          style=\"font-size: 1.25rem\"></i>\r\n                        <span>{{ item[col.field] }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </ng-template>\r\n\r\n                  <!-- display-text-eye -->\r\n                  <ng-template #displayTextEyeBlock>\r\n                    <ng-container *ngIf=\"\r\n                        col.type == displayTypes.TEXT_DISPLAY;\r\n                        else moreActionsBlock\r\n                      \">\r\n                      <span>\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>\r\n                        {{ item[col.field] }}\r\n                      </span>\r\n                    </ng-container>\r\n                  </ng-template>\r\n                </td>\r\n\r\n              </ng-container>\r\n            </tr>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"footer\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == multipleGridSelectionMode\"></td>\r\n\r\n          <ng-container *ngFor=\"let col of selectedColumns\">\r\n            <td class=\"pr-0\" *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\">\r\n              <div *ngIf=\"col.showSummary\">\r\n                <!-- CURRENCY_SOCIETE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n                  <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Societe-Display>\r\n                </div>\r\n\r\n                <!-- INTEGER_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.INTEGER_DISPLAY\">\r\n                  <Tsi-Integer-Display [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Integer-Display>\r\n                </div>\r\n\r\n                <!-- RATE_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.RATE_DISPLAY\">\r\n                  <Tsi-Rate-Display [isFraction]=\"col.isFraction ?? false\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Rate-Display>\r\n                </div>\r\n\r\n                <!-- DECIMAL_DISPLAY -->\r\n                <div *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY\">\r\n                  <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col.field)\"\r\n                    [numOfDecimal]=\"col.numOfDecimal\">\r\n                  </Tsi-Decimal-Display>\r\n                </div>\r\n\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n                  <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col.field)\">\r\n                  </Tsi-Currency-Other-Display>\r\n                </div>\r\n              </div>\r\n            </td>\r\n          </ng-container>  \r\n        </tr>\r\n      </ng-template>\r\n      \r\n      <ng-template pTemplate=\"summary\">\r\n        {{ page.totalCount }} {{ \"records_label\" | localize }}\r\n        <span *ngIf=\"colorful\">\r\n          <span>View Grid</span>\r\n          <span class=\"pl-2\">| SearchOnInit : {{ searchOnInit }}</span>\r\n          <span class=\"pl-2\">| Pagination In Api : {{ isGridDataPagedInApi }}</span>\r\n        </span>\r\n      </ng-template>\r\n    </p-table>\r\n\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCalenderView === true\" class=\"col-12\">\r\n    <tsi-calender \r\n  [schema]=\"calenderSchema\" \r\n  [eventsData]=\"page.items\" \r\n  [crudService]=\"crudService\"\r\n  [showInfoButton]=\"showInfoButton\"\r\n  [showDownloadButton]=\"showDownloadButton\"\r\n  [showUploadButton]=\"showUploadButton\"\r\n  [showNoteButton]=\"showNoteButton\"\r\n  [showActionButton]=\"showActionButton\"\r\n  (dateRangeChange)=\"handleDateRangeChange($event)\" \r\n  (eventClick)=\"handleCalendarEventClick($event)\">\r\n</tsi-calender>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showCardView === true\" class=\"col-12\">\r\n    <Tsi-card-list [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\"[selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\">\r\n    </Tsi-card-list>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && !_showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\" [crudService]=\"crudService\"\r\n      [selectKeyOnly]=\"selectKeyOnly\" [key]=\"key\" [overflowActionsMenu]=\"overflowActionsMenu\">\r\n    </Tsi-kanban>\r\n  </div>\r\n\r\n  <div *ngIf=\"_showKanbanView === true && _showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n    <Tsi-kanban-workflow-etat [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n      [page$]=\"page$\" [page]=\"page\" [descriminatorValue]=\"descriminatorValue\" (callSearch)=\"callSearchHandler($event)\">\r\n    </Tsi-kanban-workflow-etat>\r\n  </div>\r\n\r\n  <div *ngIf=\"isAdvancedSearch && selectionMode == multipleGridSelectionMode\">\r\n    <Tsi-Modal-Footer [showSaveAndCloseButton]=\"false\" (onSaveClick)=\"onConfirmSelection()\" (onCancelClick)=\"onCancelSelection()\" />\r\n  </div>\r\n</div>", styles: [".p-button.p-button-icon-only.p-button-rounded{border-radius:50%;height:1rem}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.p-inputgroup.rtl-mode .p-inputgroup-addon:last-child,.p-inputgroup.rtl-mode button:last-child,.p-inputgroup.rtl-mode input:last-child,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:6px 0 0 6px/6px 0px 0px 6px!important}.p-inputgroup.ltr-mode .p-inputgroup-addon:last-child,.p-inputgroup.ltr-mode button:last-child,.p-inputgroup.ltr-mode input:last-child,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:0 6px 6px 0/0px 6px 6px 0px!important}.p-paginator .p-dropdown{height:auto;border:none;border-bottom:1px solid}.p-datatable .frozen-column{position:sticky;left:0;z-index:1;background:#fff}.frozen-column-ltr-mode{min-width:2rem;position:sticky;left:0;background-color:#fff}.frozen-column-rtl-mode{min-width:2rem;position:sticky;right:0;background-color:#fff}.disabled-column{background-color:#f5f5f5;color:#d3d3d3;pointer-events:none}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:max-content;width:100%;text-align:center;white-space:nowrap;border-radius:.4rem;padding:.1rem .2rem;font-weight:600;line-height:1.2;color:#fff;box-shadow:0 1px 2px #0000000d;transition:all .2s ease-in-out;cursor:default;transform-origin:top center;border-top-left-radius:inherit;border-bottom-right-radius:inherit}.status-badge:hover{transform:scale(1.06);box-shadow:0 2px 4px #0000001a;filter:brightness(1.2)}td span,td div{padding:0 .5rem}.tsi-col-wrap,.tsi-col-wrap>span:not(.status-badge),.tsi-col-wrap>div:not(.status-badge){white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}td.tsi-col-wrap>span:not(.status-badge),td.tsi-col-wrap>div:not(.status-badge){display:inline-block}.custom-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.button-icon{width:1.5rem;height:1.5rem}.custom-button:hover{background-color:#f0f0f0}table{width:100%!important}.right-to-left{text-align:start}::ng-deep th.non-resizable-column .p-column-resizer{display:none!important;pointer-events:none!important}::ng-deep .cursor-follow{position:fixed;background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.85rem;z-index:1000;pointer-events:none;white-space:nowrap}::ng-deep .overflow-menu.p-menu-overlay{border-radius:8px;border:none;padding:.4rem;min-width:0!important;background:#fff;box-shadow:0 8px 24px #0000001f;animation:fadeScaleIn .12s ease-out}::ng-deep .overflow-menu .p-menuitem-link{overflow:visible!important;position:relative;padding:0}::ng-deep .overflow-menu-item{padding:.55rem .75rem;border-radius:8px;gap:.5rem;font-size:.85rem;white-space:nowrap;transition:all .15s ease}::ng-deep .overflow-menu-item:hover{background-color:#f5f7fa}::ng-deep .menu-icon{font-size:.9rem;width:18px;text-align:center;opacity:.8}::ng-deep .menu-label{font-weight:400}::ng-deep .overflow-btn{width:28px;height:28px;padding:0}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}::ng-deep .overflow-menu .p-badge{font-size:.55rem;min-width:.9rem;height:.9rem;line-height:.9rem;font-family:inherit}::ng-deep .badge-icon.has-badge{transition:transform .2s ease-in-out;display:inline-block;position:relative;z-index:2}::ng-deep .badge-icon.has-badge:hover{transform:scale(1.4);z-index:10}\n"] }]
-        }], ctorParameters: () => [{ type: StatusColorService }, { type: FichierService }, { type: HtmlTemplateGeneratorService }, { type: i1$1.DatePipe }, { type: TsiNotificationService }, { type: LocalizePipe }, { type: LayoutHelperService }, { type: LayoutService }, { type: i2$2.PrimeNGConfig }, { type: AppSettingsService }, { type: ErrorResponseManagerService }, { type: i0.EnvironmentInjector }, { type: i1$3.DynamicDialogConfig }, { type: i1$3.DynamicDialogRef }], propDecorators: { cudComponent: [{
+        }], ctorParameters: () => [{ type: StatusColorService }, { type: FichierService }, { type: HtmlTemplateGeneratorService }, { type: i1$1.DatePipe }, { type: TsiNotificationService }, { type: LocalizePipe }, { type: LayoutHelperService }, { type: LayoutService }, { type: i2$1.PrimeNGConfig }, { type: AppSettingsService }, { type: ErrorResponseManagerService }, { type: i0.EnvironmentInjector }, { type: i1$3.DynamicDialogConfig }, { type: i1$3.DynamicDialogRef }], propDecorators: { cudComponent: [{
                 type: Input
             }], modalSize: [{
                 type: Input
@@ -12507,7 +12870,7 @@ 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: FichierService }, { 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", cudComponent: "cudComponent", httpMethodType: "httpMethodType", requestData: "requestData", customReportingMode: "customReportingMode", pagedRequest: "pagedRequest", reportDiscriminator: "reportDiscriminator", nombreDocumentsJoints: "nombreDocumentsJoints", id: "id", configModeButtonId: "configModeButtonId", selectedItemUids: "selectedItemUids", fromTsiForm: "fromTsiForm", customSendMailMode: "customSendMailMode", reportingInformation: "reportingInformation" }, outputs: { onSave: "onSave", refreshData: "refreshData", closedModalFileUpload: "closedModalFileUpload", toggleDesignMode: "toggleDesignMode" }, 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\"\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=\"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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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]", 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", cudComponent: "cudComponent", httpMethodType: "httpMethodType", requestData: "requestData", customReportingMode: "customReportingMode", pagedRequest: "pagedRequest", reportDiscriminator: "reportDiscriminator", nombreDocumentsJoints: "nombreDocumentsJoints", id: "id", configModeButtonId: "configModeButtonId", selectedItemUids: "selectedItemUids", fromTsiForm: "fromTsiForm", customSendMailMode: "customSendMailMode", reportingInformation: "reportingInformation" }, outputs: { onSave: "onSave", refreshData: "refreshData", closedModalFileUpload: "closedModalFileUpload", toggleDesignMode: "toggleDesignMode" }, 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\"\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=\"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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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,
@@ -12911,7 +13274,7 @@ class TsiViewGridComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiViewGridComponent, deps: [{ token: ErrorResponseManagerService }, { token: TsiModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiViewGridComponent, selector: "tsi-view-grid", inputs: { columns: "columns", gridConfiguration: "gridConfiguration", viewComponent: "viewComponent", crudService: "crudService", header: "header", modalSize: "modalSize", showConsultButton: "showConsultButton", showSearchField: "showSearchField", searchFields: "searchFields", formEndpoint: "formEndpoint", formName: "formName", id: "id", showImportExportButton: "showImportExportButton", targetBusinessClass: "targetBusinessClass", getDataFromApi: "getDataFromApi", gridData: "gridData", isSearchButtonDisabled: "isSearchButtonDisabled", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", key: "key", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showCalenderView: "showCalenderView", showHeaderFilters: "showHeaderFilters", showFilterButton: "showFilterButton", selectAll: "selectAll", checkedByField: "checkedByField", sortMode: "sortMode", sizingMode: "sizingMode", searchOnInit: "searchOnInit" }, outputs: { summariesChange: "summariesChange", selectedItemsChange: "selectedItemsChange", buttonColumnClicked: "buttonColumnClicked", searchFieldsValueChanged: "searchFieldsValueChanged", getAllPagedResultChanged: "getAllPagedResultChanged" }, viewQueries: [{ propertyName: "genericGridComponent", first: true, predicate: TsiGenericGridComponent, descendants: true }], ngImport: i0, template: "<div class=\"card\">\r\n  \r\n  <p-toolbar *ngIf=\"formEndpoint\" styleClass=\"border-radius-7 mb-1 flex align-items-center gap-2\">\r\n    <ng-template pTemplate=\"left\">\r\n      <div class=\"flex gap-2 ml-2\">\r\n        <Tsi-Button  icon=\"pi pi-sliders-h\" [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_tsi_component_grid_menu_view\" *ngIf=\"searchFields\"\r\n        styleClass=\"h-2rem hover:shadow-6 p-button-icon-only {{showSearchField ? 'p-button-secondary' : 'p-button-success'}}\" \r\n          (click)=\"displaySearchFields()\">\r\n        </Tsi-Button>\r\n        <Tsi-Button icon=\"p-button-icon pi pi-calendar {{showCalenderView ? 'pi pi-align-justify' : 'pi pi-calendar'}}\" \r\n        styleClass=\"p-element p-button-primary hover:shadow-6 h-2rem p-button p-component p-button-icon-only\" (click)=\"toggleCalenderView()\" \r\n        tooltipText=\"{{(showCalenderView ? 'shared_tsi_component_grid_list_view' : 'shared_tsi_component_grid_calender_view') | localize}}\" [tooltipPosition]=\"tooltipPosition.Top\"></Tsi-Button>\r\n      </div>\r\n    </ng-template>\r\n    \r\n    <ng-template pTemplate=\"right\">\r\n        <app-reporting *ngIf=\"formEndpoint || businessClass\"\r\n          [formEndpoint]=\"formEndpoint\"\r\n          [formName]=\"formName\"\r\n          [formEndpointBody]=\"formEndpointBody\"\r\n          [isFormEndpointPaged]=\"true\"\r\n          [showImportExportButton]=\"showImportExportButton\"\r\n          (refreshData)=\"refresh($event)\"\r\n          [filtersHtmlTemplate]=\"filtersHtmlTemplate\"\r\n          [businessClass]=\"businessClass\"\r\n          [pagedRequest]=\"pagedRequest\"\r\n          [configModeButtonId]=\"configModeButtonId\"\r\n          [showNoteButton]=\"false\"\r\n          [showActionButton]=\"false\"\r\n          [showInfoButton]=\"false\"\r\n          [showUploadButton]=\"false\"\r\n          [selectedItemUids]=\"selectedItems\"\r\n          ></app-reporting>\r\n    </ng-template>\r\n  </p-toolbar>\r\n  \r\n  <div>\r\n\r\n    <Tsi-Generic-Grid \r\n      [formName]=\"formName\" \r\n      [header]=\"header\" \r\n      [page]=\"page\" \r\n      [pagedRequest]=\"pagedRequest\" \r\n      [columns]=\"columns\"\r\n      [searchFields]=\"searchFields\" \r\n      [showSearchField]=\"showSearchField\" \r\n      (load)=\"load($event)\"\r\n      (searchFieldsValueChanged)=\"searchFieldsValueChanges($event)\"\r\n      (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n      [(filtersHtmlTemplate)]=\"filtersHtmlTemplate\"\r\n      [selectKeyOnly]=\"selectKeyOnly\"\r\n      [selectionMode]=\"selectionMode\"\r\n      [showImportExportButton]=\"showImportExportButton\"\r\n      [key]=\"key\"\r\n      [crudService]=\"crudService\"\r\n      [(selectedItems)]=\"selectedItems\"\r\n      (selectedItemsChange)=\"onSelectedItemsChange($event)\"\r\n      [isGridDataPagedInApi]=\"getDataFromApi\"\r\n      [searchOnInit]=\"searchOnInit\"\r\n      [showExportButton]=\"showExportButton\"\r\n      [showHeaderFilters]=\"showHeaderFilters\"\r\n      [showFilterButton]=\"showFilterButton\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\r\n      [showCalenderView]=\"showCalenderView\"\r\n      (calendarEventClick)=\"handleCalendarEventClick($event)\"\r\n      [selectAll]=\"selectAll\"\r\n      [checkedByField]=\"checkedByField\"\r\n      [targetBusinessClass]=\"targetBusinessClass\"\r\n      [sortMode]=\"sortMode\"\r\n      [sizingMode]=\"sizingMode\"\r\n      ></Tsi-Generic-Grid>\r\n  </div>\r\n</div>", styles: [".hide-search-fields{background-color:#64748b!important;border-color:#64748b!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: ["cudComponent", "modalSize", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton", "sizingMode", "formName", "id", "pagedRequest", "configuration", "page", "key", "columns", "isSearchButtonDisabled", "filteredColumns", "gridData", "isTableLoading", "parent", "showSearchBox", "showActionColumn", "showHeaderFilters", "showFilterButton", "isGridDataPagedInApi", "header", "ShowFilterColumns", "showImportExportButton", "crudService", "searchFields", "sortMode", "filtersHtmlTemplate", "presentationSettings", "selectKeyOnly", "selectionMode", "selectedItems", "searchOnInit", "showGlobalSearch", "showExportButton", "showSearchField", "showCalenderView", "calenderSchema", "showCardView", "showKanbanView", "showKanbanViewOfWorkFlowEtat", "page$", "checkedByField", "selectAll", "targetBusinessClass", "descriminatorValue", "businessClass", "entityInfo"], outputs: ["onSave", "editRow", "deleteRow", "load", "buttonColumnClicked", "filtersHtmlTemplateChange", "selectedItemsChange", "searchFieldsValueChanged", "calendarEventClick", "statusFilterChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: ReportingComponent, selector: "app-reporting", inputs: ["showImportExportButton", "showNoteButton", "showInfoButton", "showUploadButton", "showActionButton", "isReportingToolbarDisabled", "formName", "formEndpoint", "formEndpointBody", "isFormEndpointPaged", "filtersHtmlTemplate", "optionalEndpoints", "businessClass", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiViewGridComponent, selector: "tsi-view-grid", inputs: { columns: "columns", gridConfiguration: "gridConfiguration", viewComponent: "viewComponent", crudService: "crudService", header: "header", modalSize: "modalSize", showConsultButton: "showConsultButton", showSearchField: "showSearchField", searchFields: "searchFields", formEndpoint: "formEndpoint", formName: "formName", id: "id", showImportExportButton: "showImportExportButton", targetBusinessClass: "targetBusinessClass", getDataFromApi: "getDataFromApi", gridData: "gridData", isSearchButtonDisabled: "isSearchButtonDisabled", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", key: "key", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showCalenderView: "showCalenderView", showHeaderFilters: "showHeaderFilters", showFilterButton: "showFilterButton", selectAll: "selectAll", checkedByField: "checkedByField", sortMode: "sortMode", sizingMode: "sizingMode", searchOnInit: "searchOnInit" }, outputs: { summariesChange: "summariesChange", selectedItemsChange: "selectedItemsChange", buttonColumnClicked: "buttonColumnClicked", searchFieldsValueChanged: "searchFieldsValueChanged", getAllPagedResultChanged: "getAllPagedResultChanged" }, viewQueries: [{ propertyName: "genericGridComponent", first: true, predicate: TsiGenericGridComponent, descendants: true }], ngImport: i0, template: "<div class=\"card\">\r\n  \r\n  <p-toolbar *ngIf=\"formEndpoint\" styleClass=\"border-radius-7 mb-1 flex align-items-center gap-2\">\r\n    <ng-template pTemplate=\"left\">\r\n      <div class=\"flex gap-2 ml-2\">\r\n        <Tsi-Button  icon=\"pi pi-sliders-h\" [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"shared_tsi_component_grid_menu_view\" *ngIf=\"searchFields\"\r\n        styleClass=\"h-2rem hover:shadow-6 p-button-icon-only {{showSearchField ? 'p-button-secondary' : 'p-button-success'}}\" \r\n          (click)=\"displaySearchFields()\">\r\n        </Tsi-Button>\r\n        <Tsi-Button icon=\"p-button-icon pi pi-calendar {{showCalenderView ? 'pi pi-align-justify' : 'pi pi-calendar'}}\" \r\n        styleClass=\"p-element p-button-primary hover:shadow-6 h-2rem p-button p-component p-button-icon-only\" (click)=\"toggleCalenderView()\" \r\n        tooltipText=\"{{(showCalenderView ? 'shared_tsi_component_grid_list_view' : 'shared_tsi_component_grid_calender_view') | localize}}\" [tooltipPosition]=\"tooltipPosition.Top\"></Tsi-Button>\r\n      </div>\r\n    </ng-template>\r\n    \r\n    <ng-template pTemplate=\"right\">\r\n        <app-reporting *ngIf=\"formEndpoint || businessClass\"\r\n          [formEndpoint]=\"formEndpoint\"\r\n          [formName]=\"formName\"\r\n          [formEndpointBody]=\"formEndpointBody\"\r\n          [isFormEndpointPaged]=\"true\"\r\n          [showImportExportButton]=\"showImportExportButton\"\r\n          (refreshData)=\"refresh($event)\"\r\n          [filtersHtmlTemplate]=\"filtersHtmlTemplate\"\r\n          [businessClass]=\"businessClass\"\r\n          [pagedRequest]=\"pagedRequest\"\r\n          [configModeButtonId]=\"configModeButtonId\"\r\n          [showNoteButton]=\"false\"\r\n          [showActionButton]=\"false\"\r\n          [showInfoButton]=\"false\"\r\n          [showUploadButton]=\"false\"\r\n          [selectedItemUids]=\"selectedItems\"\r\n          ></app-reporting>\r\n    </ng-template>\r\n  </p-toolbar>\r\n  \r\n  <div>\r\n\r\n    <Tsi-Generic-Grid \r\n      [formName]=\"formName\" \r\n      [header]=\"header\" \r\n      [page]=\"page\" \r\n      [pagedRequest]=\"pagedRequest\" \r\n      [columns]=\"columns\"\r\n      [searchFields]=\"searchFields\" \r\n      [showSearchField]=\"showSearchField\" \r\n      (load)=\"load($event)\"\r\n      (searchFieldsValueChanged)=\"searchFieldsValueChanges($event)\"\r\n      (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n      [(filtersHtmlTemplate)]=\"filtersHtmlTemplate\"\r\n      [selectKeyOnly]=\"selectKeyOnly\"\r\n      [selectionMode]=\"selectionMode\"\r\n      [showImportExportButton]=\"showImportExportButton\"\r\n      [key]=\"key\"\r\n      [crudService]=\"crudService\"\r\n      [(selectedItems)]=\"selectedItems\"\r\n      (selectedItemsChange)=\"onSelectedItemsChange($event)\"\r\n      [isGridDataPagedInApi]=\"getDataFromApi\"\r\n      [searchOnInit]=\"searchOnInit\"\r\n      [showExportButton]=\"showExportButton\"\r\n      [showHeaderFilters]=\"showHeaderFilters\"\r\n      [showFilterButton]=\"showFilterButton\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\r\n      [showCalenderView]=\"showCalenderView\"\r\n      (calendarEventClick)=\"handleCalendarEventClick($event)\"\r\n      [selectAll]=\"selectAll\"\r\n      [checkedByField]=\"checkedByField\"\r\n      [targetBusinessClass]=\"targetBusinessClass\"\r\n      [sortMode]=\"sortMode\"\r\n      [sizingMode]=\"sizingMode\"\r\n      ></Tsi-Generic-Grid>\r\n  </div>\r\n</div>", styles: [".hide-search-fields{background-color:#64748b!important;border-color:#64748b!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: ["cudComponent", "modalSize", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton", "sizingMode", "formName", "id", "pagedRequest", "configuration", "page", "key", "columns", "isSearchButtonDisabled", "filteredColumns", "gridData", "isTableLoading", "parent", "showSearchBox", "showActionColumn", "showHeaderFilters", "showFilterButton", "isGridDataPagedInApi", "header", "ShowFilterColumns", "showImportExportButton", "crudService", "searchFields", "sortMode", "filtersHtmlTemplate", "presentationSettings", "selectKeyOnly", "selectionMode", "selectedItems", "searchOnInit", "showGlobalSearch", "showExportButton", "showSearchField", "showCalenderView", "calenderSchema", "showCardView", "showKanbanView", "showKanbanViewOfWorkFlowEtat", "page$", "checkedByField", "selectAll", "targetBusinessClass", "descriminatorValue", "businessClass", "entityInfo"], outputs: ["onSave", "editRow", "deleteRow", "load", "buttonColumnClicked", "filtersHtmlTemplateChange", "selectedItemsChange", "searchFieldsValueChanged", "calendarEventClick", "statusFilterChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: ReportingComponent, selector: "app-reporting", inputs: ["showImportExportButton", "showNoteButton", "showInfoButton", "showUploadButton", "showActionButton", "isReportingToolbarDisabled", "formName", "formEndpoint", "formEndpointBody", "isFormEndpointPaged", "filtersHtmlTemplate", "optionalEndpoints", "businessClass", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiViewGridComponent, decorators: [{
             type: Component,
@@ -13144,7 +13507,7 @@ class TsiLogEventHistoryComponent {
         return value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiLogEventHistoryComponent, deps: [{ token: JournalisationApplicationService }, { token: i1$3.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiLogEventHistoryComponent, selector: "app-tsi-log-event-history", providers: [...appProviders], ngImport: i0, template: "<p-header class=\"p-dialog-header absolute top-0 left-0 mb-4\">\r\n{{ 'administration_administration_ficheJournalApplication' | localize}}\r\n</p-header>\r\n\r\n<div class=\"card\">\r\n    <fieldset [disabled]=\"true\">\r\n\r\n        <div class=\"grid\">\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_dateEvent'\"></Tsi-Label>\r\n                    <Tsi-Date-Picker class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [inputField]=\"journalApplication.dateEvent\">\r\n                    </Tsi-Date-Picker>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_dataBaseName'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [(inputField)]=\"journalApplication.dataBaseName\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"grid\">\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_userNameEvent'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [(inputField)]=\"journalApplication.userNameEvent\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_tableName'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\" [(inputField)]=\"journalApplication.tableName\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"grid\">\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_textEvent'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\" [(inputField)]=\"journalApplication.textEvent\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_observation'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [(inputField)]=\"journalApplication.observation\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </fieldset>\r\n\r\n    <div class=\"grid\">\r\n\r\n        <div class=\"col-12\">\r\n\r\n            <div class=\"card\">\r\n\r\n                <p-treeTable [value]=\"filteredMergedTree\" class=\"compact-table\" [columns]=\"cols\" [scrollable]=\"true\"\r\n                    [tableStyle]=\"{ 'min-width': '50rem' }\">\r\n                    <ng-template pTemplate=\"caption\">\r\n                        <div class=\"text-xl font-bold\">\r\n                            {{ 'tsi_log_event_history_modifications' | localize }}\r\n                        </div>\r\n\r\n                        <div class=\"grid\">\r\n                                <Tsi-Label class=\"col-4\" [labelValue]=\"'Afficher seulement les champs modifi\u00E9s'\"></Tsi-Label>\r\n                                <Tsi-CheckBox \r\n                                    class=\"col-4\" \r\n                                    [inputName]=\"'Logged'\" \r\n                                    [isBinary]=\"true\"\r\n                                    (checkedChange)=\"updateDisplayedTree($event)\" \r\n                                    [(inputField)]=\"showOnlyModifiedFields\"\r\n                                    [checked]=\"false\"\r\n                                    [infoText]=\"'Afficher seulement les champs modifi\u00E9s'\"\r\n                                    >\r\n                                </Tsi-CheckBox>\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                    <ng-template pTemplate=\"header\" let-columns>\r\n                        <tr>\r\n                            <th *ngFor=\"let col of columns\" class=\"bold-header\">{{ col.header }}</th>\r\n                        </tr>\r\n                    </ng-template>\r\n\r\n                    <ng-template pTemplate=\"body\" let-rowNode let-rowData=\"rowData\" let-columns=\"columns\">\r\n                        <tr [ttRow]=\"rowNode\" [ngClass]=\"{ 'has-children': rowNode.node?.children?.length > 0 }\">\r\n                            <td *ngFor=\"let col of columns; let i = index\">\r\n                                <p-treeTableToggler [rowNode]=\"rowNode\" *ngIf=\"i === 0\" />\r\n\r\n                                <ng-container [ngSwitch]=\"col.field\">\r\n                                    <span *ngSwitchCase=\"'label'\">\r\n                                        {{ rowNode.node?.label }}\r\n                                    </span>\r\n\r\n                                    <ng-container *ngSwitchCase=\"'oldData'\">\r\n                                        <ng-container *ngIf=\"isBoolean(rowNode.node?.oldData?.value); else oldText\">\r\n                                            <Tsi-Checkbox-Display [inputData]=\"isChecked(rowNode.node?.oldData?.value)\"></Tsi-Checkbox-Display>\r\n                                        </ng-container>\r\n                                        <ng-template #oldText>\r\n                                            {{ rowNode.node?.oldData?.value }}\r\n                                        </ng-template>\r\n                                    </ng-container>\r\n\r\n                                    <ng-container *ngSwitchCase=\"'newData'\">\r\n\r\n                                        <ng-container *ngIf=\"isBoolean(rowNode.node?.newData?.value); else newText\">\r\n                                            <span [ngClass]=\"{ 'changed': rowNode.node?.oldData?.value !== rowNode.node?.newData?.value }\">\r\n                                                <Tsi-Checkbox-Display [inputData]=\"isChecked(rowNode.node?.newData?.value)\"></Tsi-Checkbox-Display>\r\n                                            </span>\r\n                                        </ng-container>\r\n                                        <ng-template #newText>\r\n                                            <span [ngClass]=\"{ 'changed': rowNode.node?.oldData?.value !== rowNode.node?.newData?.value }\">\r\n                                                {{ rowNode.node?.newData?.value }}\r\n                                            </span>\r\n                                        </ng-template>\r\n                                    </ng-container>\r\n\r\n                                </ng-container>\r\n                            </td>\r\n                        </tr>\r\n                    </ng-template>\r\n                </p-treeTable>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".gray-key{color:gray}.label-parent{color:#007bff;font-weight:700}.value-changed{background-color:#ffe6e6;color:#b30000;font-weight:700}.changed{color:#43a047;font-weight:700}::ng-deep .compact-table .p-treetable-tbody>tr>td,::ng-deep .compact-table .p-treetable-thead>tr>th{padding:0rem!important}::ng-deep .compact-table .p-treetable-toggler{margin-right:0rem}::ng-deep .compact-table span{margin:0;padding:0}.bold-header{font-weight:700}::ng-deep .has-children{background-color:#f0f8ff;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$2.Header, selector: "p-header" }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$2.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i5$2.TreeTableToggler, selector: "p-treeTableToggler", inputs: ["rowNode"] }, { kind: "directive", type: i5$2.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: TsiCheckboxComponent, selector: "Tsi-CheckBox", inputs: ["class", "isBinary", "checked", "tooltipText", "tooltipPosition"], outputs: ["inputFieldChange", "checkedChange"] }, { kind: "component", type: TsiDatePickerComponent, selector: "Tsi-Date-Picker", inputs: ["required", "showTime", "showButtonBar"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiTextBoxComponent, selector: "Tsi-Text-Box", inputs: ["textBoxType", "autocomplete"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiCheckboxDisplayComponent, selector: "Tsi-Checkbox-Display", inputs: ["inputData"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiLogEventHistoryComponent, selector: "app-tsi-log-event-history", providers: [...appProviders], ngImport: i0, template: "<p-header class=\"p-dialog-header absolute top-0 left-0 mb-4\">\r\n{{ 'administration_administration_ficheJournalApplication' | localize}}\r\n</p-header>\r\n\r\n<div class=\"card\">\r\n    <fieldset [disabled]=\"true\">\r\n\r\n        <div class=\"grid\">\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_dateEvent'\"></Tsi-Label>\r\n                    <Tsi-Date-Picker class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [inputField]=\"journalApplication.dateEvent\">\r\n                    </Tsi-Date-Picker>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_dataBaseName'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [(inputField)]=\"journalApplication.dataBaseName\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"grid\">\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_userNameEvent'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [(inputField)]=\"journalApplication.userNameEvent\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_tableName'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\" [(inputField)]=\"journalApplication.tableName\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"grid\">\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_textEvent'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\" [(inputField)]=\"journalApplication.textEvent\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"col-12 md:col-6 lg:col-6\">\r\n                <div class=\"grid\">\r\n                    <Tsi-Label class=\"col-4\"\r\n                        [labelValue]=\"'administration_administration_ficheJournalApplication_observation'\"></Tsi-Label>\r\n                    <Tsi-Text-Box class=\"col-6\" [inputName]=\"'dateEvent'\"\r\n                        [(inputField)]=\"journalApplication.observation\">\r\n                    </Tsi-Text-Box>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </fieldset>\r\n\r\n    <div class=\"grid\">\r\n\r\n        <div class=\"col-12\">\r\n\r\n            <div class=\"card\">\r\n\r\n                <p-treeTable [value]=\"filteredMergedTree\" class=\"compact-table\" [columns]=\"cols\" [scrollable]=\"true\"\r\n                    [tableStyle]=\"{ 'min-width': '50rem' }\">\r\n                    <ng-template pTemplate=\"caption\">\r\n                        <div class=\"text-xl font-bold\">\r\n                            {{ 'tsi_log_event_history_modifications' | localize }}\r\n                        </div>\r\n\r\n                        <div class=\"grid\">\r\n                                <Tsi-Label class=\"col-4\" [labelValue]=\"'Afficher seulement les champs modifi\u00E9s'\"></Tsi-Label>\r\n                                <Tsi-CheckBox \r\n                                    class=\"col-4\" \r\n                                    [inputName]=\"'Logged'\" \r\n                                    [isBinary]=\"true\"\r\n                                    (checkedChange)=\"updateDisplayedTree($event)\" \r\n                                    [(inputField)]=\"showOnlyModifiedFields\"\r\n                                    [checked]=\"false\"\r\n                                    [infoText]=\"'Afficher seulement les champs modifi\u00E9s'\"\r\n                                    >\r\n                                </Tsi-CheckBox>\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                    <ng-template pTemplate=\"header\" let-columns>\r\n                        <tr>\r\n                            <th *ngFor=\"let col of columns\" class=\"bold-header\">{{ col.header }}</th>\r\n                        </tr>\r\n                    </ng-template>\r\n\r\n                    <ng-template pTemplate=\"body\" let-rowNode let-rowData=\"rowData\" let-columns=\"columns\">\r\n                        <tr [ttRow]=\"rowNode\" [ngClass]=\"{ 'has-children': rowNode.node?.children?.length > 0 }\">\r\n                            <td *ngFor=\"let col of columns; let i = index\">\r\n                                <p-treeTableToggler [rowNode]=\"rowNode\" *ngIf=\"i === 0\" />\r\n\r\n                                <ng-container [ngSwitch]=\"col.field\">\r\n                                    <span *ngSwitchCase=\"'label'\">\r\n                                        {{ rowNode.node?.label }}\r\n                                    </span>\r\n\r\n                                    <ng-container *ngSwitchCase=\"'oldData'\">\r\n                                        <ng-container *ngIf=\"isBoolean(rowNode.node?.oldData?.value); else oldText\">\r\n                                            <Tsi-Checkbox-Display [inputData]=\"isChecked(rowNode.node?.oldData?.value)\"></Tsi-Checkbox-Display>\r\n                                        </ng-container>\r\n                                        <ng-template #oldText>\r\n                                            {{ rowNode.node?.oldData?.value }}\r\n                                        </ng-template>\r\n                                    </ng-container>\r\n\r\n                                    <ng-container *ngSwitchCase=\"'newData'\">\r\n\r\n                                        <ng-container *ngIf=\"isBoolean(rowNode.node?.newData?.value); else newText\">\r\n                                            <span [ngClass]=\"{ 'changed': rowNode.node?.oldData?.value !== rowNode.node?.newData?.value }\">\r\n                                                <Tsi-Checkbox-Display [inputData]=\"isChecked(rowNode.node?.newData?.value)\"></Tsi-Checkbox-Display>\r\n                                            </span>\r\n                                        </ng-container>\r\n                                        <ng-template #newText>\r\n                                            <span [ngClass]=\"{ 'changed': rowNode.node?.oldData?.value !== rowNode.node?.newData?.value }\">\r\n                                                {{ rowNode.node?.newData?.value }}\r\n                                            </span>\r\n                                        </ng-template>\r\n                                    </ng-container>\r\n\r\n                                </ng-container>\r\n                            </td>\r\n                        </tr>\r\n                    </ng-template>\r\n                </p-treeTable>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".gray-key{color:gray}.label-parent{color:#007bff;font-weight:700}.value-changed{background-color:#ffe6e6;color:#b30000;font-weight:700}.changed{color:#43a047;font-weight:700}::ng-deep .compact-table .p-treetable-tbody>tr>td,::ng-deep .compact-table .p-treetable-thead>tr>th{padding:0rem!important}::ng-deep .compact-table .p-treetable-toggler{margin-right:0rem}::ng-deep .compact-table span{margin:0;padding:0}.bold-header{font-weight:700}::ng-deep .has-children{background-color:#f0f8ff;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.Header, selector: "p-header" }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$2.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i5$2.TreeTableToggler, selector: "p-treeTableToggler", inputs: ["rowNode"] }, { kind: "directive", type: i5$2.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: TsiCheckboxComponent, selector: "Tsi-CheckBox", inputs: ["class", "isBinary", "checked", "tooltipText", "tooltipPosition"], outputs: ["inputFieldChange", "checkedChange"] }, { kind: "component", type: TsiDatePickerComponent, selector: "Tsi-Date-Picker", inputs: ["required", "showTime", "showButtonBar"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiTextBoxComponent, selector: "Tsi-Text-Box", inputs: ["textBoxType", "autocomplete"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiCheckboxDisplayComponent, selector: "Tsi-Checkbox-Display", inputs: ["inputData"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiLogEventHistoryComponent, decorators: [{
             type: Component,
@@ -13312,7 +13675,7 @@ class TsiPopupTextViewerComponent {
         this._dialogRef.onClose.subscribe((val) => this.closeConsultModal());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiPopupTextViewerComponent, deps: [{ token: TsiModalService }, { token: i0.ChangeDetectorRef }, { token: i0.EnvironmentInjector }, { token: i1$3.DynamicDialogConfig }, { token: DialogDataService }, { token: JournalisationApplicationService }, { token: StatusHistoryService }, { token: i1$3.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiPopupTextViewerComponent, selector: "app-tsi-popup-text-viewer", providers: [...appProviders], ngImport: i0, template: "<div class=\"card\">\r\n\r\n  <div class=\"grid mt-1\">\r\n    \r\n      <!-- Titre -->\r\n    <div class=\"col-12 md:col-2 lg:col-2\">\r\n      <div style=\"font-weight: bold; color: #007ad9;\">\r\n        {{ 'tsi_popup_view_log_history_last_modification' | localize }}\r\n      </div>\r\n    </div>\r\n    \r\n    <div class=\"col-12 md:col-4 lg:col-4\" style=\"background-color: #f0f8ff;\">\r\n        <i class=\"pi pi-user\" style=\"color: #007ad9; margin-right: 0.5rem;\"></i>\r\n        {{ 'tsi_popup_view_log_history_createdby' | localize }}\r\n        <strong>{{ creationUser }}</strong>\r\n\r\n          <i style=\"color: #007ad9; margin-right: 0.5rem;\"></i>\r\n        {{ 'tsi_popup_view_log_history_createdOn' | localize }}\r\n        <strong>{{ dateSaisie | date : formatDate }}</strong>\r\n\r\n    </div>\r\n    <div class=\"col-12 md:col-4 lg:col-4\" style=\"background-color:  #f1f2f3;\">\r\n        <i class=\"pi pi-pencil\" style=\"color: #007ad9; margin-right: 0.5rem;\"></i>\r\n        {{ 'tsi_popup_view_log_history_modifiedBy' | localize }}\r\n        <strong>{{ modifUser }}</strong>\r\n\r\n             <i style=\"color: #007ad9; margin-right: 0.5rem;\"></i>\r\n        {{ 'tsi_popup_view_log_history_modifiedOn' | localize }}\r\n        <strong>{{ dateModif | date : formatDate }}</strong>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n\r\n<div class=\"grid mt-5 mb-5 justify-content-end\">\r\n  <button \r\n    type=\"button\" \r\n    pButton label=\"Consulter les informations d'entit\u00E9\" \r\n    icon=\"pi pi-eye\"\r\n    class=\"mr-5 p-button-sm p-button-outlined\" \r\n    (click)=\"openEntitieInformationModal()\"></button>\r\n</div>\r\n\r\n<p-tabView>\r\n    <p-tabPanel [header]=\"'history_of_changes_title'| localize\">\r\n          <tsi-view-grid \r\n            [modalSize]=\"modalSize\" \r\n            [formName]=\"'logfobject'\" \r\n            [header]=\"titleComponent\" \r\n            [getDataFromApi]=\"false\"\r\n            [gridData]=\"logEventFiltredData\" \r\n            [searchOnInit]=\"false\" \r\n            (buttonColumnClicked)=\"buttonColumnClicked($event)\"\r\n            [columns]=\"columnsLogEvent\" \r\n            [selectKeyOnly]=\"true\" \r\n            [showConsultButton]=\"true\"\r\n            ></tsi-view-grid>\r\n    </p-tabPanel>\r\n    <p-tabPanel header=\"{{'administration_administration_statusHistory_historiqueModificationsStatut' | localize}}\">\r\n          <tsi-view-grid \r\n            [modalSize]=\"modalSize\" \r\n            [formName]=\"'logfStatusobject'\" \r\n            [targetBusinessClass]=\"targetBusinessClass\"\r\n            [header]=\"'administration_administration_statusHistory_historiqueModificationsStatut' | localize\" \r\n            [getDataFromApi]=\"false\"\r\n            [gridData]=\"statusHistoryFiltredData\" \r\n            [searchOnInit]=\"false\" \r\n            [columns]=\"columnsStatuHistory\" \r\n            [selectKeyOnly]=\"true\" \r\n            ></tsi-view-grid>\r\n    </p-tabPanel>\r\n</p-tabView>\r\n", styles: [".p-card{padding:.5rem;border:1px solid #ddd;border-radius:.5rem;background-color:#f9f9f9}.p-card span{white-space:nowrap}.p-card i{color:#007ad9}\n"], dependencies: [{ kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7$1.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7$1.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: TsiViewGridComponent, selector: "tsi-view-grid", inputs: ["columns", "gridConfiguration", "viewComponent", "crudService", "header", "modalSize", "showConsultButton", "showSearchField", "searchFields", "formEndpoint", "formName", "id", "showImportExportButton", "targetBusinessClass", "getDataFromApi", "gridData", "isSearchButtonDisabled", "selectKeyOnly", "selectionMode", "selectedItems", "key", "showGlobalSearch", "showExportButton", "showCalenderView", "showHeaderFilters", "showFilterButton", "selectAll", "checkedByField", "sortMode", "sizingMode", "searchOnInit"], outputs: ["summariesChange", "selectedItemsChange", "buttonColumnClicked", "searchFieldsValueChanged", "getAllPagedResultChanged"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiPopupTextViewerComponent, selector: "app-tsi-popup-text-viewer", providers: [...appProviders], ngImport: i0, template: "<div class=\"card\">\r\n\r\n  <div class=\"grid mt-1\">\r\n    \r\n      <!-- Titre -->\r\n    <div class=\"col-12 md:col-2 lg:col-2\">\r\n      <div style=\"font-weight: bold; color: #007ad9;\">\r\n        {{ 'tsi_popup_view_log_history_last_modification' | localize }}\r\n      </div>\r\n    </div>\r\n    \r\n    <div class=\"col-12 md:col-4 lg:col-4\" style=\"background-color: #f0f8ff;\">\r\n        <i class=\"pi pi-user\" style=\"color: #007ad9; margin-right: 0.5rem;\"></i>\r\n        {{ 'tsi_popup_view_log_history_createdby' | localize }}\r\n        <strong>{{ creationUser }}</strong>\r\n\r\n          <i style=\"color: #007ad9; margin-right: 0.5rem;\"></i>\r\n        {{ 'tsi_popup_view_log_history_createdOn' | localize }}\r\n        <strong>{{ dateSaisie | date : formatDate }}</strong>\r\n\r\n    </div>\r\n    <div class=\"col-12 md:col-4 lg:col-4\" style=\"background-color:  #f1f2f3;\">\r\n        <i class=\"pi pi-pencil\" style=\"color: #007ad9; margin-right: 0.5rem;\"></i>\r\n        {{ 'tsi_popup_view_log_history_modifiedBy' | localize }}\r\n        <strong>{{ modifUser }}</strong>\r\n\r\n             <i style=\"color: #007ad9; margin-right: 0.5rem;\"></i>\r\n        {{ 'tsi_popup_view_log_history_modifiedOn' | localize }}\r\n        <strong>{{ dateModif | date : formatDate }}</strong>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n\r\n<div class=\"grid mt-5 mb-5 justify-content-end\">\r\n  <button \r\n    type=\"button\" \r\n    pButton label=\"Consulter les informations d'entit\u00E9\" \r\n    icon=\"pi pi-eye\"\r\n    class=\"mr-5 p-button-sm p-button-outlined\" \r\n    (click)=\"openEntitieInformationModal()\"></button>\r\n</div>\r\n\r\n<p-tabView>\r\n    <p-tabPanel [header]=\"'history_of_changes_title'| localize\">\r\n          <tsi-view-grid \r\n            [modalSize]=\"modalSize\" \r\n            [formName]=\"'logfobject'\" \r\n            [header]=\"titleComponent\" \r\n            [getDataFromApi]=\"false\"\r\n            [gridData]=\"logEventFiltredData\" \r\n            [searchOnInit]=\"false\" \r\n            (buttonColumnClicked)=\"buttonColumnClicked($event)\"\r\n            [columns]=\"columnsLogEvent\" \r\n            [selectKeyOnly]=\"true\" \r\n            [showConsultButton]=\"true\"\r\n            ></tsi-view-grid>\r\n    </p-tabPanel>\r\n    <p-tabPanel header=\"{{'administration_administration_statusHistory_historiqueModificationsStatut' | localize}}\">\r\n          <tsi-view-grid \r\n            [modalSize]=\"modalSize\" \r\n            [formName]=\"'logfStatusobject'\" \r\n            [targetBusinessClass]=\"targetBusinessClass\"\r\n            [header]=\"'administration_administration_statusHistory_historiqueModificationsStatut' | localize\" \r\n            [getDataFromApi]=\"false\"\r\n            [gridData]=\"statusHistoryFiltredData\" \r\n            [searchOnInit]=\"false\" \r\n            [columns]=\"columnsStatuHistory\" \r\n            [selectKeyOnly]=\"true\" \r\n            ></tsi-view-grid>\r\n    </p-tabPanel>\r\n</p-tabView>\r\n", styles: [".p-card{padding:.5rem;border:1px solid #ddd;border-radius:.5rem;background-color:#f9f9f9}.p-card span{white-space:nowrap}.p-card i{color:#007ad9}\n"], dependencies: [{ kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7$1.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7$1.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: TsiViewGridComponent, selector: "tsi-view-grid", inputs: ["columns", "gridConfiguration", "viewComponent", "crudService", "header", "modalSize", "showConsultButton", "showSearchField", "searchFields", "formEndpoint", "formName", "id", "showImportExportButton", "targetBusinessClass", "getDataFromApi", "gridData", "isSearchButtonDisabled", "selectKeyOnly", "selectionMode", "selectedItems", "key", "showGlobalSearch", "showExportButton", "showCalenderView", "showHeaderFilters", "showFilterButton", "selectAll", "checkedByField", "sortMode", "sizingMode", "searchOnInit"], outputs: ["summariesChange", "selectedItemsChange", "buttonColumnClicked", "searchFieldsValueChanged", "getAllPagedResultChanged"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiPopupTextViewerComponent, decorators: [{
             type: Component,
@@ -14309,13 +14672,13 @@ class TsiGenericCrudComponent {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiGenericCrudComponent, deps: [{ token: TsiNotificationService }, { token: i2$2.MessageService }, { token: TsiModalService }, { token: i0.ChangeDetectorRef }, { token: LocalizePipe }, { token: DialogDataService }, { token: FichierUploadService }, { token: RecordInfoPopupService }, { token: WorkflowConfigurationService }, { token: EntityConfigurationService }, { token: NoteService }, { token: i0.EnvironmentInjector }, { token: DiscriminatorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiGenericCrudComponent, selector: "Tsi-Generic-Crud", inputs: { entityInfo: "entityInfo", modalData: "modalData", columns: "columns", gridConfiguration: "gridConfiguration", cudComponent: "cudComponent", crudService: "crudService", header: "header", modalSize: "modalSize", descriminatorValue: "descriminatorValue", presentationSettings: "presentationSettings", preventAddEvent: "preventAddEvent", formEndpoint: "formEndpoint", formName: "formName", isSearchButtonDisabled: "isSearchButtonDisabled", showHeaderFilters: "showHeaderFilters", showEditButton: "showEditButton", showDeleteButton: "showDeleteButton", showAddButton: "showAddButton", showConsultButton: "showConsultButton", showUploadButton: "showUploadButton", showNoteButton: "showNoteButton", showDownloadButton: "showDownloadButton", showInfoButton: "showInfoButton", showDuplicateButton: "showDuplicateButton", showFormButton: "showFormButton", showCalenderView: "showCalenderView", showCardView: "showCardView", showImportFromOutlookButton: "showImportFromOutlookButton", showKanbanView: "showKanbanView", showKanbanViewOfWorkFlowEtat: "showKanbanViewOfWorkFlowEtat", showSearchField: "showSearchField", searchFields: "searchFields", calenderSchema: "calenderSchema", showActionButton: "showActionButton", sizingMode: "sizingMode", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", key: "key", id: "id", businessClass: "businessClass", searchOnInit: "searchOnInit", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showReporting: "showReporting" }, outputs: { selectedItemsChange: "selectedItemsChange", searchFieldsValueChanged: "searchFieldsValueChanged", buttonColumnClicked: "buttonColumnClicked", onImportFromOutlookClicked: "onImportFromOutlookClicked" }, host: { listeners: { "window:keydown": "handleKeyDown($event)" } }, providers: [TsiNotificationService], viewQueries: [{ propertyName: "genericGridComponent", first: true, predicate: TsiGenericGridComponent, descendants: true }], ngImport: i0, template: "<div class=\"card\">\r\n  \r\n  <p-toolbar styleClass=\"border-radius-7 mb-1 flex align-items-center gap-2 no-pad\" \r\n    *ngIf=\"(showAddButton || searchFields || formEndpoint || businessClass) && showReporting\">\r\n\r\n    <ng-template pTemplate=\"left\">\r\n      <div class=\"flex gap-2 mx-2\">\r\n        <div *ngIf=\"showAddButton\" presentationDesignerBase=\"add_button\">\r\n          <Tsi-Button icon=\"pi pi-plus\" \r\n            [tooltipPosition]=\"tooltipPosition.Top\" \r\n            tooltipText=\"shared_tsi_component_add_view\" \r\n            styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\" \r\n            (click)=\"openNew()\">\r\n          </Tsi-Button>\r\n        </div>\r\n        <div *ngIf=\"searchFields\" presentationDesignerBase=\"show_search_fields_button\">\r\n          <Tsi-Button icon=\"pi pi-sliders-h\"\r\n            [tooltipPosition]=\"tooltipPosition.Top\"\r\n            tooltipText=\"shared_tsi_component_menu\"\r\n            styleClass=\"h-2rem p-button-icon-only hover:shadow-6 {{ showSearchField ? 'p-button-secondary' : 'p-button-success' }}\"\r\n            (click)=\"displaySearchFields()\">\r\n          </Tsi-Button>\r\n        </div>\r\n\r\n        <div *ngIf=\"showImportFromOutlookButton\" presentationDesignerBase=\"importFromOutlook_button\">\r\n          <Tsi-Button icon=\"pi pi-envelope\" \r\n            [tooltipPosition]=\"tooltipPosition.Top\" \r\n            tooltipText=\"shared_tsi_component_import_from_outlook\" \r\n            styleClass=\"p-button-info hover:shadow-6 h-2rem p-button-icon-only\" \r\n            (click)=\"onImportClicked()\"> \r\n          </Tsi-Button>\r\n        </div>\r\n\r\n        <div  presentationDesignerBase=\"toggle_actions_view_button\">\r\n          <p-splitButton\r\n            [icon]=\"currentIcon\"\r\n            [model]=\"viewOptions\"\r\n            (onClick)=\"handleActionViewClick()\"\r\n            [tooltip]=\"currentTooltip | localize\"\r\n            class=\"p-button-icon-only p-button-rounded p-button-primary h-2rem hover:shadow-6\"\r\n          />\r\n          <!-- <Tsi-Button\r\n            [icon]=\"currentIcon\"\r\n            styleClass=\"p-element p-button-primary  h-2rem p-button p-component p-button-icon-only\"\r\n            (click)=\"handleActionViewClick()\"\r\n            [tooltipPosition]=\"tooltipPosition.Top\"\r\n            [tooltipText]=\"currentTooltip | localize\">\r\n          </Tsi-Button> -->\r\n        </div>\r\n\r\n        \r\n\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"right\">\r\n        <app-reporting *ngIf=\"(formEndpoint || businessClass)\" \r\n          [formEndpoint]=\"formEndpoint\" \r\n          [formName]=\"formName\"\r\n          [formEndpointBody]=\"formEndpointBody\" \r\n          [isFormEndpointPaged]=\"true\"\r\n          [businessClass]=\"businessClass\"\r\n          [reportDiscriminator]=\"descriminatorValue\"\r\n          (refreshData)=\"refresh($event)\"\r\n          [filtersHtmlTemplate]=\"filtersHtmlTemplate\"\r\n          [pagedRequest]=\"pagedRequest\"\r\n          [cudComponent]=\"cudComponent\" \r\n          [configModeButtonId]=\"configModeButtonId\"\r\n          [showNoteButton]=\"false\"\r\n          [showActionButton]=\"false\"\r\n          [showInfoButton]=\"false\"\r\n          [showUploadButton]=\"false\"\r\n        ></app-reporting>\r\n    </ng-template>\r\n  </p-toolbar>\r\n\r\n  <div>\r\n\r\n    <Tsi-Generic-Grid\r\n      [formName]=\"formName\"\r\n      [crudService]=\"crudService\"\r\n      [showSearchField]=\"showSearchField\"\r\n      [searchFields]=\"searchFields\"\r\n      [descriminatorValue]=\"descriminatorValue\"\r\n      [header]=\"header\"\r\n      [page]=\"page\"\r\n      [pagedRequest]=\"pagedRequest\"\r\n      [columns]=\"selectedColumns\"\r\n      [showHeaderFilters]=\"showHeaderFilters\"\r\n      [(filtersHtmlTemplate)]=\"filtersHtmlTemplate\"\r\n      [presentationSettings]=\"presentationSettings\"\r\n      (load)=\"load($event)\"\r\n      (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n      [selectKeyOnly]=\"selectKeyOnly\"\r\n      [selectionMode]=\"selectionMode\"\r\n      [key]=\"key\"\r\n      [(selectedItems)]=\"selectedItems\"\r\n      (selectedItemsChange)=\"onSelectedItemsChange($event)\"\r\n      (searchFieldsValueChanged)=\"searchFieldValueChanges($event)\"\r\n      [searchOnInit]=\"searchOnInit\"\r\n      [showExportButton]=\"showExportButton\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\r\n      [showCalenderView]=\"showCalenderView\"\r\n      [showCardView]=\"showCardView\"\r\n      [showKanbanView]=\"showKanbanView\"\r\n      [showKanbanViewOfWorkFlowEtat]=\"showKanbanViewOfWorkFlowEtat\"\r\n      [businessClass]=\"businessClass\"\r\n      [cudComponent]=\"cudComponent\" \r\n      [modalSize]=\"modalSize\" \r\n      [id]=\"id\"\r\n      [page$]=\"page$\"\r\n      [entityInfo]=\"entityInfo\"\r\n      (calendarEventClick)=\"handleCalendarEventClick($event)\"\r\n      (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n      [showInfoButton]=\"true\"\r\n      [showDownloadButton]=\"true\"\r\n      [showUploadButton]=\"true\"\r\n      [showNoteButton]=\"true\"\r\n      [showActionButton]=\"true\"\r\n      [sizingMode]=\"sizingMode\"\r\n    ></Tsi-Generic-Grid>\r\n  </div>\r\n  \r\n</div>\r\n", styles: [".p-button{padding:.1rem!important}.tlbar{border:1px solid gainsboro;padding:2px;background:#f8f9fa}.hide-search-fields{background-color:#64748b!important;border-color:#64748b!important}::ng-deep .no-pad{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i14.SplitButton, selector: "p-splitButton", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "style", "styleClass", "menuStyle", "menuStyleClass", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "component", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: ["cudComponent", "modalSize", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton", "sizingMode", "formName", "id", "pagedRequest", "configuration", "page", "key", "columns", "isSearchButtonDisabled", "filteredColumns", "gridData", "isTableLoading", "parent", "showSearchBox", "showActionColumn", "showHeaderFilters", "showFilterButton", "isGridDataPagedInApi", "header", "ShowFilterColumns", "showImportExportButton", "crudService", "searchFields", "sortMode", "filtersHtmlTemplate", "presentationSettings", "selectKeyOnly", "selectionMode", "selectedItems", "searchOnInit", "showGlobalSearch", "showExportButton", "showSearchField", "showCalenderView", "calenderSchema", "showCardView", "showKanbanView", "showKanbanViewOfWorkFlowEtat", "page$", "checkedByField", "selectAll", "targetBusinessClass", "descriminatorValue", "businessClass", "entityInfo"], outputs: ["onSave", "editRow", "deleteRow", "load", "buttonColumnClicked", "filtersHtmlTemplateChange", "selectedItemsChange", "searchFieldsValueChanged", "calendarEventClick", "statusFilterChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: ReportingComponent, selector: "app-reporting", inputs: ["showImportExportButton", "showNoteButton", "showInfoButton", "showUploadButton", "showActionButton", "isReportingToolbarDisabled", "formName", "formEndpoint", "formEndpointBody", "isFormEndpointPaged", "filtersHtmlTemplate", "optionalEndpoints", "businessClass", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode"] }, { kind: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]", inputs: ["presentationDesigner", "presentationDesignerBase"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiGenericCrudComponent, deps: [{ token: TsiNotificationService }, { token: i2$1.MessageService }, { token: TsiModalService }, { token: i0.ChangeDetectorRef }, { token: LocalizePipe }, { token: DialogDataService }, { token: FichierUploadService }, { token: RecordInfoPopupService }, { token: WorkflowConfigurationService }, { token: EntityConfigurationService }, { token: NoteService }, { token: i0.EnvironmentInjector }, { token: DiscriminatorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiGenericCrudComponent, selector: "Tsi-Generic-Crud", inputs: { entityInfo: "entityInfo", modalData: "modalData", columns: "columns", gridConfiguration: "gridConfiguration", cudComponent: "cudComponent", crudService: "crudService", header: "header", modalSize: "modalSize", descriminatorValue: "descriminatorValue", presentationSettings: "presentationSettings", preventAddEvent: "preventAddEvent", formEndpoint: "formEndpoint", formName: "formName", isSearchButtonDisabled: "isSearchButtonDisabled", showHeaderFilters: "showHeaderFilters", showEditButton: "showEditButton", showDeleteButton: "showDeleteButton", showAddButton: "showAddButton", showConsultButton: "showConsultButton", showUploadButton: "showUploadButton", showNoteButton: "showNoteButton", showDownloadButton: "showDownloadButton", showInfoButton: "showInfoButton", showDuplicateButton: "showDuplicateButton", showFormButton: "showFormButton", showCalenderView: "showCalenderView", showCardView: "showCardView", showImportFromOutlookButton: "showImportFromOutlookButton", showKanbanView: "showKanbanView", showKanbanViewOfWorkFlowEtat: "showKanbanViewOfWorkFlowEtat", showSearchField: "showSearchField", searchFields: "searchFields", calenderSchema: "calenderSchema", showActionButton: "showActionButton", sizingMode: "sizingMode", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", key: "key", id: "id", businessClass: "businessClass", searchOnInit: "searchOnInit", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showReporting: "showReporting" }, outputs: { selectedItemsChange: "selectedItemsChange", searchFieldsValueChanged: "searchFieldsValueChanged", buttonColumnClicked: "buttonColumnClicked", onImportFromOutlookClicked: "onImportFromOutlookClicked" }, host: { listeners: { "window:keydown": "handleKeyDown($event)" } }, providers: [TsiNotificationService], viewQueries: [{ propertyName: "genericGridComponent", first: true, predicate: TsiGenericGridComponent, descendants: true }], ngImport: i0, template: "<div class=\"card\">\r\n  \r\n  <p-toolbar styleClass=\"border-radius-7 mb-1 flex align-items-center gap-2 no-pad\" \r\n    *ngIf=\"(showAddButton || searchFields || formEndpoint || businessClass) && showReporting\">\r\n\r\n    <ng-template pTemplate=\"left\">\r\n      <div class=\"flex gap-2 mx-2\">\r\n        <div *ngIf=\"showAddButton\" presentationDesignerBase=\"add_button\">\r\n          <Tsi-Button icon=\"pi pi-plus\" \r\n            [tooltipPosition]=\"tooltipPosition.Top\" \r\n            tooltipText=\"shared_tsi_component_add_view\" \r\n            styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\" \r\n            (click)=\"openNew()\">\r\n          </Tsi-Button>\r\n        </div>\r\n        <div *ngIf=\"searchFields\" presentationDesignerBase=\"show_search_fields_button\">\r\n          <Tsi-Button icon=\"pi pi-sliders-h\"\r\n            [tooltipPosition]=\"tooltipPosition.Top\"\r\n            tooltipText=\"shared_tsi_component_menu\"\r\n            styleClass=\"h-2rem p-button-icon-only hover:shadow-6 {{ showSearchField ? 'p-button-secondary' : 'p-button-success' }}\"\r\n            (click)=\"displaySearchFields()\">\r\n          </Tsi-Button>\r\n        </div>\r\n\r\n        <div *ngIf=\"showImportFromOutlookButton\" presentationDesignerBase=\"importFromOutlook_button\">\r\n          <Tsi-Button icon=\"pi pi-envelope\" \r\n            [tooltipPosition]=\"tooltipPosition.Top\" \r\n            tooltipText=\"shared_tsi_component_import_from_outlook\" \r\n            styleClass=\"p-button-info hover:shadow-6 h-2rem p-button-icon-only\" \r\n            (click)=\"onImportClicked()\"> \r\n          </Tsi-Button>\r\n        </div>\r\n\r\n        <div  presentationDesignerBase=\"toggle_actions_view_button\">\r\n          <p-splitButton\r\n            [icon]=\"currentIcon\"\r\n            [model]=\"viewOptions\"\r\n            (onClick)=\"handleActionViewClick()\"\r\n            [tooltip]=\"currentTooltip | localize\"\r\n            class=\"p-button-icon-only p-button-rounded p-button-primary h-2rem hover:shadow-6\"\r\n          />\r\n          <!-- <Tsi-Button\r\n            [icon]=\"currentIcon\"\r\n            styleClass=\"p-element p-button-primary  h-2rem p-button p-component p-button-icon-only\"\r\n            (click)=\"handleActionViewClick()\"\r\n            [tooltipPosition]=\"tooltipPosition.Top\"\r\n            [tooltipText]=\"currentTooltip | localize\">\r\n          </Tsi-Button> -->\r\n        </div>\r\n\r\n        \r\n\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"right\">\r\n        <app-reporting *ngIf=\"(formEndpoint || businessClass)\" \r\n          [formEndpoint]=\"formEndpoint\" \r\n          [formName]=\"formName\"\r\n          [formEndpointBody]=\"formEndpointBody\" \r\n          [isFormEndpointPaged]=\"true\"\r\n          [businessClass]=\"businessClass\"\r\n          [reportDiscriminator]=\"descriminatorValue\"\r\n          (refreshData)=\"refresh($event)\"\r\n          [filtersHtmlTemplate]=\"filtersHtmlTemplate\"\r\n          [pagedRequest]=\"pagedRequest\"\r\n          [cudComponent]=\"cudComponent\" \r\n          [configModeButtonId]=\"configModeButtonId\"\r\n          [showNoteButton]=\"false\"\r\n          [showActionButton]=\"false\"\r\n          [showInfoButton]=\"false\"\r\n          [showUploadButton]=\"false\"\r\n        ></app-reporting>\r\n    </ng-template>\r\n  </p-toolbar>\r\n\r\n  <div>\r\n\r\n    <Tsi-Generic-Grid\r\n      [formName]=\"formName\"\r\n      [crudService]=\"crudService\"\r\n      [showSearchField]=\"showSearchField\"\r\n      [searchFields]=\"searchFields\"\r\n      [descriminatorValue]=\"descriminatorValue\"\r\n      [header]=\"header\"\r\n      [page]=\"page\"\r\n      [pagedRequest]=\"pagedRequest\"\r\n      [columns]=\"selectedColumns\"\r\n      [showHeaderFilters]=\"showHeaderFilters\"\r\n      [(filtersHtmlTemplate)]=\"filtersHtmlTemplate\"\r\n      [presentationSettings]=\"presentationSettings\"\r\n      (load)=\"load($event)\"\r\n      (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n      [selectKeyOnly]=\"selectKeyOnly\"\r\n      [selectionMode]=\"selectionMode\"\r\n      [key]=\"key\"\r\n      [(selectedItems)]=\"selectedItems\"\r\n      (selectedItemsChange)=\"onSelectedItemsChange($event)\"\r\n      (searchFieldsValueChanged)=\"searchFieldValueChanges($event)\"\r\n      [searchOnInit]=\"searchOnInit\"\r\n      [showExportButton]=\"showExportButton\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\r\n      [showCalenderView]=\"showCalenderView\"\r\n      [showCardView]=\"showCardView\"\r\n      [showKanbanView]=\"showKanbanView\"\r\n      [showKanbanViewOfWorkFlowEtat]=\"showKanbanViewOfWorkFlowEtat\"\r\n      [businessClass]=\"businessClass\"\r\n      [cudComponent]=\"cudComponent\" \r\n      [modalSize]=\"modalSize\" \r\n      [id]=\"id\"\r\n      [page$]=\"page$\"\r\n      [entityInfo]=\"entityInfo\"\r\n      (calendarEventClick)=\"handleCalendarEventClick($event)\"\r\n      (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n      [showInfoButton]=\"true\"\r\n      [showDownloadButton]=\"true\"\r\n      [showUploadButton]=\"true\"\r\n      [showNoteButton]=\"true\"\r\n      [showActionButton]=\"true\"\r\n      [sizingMode]=\"sizingMode\"\r\n    ></Tsi-Generic-Grid>\r\n  </div>\r\n  \r\n</div>\r\n", styles: [".p-button{padding:.1rem!important}.tlbar{border:1px solid gainsboro;padding:2px;background:#f8f9fa}.hide-search-fields{background-color:#64748b!important;border-color:#64748b!important}::ng-deep .no-pad{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i14.SplitButton, selector: "p-splitButton", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "style", "styleClass", "menuStyle", "menuStyleClass", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "component", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: ["cudComponent", "modalSize", "showInfoButton", "showDownloadButton", "showUploadButton", "showNoteButton", "showActionButton", "sizingMode", "formName", "id", "pagedRequest", "configuration", "page", "key", "columns", "isSearchButtonDisabled", "filteredColumns", "gridData", "isTableLoading", "parent", "showSearchBox", "showActionColumn", "showHeaderFilters", "showFilterButton", "isGridDataPagedInApi", "header", "ShowFilterColumns", "showImportExportButton", "crudService", "searchFields", "sortMode", "filtersHtmlTemplate", "presentationSettings", "selectKeyOnly", "selectionMode", "selectedItems", "searchOnInit", "showGlobalSearch", "showExportButton", "showSearchField", "showCalenderView", "calenderSchema", "showCardView", "showKanbanView", "showKanbanViewOfWorkFlowEtat", "page$", "checkedByField", "selectAll", "targetBusinessClass", "descriminatorValue", "businessClass", "entityInfo"], outputs: ["onSave", "editRow", "deleteRow", "load", "buttonColumnClicked", "filtersHtmlTemplateChange", "selectedItemsChange", "searchFieldsValueChanged", "calendarEventClick", "statusFilterChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: ReportingComponent, selector: "app-reporting", inputs: ["showImportExportButton", "showNoteButton", "showInfoButton", "showUploadButton", "showActionButton", "isReportingToolbarDisabled", "formName", "formEndpoint", "formEndpointBody", "isFormEndpointPaged", "filtersHtmlTemplate", "optionalEndpoints", "businessClass", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode"] }, { kind: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]:not(tsi-tab-panel)", inputs: ["presentationDesigner", "presentationDesignerBase"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiGenericCrudComponent, decorators: [{
             type: Component,
             args: [{ selector: 'Tsi-Generic-Crud', providers: [TsiNotificationService], template: "<div class=\"card\">\r\n  \r\n  <p-toolbar styleClass=\"border-radius-7 mb-1 flex align-items-center gap-2 no-pad\" \r\n    *ngIf=\"(showAddButton || searchFields || formEndpoint || businessClass) && showReporting\">\r\n\r\n    <ng-template pTemplate=\"left\">\r\n      <div class=\"flex gap-2 mx-2\">\r\n        <div *ngIf=\"showAddButton\" presentationDesignerBase=\"add_button\">\r\n          <Tsi-Button icon=\"pi pi-plus\" \r\n            [tooltipPosition]=\"tooltipPosition.Top\" \r\n            tooltipText=\"shared_tsi_component_add_view\" \r\n            styleClass=\"p-button-success hover:shadow-6 h-2rem p-button-icon-only\" \r\n            (click)=\"openNew()\">\r\n          </Tsi-Button>\r\n        </div>\r\n        <div *ngIf=\"searchFields\" presentationDesignerBase=\"show_search_fields_button\">\r\n          <Tsi-Button icon=\"pi pi-sliders-h\"\r\n            [tooltipPosition]=\"tooltipPosition.Top\"\r\n            tooltipText=\"shared_tsi_component_menu\"\r\n            styleClass=\"h-2rem p-button-icon-only hover:shadow-6 {{ showSearchField ? 'p-button-secondary' : 'p-button-success' }}\"\r\n            (click)=\"displaySearchFields()\">\r\n          </Tsi-Button>\r\n        </div>\r\n\r\n        <div *ngIf=\"showImportFromOutlookButton\" presentationDesignerBase=\"importFromOutlook_button\">\r\n          <Tsi-Button icon=\"pi pi-envelope\" \r\n            [tooltipPosition]=\"tooltipPosition.Top\" \r\n            tooltipText=\"shared_tsi_component_import_from_outlook\" \r\n            styleClass=\"p-button-info hover:shadow-6 h-2rem p-button-icon-only\" \r\n            (click)=\"onImportClicked()\"> \r\n          </Tsi-Button>\r\n        </div>\r\n\r\n        <div  presentationDesignerBase=\"toggle_actions_view_button\">\r\n          <p-splitButton\r\n            [icon]=\"currentIcon\"\r\n            [model]=\"viewOptions\"\r\n            (onClick)=\"handleActionViewClick()\"\r\n            [tooltip]=\"currentTooltip | localize\"\r\n            class=\"p-button-icon-only p-button-rounded p-button-primary h-2rem hover:shadow-6\"\r\n          />\r\n          <!-- <Tsi-Button\r\n            [icon]=\"currentIcon\"\r\n            styleClass=\"p-element p-button-primary  h-2rem p-button p-component p-button-icon-only\"\r\n            (click)=\"handleActionViewClick()\"\r\n            [tooltipPosition]=\"tooltipPosition.Top\"\r\n            [tooltipText]=\"currentTooltip | localize\">\r\n          </Tsi-Button> -->\r\n        </div>\r\n\r\n        \r\n\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"right\">\r\n        <app-reporting *ngIf=\"(formEndpoint || businessClass)\" \r\n          [formEndpoint]=\"formEndpoint\" \r\n          [formName]=\"formName\"\r\n          [formEndpointBody]=\"formEndpointBody\" \r\n          [isFormEndpointPaged]=\"true\"\r\n          [businessClass]=\"businessClass\"\r\n          [reportDiscriminator]=\"descriminatorValue\"\r\n          (refreshData)=\"refresh($event)\"\r\n          [filtersHtmlTemplate]=\"filtersHtmlTemplate\"\r\n          [pagedRequest]=\"pagedRequest\"\r\n          [cudComponent]=\"cudComponent\" \r\n          [configModeButtonId]=\"configModeButtonId\"\r\n          [showNoteButton]=\"false\"\r\n          [showActionButton]=\"false\"\r\n          [showInfoButton]=\"false\"\r\n          [showUploadButton]=\"false\"\r\n        ></app-reporting>\r\n    </ng-template>\r\n  </p-toolbar>\r\n\r\n  <div>\r\n\r\n    <Tsi-Generic-Grid\r\n      [formName]=\"formName\"\r\n      [crudService]=\"crudService\"\r\n      [showSearchField]=\"showSearchField\"\r\n      [searchFields]=\"searchFields\"\r\n      [descriminatorValue]=\"descriminatorValue\"\r\n      [header]=\"header\"\r\n      [page]=\"page\"\r\n      [pagedRequest]=\"pagedRequest\"\r\n      [columns]=\"selectedColumns\"\r\n      [showHeaderFilters]=\"showHeaderFilters\"\r\n      [(filtersHtmlTemplate)]=\"filtersHtmlTemplate\"\r\n      [presentationSettings]=\"presentationSettings\"\r\n      (load)=\"load($event)\"\r\n      (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n      [selectKeyOnly]=\"selectKeyOnly\"\r\n      [selectionMode]=\"selectionMode\"\r\n      [key]=\"key\"\r\n      [(selectedItems)]=\"selectedItems\"\r\n      (selectedItemsChange)=\"onSelectedItemsChange($event)\"\r\n      (searchFieldsValueChanged)=\"searchFieldValueChanges($event)\"\r\n      [searchOnInit]=\"searchOnInit\"\r\n      [showExportButton]=\"showExportButton\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\r\n      [showCalenderView]=\"showCalenderView\"\r\n      [showCardView]=\"showCardView\"\r\n      [showKanbanView]=\"showKanbanView\"\r\n      [showKanbanViewOfWorkFlowEtat]=\"showKanbanViewOfWorkFlowEtat\"\r\n      [businessClass]=\"businessClass\"\r\n      [cudComponent]=\"cudComponent\" \r\n      [modalSize]=\"modalSize\" \r\n      [id]=\"id\"\r\n      [page$]=\"page$\"\r\n      [entityInfo]=\"entityInfo\"\r\n      (calendarEventClick)=\"handleCalendarEventClick($event)\"\r\n      (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n      [showInfoButton]=\"true\"\r\n      [showDownloadButton]=\"true\"\r\n      [showUploadButton]=\"true\"\r\n      [showNoteButton]=\"true\"\r\n      [showActionButton]=\"true\"\r\n      [sizingMode]=\"sizingMode\"\r\n    ></Tsi-Generic-Grid>\r\n  </div>\r\n  \r\n</div>\r\n", styles: [".p-button{padding:.1rem!important}.tlbar{border:1px solid gainsboro;padding:2px;background:#f8f9fa}.hide-search-fields{background-color:#64748b!important;border-color:#64748b!important}::ng-deep .no-pad{padding:0!important}\n"] }]
-        }], ctorParameters: () => [{ type: TsiNotificationService }, { type: i2$2.MessageService }, { type: TsiModalService }, { type: i0.ChangeDetectorRef }, { type: LocalizePipe }, { type: DialogDataService }, { type: FichierUploadService }, { type: RecordInfoPopupService }, { type: WorkflowConfigurationService }, { type: EntityConfigurationService }, { type: NoteService }, { type: i0.EnvironmentInjector }, { type: DiscriminatorService }], propDecorators: { entityInfo: [{
+        }], ctorParameters: () => [{ type: TsiNotificationService }, { type: i2$1.MessageService }, { type: TsiModalService }, { type: i0.ChangeDetectorRef }, { type: LocalizePipe }, { type: DialogDataService }, { type: FichierUploadService }, { type: RecordInfoPopupService }, { type: WorkflowConfigurationService }, { type: EntityConfigurationService }, { type: NoteService }, { type: i0.EnvironmentInjector }, { type: DiscriminatorService }], propDecorators: { entityInfo: [{
                 type: Input
             }], genericGridComponent: [{
                 type: ViewChild,
@@ -14583,12 +14946,12 @@ class PresentationDesignerDirective extends PresentationDesignerDirectiveBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PresentationDesignerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: LayoutHelperService }, { token: WorkflowConfigurationService }, { token: PresentationDesignerService }, { token: TsiGenericCrudComponent, optional: true }, { token: TsiViewGridComponent, optional: true }, { token: TsiGenericGridComponent, optional: true }, { token: EditableGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PresentationDesignerDirective, selector: "[presentationDesigner]", queries: [{ propertyName: "editableGridChild", first: true, predicate: EditableGridComponent, descendants: true }, { propertyName: "viewGridChild", first: true, predicate: TsiViewGridComponent, descendants: true }, { propertyName: "genericGridChild", first: true, predicate: TsiGenericGridComponent, descendants: true }, { propertyName: "genericCrudChild", first: true, predicate: TsiGenericCrudComponent, descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PresentationDesignerDirective, selector: "[presentationDesigner]:not(tsi-tab-panel)", queries: [{ propertyName: "editableGridChild", first: true, predicate: EditableGridComponent, descendants: true }, { propertyName: "viewGridChild", first: true, predicate: TsiViewGridComponent, descendants: true }, { propertyName: "genericGridChild", first: true, predicate: TsiGenericGridComponent, descendants: true }, { propertyName: "genericCrudChild", first: true, predicate: TsiGenericCrudComponent, descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PresentationDesignerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[presentationDesigner]'
+                    selector: '[presentationDesigner]:not(tsi-tab-panel)'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: LayoutHelperService }, { type: WorkflowConfigurationService }, { type: PresentationDesignerService }, { type: TsiGenericCrudComponent, decorators: [{
                     type: Optional
@@ -14690,43 +15053,21 @@ function lengthValidator(minValue) {
         }
         return null;
     };
-}
-
-class AdDirective {
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AdDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AdDirective, selector: "[adHost]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AdDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[adHost]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
-
-class TsiTemplate {
-    constructor(template) {
-        this.template = template;
-    }
-    getType() {
-        return this.name;
+}
+
+class AdDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: TsiTemplate, selector: "[tsiTemplate]", inputs: { type: "type", name: ["tsiTemplate", "name"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AdDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AdDirective, selector: "[adHost]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AdDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[tsiTemplate]'
+                    selector: '[adHost]'
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { type: [{
-                type: Input
-            }], name: [{
-                type: Input,
-                args: ['tsiTemplate']
-            }] } });
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 
 class AlertImportMessageComponent {
     constructor(config, _modeleImportService) {
@@ -14904,7 +15245,7 @@ class TsiModalHeaderComponent {
         this.onCloseClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiModalHeaderComponent, deps: [{ token: LayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiModalHeaderComponent, selector: "Tsi-Modal-Header", inputs: { inputTitle: "inputTitle" }, outputs: { onCloseClick: "onCloseClick" }, ngImport: i0, template: "<p-header class=\"p-dialog-header tsi-modal-header absolute top-0 {{stylePositionClass}} mb-4 pb-0 mx-2\"\r\n  (onHide)=\"hideDialog()\">\r\n  <div class=\"header-toolbar\" *ngIf=\"toolbarTemplateHeader\">\r\n    <ng-container \r\n      *ngTemplateOutlet=\"toolbarTemplateHeader; context: { title: inputTitle }\"\r\n      ></ng-container>\r\n  </div>\r\n</p-header>", styles: ["::ng-deep .p-dialog .p-dialog-header{padding:1rem 0;display:flex;align-items:center}::ng-deep .header-toolbar{flex-grow:1;max-width:100%;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}::ng-deep .tsi-modal-header{display:flex;justify-content:space-between;align-items:center;width:calc(100% - 70px);gap:1rem;flex-wrap:wrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.Header, selector: "p-header" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiModalHeaderComponent, selector: "Tsi-Modal-Header", inputs: { inputTitle: "inputTitle" }, outputs: { onCloseClick: "onCloseClick" }, ngImport: i0, template: "<p-header class=\"p-dialog-header tsi-modal-header absolute top-0 {{stylePositionClass}} mb-4 pb-0 mx-2\"\r\n  (onHide)=\"hideDialog()\">\r\n  <div class=\"header-toolbar\" *ngIf=\"toolbarTemplateHeader\">\r\n    <ng-container \r\n      *ngTemplateOutlet=\"toolbarTemplateHeader; context: { title: inputTitle }\"\r\n      ></ng-container>\r\n  </div>\r\n</p-header>", styles: ["::ng-deep .p-dialog .p-dialog-header{padding:1rem 0;display:flex;align-items:center}::ng-deep .header-toolbar{flex-grow:1;max-width:100%;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}::ng-deep .tsi-modal-header{display:flex;justify-content:space-between;align-items:center;width:calc(100% - 70px);gap:1rem;flex-wrap:wrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.Header, selector: "p-header" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiModalHeaderComponent, decorators: [{
             type: Component,
@@ -14977,6 +15318,7 @@ class TsiListBaseComponent extends AppBaseComponent {
         this._presentationDesignerBaseService = inject(PresentationDesignerBaseService);
         this.configApplied = false;
         this.directiveElements = [];
+        this.designModeActive = false;
     }
     //#region handle lifecycle hooks
     ngOnDestroy() {
@@ -15191,13 +15533,23 @@ class TsiListBaseComponent extends AppBaseComponent {
         this._addedDirectiveSubscritpion =
             this._presentationDesignerService.addedDirectiveObservable.subscribe((data) => {
                 if (!data.treated) {
-                    this.processSingleElement(data);
+                    if (this.designModeActive && this._layoutHelperService.isDesignMode) {
+                        this.processSingleElementInDesignMode(data);
+                    }
+                    else {
+                        this.processSingleElement(data);
+                    }
                 }
             });
         this._addedBaseDirectiveSubscritpion =
             this._presentationDesignerBaseService.addedDirectiveObservable.subscribe((data) => {
                 if (!data.treated) {
-                    this.processSingleElement(data);
+                    if (this.designModeActive && this._layoutHelperService.isDesignMode) {
+                        this.processSingleElementInDesignMode(data);
+                    }
+                    else {
+                        this.processSingleElement(data);
+                    }
                 }
             });
     }
@@ -15211,6 +15563,21 @@ class TsiListBaseComponent extends AppBaseComponent {
             directive.execute(true, presentationSettingDetail?.configuration);
         }
     }
+    // Directives registering while design mode is active (content first rendered
+    // during configuration, e.g. panels of a nested tab view) missed the
+    // toggleDesignMode() pass: decorate them the same way and add them to
+    // directiveElements so saveProperties() keeps a detail for them.
+    processSingleElementInDesignMode(directive) {
+        if (this.directiveElements.includes(directive)) {
+            return;
+        }
+        this.directiveElements.push(directive);
+        directive.insertElement();
+        if (directive instanceof PresentationDesignerDirective) {
+            directive.selectApproriateColumns(this.presentationRequest);
+        }
+        directive.addCheckboxesToInputs(this.presentationRequest);
+    }
     applyConfigurationToElements() {
         this.directiveElements?.forEach((directive) => {
             let presentationSettingDetail = this.presentationRequest?.presentationSettingDetails?.find((x) => x.blockName == directive.presentationDesigner);
@@ -15253,6 +15620,7 @@ class TsiListBaseComponent extends AppBaseComponent {
                 this._renderer?.appendChild(parentElement, tsiButtonRef.location.nativeElement);
                 this.presentationRequest =
                     this._presentationSettingService.getPresentationSettingByComponentIdentifierSync(this.getComponentIdentifier(), this.descriminatorValue) ?? new PresentationSetting();
+                this.designModeActive = true;
                 this.directiveElements?.forEach((input) => {
                     input.insertElement();
                     if (input instanceof PresentationDesignerDirective) {
@@ -15334,6 +15702,7 @@ class TsiListBaseComponent extends AppBaseComponent {
     }
     processState() {
         this._layoutHelperService.isDesignMode = false;
+        this.designModeActive = false;
         this._layoutHelperService._designModeListSubject.next(false);
         let savePropertiesBtn = document.getElementById(this.savePropertyBtnId);
         this._renderer.removeChild(savePropertiesBtn?.parentNode, savePropertiesBtn);
@@ -15524,7 +15893,7 @@ class DynamicFormListComponent extends TsiListBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicFormListComponent, deps: [{ token: FormDataService }, { token: DialogDataService }, { 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: DynamicFormListComponent, selector: "shared-dynamic-form-list", inputs: { occurence: "occurence", occurenceBusinessClass: "occurenceBusinessClass", occurenceDiscriminatorValue: "occurenceDiscriminatorValue", ignoreDialogConfig: "ignoreDialogConfig" }, providers: [...appProviders], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"isLoaded\">\r\n  <Tsi-Generic-Crud\r\n  [cudComponent]=\"comp\"\r\n  [header]=\"titleComponent\"\r\n  [columns]=\"columns\"\r\n  [crudService]=\"formDataService\"\r\n  [modalData]=\"modalData\"\r\n  [modalSize]=\"modalSize\"\r\n  [showUploadButton]=\"false\"\r\n  [showNoteButton]=\"false\"\r\n  [showCalenderView]=\"false\"\r\n  [showFormButton]=\"false\"\r\n  [showInfoButton]=\"false\"\r\n  [showConsultButton]=\"true\"\r\n  presentationDesigner />\r\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TsiGenericCrudComponent, selector: "Tsi-Generic-Crud", inputs: ["entityInfo", "modalData", "columns", "gridConfiguration", "cudComponent", "crudService", "header", "modalSize", "descriminatorValue", "presentationSettings", "preventAddEvent", "formEndpoint", "formName", "isSearchButtonDisabled", "showHeaderFilters", "showEditButton", "showDeleteButton", "showAddButton", "showConsultButton", "showUploadButton", "showNoteButton", "showDownloadButton", "showInfoButton", "showDuplicateButton", "showFormButton", "showCalenderView", "showCardView", "showImportFromOutlookButton", "showKanbanView", "showKanbanViewOfWorkFlowEtat", "showSearchField", "searchFields", "calenderSchema", "showActionButton", "sizingMode", "selectKeyOnly", "selectionMode", "selectedItems", "key", "id", "businessClass", "searchOnInit", "showGlobalSearch", "showExportButton", "showReporting"], outputs: ["selectedItemsChange", "searchFieldsValueChanged", "buttonColumnClicked", "onImportFromOutlookClicked"] }, { kind: "directive", type: PresentationDesignerDirective, selector: "[presentationDesigner]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DynamicFormListComponent, selector: "shared-dynamic-form-list", inputs: { occurence: "occurence", occurenceBusinessClass: "occurenceBusinessClass", occurenceDiscriminatorValue: "occurenceDiscriminatorValue", ignoreDialogConfig: "ignoreDialogConfig" }, providers: [...appProviders], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"isLoaded\">\r\n  <Tsi-Generic-Crud\r\n  [cudComponent]=\"comp\"\r\n  [header]=\"titleComponent\"\r\n  [columns]=\"columns\"\r\n  [crudService]=\"formDataService\"\r\n  [modalData]=\"modalData\"\r\n  [modalSize]=\"modalSize\"\r\n  [showUploadButton]=\"false\"\r\n  [showNoteButton]=\"false\"\r\n  [showCalenderView]=\"false\"\r\n  [showFormButton]=\"false\"\r\n  [showInfoButton]=\"false\"\r\n  [showConsultButton]=\"true\"\r\n  presentationDesigner />\r\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TsiGenericCrudComponent, selector: "Tsi-Generic-Crud", inputs: ["entityInfo", "modalData", "columns", "gridConfiguration", "cudComponent", "crudService", "header", "modalSize", "descriminatorValue", "presentationSettings", "preventAddEvent", "formEndpoint", "formName", "isSearchButtonDisabled", "showHeaderFilters", "showEditButton", "showDeleteButton", "showAddButton", "showConsultButton", "showUploadButton", "showNoteButton", "showDownloadButton", "showInfoButton", "showDuplicateButton", "showFormButton", "showCalenderView", "showCardView", "showImportFromOutlookButton", "showKanbanView", "showKanbanViewOfWorkFlowEtat", "showSearchField", "searchFields", "calenderSchema", "showActionButton", "sizingMode", "selectKeyOnly", "selectionMode", "selectedItems", "key", "id", "businessClass", "searchOnInit", "showGlobalSearch", "showExportButton", "showReporting"], outputs: ["selectedItemsChange", "searchFieldsValueChanged", "buttonColumnClicked", "onImportFromOutlookClicked"] }, { kind: "directive", type: PresentationDesignerDirective, selector: "[presentationDesigner]:not(tsi-tab-panel)" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicFormListComponent, decorators: [{
             type: Component,
@@ -16119,7 +16488,7 @@ class TsiFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiFormComponent, deps: [{ token: EntityStatusService }, { token: StatusColorService }, { token: FichierService }, { 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", formEndpoint: "formEndpoint", formName: "formName", isReportingToolbarDisabled: "isReportingToolbarDisabled", isCreateOnly: "isCreateOnly", statusInputDisabled: "statusInputDisabled" }, outputs: { onSave: "onSave", 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            [nombreDocumentsJoints]=\"nombreDocuments\" [configModeButtonId]=\"configModeButtonId\"\r\n            [isReportingToolbarDisabled]=\"isReportingToolbarDisabled\" (toggleDesignMode)=\"toggleDesignMode($event)\"\r\n            [businessClass]=\"businessClass\" (closedModalFileUpload)=\"getNombreFichier()\"\r\n            [showImportExportButton]=\"false\" [showActionButton]=\"showActionButton\" #reportingApp\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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: 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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i7$1.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7$1.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", "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", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode"] }, { 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]" }, { 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", formEndpoint: "formEndpoint", formName: "formName", isReportingToolbarDisabled: "isReportingToolbarDisabled", isCreateOnly: "isCreateOnly", statusInputDisabled: "statusInputDisabled" }, outputs: { onSave: "onSave", 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            [nombreDocumentsJoints]=\"nombreDocuments\" [configModeButtonId]=\"configModeButtonId\"\r\n            [isReportingToolbarDisabled]=\"isReportingToolbarDisabled\" (toggleDesignMode)=\"toggleDesignMode($event)\"\r\n            [businessClass]=\"businessClass\" (closedModalFileUpload)=\"getNombreFichier()\"\r\n            [showImportExportButton]=\"false\" [showActionButton]=\"showActionButton\" #reportingApp\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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: 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$1.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7$1.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", "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", "cudComponent", "httpMethodType", "requestData", "customReportingMode", "pagedRequest", "reportDiscriminator", "nombreDocumentsJoints", "id", "configModeButtonId", "selectedItemUids", "fromTsiForm", "customSendMailMode", "reportingInformation"], outputs: ["onSave", "refreshData", "closedModalFileUpload", "toggleDesignMode"] }, { 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,
@@ -16310,6 +16679,7 @@ class TsiFormComponentBaseComponent extends AppBaseComponent {
         this._formStateService = inject(FormStateService);
         this._colonnePersonnaliseeService = inject(ColonnePersonnaliseeService);
         this.directiveElements = [];
+        this.designModeActive = false;
         this.presentationRequest = new PresentationSetting();
         //#region Outputs
         this.onSave = new EventEmitter();
@@ -16331,6 +16701,10 @@ class TsiFormComponentBaseComponent extends AppBaseComponent {
             if (data.treated) {
                 return;
             }
+            if (this.designModeActive && this._layoutHelperService.isDesignMode && !this._workflowConfigurationService.isDesginModeFromWorkflow) {
+                this.processSingleElementInDesignMode(data);
+                return;
+            }
             if (this._workflowConfigurationService.isDesginModeFromWorkflow) {
                 this.entityInfo = this._workflowConfigurationService.currentWorkflowEntityInfo;
             }
@@ -16346,6 +16720,10 @@ class TsiFormComponentBaseComponent extends AppBaseComponent {
             if (data.treated) {
                 return;
             }
+            if (this.designModeActive && this._layoutHelperService.isDesignMode && !this._workflowConfigurationService.isDesginModeFromWorkflow) {
+                this.processSingleElementInDesignMode(data);
+                return;
+            }
             if (this._workflowConfigurationService.isDesginModeFromWorkflow) {
                 this.entityInfo = this._workflowConfigurationService.currentWorkflowEntityInfo;
             }
@@ -16369,6 +16747,7 @@ class TsiFormComponentBaseComponent extends AppBaseComponent {
         this.directiveElements = [...this._presentationDesignerService.getDirectives(),
             ...this._presentationDesignerBaseService.getDirectives()
         ];
+        this.designModeActive = true;
         this.directiveElements?.forEach(input => {
             input.insertElement();
             if (input instanceof PresentationDesignerDirective) {
@@ -16559,6 +16938,9 @@ class TsiFormComponentBaseComponent extends AppBaseComponent {
             }
         }
     }
+    markInputAsDirty(inputName) {
+        this._inputRegistry.markInputAsDirty(inputName);
+    }
     resolveFiche(val, apiResponse) {
         this._inputRegistry.resetDirtyStatusForAllInputs();
         const hasUid = apiResponse?.uid != null;
@@ -16770,6 +17152,21 @@ class TsiFormComponentBaseComponent extends AppBaseComponent {
             }
         }
     }
+    // Directives registering while design mode is active (content first rendered
+    // during configuration, e.g. panels of a nested tab view) missed the
+    // toggleDesignMode() pass: decorate them the same way and add them to
+    // directiveElements so saveProperties() keeps a detail for them.
+    processSingleElementInDesignMode(directive) {
+        if (this.directiveElements.includes(directive)) {
+            return;
+        }
+        this.directiveElements.push(directive);
+        directive.insertElement();
+        if (directive instanceof PresentationDesignerDirective) {
+            directive.selectApproriateColumns(this.presentationRequest);
+        }
+        directive.addCheckboxesToInputs(this.presentationRequest);
+    }
     unsubscribeFromActiveSubscritpion() {
         if (this._designModeFormSubscription) {
             this._designModeFormSubscription.unsubscribe();
@@ -16805,6 +17202,7 @@ class TsiFormComponentBaseComponent extends AppBaseComponent {
         this.hide();
         this._messageInfoService.success(LocalizationKeys.savedSuccessfully);
         this._layoutHelperService.isDesignMode = false;
+        this.designModeActive = false;
         // this._layoutHelperService.currentFormName = undefined
         this._layoutHelperService._designModeFormSubject.next(false);
         await this._presentationSettingService.loadPresentationSettings();
@@ -17551,7 +17949,7 @@ class ManageImportExportComponent extends TsiFormComponentBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageImportExportComponent, deps: [{ token: ModeleImportService }, { token: TsiConfirmationService }, { token: TsiNotificationService }, { token: i1$3.DynamicDialogConfig }, { token: TsiModalService }, { token: ErrorResponseManagerService }, { token: i1$3.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ManageImportExportComponent, selector: "app-manage-import-export", providers: [...appProviders], viewQueries: [{ propertyName: "gridComponent", first: true, predicate: TsiViewGridComponent, descendants: true }, { propertyName: "fileUploader", first: true, predicate: ["fileUpload"], descendants: true }, { propertyName: "viewGridComponent", first: true, predicate: ["viewGrid"], descendants: true }, { propertyName: "importFileToExecuteFileUpload", first: true, predicate: ["importFileToExecuteFileUpload"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-tabView>\r\n  <p-tabPanel [header]=\"'shared_execute_import_model_import_export' | localize\" class=\"pt-3 px-2\">\r\n    <div class=\"card\">\r\n      <div *busy=\"isloading\"></div>\r\n      <div class=\"grid\">\r\n        <div class=\"grid col-10\">\r\n          <div>\r\n            <Tsi-Label class=\"col-2\" [labelValue]=\"'shared_reporting_form'\">\r\n            </Tsi-Label>\r\n            <!-- <p-dropdown class=\"col-10 tsi-component\" class=\"tsi-component\" styleClass=\"tsi-component\" appendTp=\"body\"\r\n                optionLabel=\"value\" optionValue=\"key\" [filter]=\"true\"\r\n                filterBy=\"value\" [showClear]=\"true\" placeholder=\"{{'shared_reporting_select_form' | localize}}\"\r\n                [disabled]=\"true\">\r\n              </p-dropdown> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <p-toolbar styleClass=\"mb-4 gap-2\">\r\n        <ng-template pTemplate=\"left\">\r\n          <Tsi-Button [text]=\"'shared_reporting_add_report' | localize\"\r\n            icon=\"p-button-icon p-button-icon-left pi pi-plus\"\r\n            styleClass=\"p-element p-button-success mr-2 p-button p-component ng-star-inserted p-button-label\"\r\n            (click)=\"openModal()\"></Tsi-Button>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"right\">\r\n          <p-fileUpload #fileUpload name=\"demo[]\" (onBeforeUpload)=\"onImportFile($event)\"\r\n            (onSelect)=\"onFileSelected($event)\" (onClear)=\"onClear($event)\" (onRemove)=\"onRemove($event)\"\r\n            [multiple]=\"false\" accept=\"application/json\" [maxFileSize]=\"1000000\"\r\n            [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n            [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n            [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n            [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n            [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n            [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n            [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n            removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n            [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n            [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n            <ng-template *ngIf=\"toUploadFileData\" pTemplate=\"fileupload-content\" let-files>\r\n              <div *ngIf=\"files?.length\">\r\n                <strong>{{ files[0].name }}</strong>\r\n              </div>\r\n            </ng-template>\r\n          </p-fileUpload>\r\n        </ng-template>\r\n      </p-toolbar>\r\n\r\n      <tsi-view-grid #viewGrid [header]=\"'shared_execute_import_model_import_export'  |localize\"\r\n        [searchFields]=\"searchFields\" [showConsultButton]=\"false\" [getDataFromApi]=\"true\"\r\n        [crudService]=\"modeleImportService\" (buttonColumnClicked)=\"buttonClicked($event)\"\r\n        [formName]=\"'app-manage-import-export'\" [columns]=\"columns\" key=\"uid\" [selectKeyOnly]=\"false\">\r\n      </tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_execute_import_model_import_export_default' | localize\" class=\"pt-3 px-2\">\r\n    <div class=\"grid\">\r\n      <tsi-view-grid class=\"col-12\" [header]=\"'shared_execute_import_model_import_export_default'  |localize\"\r\n        [columns]=\"columnsJson\" [getDataFromApi]=\"false\" [gridData]=\"gridData\" [key]=\"key\"\r\n        [formName]=\"'modele-import-par-default'\"\r\n        (buttonColumnClicked)=\"handleButtonColumnExecuteClicked($event)\"></tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_execute_import_history' | localize\" class=\"pt-3 px-2\">\r\n    <div class=\"grid\">\r\n      <tsi-view-grid class=\"col-12\" [header]=\"'shared_execute_import_history'  |localize\" [columns]=\"columnsHistory\"\r\n        [getDataFromApi]=\"false\" [gridData]=\"historyGridData\" [key]=\"importHistoryKey\"\r\n        [formName]=\"'modele-import-par-default'\"\r\n        (buttonColumnClicked)=\"handleButtonColumnExecuteClicked($event)\"></tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_execute_import_without_model' | localize\" class=\"pt-3 px-2\">\r\n    <div *busy=\"isloading\"></div>\r\n    <ng-template pTemplate=\"body\">\r\n      <p-fileUpload #importFileToReportFileUpload name=\"importFileToReport\" [multiple]=\"false\"\r\n        (onSelect)=\"onImportFileWithoutModel_FileSelected($event)\" (onClear)=\"onImportFileWithoutModel_Clear($event)\"\r\n        (onBeforeUpload)=\"onImportFileWithoutModel_ImportFile($event)\"\r\n        (onRemove)=\"onImportFileWithoutModel_Remove($event)\" accept=\".xls,.xlsx\" [maxFileSize]=\"10000000\"\r\n        [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n        [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n        [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n        [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n        [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n        [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n        [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n        removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n        [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n        [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n        <ng-template *ngIf=\"toUploadWithoutModel\" pTemplate=\"fileupload-content\" let-files>\r\n          <div *ngIf=\"files?.length\">\r\n            <strong>{{ files[0].name }}</strong>\r\n          </div>\r\n        </ng-template>\r\n      </p-fileUpload>\r\n    </ng-template>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_import_result_header' | localize\" class=\"pt-3 px-2\">\r\n\r\n    <div class=\"p-1\">\r\n      <Tsi-Button (onClick)=\"getImportResult()\"\r\n        styleClass=\"p-element p-button-text p-button-raised p-button-rounded mr-2 p-button p-component p-button-icon-only\"\r\n        [tooltipText]=\"'shared_import_export_refresh'\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n        icon=\"p-button-icon pi pi-refresh\" class=\"p-button-text p-button-raised p-button-rounded mr-2\"></Tsi-Button>\r\n    </div>\r\n\r\n    <div class=\"grid\">\r\n      <tsi-view-grid class=\"col-12\" [header]=\"'shared_import_result_header'  |localize\" [columns]=\"importResultsColumns\"\r\n        [getDataFromApi]=\"false\" [gridData]=\"importResultData\" [key]=\"'uid'\" [formName]=\"'modele-import-result-import'\"\r\n        (buttonColumnClicked)=\"handleConsultImportResultButtonClicked($event)\"></tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n</p-tabView>\r\n\r\n<div class=\"p-1\">\r\n  <Tsi-Button\r\n    styleClass=\"p-element p-button-text p-button-raised p-button-rounded mr-2 p-button p-component p-button-icon-only\"\r\n    [tooltipText]=\"'shared_import_export_refresh'\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n    icon=\"p-button-icon pi pi-refresh\" (onClick)=\"refreshImportExportData()\"\r\n    class=\"p-button-text p-button-raised p-button-rounded mr-2\"></Tsi-Button>\r\n</div>\r\n\r\n<!-- dialog to import file to report -->\r\n<p-dialog header=\"{{'shared_reporting_select_file_to_import_into_report' | localize}}\"\r\n  [(visible)]=\"isImportFileToExecuteVisible\" [style]=\"{width: '50vw'}\">\r\n  <!-- <Tsi-Modal-Header (onCloseClick)=\"onImportFileToReportModalCancelClick()\" [inputTitle]=\"'shared_reporting_select_file_to_import_into_report'\"></Tsi-Modal-Header> -->\r\n\r\n  <ng-template pTemplate=\"body\">\r\n    <p-fileUpload #importFileToReportFileUpload name=\"importFileToReport\" [multiple]=\"false\"\r\n      (onSelect)=\"onImportFileToExecute_FileSelected($event)\" (onClear)=\"onImportFileToExecute_Clear($event)\"\r\n      (onBeforeUpload)=\"onImportFileToExecute_ImportFile($event)\" (onRemove)=\"onImportFileToExecute_Remove($event)\"\r\n      accept=\"{{fileType}}\" [maxFileSize]=\"10000000\"\r\n      [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n      [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n      [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n      [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n      [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n      [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n      [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n      removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n      [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n      [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n      <ng-template *ngIf=\"toUploadToExecuteFile\" pTemplate=\"fileupload-content\" let-files>\r\n        <div *ngIf=\"files?.length\">\r\n          <strong>{{ files[0].name }}</strong>\r\n        </div>\r\n      </ng-template>\r\n    </p-fileUpload>\r\n  </ng-template>\r\n\r\n\r\n  <!-- <Tsi-Modal-Footer (onCancelClick)=\"onImportFileToReportModalCancelClick()\"\r\n    (onSaveClick)=\"onImportFileToReportModalSaveClick()\"\r\n    [saveDisabled]=\"!toUploadToUpdateReportFileData\"></Tsi-Modal-Footer> -->\r\n\r\n</p-dialog>", styles: ["::ng-deep .p-fileupload-choose input{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i3$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i7$1.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7$1.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "component", type: TsiViewGridComponent, selector: "tsi-view-grid", inputs: ["columns", "gridConfiguration", "viewComponent", "crudService", "header", "modalSize", "showConsultButton", "showSearchField", "searchFields", "formEndpoint", "formName", "id", "showImportExportButton", "targetBusinessClass", "getDataFromApi", "gridData", "isSearchButtonDisabled", "selectKeyOnly", "selectionMode", "selectedItems", "key", "showGlobalSearch", "showExportButton", "showCalenderView", "showHeaderFilters", "showFilterButton", "selectAll", "checkedByField", "sortMode", "sizingMode", "searchOnInit"], outputs: ["summariesChange", "selectedItemsChange", "buttonColumnClicked", "searchFieldsValueChanged", "getAllPagedResultChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "directive", type: BusyDirective, selector: "[busy]", inputs: ["busy"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ManageImportExportComponent, selector: "app-manage-import-export", providers: [...appProviders], viewQueries: [{ propertyName: "gridComponent", first: true, predicate: TsiViewGridComponent, descendants: true }, { propertyName: "fileUploader", first: true, predicate: ["fileUpload"], descendants: true }, { propertyName: "viewGridComponent", first: true, predicate: ["viewGrid"], descendants: true }, { propertyName: "importFileToExecuteFileUpload", first: true, predicate: ["importFileToExecuteFileUpload"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-tabView>\r\n  <p-tabPanel [header]=\"'shared_execute_import_model_import_export' | localize\" class=\"pt-3 px-2\">\r\n    <div class=\"card\">\r\n      <div *busy=\"isloading\"></div>\r\n      <div class=\"grid\">\r\n        <div class=\"grid col-10\">\r\n          <div>\r\n            <Tsi-Label class=\"col-2\" [labelValue]=\"'shared_reporting_form'\">\r\n            </Tsi-Label>\r\n            <!-- <p-dropdown class=\"col-10 tsi-component\" class=\"tsi-component\" styleClass=\"tsi-component\" appendTp=\"body\"\r\n                optionLabel=\"value\" optionValue=\"key\" [filter]=\"true\"\r\n                filterBy=\"value\" [showClear]=\"true\" placeholder=\"{{'shared_reporting_select_form' | localize}}\"\r\n                [disabled]=\"true\">\r\n              </p-dropdown> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <p-toolbar styleClass=\"mb-4 gap-2\">\r\n        <ng-template pTemplate=\"left\">\r\n          <Tsi-Button [text]=\"'shared_reporting_add_report' | localize\"\r\n            icon=\"p-button-icon p-button-icon-left pi pi-plus\"\r\n            styleClass=\"p-element p-button-success mr-2 p-button p-component ng-star-inserted p-button-label\"\r\n            (click)=\"openModal()\"></Tsi-Button>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"right\">\r\n          <p-fileUpload #fileUpload name=\"demo[]\" (onBeforeUpload)=\"onImportFile($event)\"\r\n            (onSelect)=\"onFileSelected($event)\" (onClear)=\"onClear($event)\" (onRemove)=\"onRemove($event)\"\r\n            [multiple]=\"false\" accept=\"application/json\" [maxFileSize]=\"1000000\"\r\n            [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n            [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n            [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n            [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n            [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n            [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n            [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n            removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n            [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n            [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n            <ng-template *ngIf=\"toUploadFileData\" pTemplate=\"fileupload-content\" let-files>\r\n              <div *ngIf=\"files?.length\">\r\n                <strong>{{ files[0].name }}</strong>\r\n              </div>\r\n            </ng-template>\r\n          </p-fileUpload>\r\n        </ng-template>\r\n      </p-toolbar>\r\n\r\n      <tsi-view-grid #viewGrid [header]=\"'shared_execute_import_model_import_export'  |localize\"\r\n        [searchFields]=\"searchFields\" [showConsultButton]=\"false\" [getDataFromApi]=\"true\"\r\n        [crudService]=\"modeleImportService\" (buttonColumnClicked)=\"buttonClicked($event)\"\r\n        [formName]=\"'app-manage-import-export'\" [columns]=\"columns\" key=\"uid\" [selectKeyOnly]=\"false\">\r\n      </tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_execute_import_model_import_export_default' | localize\" class=\"pt-3 px-2\">\r\n    <div class=\"grid\">\r\n      <tsi-view-grid class=\"col-12\" [header]=\"'shared_execute_import_model_import_export_default'  |localize\"\r\n        [columns]=\"columnsJson\" [getDataFromApi]=\"false\" [gridData]=\"gridData\" [key]=\"key\"\r\n        [formName]=\"'modele-import-par-default'\"\r\n        (buttonColumnClicked)=\"handleButtonColumnExecuteClicked($event)\"></tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_execute_import_history' | localize\" class=\"pt-3 px-2\">\r\n    <div class=\"grid\">\r\n      <tsi-view-grid class=\"col-12\" [header]=\"'shared_execute_import_history'  |localize\" [columns]=\"columnsHistory\"\r\n        [getDataFromApi]=\"false\" [gridData]=\"historyGridData\" [key]=\"importHistoryKey\"\r\n        [formName]=\"'modele-import-par-default'\"\r\n        (buttonColumnClicked)=\"handleButtonColumnExecuteClicked($event)\"></tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_execute_import_without_model' | localize\" class=\"pt-3 px-2\">\r\n    <div *busy=\"isloading\"></div>\r\n    <ng-template pTemplate=\"body\">\r\n      <p-fileUpload #importFileToReportFileUpload name=\"importFileToReport\" [multiple]=\"false\"\r\n        (onSelect)=\"onImportFileWithoutModel_FileSelected($event)\" (onClear)=\"onImportFileWithoutModel_Clear($event)\"\r\n        (onBeforeUpload)=\"onImportFileWithoutModel_ImportFile($event)\"\r\n        (onRemove)=\"onImportFileWithoutModel_Remove($event)\" accept=\".xls,.xlsx\" [maxFileSize]=\"10000000\"\r\n        [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n        [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n        [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n        [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n        [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n        [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n        [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n        removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n        [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n        [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n        <ng-template *ngIf=\"toUploadWithoutModel\" pTemplate=\"fileupload-content\" let-files>\r\n          <div *ngIf=\"files?.length\">\r\n            <strong>{{ files[0].name }}</strong>\r\n          </div>\r\n        </ng-template>\r\n      </p-fileUpload>\r\n    </ng-template>\r\n  </p-tabPanel>\r\n\r\n  <p-tabPanel [header]=\"'shared_import_result_header' | localize\" class=\"pt-3 px-2\">\r\n\r\n    <div class=\"p-1\">\r\n      <Tsi-Button (onClick)=\"getImportResult()\"\r\n        styleClass=\"p-element p-button-text p-button-raised p-button-rounded mr-2 p-button p-component p-button-icon-only\"\r\n        [tooltipText]=\"'shared_import_export_refresh'\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n        icon=\"p-button-icon pi pi-refresh\" class=\"p-button-text p-button-raised p-button-rounded mr-2\"></Tsi-Button>\r\n    </div>\r\n\r\n    <div class=\"grid\">\r\n      <tsi-view-grid class=\"col-12\" [header]=\"'shared_import_result_header'  |localize\" [columns]=\"importResultsColumns\"\r\n        [getDataFromApi]=\"false\" [gridData]=\"importResultData\" [key]=\"'uid'\" [formName]=\"'modele-import-result-import'\"\r\n        (buttonColumnClicked)=\"handleConsultImportResultButtonClicked($event)\"></tsi-view-grid>\r\n    </div>\r\n  </p-tabPanel>\r\n\r\n</p-tabView>\r\n\r\n<div class=\"p-1\">\r\n  <Tsi-Button\r\n    styleClass=\"p-element p-button-text p-button-raised p-button-rounded mr-2 p-button p-component p-button-icon-only\"\r\n    [tooltipText]=\"'shared_import_export_refresh'\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n    icon=\"p-button-icon pi pi-refresh\" (onClick)=\"refreshImportExportData()\"\r\n    class=\"p-button-text p-button-raised p-button-rounded mr-2\"></Tsi-Button>\r\n</div>\r\n\r\n<!-- dialog to import file to report -->\r\n<p-dialog header=\"{{'shared_reporting_select_file_to_import_into_report' | localize}}\"\r\n  [(visible)]=\"isImportFileToExecuteVisible\" [style]=\"{width: '50vw'}\">\r\n  <!-- <Tsi-Modal-Header (onCloseClick)=\"onImportFileToReportModalCancelClick()\" [inputTitle]=\"'shared_reporting_select_file_to_import_into_report'\"></Tsi-Modal-Header> -->\r\n\r\n  <ng-template pTemplate=\"body\">\r\n    <p-fileUpload #importFileToReportFileUpload name=\"importFileToReport\" [multiple]=\"false\"\r\n      (onSelect)=\"onImportFileToExecute_FileSelected($event)\" (onClear)=\"onImportFileToExecute_Clear($event)\"\r\n      (onBeforeUpload)=\"onImportFileToExecute_ImportFile($event)\" (onRemove)=\"onImportFileToExecute_Remove($event)\"\r\n      accept=\"{{fileType}}\" [maxFileSize]=\"10000000\"\r\n      [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n      [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n      [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n      [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n      [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n      [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n      [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n      removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n      [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n      [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n      <ng-template *ngIf=\"toUploadToExecuteFile\" pTemplate=\"fileupload-content\" let-files>\r\n        <div *ngIf=\"files?.length\">\r\n          <strong>{{ files[0].name }}</strong>\r\n        </div>\r\n      </ng-template>\r\n    </p-fileUpload>\r\n  </ng-template>\r\n\r\n\r\n  <!-- <Tsi-Modal-Footer (onCancelClick)=\"onImportFileToReportModalCancelClick()\"\r\n    (onSaveClick)=\"onImportFileToReportModalSaveClick()\"\r\n    [saveDisabled]=\"!toUploadToUpdateReportFileData\"></Tsi-Modal-Footer> -->\r\n\r\n</p-dialog>", styles: ["::ng-deep .p-fileupload-choose input{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i3$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i7$1.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7$1.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "component", type: TsiViewGridComponent, selector: "tsi-view-grid", inputs: ["columns", "gridConfiguration", "viewComponent", "crudService", "header", "modalSize", "showConsultButton", "showSearchField", "searchFields", "formEndpoint", "formName", "id", "showImportExportButton", "targetBusinessClass", "getDataFromApi", "gridData", "isSearchButtonDisabled", "selectKeyOnly", "selectionMode", "selectedItems", "key", "showGlobalSearch", "showExportButton", "showCalenderView", "showHeaderFilters", "showFilterButton", "selectAll", "checkedByField", "sortMode", "sizingMode", "searchOnInit"], outputs: ["summariesChange", "selectedItemsChange", "buttonColumnClicked", "searchFieldsValueChanged", "getAllPagedResultChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "directive", type: BusyDirective, selector: "[busy]", inputs: ["busy"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageImportExportComponent, decorators: [{
             type: Component,
@@ -17803,7 +18201,7 @@ class AddReportPopupComponent extends TsiFormComponentBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddReportPopupComponent, deps: [{ token: i1$3.DynamicDialogRef }, { token: ReportingService }, { token: i1$3.DynamicDialogConfig }, { token: TsiNotificationService }, { token: DashboardModuleService }, { token: TsiConfirmationService }, { token: i1.HttpClient }, { token: i2$6.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddReportPopupComponent, selector: "app-add-report-popup", providers: [...appProviders], usesInheritance: true, ngImport: i0, template: "<tsi-form class=\"form-horizontal\" autocomplete=\"off\" (onSubmit)=\"save()\">\r\n    <h4>\r\n        <Tsi-Label [labelValue]=\"'Nouveau Rapport'\"></Tsi-Label>\r\n    </h4>\r\n    <p-panel header=\"Informations\">\r\n        <div class=\"grid \">\r\n            <!-- Type -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_type\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <Tsi-Search-Combo [disabled]=\"this.mode !== modes.create\" id-field=\"key\" label-field=\"value\"\r\n                    [(bind)]=\"report.reportType\" [datasource]=\"dataSource\">\r\n                </Tsi-Search-Combo>\r\n            </div>\r\n            <!-- Nom du rapport -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_reportName\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <Tsi-Text-Box [inputName]=\"'reportName'\" [(inputField)]=\"report.reportName\"></Tsi-Text-Box>\r\n            </div>\r\n            <!-- Nom abr\u00E9g\u00E9 -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_reportNameAbrege\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-3\">\r\n                <Tsi-Text-Box [inputName]=\"'reportNameAbrege'\" [(inputField)]=\"report.reportNameAbrege\"></Tsi-Text-Box>\r\n            </div>\r\n            <div class=\"flex col-6\">\r\n                <!-- Ordre de tri -->\r\n                <div class=\"flex gap-4 w-6\">\r\n                    <Tsi-Label labelValue=\"administration_edition_personnalise_triOrdre\"></Tsi-Label>\r\n                    <Tsi-Integer [inputName]=\"'triOrdre'\" [(inputField)]=\"report.triOrdre\"></Tsi-Integer>\r\n                </div>\r\n                <!-- Afficher dashboard -->\r\n                <div class=\"flex gap-4 w-6\">\r\n                    <Tsi-Label labelValue=\"administration_edition_personnalise_display\"></Tsi-Label>\r\n                    <Tsi-CheckBox [inputName]=\"'display'\" [(inputField)]=\"report.display\"></Tsi-CheckBox>\r\n                </div>\r\n            </div>\r\n            <!-- Module -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_Module\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <Tsi-Search-Combo id-field=\"code\" label-field=\"libelle\" [multiple]=\"false\" [(bind)]=\"report.module\"\r\n                    [datasource]=\"modules\" [isFiltered]=\"false\">\r\n                </Tsi-Search-Combo>\r\n            </div>\r\n            <!-- Deuxi\u00E9me Impress -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_imppress\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-5\">\r\n                <Tsi-Text-Box [disabled]=\"true\" [inputName]=\"'imppress'\" [(inputField)]=\"report.impress\"></Tsi-Text-Box>\r\n            </div>\r\n            <!-- Edition unique -->\r\n            <div class=\"col-4 col-form-label flx\">\r\n                <Tsi-CheckBox [inputName]=\"'EditionUnique'\" [(inputField)]=\"report.editionUnique\"></Tsi-CheckBox>&nbsp;\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_EditionUnique\"></Tsi-Label>\r\n            </div>\r\n            <!-- Endpoint -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_endpoint\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <Tsi-Search-Combo *ngIf=\"!isReportForFiche && !enableMultiSelectEndpoints\" id-field=\"key\" label-field=\"value\"\r\n                    [disabled]=\"modes.edit === mode || isEditionPersonnalise === false\"\r\n                    (selectedLabelChange)=\"selectedEndpointChange($event)\" [(bind)]=\"report.endPointKey\"\r\n                    [elementSourceUrl]=\"administrationEndpoints.getApiAsKeyValuePair()\"\r\n                    [listSourceUrl]=\"administrationEndpoints.getAllApiAsKeyValuePair()\" [isFiltered]=\"true\">\r\n                </Tsi-Search-Combo>\r\n\r\n                <Tsi-Search-Combo *ngIf=\"customReportingMode && !enableMultiSelectEndpoints \" id-field=\"value\" label-field=\"value\"\r\n                    (selectedLabelChange)=\"selectedEndpointChange($event)\" [(bind)]=\"report.endPointKey\"\r\n                    [listSourceUrl]=\"administrationEndpoints.getAllApiAsKeyValuePairByBusinessClassName(this.reportBusinessClass)\"\r\n                    [isFiltered]=\"false\">\r\n                </Tsi-Search-Combo>\r\n\r\n                <Tsi-Search-Combo *ngIf=\"isReportForFiche\"\r\n                    id-field=\"value\"\r\n                    label-field=\"value\"\r\n                    [(bind)]=\"selectedEndpoints\"\r\n                    [listSourceUrl]=\"administrationEndpoints.getAllApiAsKeyValuePairByBusinessClassName(this.reportBusinessClass)\"\r\n                    [isFiltered]=\"false\"\r\n                    [multiple]=\"true\"\r\n                    (selectedLabelChange)=\"selectedEndpointChange($event)\">\r\n                </Tsi-Search-Combo>\r\n\r\n                <p-multiSelect *ngIf=\"!isReportForFiche && enableMultiSelectEndpoints\" [options]=\"endpointsOptions\" [(ngModel)]=\"selectedEndpoints\"\r\n                    selectedItemsLabel=\"{0} {{ 'endpoint_selected' | localize }}\" optionLabel=\"value\"\r\n                    optionValue=\"value\"\r\n                    [style]=\"{'min-width': '180px'}\" placeholder=\"{{ 'shared_reporting_choose_endpoints' | localize }}\"\r\n                    (onPanelShow)=\"handleOpen()\"\r\n                    [filter]=\"true\"\r\n                    (onFilter)=\"onFilter($event)\"\r\n                    display=\"chip\"\r\n                    class=\"rounded-multiselect\">\r\n                    <ng-template let-option pTemplate=\"item\">\r\n                        <div class=\"flex items-center gap-2\">\r\n                            <span>{{ option.value}}</span>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-multiSelect>\r\n            </div>\r\n\r\n\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_formName\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-6\">\r\n                <Tsi-Text-Box [disabled]=\"true\" [inputName]=\"'formName'\"\r\n                    [(inputField)]=\"report.formName\"></Tsi-Text-Box>\r\n            </div>\r\n            <!-- Param -->\r\n            <div *ngIf=\"isGetByIdRequest\" class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_param\"></Tsi-Label>\r\n            </div>\r\n            <div *ngIf=\"isGetByIdRequest\" class=\"col-9\">\r\n                <Tsi-Text-Box [inputName]=\"'param'\" [(inputField)]=\"report.param\"></Tsi-Text-Box>\r\n            </div>\r\n        </div>\r\n    </p-panel>\r\n    <br />\r\n    <p-panel header=\"Configuration Pivot Grid\">\r\n        <div class=\"grid \">\r\n            <!-- Class or view -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label [labelValue]=\"'Class or view'\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <Tsi-Text-Box [inputName]=\"'dddd'\"></Tsi-Text-Box>\r\n            </div>\r\n            <!-- Query -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label [labelValue]=\"'Query'\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-9 col-form-label\">\r\n                <Tsi-Text-Area [rows]=\"2\"></Tsi-Text-Area>\r\n            </div>\r\n        </div>\r\n    </p-panel>\r\n\r\n    <Tsi-Modal-Footer [cancelDisabled]=\"saving\" [saveDisabled]=\"saving\" (onCancelClick)=\"hide()\" \r\n    [showSaveAndCloseButton]=\"false\"></Tsi-Modal-Footer>\r\n</tsi-form>", styles: [".flx{display:flex;justify-content:center;align-items:center}::ng-deep .rounded-multiselect .p-multiselect{border-radius:12px!important}::ng-deep .rounded-multiselect .p-multiselect-label{border-radius:12px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i11.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i12.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "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: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiTextAreaComponent, selector: "Tsi-Text-Area", inputs: ["rows", "cols"], 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: 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: TsiFormComponent, selector: "tsi-form", inputs: ["class", "autocomplete", "optionalEndpoints", "disabled", "isLoading", "modalSize", "formEndpoint", "formName", "isReportingToolbarDisabled", "isCreateOnly", "statusInputDisabled"], outputs: ["onSave", "onSubmit", "onSubmitFormWorkflowConfiguration", "formRefChange", "onStatusChange"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddReportPopupComponent, selector: "app-add-report-popup", providers: [...appProviders], usesInheritance: true, ngImport: i0, template: "<tsi-form class=\"form-horizontal\" autocomplete=\"off\" (onSubmit)=\"save()\">\r\n    <h4>\r\n        <Tsi-Label [labelValue]=\"'Nouveau Rapport'\"></Tsi-Label>\r\n    </h4>\r\n    <p-panel header=\"Informations\">\r\n        <div class=\"grid \">\r\n            <!-- Type -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_type\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <Tsi-Search-Combo [disabled]=\"this.mode !== modes.create\" id-field=\"key\" label-field=\"value\"\r\n                    [(bind)]=\"report.reportType\" [datasource]=\"dataSource\">\r\n                </Tsi-Search-Combo>\r\n            </div>\r\n            <!-- Nom du rapport -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_reportName\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <Tsi-Text-Box [inputName]=\"'reportName'\" [(inputField)]=\"report.reportName\"></Tsi-Text-Box>\r\n            </div>\r\n            <!-- Nom abr\u00E9g\u00E9 -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_reportNameAbrege\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-3\">\r\n                <Tsi-Text-Box [inputName]=\"'reportNameAbrege'\" [(inputField)]=\"report.reportNameAbrege\"></Tsi-Text-Box>\r\n            </div>\r\n            <div class=\"flex col-6\">\r\n                <!-- Ordre de tri -->\r\n                <div class=\"flex gap-4 w-6\">\r\n                    <Tsi-Label labelValue=\"administration_edition_personnalise_triOrdre\"></Tsi-Label>\r\n                    <Tsi-Integer [inputName]=\"'triOrdre'\" [(inputField)]=\"report.triOrdre\"></Tsi-Integer>\r\n                </div>\r\n                <!-- Afficher dashboard -->\r\n                <div class=\"flex gap-4 w-6\">\r\n                    <Tsi-Label labelValue=\"administration_edition_personnalise_display\"></Tsi-Label>\r\n                    <Tsi-CheckBox [inputName]=\"'display'\" [(inputField)]=\"report.display\"></Tsi-CheckBox>\r\n                </div>\r\n            </div>\r\n            <!-- Module -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_Module\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <Tsi-Search-Combo id-field=\"code\" label-field=\"libelle\" [multiple]=\"false\" [(bind)]=\"report.module\"\r\n                    [datasource]=\"modules\" [isFiltered]=\"false\">\r\n                </Tsi-Search-Combo>\r\n            </div>\r\n            <!-- Deuxi\u00E9me Impress -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_imppress\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-5\">\r\n                <Tsi-Text-Box [disabled]=\"true\" [inputName]=\"'imppress'\" [(inputField)]=\"report.impress\"></Tsi-Text-Box>\r\n            </div>\r\n            <!-- Edition unique -->\r\n            <div class=\"col-4 col-form-label flx\">\r\n                <Tsi-CheckBox [inputName]=\"'EditionUnique'\" [(inputField)]=\"report.editionUnique\"></Tsi-CheckBox>&nbsp;\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_EditionUnique\"></Tsi-Label>\r\n            </div>\r\n            <!-- Endpoint -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_endpoint\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <Tsi-Search-Combo *ngIf=\"!isReportForFiche && !enableMultiSelectEndpoints\" id-field=\"key\" label-field=\"value\"\r\n                    [disabled]=\"modes.edit === mode || isEditionPersonnalise === false\"\r\n                    (selectedLabelChange)=\"selectedEndpointChange($event)\" [(bind)]=\"report.endPointKey\"\r\n                    [elementSourceUrl]=\"administrationEndpoints.getApiAsKeyValuePair()\"\r\n                    [listSourceUrl]=\"administrationEndpoints.getAllApiAsKeyValuePair()\" [isFiltered]=\"true\">\r\n                </Tsi-Search-Combo>\r\n\r\n                <Tsi-Search-Combo *ngIf=\"customReportingMode && !enableMultiSelectEndpoints \" id-field=\"value\" label-field=\"value\"\r\n                    (selectedLabelChange)=\"selectedEndpointChange($event)\" [(bind)]=\"report.endPointKey\"\r\n                    [listSourceUrl]=\"administrationEndpoints.getAllApiAsKeyValuePairByBusinessClassName(this.reportBusinessClass)\"\r\n                    [isFiltered]=\"false\">\r\n                </Tsi-Search-Combo>\r\n\r\n                <Tsi-Search-Combo *ngIf=\"isReportForFiche\"\r\n                    id-field=\"value\"\r\n                    label-field=\"value\"\r\n                    [(bind)]=\"selectedEndpoints\"\r\n                    [listSourceUrl]=\"administrationEndpoints.getAllApiAsKeyValuePairByBusinessClassName(this.reportBusinessClass)\"\r\n                    [isFiltered]=\"false\"\r\n                    [multiple]=\"true\"\r\n                    (selectedLabelChange)=\"selectedEndpointChange($event)\">\r\n                </Tsi-Search-Combo>\r\n\r\n                <p-multiSelect *ngIf=\"!isReportForFiche && enableMultiSelectEndpoints\" [options]=\"endpointsOptions\" [(ngModel)]=\"selectedEndpoints\"\r\n                    selectedItemsLabel=\"{0} {{ 'endpoint_selected' | localize }}\" optionLabel=\"value\"\r\n                    optionValue=\"value\"\r\n                    [style]=\"{'min-width': '180px'}\" placeholder=\"{{ 'shared_reporting_choose_endpoints' | localize }}\"\r\n                    (onPanelShow)=\"handleOpen()\"\r\n                    [filter]=\"true\"\r\n                    (onFilter)=\"onFilter($event)\"\r\n                    display=\"chip\"\r\n                    class=\"rounded-multiselect\">\r\n                    <ng-template let-option pTemplate=\"item\">\r\n                        <div class=\"flex items-center gap-2\">\r\n                            <span>{{ option.value}}</span>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-multiSelect>\r\n            </div>\r\n\r\n\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_formName\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-6\">\r\n                <Tsi-Text-Box [disabled]=\"true\" [inputName]=\"'formName'\"\r\n                    [(inputField)]=\"report.formName\"></Tsi-Text-Box>\r\n            </div>\r\n            <!-- Param -->\r\n            <div *ngIf=\"isGetByIdRequest\" class=\"col-3 col-form-label\">\r\n                <Tsi-Label labelValue=\"administration_edition_personnalise_param\"></Tsi-Label>\r\n            </div>\r\n            <div *ngIf=\"isGetByIdRequest\" class=\"col-9\">\r\n                <Tsi-Text-Box [inputName]=\"'param'\" [(inputField)]=\"report.param\"></Tsi-Text-Box>\r\n            </div>\r\n        </div>\r\n    </p-panel>\r\n    <br />\r\n    <p-panel header=\"Configuration Pivot Grid\">\r\n        <div class=\"grid \">\r\n            <!-- Class or view -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label [labelValue]=\"'Class or view'\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <Tsi-Text-Box [inputName]=\"'dddd'\"></Tsi-Text-Box>\r\n            </div>\r\n            <!-- Query -->\r\n            <div class=\"col-3 col-form-label\">\r\n                <Tsi-Label [labelValue]=\"'Query'\"></Tsi-Label>\r\n            </div>\r\n            <div class=\"col-9 col-form-label\">\r\n                <Tsi-Text-Area [rows]=\"2\"></Tsi-Text-Area>\r\n            </div>\r\n        </div>\r\n    </p-panel>\r\n\r\n    <Tsi-Modal-Footer [cancelDisabled]=\"saving\" [saveDisabled]=\"saving\" (onCancelClick)=\"hide()\" \r\n    [showSaveAndCloseButton]=\"false\"></Tsi-Modal-Footer>\r\n</tsi-form>", styles: [".flx{display:flex;justify-content:center;align-items:center}::ng-deep .rounded-multiselect .p-multiselect{border-radius:12px!important}::ng-deep .rounded-multiselect .p-multiselect-label{border-radius:12px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i11.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i12.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "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: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiTextAreaComponent, selector: "Tsi-Text-Area", inputs: ["rows", "cols"], 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: 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: TsiFormComponent, selector: "tsi-form", inputs: ["class", "autocomplete", "optionalEndpoints", "disabled", "isLoading", "modalSize", "formEndpoint", "formName", "isReportingToolbarDisabled", "isCreateOnly", "statusInputDisabled"], outputs: ["onSave", "onSubmit", "onSubmitFormWorkflowConfiguration", "formRefChange", "onStatusChange"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddReportPopupComponent, decorators: [{
             type: Component,
@@ -18803,7 +19201,7 @@ class ManageReportingComponent extends TsiFormComponentBaseComponent {
         this.isloading = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageReportingComponent, deps: [{ token: ReportingService }, { token: IdentityManagerService }, { token: TsiConfirmationService }, { token: TsiNotificationService }, { token: i1$3.DynamicDialogRef }, { token: i1$3.DynamicDialogConfig }, { token: TsiModalService }, { token: MailingService }, { token: ErrorResponseManagerService }, { token: i2$6.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ManageReportingComponent, selector: "app-manage-reporting", inputs: { otherFormName: "otherFormName", otherFormEndpoint: "otherFormEndpoint", formEndpointBody: "formEndpointBody", isFormEndpointPaged: "isFormEndpointPaged", filtersHtmlTemplate: "filtersHtmlTemplate", optionalEndpoints: "optionalEndpoints", customReportingMode: "customReportingMode" }, providers: [...appProviders], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }, { propertyName: "importFileToReportFileUpload", first: true, predicate: ["importFileToReportFileUpload"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<div class=\"card\">\r\n  <div *busy=\"isloading\"></div>\r\n  <div class=\"grid\">\r\n    <div class=\"grid col-10\">\r\n      <div *ngIf=\"isFromForm; else notFromForm\">\r\n        <Tsi-Label class=\"col-2\" [labelValue]=\"'shared_reporting_form'\">\r\n        </Tsi-Label>\r\n        <p-dropdown class=\"col-10 tsi-component\" class=\"tsi-component\" styleClass=\"tsi-component\" appendTp=\"body\"\r\n          [options]=\"formNames\" [ngModel]=\"otherFormName\" optionLabel=\"value\" optionValue=\"key\" [filter]=\"true\"\r\n          filterBy=\"value\" [showClear]=\"true\" placeholder=\"{{'shared_reporting_select_form' | localize}}\"\r\n          [disabled]=\"true\">\r\n        </p-dropdown>\r\n      </div>\r\n\r\n      <ng-template #notFromForm>\r\n        <ng-container>\r\n          <Tsi-Label class=\"col-2\" [labelValue]=\"'shared_reporting_form'\">\r\n          </Tsi-Label>\r\n          <Tsi-Search-Combo class=\"col-10\" [(bind)]=\"otherFormName\" (bindChange)=\"onFormChange()\"\r\n            [listSourceUrl]=\"getFormNamesEndpoint\" [elementSourceUrl]=\"getFormNamesEndpoint \" [isFiltered]=\"true\"\r\n            id-field=\"key\" label-field=\"value\">\r\n          </Tsi-Search-Combo>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <p-toolbar styleClass=\"mb-4 gap-2\">\r\n    <ng-template pTemplate=\"left\">\r\n      <Tsi-Button [text]=\"'shared_reporting_add_report' | localize\" icon=\"p-button-icon p-button-icon-left pi pi-plus\"\r\n        styleClass=\"p-element p-button-success ml-2 mr-2 p-button p-component ng-star-inserted p-button-label\" (click)=\"onNewReport()\"></Tsi-Button>\r\n      <Tsi-Button [buttonType]=\"buttonType.Submit\" [text]=\"'shared_reporting_delete_report' | localize\" icon=\"p-button-icon p-button-icon-left pi pi-trash\"\r\n        styleClass=\"p-element p-button-danger p-button p-component ng-star-inserted p-button-label\" (click)=\"onDeleteSelectedReports()\"\r\n        [disabled]=\"!selectedReports || !selectedReports.length\"></Tsi-Button>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"right\">\r\n      <p-fileUpload #fileUpload name=\"demo[]\" (onBeforeUpload)=\"onImportFile($event)\"\r\n        (onSelect)=\"onFileSelected($event)\" (onClear)=\"onClear($event)\" (onRemove)=\"onRemove($event)\" [multiple]=\"false\"\r\n        accept=\"application/json\" [maxFileSize]=\"10000000\" \r\n        [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n        [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n        [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n        [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n        [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n        [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n        [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n        removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n        [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n        [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n        <ng-template *ngIf=\"toUploadFileData\" pTemplate=\"fileupload-content\">\r\n        </ng-template>\r\n      </p-fileUpload>\r\n    </ng-template>\r\n  </p-toolbar>\r\n\r\n  <!-- <Tsi-Display-Grid [showHeader]=\"true\"\r\n    [header]=\"'shared_reporting_my_template'\"\r\n    [columns]=\"columns\" [gridData]=\"reports\" key=\"uid\"\r\n    (buttonColumnClicked)=\"handleButtonColumnClicked($event)\" [(selectedItems)]=\"selectedReports\"\r\n    [showFilters]=\"false\"\r\n    [paginator]=\"true\"\r\n    [globalFilterFields]=\"globalFilterFields\">\r\n  </Tsi-Display-Grid> -->\r\n\r\n\r\n  <!--<div style=\"text-align:left\"> <p-button icon=\"pi pi-refresh\"  [pTooltip]=\"'shared_reporting_refresh' | localize\" [tooltipPosition]=\"tooltipPosition.Top\"  label=\"Reload\" severity=\"help\" (click)=\"onRefresh()\" /> </div>\r\n  <p-button icon=\"pi pi-refresh\" class=\"p-button-rounded\" styleClass=\"p-button-text\" />\r\n-->\r\n  \r\n  <Tsi-Button styleClass=\"p-element p-button-text p-button-raised p-button-rounded mb-3 ml-3\"  \r\n    [tooltipText]=\"'shared_reporting_refresh'\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n    icon=\"pi pi-refresh\" (click)=\"onRefresh()\"></Tsi-Button>\r\n\r\n  <tsi-view-grid \r\n    [sortMode]=\"sortModeRef.Single\"\r\n    [header]=\"'shared_reporting_my_template'\"\r\n    [columns]=\"columns\" [gridData]=\"reports\" key=\"uid\"\r\n    (buttonColumnClicked)=\"handleButtonColumnClicked($event)\" [(selectedItems)]=\"selectedReports\"\r\n    [getDataFromApi]=\"false\"\r\n    [formName]=\"'my-report-templates'\"\r\n    >\r\n  </tsi-view-grid>\r\n  <br/>\r\n   <!-- Default Template -->\r\n   <!-- <Tsi-Display-Grid \r\n   [showHeader]=\"true\" \r\n   [header]=\"'shared_reporting_BuiltIn_template'\"\r\n   [showSummaryFooter]=\"false\" \r\n   [paginator]=\"false\" \r\n   [showFilters]=\"false\" \r\n   [columns]=\"defaultTemplateColumns\" \r\n   [gridData]=\"defaultReportTemplateData\" \r\n   (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n   [paginator]=\"true\"\r\n   key=\"name\">\r\n  </Tsi-Display-Grid> -->\r\n\r\n  \r\n  <tsi-view-grid\r\n   [sortMode]=\"sortModeRef.Single\"\r\n   [header]=\"'shared_reporting_BuiltIn_template'\"\r\n   [columns]=\"defaultTemplateColumns\" \r\n   [gridData]=\"defaultReportTemplateData\" \r\n   (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n   [getDataFromApi]=\"false\"\r\n   [formName]=\"'default-my-report-templates'\"\r\n   key=\"name\">\r\n  </tsi-view-grid>\r\n\r\n\r\n\r\n\r\n  \r\n\r\n  <!-- dialog to import file to report -->\r\n  <p-dialog header=\"{{'shared_reporting_select_file_to_import_into_report' | localize}}\" [(visible)]=\"isUpdateReportFromFileDialogVisible\" [style]=\"{width: '50vw'}\">\r\n    <!-- <Tsi-Modal-Header (onCloseClick)=\"onImportFileToReportModalCancelClick()\" [inputTitle]=\"'shared_reporting_select_file_to_import_into_report'\"></Tsi-Modal-Header> -->\r\n\r\n    <ng-template pTemplate=\"body\">\r\n      <p-fileUpload #importFileToReportFileUpload name=\"importFileToReport\" (onBeforeUpload)=\"onImportFileToReport_ImportFile($event)\"\r\n        (onSelect)=\"onImportFileToReport_FileSelected($event)\" (onClear)=\"onImportFileToReport_Clear($event)\" (onRemove)=\"onImportFileToReport_Remove($event)\" [multiple]=\"false\"\r\n        accept=\"application/json\" [maxFileSize]=\"10000000\"\r\n        [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n        [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n        [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n        [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n        [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n        [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n        [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n        removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n        [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n        [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n        <ng-template *ngIf=\"toUploadToUpdateReportFileData\" pTemplate=\"fileupload-content\">\r\n        </ng-template>\r\n      </p-fileUpload>\r\n    </ng-template>\r\n\r\n    <!-- <Tsi-Modal-Footer (onCancelClick)=\"onImportFileToReportModalCancelClick()\"\r\n    (onSaveClick)=\"onImportFileToReportModalSaveClick()\"\r\n    [saveDisabled]=\"!toUploadToUpdateReportFileData\"></Tsi-Modal-Footer> -->\r\n\r\n</p-dialog>\r\n</div>\r\n", styles: [".p-button.p-button-icon-only.p-button-rounded{height:2rem!important}::ng-deep .p-fileupload-choose input{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i3$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i10.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "reloadDataSource", "isFiltered", "selectedLabel", "maxWidth", "businessClass", "searchDebounceTime", "comboType", "statusMetadata", "currentRowItem", "datasource", "bind", "maxSelectedLabels", "tooltipMaxDisplayedItems", "bindMode", "showSearchButton", "showAddButton", "showConsultButton", "showUpdateButton"], outputs: ["bindChange", "datasource-loaded", "init", "isLoaded", "selectedLabelChange", "onClick", "onSearchButtonClick", "selectionChange"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "component", type: TsiViewGridComponent, selector: "tsi-view-grid", inputs: ["columns", "gridConfiguration", "viewComponent", "crudService", "header", "modalSize", "showConsultButton", "showSearchField", "searchFields", "formEndpoint", "formName", "id", "showImportExportButton", "targetBusinessClass", "getDataFromApi", "gridData", "isSearchButtonDisabled", "selectKeyOnly", "selectionMode", "selectedItems", "key", "showGlobalSearch", "showExportButton", "showCalenderView", "showHeaderFilters", "showFilterButton", "selectAll", "checkedByField", "sortMode", "sizingMode", "searchOnInit"], outputs: ["summariesChange", "selectedItemsChange", "buttonColumnClicked", "searchFieldsValueChanged", "getAllPagedResultChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "directive", type: BusyDirective, selector: "[busy]", inputs: ["busy"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ManageReportingComponent, selector: "app-manage-reporting", inputs: { otherFormName: "otherFormName", otherFormEndpoint: "otherFormEndpoint", formEndpointBody: "formEndpointBody", isFormEndpointPaged: "isFormEndpointPaged", filtersHtmlTemplate: "filtersHtmlTemplate", optionalEndpoints: "optionalEndpoints", customReportingMode: "customReportingMode" }, providers: [...appProviders], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }, { propertyName: "importFileToReportFileUpload", first: true, predicate: ["importFileToReportFileUpload"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<div class=\"card\">\r\n  <div *busy=\"isloading\"></div>\r\n  <div class=\"grid\">\r\n    <div class=\"grid col-10\">\r\n      <div *ngIf=\"isFromForm; else notFromForm\">\r\n        <Tsi-Label class=\"col-2\" [labelValue]=\"'shared_reporting_form'\">\r\n        </Tsi-Label>\r\n        <p-dropdown class=\"col-10 tsi-component\" class=\"tsi-component\" styleClass=\"tsi-component\" appendTp=\"body\"\r\n          [options]=\"formNames\" [ngModel]=\"otherFormName\" optionLabel=\"value\" optionValue=\"key\" [filter]=\"true\"\r\n          filterBy=\"value\" [showClear]=\"true\" placeholder=\"{{'shared_reporting_select_form' | localize}}\"\r\n          [disabled]=\"true\">\r\n        </p-dropdown>\r\n      </div>\r\n\r\n      <ng-template #notFromForm>\r\n        <ng-container>\r\n          <Tsi-Label class=\"col-2\" [labelValue]=\"'shared_reporting_form'\">\r\n          </Tsi-Label>\r\n          <Tsi-Search-Combo class=\"col-10\" [(bind)]=\"otherFormName\" (bindChange)=\"onFormChange()\"\r\n            [listSourceUrl]=\"getFormNamesEndpoint\" [elementSourceUrl]=\"getFormNamesEndpoint \" [isFiltered]=\"true\"\r\n            id-field=\"key\" label-field=\"value\">\r\n          </Tsi-Search-Combo>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <p-toolbar styleClass=\"mb-4 gap-2\">\r\n    <ng-template pTemplate=\"left\">\r\n      <Tsi-Button [text]=\"'shared_reporting_add_report' | localize\" icon=\"p-button-icon p-button-icon-left pi pi-plus\"\r\n        styleClass=\"p-element p-button-success ml-2 mr-2 p-button p-component ng-star-inserted p-button-label\" (click)=\"onNewReport()\"></Tsi-Button>\r\n      <Tsi-Button [buttonType]=\"buttonType.Submit\" [text]=\"'shared_reporting_delete_report' | localize\" icon=\"p-button-icon p-button-icon-left pi pi-trash\"\r\n        styleClass=\"p-element p-button-danger p-button p-component ng-star-inserted p-button-label\" (click)=\"onDeleteSelectedReports()\"\r\n        [disabled]=\"!selectedReports || !selectedReports.length\"></Tsi-Button>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"right\">\r\n      <p-fileUpload #fileUpload name=\"demo[]\" (onBeforeUpload)=\"onImportFile($event)\"\r\n        (onSelect)=\"onFileSelected($event)\" (onClear)=\"onClear($event)\" (onRemove)=\"onRemove($event)\" [multiple]=\"false\"\r\n        accept=\"application/json\" [maxFileSize]=\"10000000\" \r\n        [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n        [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n        [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n        [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n        [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n        [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n        [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n        removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n        [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n        [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n        <ng-template *ngIf=\"toUploadFileData\" pTemplate=\"fileupload-content\">\r\n        </ng-template>\r\n      </p-fileUpload>\r\n    </ng-template>\r\n  </p-toolbar>\r\n\r\n  <!-- <Tsi-Display-Grid [showHeader]=\"true\"\r\n    [header]=\"'shared_reporting_my_template'\"\r\n    [columns]=\"columns\" [gridData]=\"reports\" key=\"uid\"\r\n    (buttonColumnClicked)=\"handleButtonColumnClicked($event)\" [(selectedItems)]=\"selectedReports\"\r\n    [showFilters]=\"false\"\r\n    [paginator]=\"true\"\r\n    [globalFilterFields]=\"globalFilterFields\">\r\n  </Tsi-Display-Grid> -->\r\n\r\n\r\n  <!--<div style=\"text-align:left\"> <p-button icon=\"pi pi-refresh\"  [pTooltip]=\"'shared_reporting_refresh' | localize\" [tooltipPosition]=\"tooltipPosition.Top\"  label=\"Reload\" severity=\"help\" (click)=\"onRefresh()\" /> </div>\r\n  <p-button icon=\"pi pi-refresh\" class=\"p-button-rounded\" styleClass=\"p-button-text\" />\r\n-->\r\n  \r\n  <Tsi-Button styleClass=\"p-element p-button-text p-button-raised p-button-rounded mb-3 ml-3\"  \r\n    [tooltipText]=\"'shared_reporting_refresh'\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n    icon=\"pi pi-refresh\" (click)=\"onRefresh()\"></Tsi-Button>\r\n\r\n  <tsi-view-grid \r\n    [sortMode]=\"sortModeRef.Single\"\r\n    [header]=\"'shared_reporting_my_template'\"\r\n    [columns]=\"columns\" [gridData]=\"reports\" key=\"uid\"\r\n    (buttonColumnClicked)=\"handleButtonColumnClicked($event)\" [(selectedItems)]=\"selectedReports\"\r\n    [getDataFromApi]=\"false\"\r\n    [formName]=\"'my-report-templates'\"\r\n    >\r\n  </tsi-view-grid>\r\n  <br/>\r\n   <!-- Default Template -->\r\n   <!-- <Tsi-Display-Grid \r\n   [showHeader]=\"true\" \r\n   [header]=\"'shared_reporting_BuiltIn_template'\"\r\n   [showSummaryFooter]=\"false\" \r\n   [paginator]=\"false\" \r\n   [showFilters]=\"false\" \r\n   [columns]=\"defaultTemplateColumns\" \r\n   [gridData]=\"defaultReportTemplateData\" \r\n   (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n   [paginator]=\"true\"\r\n   key=\"name\">\r\n  </Tsi-Display-Grid> -->\r\n\r\n  \r\n  <tsi-view-grid\r\n   [sortMode]=\"sortModeRef.Single\"\r\n   [header]=\"'shared_reporting_BuiltIn_template'\"\r\n   [columns]=\"defaultTemplateColumns\" \r\n   [gridData]=\"defaultReportTemplateData\" \r\n   (buttonColumnClicked)=\"handleButtonColumnClicked($event)\"\r\n   [getDataFromApi]=\"false\"\r\n   [formName]=\"'default-my-report-templates'\"\r\n   key=\"name\">\r\n  </tsi-view-grid>\r\n\r\n\r\n\r\n\r\n  \r\n\r\n  <!-- dialog to import file to report -->\r\n  <p-dialog header=\"{{'shared_reporting_select_file_to_import_into_report' | localize}}\" [(visible)]=\"isUpdateReportFromFileDialogVisible\" [style]=\"{width: '50vw'}\">\r\n    <!-- <Tsi-Modal-Header (onCloseClick)=\"onImportFileToReportModalCancelClick()\" [inputTitle]=\"'shared_reporting_select_file_to_import_into_report'\"></Tsi-Modal-Header> -->\r\n\r\n    <ng-template pTemplate=\"body\">\r\n      <p-fileUpload #importFileToReportFileUpload name=\"importFileToReport\" (onBeforeUpload)=\"onImportFileToReport_ImportFile($event)\"\r\n        (onSelect)=\"onImportFileToReport_FileSelected($event)\" (onClear)=\"onImportFileToReport_Clear($event)\" (onRemove)=\"onImportFileToReport_Remove($event)\" [multiple]=\"false\"\r\n        accept=\"application/json\" [maxFileSize]=\"10000000\"\r\n        [invalidFileSizeMessageSummary]=\"'shared_file_upload_invalid_file_size_message_summary' | localize\"\r\n        [invalidFileSizeMessageDetail]=\"'shared_file_upload_invalid_file_size_message_detail' | localize\"\r\n        [invalidFileTypeMessageSummary]=\"'shared_file_upload_invalid_file_type_message_summary' | localize\"\r\n        [invalidFileLimitMessageDetail]=\"'shared_file_upload_invalid_file_limit_message_detail' | localize\"\r\n        [invalidFileLimitMessageSummary]=\"'shared_file_upload_invalid_file_limit_message_summary' | localize\"\r\n        [invalidFileTypeMessageDetail]=\"'shared_file_upload_invalid_file_type_message_detail' | localize\"\r\n        [chooseIcon]=\"'pi pi-paperclip'\" cancelStyleClass=\"p-button-secondary\" uploadStyleClass=\"p-button-help\"\r\n        removeStyleClass=\"p-button-danger\" [chooseLabel]=\"'shared_reporting_choose_report_file' | localize\"\r\n        [uploadLabel]=\"'shared_reporting_import_report' | localize\"\r\n        [cancelLabel]=\"'shared_reporting_cancel_choose_report_file' | localize\">\r\n        <ng-template *ngIf=\"toUploadToUpdateReportFileData\" pTemplate=\"fileupload-content\">\r\n        </ng-template>\r\n      </p-fileUpload>\r\n    </ng-template>\r\n\r\n    <!-- <Tsi-Modal-Footer (onCancelClick)=\"onImportFileToReportModalCancelClick()\"\r\n    (onSaveClick)=\"onImportFileToReportModalSaveClick()\"\r\n    [saveDisabled]=\"!toUploadToUpdateReportFileData\"></Tsi-Modal-Footer> -->\r\n\r\n</p-dialog>\r\n</div>\r\n", styles: [".p-button.p-button-icon-only.p-button-rounded{height:2rem!important}::ng-deep .p-fileupload-choose input{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "component", type: i3$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i10.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "reloadDataSource", "isFiltered", "selectedLabel", "maxWidth", "businessClass", "searchDebounceTime", "comboType", "statusMetadata", "currentRowItem", "datasource", "bind", "maxSelectedLabels", "tooltipMaxDisplayedItems", "bindMode", "showSearchButton", "showAddButton", "showConsultButton", "showUpdateButton"], outputs: ["bindChange", "datasource-loaded", "init", "isLoaded", "selectedLabelChange", "onClick", "onSearchButtonClick", "selectionChange"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "component", type: TsiViewGridComponent, selector: "tsi-view-grid", inputs: ["columns", "gridConfiguration", "viewComponent", "crudService", "header", "modalSize", "showConsultButton", "showSearchField", "searchFields", "formEndpoint", "formName", "id", "showImportExportButton", "targetBusinessClass", "getDataFromApi", "gridData", "isSearchButtonDisabled", "selectKeyOnly", "selectionMode", "selectedItems", "key", "showGlobalSearch", "showExportButton", "showCalenderView", "showHeaderFilters", "showFilterButton", "selectAll", "checkedByField", "sortMode", "sizingMode", "searchOnInit"], outputs: ["summariesChange", "selectedItemsChange", "buttonColumnClicked", "searchFieldsValueChanged", "getAllPagedResultChanged"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "directive", type: BusyDirective, selector: "[busy]", inputs: ["busy"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ManageReportingComponent, decorators: [{
             type: Component,
@@ -19005,7 +19403,7 @@ class ModalLoaderComponent {
         this.itemDialog = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalLoaderComponent, deps: [{ token: TsiBsModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ModalLoaderComponent, selector: "app-modal-loader", viewQueries: [{ propertyName: "adHost", first: true, predicate: AdDirective, descendants: true, static: true }], ngImport: i0, template: "<p-dialog [(visible)]=\"itemDialog\" contentStyleClass=\"pb-0\"  [style]=\"modalSize\" header=\"Product Details\" [modal]=\"true\"\r\n    styleClass=\"p-fluid\">\r\n    <ng-template adHost>\r\n    </ng-template>\r\n    <p-footer class=\"p-dialog-footer\" >\r\n        <Tsi-Button text=\"Cancel\" icon=\"p-button-icon p-button-icon-left pi pi-times\" styleClass=\"p-element p-button-text flex align-items-center justify-content-center p-button p-component p-button-label\" (onClick)=\"onCancel()\"></Tsi-Button>\r\n        <Tsi-Button text=\"Save\" [buttonType]=\"buttonType.Submit\" icon=\"pi pi-check\" styleClass=\"p-element p-button-text p-button p-component ng-star-inserted p-button-label\" (onClick)=\"onSave()\"></Tsi-Button>   \r\n    </p-footer>\r\n</p-dialog>", styles: [""], dependencies: [{ kind: "component", type: i2$2.Footer, selector: "p-footer" }, { kind: "component", type: i3$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "directive", type: AdDirective, selector: "[adHost]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ModalLoaderComponent, selector: "app-modal-loader", viewQueries: [{ propertyName: "adHost", first: true, predicate: AdDirective, descendants: true, static: true }], ngImport: i0, template: "<p-dialog [(visible)]=\"itemDialog\" contentStyleClass=\"pb-0\"  [style]=\"modalSize\" header=\"Product Details\" [modal]=\"true\"\r\n    styleClass=\"p-fluid\">\r\n    <ng-template adHost>\r\n    </ng-template>\r\n    <p-footer class=\"p-dialog-footer\" >\r\n        <Tsi-Button text=\"Cancel\" icon=\"p-button-icon p-button-icon-left pi pi-times\" styleClass=\"p-element p-button-text flex align-items-center justify-content-center p-button p-component p-button-label\" (onClick)=\"onCancel()\"></Tsi-Button>\r\n        <Tsi-Button text=\"Save\" [buttonType]=\"buttonType.Submit\" icon=\"pi pi-check\" styleClass=\"p-element p-button-text p-button p-component ng-star-inserted p-button-label\" (onClick)=\"onSave()\"></Tsi-Button>   \r\n    </p-footer>\r\n</p-dialog>", styles: [""], dependencies: [{ kind: "component", type: i2$1.Footer, selector: "p-footer" }, { kind: "component", type: i3$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "directive", type: AdDirective, selector: "[adHost]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalLoaderComponent, decorators: [{
             type: Component,
@@ -19299,230 +19697,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
-class TsiTabPanelComponent {
-    constructor() {
-        /**
-         * Defines if tab can be removed.
-         * @group Props
-         */
-        this.closable = false;
-        /**
-         * Whether a lazy loaded panel should avoid getting loaded again on reselection.
-         * @group Props
-         */
-        this.cache = true;
-        /**
-         * Position of the tooltip.
-         * @group Props
-         */
-        this.tooltipPosition = 'top';
-        /**
-         * Type of CSS position.
-         * @group Props
-         */
-        this.tooltipPositionStyle = 'absolute';
-        /**
-         * Defines if tab is active.
-         * @defaultValue false
-         * @group Props
-         */
-        this.selected = false;
-        /**
-         * When true, tab cannot be activated.
-         * @defaultValue false
-         * @group Props
-         */
-        this.disabled = false;
-        /**
-         * Title of the tabPanel.
-         * @group Props
-         */
-        this.header = '';
-        /**
-         * Left icon of the tabPanel.
-         * @group Props
-         * @deprecated since v15.4.2, use `lefticon` template instead.
-         */
-        this.leftIcon = '';
-    }
-    ngAfterContentInit() {
-        this.tsiTemplates.forEach((tsiTemplate) => {
-            const type = tsiTemplate.getType();
-            switch (type) {
-                case 'header':
-                    this.headerTemplateRef = tsiTemplate.template;
-                    break;
-                case 'lefticon':
-                    this.leftIconTemplateRef = tsiTemplate.template;
-                    break;
-                case 'righticon':
-                    this.rightIconTemplateRef = tsiTemplate.template;
-                    break;
-                case 'closeicon':
-                    this.closeIconTemplateRef = tsiTemplate.template;
-                    break;
-                case 'content':
-                default:
-                    this.contentTemplateRef = tsiTemplate.template;
-                    break;
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTabPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiTabPanelComponent, selector: "tsi-tab-panel", inputs: { closable: "closable", headerStyle: "headerStyle", headerStyleClass: "headerStyleClass", cache: "cache", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", selected: "selected", disabled: "disabled", header: "header", leftIcon: "leftIcon", rightIcon: "rightIcon" }, queries: [{ propertyName: "tsiTemplates", predicate: TsiTemplate }], ngImport: i0, template: "<!-- No template needed - we only capture ContentChild -->\r\n<!-- Please leave it empty -->", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTabPanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tsi-tab-panel', template: "<!-- No template needed - we only capture ContentChild -->\r\n<!-- Please leave it empty -->" }]
-        }], propDecorators: { tsiTemplates: [{
-                type: ContentChildren,
-                args: [TsiTemplate]
-            }], closable: [{
-                type: Input
-            }], headerStyle: [{
-                type: Input
-            }], headerStyleClass: [{
-                type: Input
-            }], cache: [{
-                type: Input
-            }], tooltip: [{
-                type: Input
-            }], tooltipPosition: [{
-                type: Input
-            }], tooltipPositionStyle: [{
-                type: Input
-            }], tooltipStyleClass: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], header: [{
-                type: Input
-            }], leftIcon: [{
-                type: Input
-            }], rightIcon: [{
-                type: Input
-            }] } });
-
-/**
- * TsiTabView is a container component to group content with tabs.
- * @group Components
- */
-class TsiTabViewComponent {
-    constructor() {
-        this.isInitialized = false;
-        this.haveTabPanels = false;
-        /**
-         * Index of the active tab to change selected tab programmatically.
-         * @group Props
-         */
-        this.activeIndex = 0;
-        /**
-         * When enabled, the focused tab is activated.
-         * @group Props
-         */
-        this.selectOnFocus = false;
-        /**
-         * When activated, navigation buttons will automatically hide or show based on the available space within the container.
-         * @group Props
-         */
-        this.autoHideButtons = true;
-        /**
-         * Index of the element in tabbing order.
-         * @group Props
-         */
-        this.tabindex = 0;
-        // Outputs
-        /**
-         * Callback to invoke on tab change.
-         * @param {TabViewChangeEvent} event - Custom tab change event
-         * @group Emits
-         */
-        this.onChange = new EventEmitter();
-        /**
-         * Callback to invoke on tab close.
-         * @param {TabViewCloseEvent} event - Custom tab close event
-         * @group Emits
-         */
-        this.onClose = new EventEmitter();
-        /**
-         * Callback to invoke on the active tab change.
-         * @param {number} index - New active index
-         * @group Emits
-         */
-        this.activeIndexChange = new EventEmitter();
-        // DI  
-        this.cd = inject(ChangeDetectorRef);
-    }
-    // Lifecycle hooks
-    ngAfterViewInit() {
-        try {
-            this.calculateProperties();
-            this.tabPanels.changes.subscribe((panels) => {
-                this.calculateProperties();
-                this.cd.markForCheck();
-            });
-        }
-        catch (error) {
-            console.error(error);
-        }
-        finally {
-            this.isInitialized = true;
-        }
-    }
-    // Events handlers
-    onActiveIndexChange(index) {
-        this.activeIndexChange.emit(index);
-    }
-    onTabClose(event) {
-        this.onClose.emit(event);
-    }
-    onTabChange(event) {
-        this.onChange.emit(event);
-    }
-    // Utils
-    calculateProperties() {
-        this.tabs = this.tabPanels.toArray();
-        this.haveTabPanels = this.tabPanels && this.tabPanels.length > 0;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTabViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiTabViewComponent, selector: "tsi-tab-view", inputs: { style: "style", styleClass: "styleClass", controlClose: "controlClose", scrollable: "scrollable", activeIndex: "activeIndex", selectOnFocus: "selectOnFocus", nextButtonAriaLabel: "nextButtonAriaLabel", prevButtonAriaLabel: "prevButtonAriaLabel", autoHideButtons: "autoHideButtons", tabindex: "tabindex" }, outputs: { onChange: "onChange", onClose: "onClose", activeIndexChange: "activeIndexChange" }, queries: [{ propertyName: "tabPanels", predicate: TsiTabPanelComponent }], ngImport: i0, template: "<ng-container *ngIf=\"isInitialized\">\r\n  <ng-container *ngIf=\"haveTabPanels; else noTabPanels\">\r\n    <p-tabView\r\n      [style]=\"style\"\r\n      [styleClass]=\"styleClass\"\r\n      [controlClose]=\"controlClose\"\r\n      [scrollable]=\"scrollable\"\r\n      [activeIndex]=\"activeIndex\"\r\n      [selectOnFocus]=\"selectOnFocus\"\r\n      [nextButtonAriaLabel]=\"nextButtonAriaLabel\"\r\n      [prevButtonAriaLabel]=\"prevButtonAriaLabel\"\r\n      [autoHideButtons]=\"autoHideButtons\"\r\n      [tabindex]=\"tabindex\"\r\n      (activeIndexChange)=\"onActiveIndexChange($event)\"\r\n      (onClose)=\"onTabClose($event)\"\r\n      (onChange)=\"onTabChange($event)\">\r\n      <p-tabPanel *ngFor=\"let tab of tabPanels\"\r\n        [closable]=\"tab.closable\"\r\n        [headerStyle]=\"tab.headerStyle\"\r\n        [headerStyleClass]=\"tab.headerStyleClass\"\r\n        [cache]=\"tab.cache\"\r\n        [tooltip]=\"tab.tooltip\"\r\n        [tooltipPosition]=\"tab.tooltipPosition\"\r\n        [tooltipPositionStyle]=\"tab.tooltipPositionStyle\"\r\n        [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n        [selected]=\"tab.selected\"\r\n        [disabled]=\"tab.disabled\"\r\n        [header]=\"tab.header\"\r\n        [leftIcon]=\"tab.leftIcon\"\r\n        [rightIcon]=\"tab.rightIcon\">\r\n        <!-- LAZY LOADED CONTENT: This is the key part -->\r\n        <ng-template pTemplate=\"content\" *ngIf=\"tab.contentTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\r\n        </ng-template>\r\n\r\n        <!-- Custom header template if provided -->\r\n        <ng-template pTemplate=\"header\" *ngIf=\"tab.headerTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.headerTemplateRef\"></ng-container>\r\n        </ng-template>\r\n\r\n        <!-- Custom icon templates if provided -->\r\n        <ng-template pTemplate=\"lefticon\" *ngIf=\"tab.leftIconTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.leftIconTemplateRef\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"righticon\" *ngIf=\"tab.rightIconTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.rightIconTemplateRef\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"closeicon\" *ngIf=\"tab.closeIconTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.closeIconTemplateRef\"></ng-container>\r\n        </ng-template>\r\n      </p-tabPanel>\r\n    </p-tabView>\r\n  </ng-container>\r\n\r\n  <ng-template #noTabPanels>\r\n    <p-tabView\r\n      [style]=\"style\"\r\n      [styleClass]=\"styleClass\"\r\n      [controlClose]=\"controlClose\"\r\n      [scrollable]=\"scrollable\"\r\n      [activeIndex]=\"activeIndex\"\r\n      [selectOnFocus]=\"selectOnFocus\"\r\n      [nextButtonAriaLabel]=\"nextButtonAriaLabel\"\r\n      [prevButtonAriaLabel]=\"prevButtonAriaLabel\"\r\n      [autoHideButtons]=\"autoHideButtons\"\r\n      [tabindex]=\"tabindex\"\r\n      (activeIndexChange)=\"onActiveIndexChange($event)\"\r\n      (onClose)=\"onTabClose($event)\"\r\n      (onChange)=\"onTabChange($event)\">\r\n      <ng-content></ng-content>\r\n    </p-tabView>\r\n  </ng-template>\r\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$1.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7$1.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTabViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tsi-tab-view', template: "<ng-container *ngIf=\"isInitialized\">\r\n  <ng-container *ngIf=\"haveTabPanels; else noTabPanels\">\r\n    <p-tabView\r\n      [style]=\"style\"\r\n      [styleClass]=\"styleClass\"\r\n      [controlClose]=\"controlClose\"\r\n      [scrollable]=\"scrollable\"\r\n      [activeIndex]=\"activeIndex\"\r\n      [selectOnFocus]=\"selectOnFocus\"\r\n      [nextButtonAriaLabel]=\"nextButtonAriaLabel\"\r\n      [prevButtonAriaLabel]=\"prevButtonAriaLabel\"\r\n      [autoHideButtons]=\"autoHideButtons\"\r\n      [tabindex]=\"tabindex\"\r\n      (activeIndexChange)=\"onActiveIndexChange($event)\"\r\n      (onClose)=\"onTabClose($event)\"\r\n      (onChange)=\"onTabChange($event)\">\r\n      <p-tabPanel *ngFor=\"let tab of tabPanels\"\r\n        [closable]=\"tab.closable\"\r\n        [headerStyle]=\"tab.headerStyle\"\r\n        [headerStyleClass]=\"tab.headerStyleClass\"\r\n        [cache]=\"tab.cache\"\r\n        [tooltip]=\"tab.tooltip\"\r\n        [tooltipPosition]=\"tab.tooltipPosition\"\r\n        [tooltipPositionStyle]=\"tab.tooltipPositionStyle\"\r\n        [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n        [selected]=\"tab.selected\"\r\n        [disabled]=\"tab.disabled\"\r\n        [header]=\"tab.header\"\r\n        [leftIcon]=\"tab.leftIcon\"\r\n        [rightIcon]=\"tab.rightIcon\">\r\n        <!-- LAZY LOADED CONTENT: This is the key part -->\r\n        <ng-template pTemplate=\"content\" *ngIf=\"tab.contentTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\r\n        </ng-template>\r\n\r\n        <!-- Custom header template if provided -->\r\n        <ng-template pTemplate=\"header\" *ngIf=\"tab.headerTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.headerTemplateRef\"></ng-container>\r\n        </ng-template>\r\n\r\n        <!-- Custom icon templates if provided -->\r\n        <ng-template pTemplate=\"lefticon\" *ngIf=\"tab.leftIconTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.leftIconTemplateRef\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"righticon\" *ngIf=\"tab.rightIconTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.rightIconTemplateRef\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"closeicon\" *ngIf=\"tab.closeIconTemplateRef\">\r\n          <ng-container *ngTemplateOutlet=\"tab.closeIconTemplateRef\"></ng-container>\r\n        </ng-template>\r\n      </p-tabPanel>\r\n    </p-tabView>\r\n  </ng-container>\r\n\r\n  <ng-template #noTabPanels>\r\n    <p-tabView\r\n      [style]=\"style\"\r\n      [styleClass]=\"styleClass\"\r\n      [controlClose]=\"controlClose\"\r\n      [scrollable]=\"scrollable\"\r\n      [activeIndex]=\"activeIndex\"\r\n      [selectOnFocus]=\"selectOnFocus\"\r\n      [nextButtonAriaLabel]=\"nextButtonAriaLabel\"\r\n      [prevButtonAriaLabel]=\"prevButtonAriaLabel\"\r\n      [autoHideButtons]=\"autoHideButtons\"\r\n      [tabindex]=\"tabindex\"\r\n      (activeIndexChange)=\"onActiveIndexChange($event)\"\r\n      (onClose)=\"onTabClose($event)\"\r\n      (onChange)=\"onTabChange($event)\">\r\n      <ng-content></ng-content>\r\n    </p-tabView>\r\n  </ng-template>\r\n</ng-container>" }]
-        }], propDecorators: { tabPanels: [{
-                type: ContentChildren,
-                args: [TsiTabPanelComponent]
-            }], style: [{
-                type: Input
-            }], styleClass: [{
-                type: Input
-            }], controlClose: [{
-                type: Input
-            }], scrollable: [{
-                type: Input
-            }], activeIndex: [{
-                type: Input
-            }], selectOnFocus: [{
-                type: Input
-            }], nextButtonAriaLabel: [{
-                type: Input
-            }], prevButtonAriaLabel: [{
-                type: Input
-            }], autoHideButtons: [{
-                type: Input
-            }], tabindex: [{
-                type: Input
-            }], onChange: [{
-                type: Output
-            }], onClose: [{
-                type: Output
-            }], activeIndexChange: [{
-                type: Output
-            }] } });
-
 class TsiTooltipComponent {
     constructor() {
         this.tooltipText = "";
@@ -19905,7 +20079,7 @@ class TsiFileManagerComponent extends TsiInputBase {
         return this.mimeType || getMimeTypeFromExtension(getFileExtension(this.fileName));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiFileManagerComponent, deps: [{ token: LocalizePipe }, { token: TsiNotificationService }, { token: i0.ChangeDetectorRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiFileManagerComponent, selector: "Tsi-File-Manager", inputs: { fileName: "fileName", name: "name", id: "id", accept: "accept", maxFileSize: "maxFileSize", multiple: "multiple", exploreOnDownload: "exploreOnDownload", showUploadButton: "showUploadButton", showCancelButton: "showCancelButton", showDownloadButton: "showDownloadButton", chooseIcon: "chooseIcon", chooseLabel: "chooseLabel", showSelectButton: "showSelectButton", showFileUpload: "showFileUpload", showPreviewButton: "showPreviewButton", contentHeight: "contentHeight" }, outputs: { onSelectFileManager: "onSelectFileManager", onClear: "onClear", onRemove: "onRemove", inputFieldChange: "inputFieldChange", fileNameChange: "fileNameChange" }, usesInheritance: true, ngImport: i0, template: "<!-- <p-fileUpload class=\"file-manager\" #fileUpload [name]=\"name\" [id]=\"id\" [accept]=\"accept\" [maxFileSize]=\"maxFileSize\"\r\n  [multiple]=\"multiple\" [showUploadButton]=\"showUploadButton\" [showCancelButton]=\"showCancelButton\"\r\n  chooseIcon=\"pi pi-upload\" chooseLabel=\" \" (onSelect)=\"onFileSelect($event)\" (onClear)=\"onFileClear()\"\r\n  (onRemove)=\"onFileRemove($event)\" class=\"custom-file-upload\" icon=\"pi pi-upload\">\r\n</p-fileUpload>\r\n\r\n<BR>\r\n<div *ngIf=\"showDownloadButton\">\r\n  <button pButton type=\"button\" icon=\"pi pi-download\" (click)=\"downloadFile()\" class=\"h-2rem w-full text-center\">\r\n  </button>\r\n</div> -->\r\n<div class=\"{{validationStatusCssClass}}\">\r\n\r\n  <p-fileUpload class=\"file-manager custom-file-upload \" \r\n    #fileUpload\r\n    [name]=\"name\"\r\n    [id]=\"id\" \r\n    [accept]=\"accept\" \r\n    [multiple]=\"multiple\"\r\n    [disabled]=\"disabled\"\r\n    [showUploadButton]=\"showUploadButton\" \r\n    [showCancelButton]=\"showCancelButton\"\r\n    chooseIcon=\"pi pi-upload\"\r\n    chooseLabel= \"Upload\" \r\n    (onSelect)=\"onFileSelect($event)\"\r\n    (onClear)=\"onFileClear()\"\r\n    (onRemove)=\"onFileRemove($event)\"\r\n    >\r\n    \r\n    \r\n    \r\n    <!-- <ng-template pTemplate=\"content\">\r\n      <button type=\"button\" pButton icon=\"pi pi-upload\" class=\"ml-4 h-2rem w-full text-center\">\r\n      </button>\r\n    </ng-template> -->\r\n    <ng-template pTemplate=\"content\" let-files>\r\n      <div class=\"tsi-file-content\" [style.height]=\"contentHeight\">\r\n      <div *ngIf=\"inputField\" class=\"tsi-file-preview\">\r\n        <Tsi-File-Preview [content]=\"inputField\" [fileName]=\"fileName\" [mimeType]=\"mimeType\"\r\n          mediaMaxWidth=\"15rem\" (previewError)=\"onPreviewError()\">\r\n        </Tsi-File-Preview>\r\n      </div>\r\n\r\n      <div class=\"mt-2\" *ngIf=\"fileName != undefined && fileName != null\">\r\n        <p>{{ 'tsi_file_manager_file_name' | localize }}: {{ fileName }}</p>\r\n        <p>{{ 'tsi_file_manager_file_extension' | localize }}: {{ getFileExtension(fileName) }}</p>\r\n      </div>\r\n\r\n      <div class=\"pb-2 pt-2\" *ngIf=\"showPreviewButton && canPreview\">\r\n        <button pButton type=\"button\" icon=\"pi pi-eye\"\r\n          [label]=\"'tsi_file_manager_preview' | localize\"\r\n          (click)=\"openPreview()\" class=\"h-2rem w-full text-center\">\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"inputField && (isUnsupported || mediaLoadError)\">\r\n        <button pButton type=\"button\" icon=\"pi pi-download\"\r\n          [label]=\"'tsi_file_manager_download' | localize\"\r\n          (click)=\"downloadFile()\" class=\"h-2rem w-full text-center\">\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"fileName != undefined && showDownloadButton && !isUnsupported && !mediaLoadError\">\r\n        <button pButton type=\"button\" icon=\"pi pi-download\" (click)=\"downloadFile()\" class=\" h-2rem w-full text-center\">\r\n        </button>\r\n      </div>\r\n      </div>\r\n    </ng-template>\r\n    \r\n  </p-fileUpload>\r\n  \r\n</div>", styles: [".ui-fileupload-choose{display:flex;align-items:center;justify-content:center;padding:.5rem;width:10rem;height:40px}.ui-fileupload-choose .ui-button-text{display:none}.ui-fileupload-choose .pi{font-size:2rem}.p-fileupload-choose input{display:none!important}:host ::ng-deep .p-fileupload-choose[disabled]{display:none!important}.tsi-file-content{display:flex;flex-direction:column;overflow:auto;box-sizing:border-box;width:100%}.tsi-file-preview{display:flex;justify-content:center;align-items:center;width:100%;flex:1 1 auto;min-height:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: TsiFilePreviewComponent, selector: "Tsi-File-Preview", inputs: ["content", "fileName", "mimeType", "mediaMaxWidth"], outputs: ["previewError"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiFileManagerComponent, selector: "Tsi-File-Manager", inputs: { fileName: "fileName", name: "name", id: "id", accept: "accept", maxFileSize: "maxFileSize", multiple: "multiple", exploreOnDownload: "exploreOnDownload", showUploadButton: "showUploadButton", showCancelButton: "showCancelButton", showDownloadButton: "showDownloadButton", chooseIcon: "chooseIcon", chooseLabel: "chooseLabel", showSelectButton: "showSelectButton", showFileUpload: "showFileUpload", showPreviewButton: "showPreviewButton", contentHeight: "contentHeight" }, outputs: { onSelectFileManager: "onSelectFileManager", onClear: "onClear", onRemove: "onRemove", inputFieldChange: "inputFieldChange", fileNameChange: "fileNameChange" }, usesInheritance: true, ngImport: i0, template: "<!-- <p-fileUpload class=\"file-manager\" #fileUpload [name]=\"name\" [id]=\"id\" [accept]=\"accept\" [maxFileSize]=\"maxFileSize\"\r\n  [multiple]=\"multiple\" [showUploadButton]=\"showUploadButton\" [showCancelButton]=\"showCancelButton\"\r\n  chooseIcon=\"pi pi-upload\" chooseLabel=\" \" (onSelect)=\"onFileSelect($event)\" (onClear)=\"onFileClear()\"\r\n  (onRemove)=\"onFileRemove($event)\" class=\"custom-file-upload\" icon=\"pi pi-upload\">\r\n</p-fileUpload>\r\n\r\n<BR>\r\n<div *ngIf=\"showDownloadButton\">\r\n  <button pButton type=\"button\" icon=\"pi pi-download\" (click)=\"downloadFile()\" class=\"h-2rem w-full text-center\">\r\n  </button>\r\n</div> -->\r\n<div class=\"{{validationStatusCssClass}}\">\r\n\r\n  <p-fileUpload class=\"file-manager custom-file-upload \" \r\n    #fileUpload\r\n    [name]=\"name\"\r\n    [id]=\"id\" \r\n    [accept]=\"accept\" \r\n    [multiple]=\"multiple\"\r\n    [disabled]=\"disabled\"\r\n    [showUploadButton]=\"showUploadButton\" \r\n    [showCancelButton]=\"showCancelButton\"\r\n    chooseIcon=\"pi pi-upload\"\r\n    chooseLabel= \"Upload\" \r\n    (onSelect)=\"onFileSelect($event)\"\r\n    (onClear)=\"onFileClear()\"\r\n    (onRemove)=\"onFileRemove($event)\"\r\n    >\r\n    \r\n    \r\n    \r\n    <!-- <ng-template pTemplate=\"content\">\r\n      <button type=\"button\" pButton icon=\"pi pi-upload\" class=\"ml-4 h-2rem w-full text-center\">\r\n      </button>\r\n    </ng-template> -->\r\n    <ng-template pTemplate=\"content\" let-files>\r\n      <div class=\"tsi-file-content\" [style.height]=\"contentHeight\">\r\n      <div *ngIf=\"inputField\" class=\"tsi-file-preview\">\r\n        <Tsi-File-Preview [content]=\"inputField\" [fileName]=\"fileName\" [mimeType]=\"mimeType\"\r\n          mediaMaxWidth=\"15rem\" (previewError)=\"onPreviewError()\">\r\n        </Tsi-File-Preview>\r\n      </div>\r\n\r\n      <div class=\"mt-2\" *ngIf=\"fileName != undefined && fileName != null\">\r\n        <p>{{ 'tsi_file_manager_file_name' | localize }}: {{ fileName }}</p>\r\n        <p>{{ 'tsi_file_manager_file_extension' | localize }}: {{ getFileExtension(fileName) }}</p>\r\n      </div>\r\n\r\n      <div class=\"pb-2 pt-2\" *ngIf=\"showPreviewButton && canPreview\">\r\n        <button pButton type=\"button\" icon=\"pi pi-eye\"\r\n          [label]=\"'tsi_file_manager_preview' | localize\"\r\n          (click)=\"openPreview()\" class=\"h-2rem w-full text-center\">\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"inputField && (isUnsupported || mediaLoadError)\">\r\n        <button pButton type=\"button\" icon=\"pi pi-download\"\r\n          [label]=\"'tsi_file_manager_download' | localize\"\r\n          (click)=\"downloadFile()\" class=\"h-2rem w-full text-center\">\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"fileName != undefined && showDownloadButton && !isUnsupported && !mediaLoadError\">\r\n        <button pButton type=\"button\" icon=\"pi pi-download\" (click)=\"downloadFile()\" class=\" h-2rem w-full text-center\">\r\n        </button>\r\n      </div>\r\n      </div>\r\n    </ng-template>\r\n    \r\n  </p-fileUpload>\r\n  \r\n</div>", styles: [".ui-fileupload-choose{display:flex;align-items:center;justify-content:center;padding:.5rem;width:10rem;height:40px}.ui-fileupload-choose .ui-button-text{display:none}.ui-fileupload-choose .pi{font-size:2rem}.p-fileupload-choose input{display:none!important}:host ::ng-deep .p-fileupload-choose[disabled]{display:none!important}.tsi-file-content{display:flex;flex-direction:column;overflow:auto;box-sizing:border-box;width:100%}.tsi-file-preview{display:flex;justify-content:center;align-items:center;width:100%;flex:1 1 auto;min-height:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: TsiFilePreviewComponent, selector: "Tsi-File-Preview", inputs: ["content", "fileName", "mimeType", "mediaMaxWidth"], outputs: ["previewError"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiFileManagerComponent, decorators: [{
             type: Component,
@@ -20196,7 +20370,7 @@ class TsiSubmitButtonComponent {
         this.submit.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiSubmitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiSubmitButtonComponent, selector: "Tsi-Submit-Button", inputs: { Disabled: "Disabled", Text: "Text", tooltipText: "tooltipText", tooltipPosition: "tooltipPosition", icon: "icon", type: "type" }, outputs: { submit: "submit" }, ngImport: i0, template: "<p-button\r\nname=\"submit\"\r\ntype=\"submit\"\r\nclass=\"btn btn-primary\"\r\n[disabled]=\"Disabled\"\r\n(onClick)=\"validate()\"\r\n[pTooltip]=\"tooltipText | localize\"\r\n[tooltipPosition]=\"tooltipPosition\"\r\n[icon]=\"icon\"\r\n[type]=\"type\"\r\n>\r\n{{ Text! | localize }}\r\n</p-button>", styles: [""], dependencies: [{ kind: "component", type: i2$1.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: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiSubmitButtonComponent, selector: "Tsi-Submit-Button", inputs: { Disabled: "Disabled", Text: "Text", tooltipText: "tooltipText", tooltipPosition: "tooltipPosition", icon: "icon", type: "type" }, outputs: { submit: "submit" }, ngImport: i0, template: "<p-button\r\nname=\"submit\"\r\ntype=\"submit\"\r\nclass=\"btn btn-primary\"\r\n[disabled]=\"Disabled\"\r\n(onClick)=\"validate()\"\r\n[pTooltip]=\"tooltipText | localize\"\r\n[tooltipPosition]=\"tooltipPosition\"\r\n[icon]=\"icon\"\r\n[type]=\"type\"\r\n>\r\n{{ Text! | localize }}\r\n</p-button>", styles: [""], dependencies: [{ 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: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiSubmitButtonComponent, decorators: [{
             type: Component,
@@ -20290,7 +20464,7 @@ class TsiDisplayGridComponent {
         this.buttonColumnClicked.emit({ field: field, key: key, selectKeyOnly: this.selectKeyOnly });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiDisplayGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiDisplayGridComponent, selector: "Tsi-Display-Grid", inputs: { columns: "columns", showHeader: "showHeader", header: "header", key: "key", gridData: "gridData", gridSummaryData: "gridSummaryData", isTableLoading: "isTableLoading", showHaveSumary: "showHaveSumary", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", parent: "parent", selectedItems: "selectedItems", showFilters: "showFilters", showSort: "showSort", paginator: "paginator", showSummaryFooter: "showSummaryFooter", globalFilterFields: "globalFilterFields" }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", selectedItemsChange: "selectedItemsChange", buttonColumnClicked: "buttonColumnClicked" }, ngImport: i0, template: "<p-table #dt1 dataKey=\"{{key}}\" [(selectAll)]=\"selectAll\" [selectionMode]=\"selectionMode\" [(selection)]=\"selectedFullItems\"\r\n(onRowUnselect)=\"onSelectedItemsChanged()\" (selectAllChange)=\"onSelectAllChange($event)\" (onRowSelect)=\"onSelectedItemsChanged()\"\r\n [totalRecords]=\"totalCount()\" [reorderableColumns]=\"true\" [columns]=\"columns\" [paginator]=\"paginator\" [rows]=\"10\"\r\n    [value]=\"getData()\" [globalFilterFields]=\"globalFilterFields ?? []\" [resizableColumns]=\"true\" [scrollable]=\"true\" appendTo=\"body\" styleClass=\"p-datatable-sm p-datatable-gridlines\"\r\n    columnResizeMode=\"expand\" scrollHeight=\"600px\">\r\n    <!-- <ng-template *ngIf=\"showHeader\" pTemplate=\"caption\">\r\n        {{header | localize}}\r\n    </ng-template> -->\r\n    <ng-template pTemplate=\"caption\">\r\n      <div class=\"flex\">\r\n        <div *ngIf=\"showHeader\">\r\n            {{header | localize}}\r\n        </div>\r\n        <span class=\"p-input-icon-left ml-auto\">\r\n              <i class=\"pi pi-search\"></i>\r\n              <input pInputText style=\"padding-left: 2.5rem!important; \" class=\"p-inputtext p-component p-element p-filled\" type=\"text\" #filterGlobalInput (input)=\"dt1.filterGlobal(filterGlobalInput.value, 'contains')\" placeholder=\"{{'' | localize}}\" />\r\n          </span>\r\n      </div>\r\n  </ng-template>\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngIf=\"selectionMode == multipleGridSelectionMode\" style=\"width: 4rem\">\r\n                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </th>\r\n            <th pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\" style=\"width:3rem\"></th>\r\n            <th pFrozenColumn [frozen]=\"col.isFrozen\" scope=\"col\" [style.width]=\"col.isButton ? '4rem' : (col.width? col.width.getCSSValue() : '')\" [style]=\"col.style\" pTooltip=\"{{col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n            *ngFor=\"let col of columns\" pReorderableColumn pSortableColumn=\"{{col.field}}\">\r\n            <span *ngIf=\"!col.isButton\">\r\n              <table class=\"p-0 m-0\">\r\n                <tr>\r\n                  <td class=\"col p-0 m-0\">{{ col.header | localize }}\r\n\r\n                  </td>\r\n                  <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\"><p-sortIcon class=\"w-1rem m-0 p-0\"\r\n                      field=\"{{col.field}}\"></p-sortIcon>\r\n\r\n                  </td>\r\n                </tr>\r\n              </table>\r\n\r\n            </span>\r\n          </th>\r\n        </tr>\r\n        <tr  *ngIf=\"showFilters; else notShowFilters\">\r\n          <th *ngIf=\"selectionMode == multipleGridSelectionMode\" style=\"width: 4rem\">\r\n\r\n      </th>\r\n            <th pFrozenColumn class=\"stick\" *ngIf=\"showHaveSumary\" style=\"width:3rem\"></th>\r\n            <th pFrozenColumn [frozen]=\"col.isFrozen\" scope=\"col\" *ngFor=\"let col of columns\">\r\n              <p-columnFilter *ngIf=\"!col.isButton\" type=\"text\" field=\"{{col.field}}\"></p-columnFilter>\r\n            </th>\r\n        </tr>\r\n\r\n        <ng-template #notShowFilters>\r\n          <ng-container>\r\n            <th pFrozenColumn class=\"stick\" *ngIf=\"showHaveSumary\" style=\"width:3rem\"></th>\r\n          </ng-container>\r\n        </ng-template>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n        <tr [pReorderableRow]=\"index\">\r\n            <td *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n            </td>\r\n            <td pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\" style=\"width:3rem\"></td>\r\n            <td pTooltip=\"{{col.toolTipText | localize }}\" tooltipPosition=\"top\" pFrozenColumn [frozen]=\"col.isFrozen\" style=\"width: max-content\" *ngFor=\"let col of columns\">\r\n\r\n                <!-- Tsi-Currency-Societe-Input -->\r\n\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY; else currencyOtherOutputBlock\">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                </div>\r\n\r\n\r\n                <!-- Tsi-Currency-Other-Input -->\r\n                <ng-template #currencyOtherOutputBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY; else datePickerOutputBlock\">\r\n                        <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n                        </Tsi-Currency-Other-Display>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Date-Picker -->\r\n                <ng-template #datePickerOutputBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.DATE_DISPLAY; else checkBoxOutputBlock\">\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-CheckBox -->\r\n                <ng-template #checkBoxOutputBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.CHECKBOX_DISPLAY; 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-Input -->\r\n                <ng-template #decimalOutputBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY; else integerOutputBlock\">\r\n                        <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\" [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=\"col.type == displayTypes.INTEGER_DISPLAY; 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-Input -->\r\n                <ng-template #rateOutputBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.RATE_DISPLAY; else displayButtonBlock\">\r\n                        <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\" [numOfDecimal]=\"col.numOfDecimal\">\r\n                        </Tsi-Rate-Display>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Button -->\r\n                <ng-template #displayButtonBlock>\r\n                  <ng-container *ngIf=\"col.isButton; else defaultTextOutputBlock\">\r\n\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                      <button class=\"p-0\" pButton pRipple type=\"button\" icon=\"{{col.buttonIcon}}\" class=\"{{col.styleClass}}\"\r\n                        (click)=\"buttonClicked(item[key], col.field)\">{{col.buttonLabel | localize}}</button>\r\n                    </div>\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            </td>\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <ng-template *ngIf=\"showHaveSumary\" pTemplate=\"footer\" let-columns>\r\n        <tr class=\"tfooter\">\r\n            <td pFrozenColumn scope=\"col\" style=\"width:3rem\">Totals</td>\r\n            <td pFrozenColumn [frozen]=\"col.isFrozen\" [style]=\"col.style\" scope=\"col\"\r\n                *ngFor=\"let col of columns\">\r\n                <div *ngIf=\"col.haveSummary\">\r\n                    <!-- Tsi-Currency-Societe-Display -->\r\n                    <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY; 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 == displayTypes.CURRENCY_OTHER_DISPLAY; else decimalOutputBlock\">\r\n                            <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [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 == displayTypes.DECIMAL_DISPLAY; else integerOutputBlock\">\r\n                            <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col)\" [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 == displayTypes.INTEGER_DISPLAY; 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 == displayTypes.RATE_DISPLAY; else defaultTextOutputBlock\">\r\n                            <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"getSummary(col)\" [numOfDecimal]=\"col.numOfDecimal\">\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    <ng-template *ngIf=\"showSummaryFooter\" pTemplate=\"summary\">\r\n        There are {{totalCount()}}\r\n        <span>\r\n        </span>\r\n    </ng-template>\r\n</p-table>\r\n", styles: [":host ::ng-deep .p-datatable .p-datatable-thead>tr>th{position:-webkit-sticky;position:sticky;top:0rem}.layout-news-active :host ::ng-deep .p-datatable tr>th{top:3rem}.tfooter{position:sticky;bottom:0;width:100%;z-index:10}.p-button.p-button-icon-only.p-button-rounded{height:2rem!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i2$2.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.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.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { 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: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: TsiCheckboxDisplayComponent, selector: "Tsi-Checkbox-Display", inputs: ["inputData"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["inputData", "currency"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDateDisplayComponent, selector: "Tsi-Date-Display", inputs: ["inputData", "showTime"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiDisplayGridComponent, selector: "Tsi-Display-Grid", inputs: { columns: "columns", showHeader: "showHeader", header: "header", key: "key", gridData: "gridData", gridSummaryData: "gridSummaryData", isTableLoading: "isTableLoading", showHaveSumary: "showHaveSumary", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", parent: "parent", selectedItems: "selectedItems", showFilters: "showFilters", showSort: "showSort", paginator: "paginator", showSummaryFooter: "showSummaryFooter", globalFilterFields: "globalFilterFields" }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", selectedItemsChange: "selectedItemsChange", buttonColumnClicked: "buttonColumnClicked" }, ngImport: i0, template: "<p-table #dt1 dataKey=\"{{key}}\" [(selectAll)]=\"selectAll\" [selectionMode]=\"selectionMode\" [(selection)]=\"selectedFullItems\"\r\n(onRowUnselect)=\"onSelectedItemsChanged()\" (selectAllChange)=\"onSelectAllChange($event)\" (onRowSelect)=\"onSelectedItemsChanged()\"\r\n [totalRecords]=\"totalCount()\" [reorderableColumns]=\"true\" [columns]=\"columns\" [paginator]=\"paginator\" [rows]=\"10\"\r\n    [value]=\"getData()\" [globalFilterFields]=\"globalFilterFields ?? []\" [resizableColumns]=\"true\" [scrollable]=\"true\" appendTo=\"body\" styleClass=\"p-datatable-sm p-datatable-gridlines\"\r\n    columnResizeMode=\"expand\" scrollHeight=\"600px\">\r\n    <!-- <ng-template *ngIf=\"showHeader\" pTemplate=\"caption\">\r\n        {{header | localize}}\r\n    </ng-template> -->\r\n    <ng-template pTemplate=\"caption\">\r\n      <div class=\"flex\">\r\n        <div *ngIf=\"showHeader\">\r\n            {{header | localize}}\r\n        </div>\r\n        <span class=\"p-input-icon-left ml-auto\">\r\n              <i class=\"pi pi-search\"></i>\r\n              <input pInputText style=\"padding-left: 2.5rem!important; \" class=\"p-inputtext p-component p-element p-filled\" type=\"text\" #filterGlobalInput (input)=\"dt1.filterGlobal(filterGlobalInput.value, 'contains')\" placeholder=\"{{'' | localize}}\" />\r\n          </span>\r\n      </div>\r\n  </ng-template>\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngIf=\"selectionMode == multipleGridSelectionMode\" style=\"width: 4rem\">\r\n                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n            </th>\r\n            <th pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\" style=\"width:3rem\"></th>\r\n            <th pFrozenColumn [frozen]=\"col.isFrozen\" scope=\"col\" [style.width]=\"col.isButton ? '4rem' : (col.width? col.width.getCSSValue() : '')\" [style]=\"col.style\" pTooltip=\"{{col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n            *ngFor=\"let col of columns\" pReorderableColumn pSortableColumn=\"{{col.field}}\">\r\n            <span *ngIf=\"!col.isButton\">\r\n              <table class=\"p-0 m-0\">\r\n                <tr>\r\n                  <td class=\"col p-0 m-0\">{{ col.header | localize }}\r\n\r\n                  </td>\r\n                  <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\"><p-sortIcon class=\"w-1rem m-0 p-0\"\r\n                      field=\"{{col.field}}\"></p-sortIcon>\r\n\r\n                  </td>\r\n                </tr>\r\n              </table>\r\n\r\n            </span>\r\n          </th>\r\n        </tr>\r\n        <tr  *ngIf=\"showFilters; else notShowFilters\">\r\n          <th *ngIf=\"selectionMode == multipleGridSelectionMode\" style=\"width: 4rem\">\r\n\r\n      </th>\r\n            <th pFrozenColumn class=\"stick\" *ngIf=\"showHaveSumary\" style=\"width:3rem\"></th>\r\n            <th pFrozenColumn [frozen]=\"col.isFrozen\" scope=\"col\" *ngFor=\"let col of columns\">\r\n              <p-columnFilter *ngIf=\"!col.isButton\" type=\"text\" field=\"{{col.field}}\"></p-columnFilter>\r\n            </th>\r\n        </tr>\r\n\r\n        <ng-template #notShowFilters>\r\n          <ng-container>\r\n            <th pFrozenColumn class=\"stick\" *ngIf=\"showHaveSumary\" style=\"width:3rem\"></th>\r\n          </ng-container>\r\n        </ng-template>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n        <tr [pReorderableRow]=\"index\">\r\n            <td *ngIf=\"selectionMode == multipleGridSelectionMode\">\r\n                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n            </td>\r\n            <td pFrozenColumn *ngIf=\"showHaveSumary\" scope=\"col\" style=\"width:3rem\"></td>\r\n            <td pTooltip=\"{{col.toolTipText | localize }}\" tooltipPosition=\"top\" pFrozenColumn [frozen]=\"col.isFrozen\" style=\"width: max-content\" *ngFor=\"let col of columns\">\r\n\r\n                <!-- Tsi-Currency-Societe-Input -->\r\n\r\n                <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY; else currencyOtherOutputBlock\">\r\n                    <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n                    </Tsi-Currency-Societe-Display>\r\n                </div>\r\n\r\n\r\n                <!-- Tsi-Currency-Other-Input -->\r\n                <ng-template #currencyOtherOutputBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY; else datePickerOutputBlock\">\r\n                        <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n                        </Tsi-Currency-Other-Display>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Tsi-Date-Picker -->\r\n                <ng-template #datePickerOutputBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.DATE_DISPLAY; else checkBoxOutputBlock\">\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-CheckBox -->\r\n                <ng-template #checkBoxOutputBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.CHECKBOX_DISPLAY; 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-Input -->\r\n                <ng-template #decimalOutputBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY; else integerOutputBlock\">\r\n                        <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\" [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=\"col.type == displayTypes.INTEGER_DISPLAY; 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-Input -->\r\n                <ng-template #rateOutputBlock>\r\n                    <ng-container *ngIf=\"col.type == displayTypes.RATE_DISPLAY; else displayButtonBlock\">\r\n                        <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\" [numOfDecimal]=\"col.numOfDecimal\">\r\n                        </Tsi-Rate-Display>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n                <!-- Button -->\r\n                <ng-template #displayButtonBlock>\r\n                  <ng-container *ngIf=\"col.isButton; else defaultTextOutputBlock\">\r\n\r\n                    <div class=\"flex align-items-center justify-content-center p-0\">\r\n                      <button class=\"p-0\" pButton pRipple type=\"button\" icon=\"{{col.buttonIcon}}\" class=\"{{col.styleClass}}\"\r\n                        (click)=\"buttonClicked(item[key], col.field)\">{{col.buttonLabel | localize}}</button>\r\n                    </div>\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            </td>\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <ng-template *ngIf=\"showHaveSumary\" pTemplate=\"footer\" let-columns>\r\n        <tr class=\"tfooter\">\r\n            <td pFrozenColumn scope=\"col\" style=\"width:3rem\">Totals</td>\r\n            <td pFrozenColumn [frozen]=\"col.isFrozen\" [style]=\"col.style\" scope=\"col\"\r\n                *ngFor=\"let col of columns\">\r\n                <div *ngIf=\"col.haveSummary\">\r\n                    <!-- Tsi-Currency-Societe-Display -->\r\n                    <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY; 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 == displayTypes.CURRENCY_OTHER_DISPLAY; else decimalOutputBlock\">\r\n                            <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [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 == displayTypes.DECIMAL_DISPLAY; else integerOutputBlock\">\r\n                            <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col)\" [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 == displayTypes.INTEGER_DISPLAY; 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 == displayTypes.RATE_DISPLAY; else defaultTextOutputBlock\">\r\n                            <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"getSummary(col)\" [numOfDecimal]=\"col.numOfDecimal\">\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    <ng-template *ngIf=\"showSummaryFooter\" pTemplate=\"summary\">\r\n        There are {{totalCount()}}\r\n        <span>\r\n        </span>\r\n    </ng-template>\r\n</p-table>\r\n", styles: [":host ::ng-deep .p-datatable .p-datatable-thead>tr>th{position:-webkit-sticky;position:sticky;top:0rem}.layout-news-active :host ::ng-deep .p-datatable tr>th{top:3rem}.tfooter{position:sticky;bottom:0;width:100%;z-index:10}.p-button.p-button-icon-only.p-button-rounded{height:2rem!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { 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.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.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { 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: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: TsiCheckboxDisplayComponent, selector: "Tsi-Checkbox-Display", inputs: ["inputData"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["inputData", "currency"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDateDisplayComponent, selector: "Tsi-Date-Display", inputs: ["inputData", "showTime"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiDisplayGridComponent, decorators: [{
             type: Component,
@@ -20824,7 +20998,7 @@ class TsiActionErpCreateOrEditComponent extends TsiFormComponentBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiActionErpCreateOrEditComponent, deps: [{ token: ActionErpService }, { token: NatureActionService }, { token: ErrorResponseManagerService }, { token: TsiNotificationService }, { token: TsiConfirmationService }, { token: EntityConfigurationService }, { token: i1$3.DialogService }, { token: IdentityManagerService }, { token: LocalizePipe }, { 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: TsiActionErpCreateOrEditComponent, selector: "lib-tsi-action-erp-create-or-edit", providers: [...appProviders, DialogService], usesInheritance: true, ngImport: i0, template: "<tsi-form class=\"form-horizontal\" autocomplete=\"off\" (onSubmit)=\"save()\" [isLoading]=\"isloading\">\r\n    <Tsi-Modal-Header [inputTitle]=\"header | modalLabel :mode:'shared_action_add_action'\" (onCloseClick)=\"hide()\">\r\n    </Tsi-Modal-Header>\r\n\r\n    <fieldset [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n        <div class=\"col-12\">\r\n            <div class=\"grid row-gap-2\">\r\n                <div class=\"col-12 md:col-6\">\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_Nature_Action'\"></Tsi-Label>\r\n                        </div>\r\n                        <div class=\"col-8\">\r\n                            <Tsi-Search-Combo [elementSourceUrl]=\"administrationEndpoints.getNatureActionMinimal()\"\r\n                                [listSourceUrl]=\"administrationEndpoints.getAllNatureActionMinimal()\"\r\n                                [(bind)]=\"action.natureAction\" id-field=\"uid\" label-field=\"libelle\" [isFiltered]=\"true\"\r\n                                [inputName]=\"'NatureAction'\" [businessClass]=\"businessClassNames.NatureAction\"\r\n                                (bindChange)=\"onNatureActionChange($event)\"></Tsi-Search-Combo>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_numero'\"></Tsi-Label></div>\r\n                        <div class=\"col-8\"><Tsi-Integer [inputName]=\"'Numero'\" [(inputField)]=\"action.numero\"\r\n                                [disabled]=\"true\"></Tsi-Integer></div>\r\n                    </div>\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_utilisateurDemandeur'\"></Tsi-Label>\r\n                        </div>\r\n                        <div class=\"col-8\">\r\n                            <Tsi-Search-Combo [elementSourceUrl]=\"administrationEndpoints.getUtilisateurMinimal()\"\r\n                                [listSourceUrl]=\"administrationEndpoints.getAllUtilisateurMinimal()\"\r\n                                [(bind)]=\"action.utilisateurDemandeur\" id-field=\"uid\" label-field=\"nomPrenom\"\r\n                                [isFiltered]=\"true\" [inputName]=\"'utilisateurDemandeur'\"\r\n                                [businessClass]=\"businessClassNames.Utilisateur\"></Tsi-Search-Combo>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_objet'\"></Tsi-Label></div>\r\n                        <div class=\"col-8\"><Tsi-Text-Area [inputName]=\"'Objet'\" [(inputField)]=\"action.objet\"\r\n                                [rows]=\"3\"></Tsi-Text-Area></div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"col-12 md:col-6\">\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_priorite'\"></Tsi-Label></div>\r\n                        <div class=\"col-8\">\r\n                            <Tsi-Search-Combo [listSourceUrl]=\"administrationEndpoints.allPrioriteActionCRMEnum\"\r\n                                [(bind)]=\"action.priorite\" id-field=\"key\" label-field=\"value\" [inputName]=\"'Priorite'\"\r\n                                [showSearchButton]=\"false\"></Tsi-Search-Combo>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_utilisateurAssigne'\"></Tsi-Label>\r\n                        </div>\r\n                        <div class=\"col-8\">\r\n                            <Tsi-Search-Combo [elementSourceUrl]=\"administrationEndpoints.getUtilisateurMinimal()\"\r\n                                [listSourceUrl]=\"administrationEndpoints.getAllUtilisateurMinimal()\"\r\n                                [(bind)]=\"action.utilisateurAssigne\" id-field=\"uid\" label-field=\"nomPrenom\"\r\n                                [inputName]=\"'UtilisateurAssigne'\" [isFiltered]=\"true\"\r\n                                [businessClass]=\"businessClassNames.Utilisateur\"></Tsi-Search-Combo>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_resultat'\"></Tsi-Label></div>\r\n                        <div class=\"col-8\">\r\n                            <Tsi-Search-Combo [listSourceUrl]=\"administrationEndpoints.allResultatActionCRMEnum\"\r\n                                [(bind)]=\"action.resultat\" id-field=\"key\" label-field=\"value\" [inputName]=\"'Resultat'\"\r\n                                [showSearchButton]=\"false\"></Tsi-Search-Combo>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_lieu'\"></Tsi-Label></div>\r\n                        <div class=\"col-8\"><Tsi-Text-Area [inputName]=\"'Lieu'\"\r\n                                [(inputField)]=\"action.lieu\"></Tsi-Text-Area></div>\r\n                    </div>\r\n\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_ActionPrecedente'\"></Tsi-Label></div>\r\n                        <div class=\"col-7\"><Tsi-Integer [inputName]=\"'ActionPrecedente'\"\r\n                                [(inputField)]=\"action.codeActionPrecedente\" [disabled]=\"true\"></Tsi-Integer>\r\n                        </div>\r\n                        <div class=\"col-1\">\r\n                            <Tsi-Button [icon]=\"'pi pi-caret-up'\" [disabled]=\"!action.actionPrecedente\"\r\n                                (onClick)=\"openActionPrecedentePopup()\">\r\n                            </Tsi-Button>\r\n                            \r\n                        </div>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n            </div>\r\n\r\n            <p-tabView>\r\n                <p-tabPanel [header]=\"'anglais_echeance'| localize\">\r\n                    <ng-template pTemplate=\"content\">\r\n\r\n                        <div class=\"grid\">\r\n                            <div class=\"col-8\">\r\n                                <div class=\"form-group border p-2\">\r\n                                    <div class=\"grid mb-1\">\r\n                                        <div class=\"col-4\"></div>\r\n                                        <div class=\"col-4 text-center\"><b>{{ 'action_Debut' | localize }}</b>\r\n                                        </div>\r\n                                        <div class=\"col-4 text-center\"><b>{{ 'action_Fin' | localize }}</b>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"grid flex align-items-center mb-2\">\r\n                                        <div class=\"col-4\"><Tsi-Label\r\n                                                [labelValue]=\"'action_dateHeure_Prev'\"></Tsi-Label></div>\r\n                                        <div class=\"col-4\"><Tsi-Date-Picker [inputName]=\"'DateHeureDebutPrev'\"\r\n                                                [(inputField)]=\"action.dateHeureDebutPrev\"\r\n                                                [showTime]=\"true\"></Tsi-Date-Picker>\r\n                                        </div>\r\n                                        <div class=\"col-4\"><Tsi-Date-Picker [inputName]=\"'DateHeureFinPrev'\"\r\n                                                [(inputField)]=\"action.dateHeureFinPrev\"\r\n                                                [showTime]=\"true\"></Tsi-Date-Picker>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"grid flex align-items-center\">\r\n                                        <div class=\"col-4\"><Tsi-Label\r\n                                                [labelValue]=\"'action.dateHeuree_Realisee'\"></Tsi-Label></div>\r\n                                        <div class=\"col-4\"><Tsi-Date-Picker [inputName]=\"'DateHeureDebutRealisee'\"\r\n                                                [(inputField)]=\"action.dateHeureDebutRealisee\"\r\n                                                [showTime]=\"true\"></Tsi-Date-Picker>\r\n                                        </div>\r\n                                        <div class=\"col-4\"><Tsi-Date-Picker [inputName]=\"'DateHeureFinRealisee'\"\r\n                                                [(inputField)]=\"action.dateHeureFinRealisee\"\r\n                                                [showTime]=\"true\"></Tsi-Date-Picker>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"col-4\">\r\n                                <p-fieldset [legend]=\"'action_Fieldset_alerte' | localize\">\r\n                                    <div class=\"grid flex align-items-center mb-2\">\r\n                                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'action_alerte'\"></Tsi-Label>\r\n                                        </div>\r\n                                        <div class=\"col-4\"><Tsi-CheckBox [inputName]=\"'Alerte'\" [isBinary]=\"true\"\r\n                                                [(inputField)]=\"action.alerte\"></Tsi-CheckBox>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"grid flex align-items-center \">\r\n                                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'action_alerteAvant'\"></Tsi-Label>\r\n                                        </div>\r\n\r\n                                        <div class=\"col-3 flex align-items-center gap-2\"><Tsi-Integer\r\n                                                [inputName]=\"'AlerteAvant'\" [(inputField)]=\"action.alerteAvant\">\r\n                                            </Tsi-Integer>\r\n                                            <span class=\"text-nowrap\">{{'jours'| localize}}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                </p-fieldset>\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-tabPanel>\r\n                <p-tabPanel [header]=\"'Liste_des_action_details'| localize\">\r\n                    <ng-template pTemplate=\"content\">\r\n                            <div presentationDesigner=\"action_Generer\" class=\"grid\">\r\n                                <Tsi-Label class=\"col-1 col-offset-1\" [labelValue]=\"'action_Generer'\"></Tsi-Label>\r\n                                <Tsi-Search-Combo class=\"col-4\" inputName=\"className\" id-field=\"className\"\r\n                                    label-field=\"className\"\r\n                                    [listSourceUrl]=\"this.administrationEndpoints.GetAllEntitiesInformationsMinimal()\"\r\n                                    [elementSourceUrl]=\"this.administrationEndpoints.getEntityInfoElementSource()\"\r\n                                    [isFiltered]=\"true\" [(bind)]=\"classename\" [businessClass]=\"businessClass\"\r\n                                    (bindChange)=\"onClasseSelected($event)\"> ></Tsi-Search-Combo>\r\n                            </div>\r\n                            <Tsi-Generic-Editable-Grid (onConsultClicked)=\"consultElement($event)\"\r\n                                [showConsultButton]=\"true\" [columns]=\"actiondetailcolom\"\r\n                                [gridData]=\"action.actionERPDetails\" [parent]=\"this\"></Tsi-Generic-Editable-Grid>\r\n                    </ng-template>\r\n                </p-tabPanel>\r\n                <p-tabPanel [header]=\"'shared_action_participants'| localize\">\r\n                    <ng-template pTemplate=\"content\">\r\n                        <Tsi-Generic-Editable-Grid [columns]=\"participantColumns\"\r\n                            [gridData]=\"action.actionERPUtilisateurs\" [parent]=\"this\" [showAddButton]=\"true\"\r\n                            [showDeleteButton]=\"true\"></Tsi-Generic-Editable-Grid>\r\n                    </ng-template>\r\n                </p-tabPanel>\r\n            </p-tabView>\r\n        </div>\r\n    </fieldset>\r\n\r\n    <div *ngIf=\"mode !== modeRef.create\" class=\"grid mt-2\" presentationDesigner=\"actionnouvelle_actionERP\">\r\n        <div class=\"col-8\">\r\n            <Tsi-Button class=\"w-full\" (onClick)=\"openActionERPPopUp()\"\r\n                [text]=\"'actionnouvelle_actionERP'\"></Tsi-Button>\r\n        </div>\r\n    </div>\r\n\r\n    <Tsi-Modal-Footer [cancelDisabled]=\"saving\"\r\n        [saveDisabled]=\"isSubmitDisabled()\" (onCancelClick)=\"hide()\"></Tsi-Modal-Footer>\r\n</tsi-form>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$1.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7$1.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: i8$1.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: EditableGridComponent, selector: "Tsi-Generic-Editable-Grid", inputs: ["selectedItems", "configuration", "key", "items", "saveEvent", "showGlobalSearch", "showAddButton", "showDeleteButton", "showEditButton", "showRowSummary", "scrollHeight", "sizingMode", "rowPerPage", "pageSize", "entityPrimaryKeyName", "columns", "gridData", "isTableLoading", "parent", "showSaveButton", "showActionColumn", "enableRowDisabling", "rowSummaryConfig", "showHaveSumary", "showRowSumary", "selectKeyOnly", "selectionMode", "showConsultButton", "editableGridBusinessClass", "orderColumn", "deleteLineButtonDisabled", "showDuplicateButton", "id"], outputs: ["refreshEventEmitter", "saveDataEventEmitter", "rowChangedEventEmitter", "selectedRowEventEmitter", "addedRowEventEmitter", "focusOutEventEmitter", "cellChanged", "rowDeletedEventEmitter", "selectedItemsChange", "onRowSelect", "focusOutRow", "onConsultClicked", "rowDuplicatedEventEmitter"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "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: TsiDatePickerComponent, selector: "Tsi-Date-Picker", inputs: ["required", "showTime", "showButtonBar"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiTextAreaComponent, selector: "Tsi-Text-Area", inputs: ["rows", "cols"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { 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: TsiModalHeaderComponent, selector: "Tsi-Modal-Header", inputs: ["inputTitle"], outputs: ["onCloseClick"] }, { 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: TsiFormComponent, selector: "tsi-form", inputs: ["class", "autocomplete", "optionalEndpoints", "disabled", "isLoading", "modalSize", "formEndpoint", "formName", "isReportingToolbarDisabled", "isCreateOnly", "statusInputDisabled"], outputs: ["onSave", "onSubmit", "onSubmitFormWorkflowConfiguration", "formRefChange", "onStatusChange"] }, { kind: "directive", type: PresentationDesignerDirective, selector: "[presentationDesigner]" }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: ModalLabelPipe, name: "modalLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiActionErpCreateOrEditComponent, selector: "lib-tsi-action-erp-create-or-edit", providers: [...appProviders, DialogService], usesInheritance: true, ngImport: i0, template: "<tsi-form class=\"form-horizontal\" autocomplete=\"off\" (onSubmit)=\"save()\" [isLoading]=\"isloading\">\r\n    <Tsi-Modal-Header [inputTitle]=\"header | modalLabel :mode:'shared_action_add_action'\" (onCloseClick)=\"hide()\">\r\n    </Tsi-Modal-Header>\r\n\r\n    <fieldset [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n        <div class=\"col-12\">\r\n            <div class=\"grid row-gap-2\">\r\n                <div class=\"col-12 md:col-6\">\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_Nature_Action'\"></Tsi-Label>\r\n                        </div>\r\n                        <div class=\"col-8\">\r\n                            <Tsi-Search-Combo [elementSourceUrl]=\"administrationEndpoints.getNatureActionMinimal()\"\r\n                                [listSourceUrl]=\"administrationEndpoints.getAllNatureActionMinimal()\"\r\n                                [(bind)]=\"action.natureAction\" id-field=\"uid\" label-field=\"libelle\" [isFiltered]=\"true\"\r\n                                [inputName]=\"'NatureAction'\" [businessClass]=\"businessClassNames.NatureAction\"\r\n                                (bindChange)=\"onNatureActionChange($event)\"></Tsi-Search-Combo>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_numero'\"></Tsi-Label></div>\r\n                        <div class=\"col-8\"><Tsi-Integer [inputName]=\"'Numero'\" [(inputField)]=\"action.numero\"\r\n                                [disabled]=\"true\"></Tsi-Integer></div>\r\n                    </div>\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_utilisateurDemandeur'\"></Tsi-Label>\r\n                        </div>\r\n                        <div class=\"col-8\">\r\n                            <Tsi-Search-Combo [elementSourceUrl]=\"administrationEndpoints.getUtilisateurMinimal()\"\r\n                                [listSourceUrl]=\"administrationEndpoints.getAllUtilisateurMinimal()\"\r\n                                [(bind)]=\"action.utilisateurDemandeur\" id-field=\"uid\" label-field=\"nomPrenom\"\r\n                                [isFiltered]=\"true\" [inputName]=\"'utilisateurDemandeur'\"\r\n                                [businessClass]=\"businessClassNames.Utilisateur\"></Tsi-Search-Combo>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_objet'\"></Tsi-Label></div>\r\n                        <div class=\"col-8\"><Tsi-Text-Area [inputName]=\"'Objet'\" [(inputField)]=\"action.objet\"\r\n                                [rows]=\"3\"></Tsi-Text-Area></div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"col-12 md:col-6\">\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_priorite'\"></Tsi-Label></div>\r\n                        <div class=\"col-8\">\r\n                            <Tsi-Search-Combo [listSourceUrl]=\"administrationEndpoints.allPrioriteActionCRMEnum\"\r\n                                [(bind)]=\"action.priorite\" id-field=\"key\" label-field=\"value\" [inputName]=\"'Priorite'\"\r\n                                [showSearchButton]=\"false\"></Tsi-Search-Combo>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_utilisateurAssigne'\"></Tsi-Label>\r\n                        </div>\r\n                        <div class=\"col-8\">\r\n                            <Tsi-Search-Combo [elementSourceUrl]=\"administrationEndpoints.getUtilisateurMinimal()\"\r\n                                [listSourceUrl]=\"administrationEndpoints.getAllUtilisateurMinimal()\"\r\n                                [(bind)]=\"action.utilisateurAssigne\" id-field=\"uid\" label-field=\"nomPrenom\"\r\n                                [inputName]=\"'UtilisateurAssigne'\" [isFiltered]=\"true\"\r\n                                [businessClass]=\"businessClassNames.Utilisateur\"></Tsi-Search-Combo>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_resultat'\"></Tsi-Label></div>\r\n                        <div class=\"col-8\">\r\n                            <Tsi-Search-Combo [listSourceUrl]=\"administrationEndpoints.allResultatActionCRMEnum\"\r\n                                [(bind)]=\"action.resultat\" id-field=\"key\" label-field=\"value\" [inputName]=\"'Resultat'\"\r\n                                [showSearchButton]=\"false\"></Tsi-Search-Combo>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_lieu'\"></Tsi-Label></div>\r\n                        <div class=\"col-8\"><Tsi-Text-Area [inputName]=\"'Lieu'\"\r\n                                [(inputField)]=\"action.lieu\"></Tsi-Text-Area></div>\r\n                    </div>\r\n\r\n                    <div class=\"grid align-items-center\">\r\n                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'shared_action_ActionPrecedente'\"></Tsi-Label></div>\r\n                        <div class=\"col-7\"><Tsi-Integer [inputName]=\"'ActionPrecedente'\"\r\n                                [(inputField)]=\"action.codeActionPrecedente\" [disabled]=\"true\"></Tsi-Integer>\r\n                        </div>\r\n                        <div class=\"col-1\">\r\n                            <Tsi-Button [icon]=\"'pi pi-caret-up'\" [disabled]=\"!action.actionPrecedente\"\r\n                                (onClick)=\"openActionPrecedentePopup()\">\r\n                            </Tsi-Button>\r\n                            \r\n                        </div>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n            </div>\r\n\r\n            <p-tabView>\r\n                <p-tabPanel [header]=\"'anglais_echeance'| localize\">\r\n                    <ng-template pTemplate=\"content\">\r\n\r\n                        <div class=\"grid\">\r\n                            <div class=\"col-8\">\r\n                                <div class=\"form-group border p-2\">\r\n                                    <div class=\"grid mb-1\">\r\n                                        <div class=\"col-4\"></div>\r\n                                        <div class=\"col-4 text-center\"><b>{{ 'action_Debut' | localize }}</b>\r\n                                        </div>\r\n                                        <div class=\"col-4 text-center\"><b>{{ 'action_Fin' | localize }}</b>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"grid flex align-items-center mb-2\">\r\n                                        <div class=\"col-4\"><Tsi-Label\r\n                                                [labelValue]=\"'action_dateHeure_Prev'\"></Tsi-Label></div>\r\n                                        <div class=\"col-4\"><Tsi-Date-Picker [inputName]=\"'DateHeureDebutPrev'\"\r\n                                                [(inputField)]=\"action.dateHeureDebutPrev\"\r\n                                                [showTime]=\"true\"></Tsi-Date-Picker>\r\n                                        </div>\r\n                                        <div class=\"col-4\"><Tsi-Date-Picker [inputName]=\"'DateHeureFinPrev'\"\r\n                                                [(inputField)]=\"action.dateHeureFinPrev\"\r\n                                                [showTime]=\"true\"></Tsi-Date-Picker>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"grid flex align-items-center\">\r\n                                        <div class=\"col-4\"><Tsi-Label\r\n                                                [labelValue]=\"'action.dateHeuree_Realisee'\"></Tsi-Label></div>\r\n                                        <div class=\"col-4\"><Tsi-Date-Picker [inputName]=\"'DateHeureDebutRealisee'\"\r\n                                                [(inputField)]=\"action.dateHeureDebutRealisee\"\r\n                                                [showTime]=\"true\"></Tsi-Date-Picker>\r\n                                        </div>\r\n                                        <div class=\"col-4\"><Tsi-Date-Picker [inputName]=\"'DateHeureFinRealisee'\"\r\n                                                [(inputField)]=\"action.dateHeureFinRealisee\"\r\n                                                [showTime]=\"true\"></Tsi-Date-Picker>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"col-4\">\r\n                                <p-fieldset [legend]=\"'action_Fieldset_alerte' | localize\">\r\n                                    <div class=\"grid flex align-items-center mb-2\">\r\n                                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'action_alerte'\"></Tsi-Label>\r\n                                        </div>\r\n                                        <div class=\"col-4\"><Tsi-CheckBox [inputName]=\"'Alerte'\" [isBinary]=\"true\"\r\n                                                [(inputField)]=\"action.alerte\"></Tsi-CheckBox>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"grid flex align-items-center \">\r\n                                        <div class=\"col-3\"><Tsi-Label [labelValue]=\"'action_alerteAvant'\"></Tsi-Label>\r\n                                        </div>\r\n\r\n                                        <div class=\"col-3 flex align-items-center gap-2\"><Tsi-Integer\r\n                                                [inputName]=\"'AlerteAvant'\" [(inputField)]=\"action.alerteAvant\">\r\n                                            </Tsi-Integer>\r\n                                            <span class=\"text-nowrap\">{{'jours'| localize}}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                </p-fieldset>\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-tabPanel>\r\n                <p-tabPanel [header]=\"'Liste_des_action_details'| localize\">\r\n                    <ng-template pTemplate=\"content\">\r\n                            <div presentationDesigner=\"action_Generer\" class=\"grid\">\r\n                                <Tsi-Label class=\"col-1 col-offset-1\" [labelValue]=\"'action_Generer'\"></Tsi-Label>\r\n                                <Tsi-Search-Combo class=\"col-4\" inputName=\"className\" id-field=\"className\"\r\n                                    label-field=\"className\"\r\n                                    [listSourceUrl]=\"this.administrationEndpoints.GetAllEntitiesInformationsMinimal()\"\r\n                                    [elementSourceUrl]=\"this.administrationEndpoints.getEntityInfoElementSource()\"\r\n                                    [isFiltered]=\"true\" [(bind)]=\"classename\" [businessClass]=\"businessClass\"\r\n                                    (bindChange)=\"onClasseSelected($event)\"> ></Tsi-Search-Combo>\r\n                            </div>\r\n                            <Tsi-Generic-Editable-Grid (onConsultClicked)=\"consultElement($event)\"\r\n                                [showConsultButton]=\"true\" [columns]=\"actiondetailcolom\"\r\n                                [gridData]=\"action.actionERPDetails\" [parent]=\"this\"></Tsi-Generic-Editable-Grid>\r\n                    </ng-template>\r\n                </p-tabPanel>\r\n                <p-tabPanel [header]=\"'shared_action_participants'| localize\">\r\n                    <ng-template pTemplate=\"content\">\r\n                        <Tsi-Generic-Editable-Grid [columns]=\"participantColumns\"\r\n                            [gridData]=\"action.actionERPUtilisateurs\" [parent]=\"this\" [showAddButton]=\"true\"\r\n                            [showDeleteButton]=\"true\"></Tsi-Generic-Editable-Grid>\r\n                    </ng-template>\r\n                </p-tabPanel>\r\n            </p-tabView>\r\n        </div>\r\n    </fieldset>\r\n\r\n    <div *ngIf=\"mode !== modeRef.create\" class=\"grid mt-2\" presentationDesigner=\"actionnouvelle_actionERP\">\r\n        <div class=\"col-8\">\r\n            <Tsi-Button class=\"w-full\" (onClick)=\"openActionERPPopUp()\"\r\n                [text]=\"'actionnouvelle_actionERP'\"></Tsi-Button>\r\n        </div>\r\n    </div>\r\n\r\n    <Tsi-Modal-Footer [cancelDisabled]=\"saving\"\r\n        [saveDisabled]=\"isSubmitDisabled()\" (onCancelClick)=\"hide()\"></Tsi-Modal-Footer>\r\n</tsi-form>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$1.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7$1.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: i8$1.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: EditableGridComponent, selector: "Tsi-Generic-Editable-Grid", inputs: ["selectedItems", "configuration", "key", "items", "saveEvent", "showGlobalSearch", "showAddButton", "showDeleteButton", "showEditButton", "showRowSummary", "scrollHeight", "sizingMode", "rowPerPage", "pageSize", "entityPrimaryKeyName", "columns", "gridData", "isTableLoading", "parent", "showSaveButton", "showActionColumn", "enableRowDisabling", "rowSummaryConfig", "showHaveSumary", "showRowSumary", "selectKeyOnly", "selectionMode", "showConsultButton", "editableGridBusinessClass", "orderColumn", "deleteLineButtonDisabled", "showDuplicateButton", "id"], outputs: ["refreshEventEmitter", "saveDataEventEmitter", "rowChangedEventEmitter", "selectedRowEventEmitter", "addedRowEventEmitter", "focusOutEventEmitter", "cellChanged", "rowDeletedEventEmitter", "selectedItemsChange", "onRowSelect", "focusOutRow", "onConsultClicked", "rowDuplicatedEventEmitter"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "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: TsiDatePickerComponent, selector: "Tsi-Date-Picker", inputs: ["required", "showTime", "showButtonBar"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiTextAreaComponent, selector: "Tsi-Text-Area", inputs: ["rows", "cols"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { 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: TsiModalHeaderComponent, selector: "Tsi-Modal-Header", inputs: ["inputTitle"], outputs: ["onCloseClick"] }, { 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: TsiFormComponent, selector: "tsi-form", inputs: ["class", "autocomplete", "optionalEndpoints", "disabled", "isLoading", "modalSize", "formEndpoint", "formName", "isReportingToolbarDisabled", "isCreateOnly", "statusInputDisabled"], outputs: ["onSave", "onSubmit", "onSubmitFormWorkflowConfiguration", "formRefChange", "onStatusChange"] }, { kind: "directive", type: PresentationDesignerDirective, selector: "[presentationDesigner]:not(tsi-tab-panel)" }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: ModalLabelPipe, name: "modalLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiActionErpCreateOrEditComponent, decorators: [{
             type: Component,
@@ -21006,7 +21180,7 @@ class TsiActionErpListComponent extends TsiListBaseComponent {
         this.setModalSize({ width: ModalSizeEnum.Medium.width, height: ModalSizeEnum.Large.height });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiActionErpListComponent, deps: [{ token: IdentityManagerService }, { token: ActionErpService }, { 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: TsiActionErpListComponent, selector: "lib-tsi-action-erp-list", providers: [...appProviders], usesInheritance: true, ngImport: i0, template: "<Tsi-Generic-Crud \r\n[cudComponent]=\"comp\" \r\n[header]=\"titleComponent\" \r\n[columns]=\"columns\" \r\n[crudService]=\"actionservice\"\r\n[modalSize]=\"modalSize\"\r\n[showUploadButton]=\"false\"\r\n[showNoteButton]=\"false\"\r\npresentationDesigner [id]=\"'lib-tsi-action-erp-list'\" \r\n[searchFields]=\"searchFields\" \r\n[modalData]=\"modalData\"\r\n[businessClass]=\"businessClass\"></Tsi-Generic-Crud>\r\n", styles: [""], dependencies: [{ kind: "component", type: TsiGenericCrudComponent, selector: "Tsi-Generic-Crud", inputs: ["entityInfo", "modalData", "columns", "gridConfiguration", "cudComponent", "crudService", "header", "modalSize", "descriminatorValue", "presentationSettings", "preventAddEvent", "formEndpoint", "formName", "isSearchButtonDisabled", "showHeaderFilters", "showEditButton", "showDeleteButton", "showAddButton", "showConsultButton", "showUploadButton", "showNoteButton", "showDownloadButton", "showInfoButton", "showDuplicateButton", "showFormButton", "showCalenderView", "showCardView", "showImportFromOutlookButton", "showKanbanView", "showKanbanViewOfWorkFlowEtat", "showSearchField", "searchFields", "calenderSchema", "showActionButton", "sizingMode", "selectKeyOnly", "selectionMode", "selectedItems", "key", "id", "businessClass", "searchOnInit", "showGlobalSearch", "showExportButton", "showReporting"], outputs: ["selectedItemsChange", "searchFieldsValueChanged", "buttonColumnClicked", "onImportFromOutlookClicked"] }, { kind: "directive", type: PresentationDesignerDirective, selector: "[presentationDesigner]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiActionErpListComponent, selector: "lib-tsi-action-erp-list", providers: [...appProviders], usesInheritance: true, ngImport: i0, template: "<Tsi-Generic-Crud \r\n[cudComponent]=\"comp\" \r\n[header]=\"titleComponent\" \r\n[columns]=\"columns\" \r\n[crudService]=\"actionservice\"\r\n[modalSize]=\"modalSize\"\r\n[showUploadButton]=\"false\"\r\n[showNoteButton]=\"false\"\r\npresentationDesigner [id]=\"'lib-tsi-action-erp-list'\" \r\n[searchFields]=\"searchFields\" \r\n[modalData]=\"modalData\"\r\n[businessClass]=\"businessClass\"></Tsi-Generic-Crud>\r\n", styles: [""], dependencies: [{ kind: "component", type: TsiGenericCrudComponent, selector: "Tsi-Generic-Crud", inputs: ["entityInfo", "modalData", "columns", "gridConfiguration", "cudComponent", "crudService", "header", "modalSize", "descriminatorValue", "presentationSettings", "preventAddEvent", "formEndpoint", "formName", "isSearchButtonDisabled", "showHeaderFilters", "showEditButton", "showDeleteButton", "showAddButton", "showConsultButton", "showUploadButton", "showNoteButton", "showDownloadButton", "showInfoButton", "showDuplicateButton", "showFormButton", "showCalenderView", "showCardView", "showImportFromOutlookButton", "showKanbanView", "showKanbanViewOfWorkFlowEtat", "showSearchField", "searchFields", "calenderSchema", "showActionButton", "sizingMode", "selectKeyOnly", "selectionMode", "selectedItems", "key", "id", "businessClass", "searchOnInit", "showGlobalSearch", "showExportButton", "showReporting"], outputs: ["selectedItemsChange", "searchFieldsValueChanged", "buttonColumnClicked", "onImportFromOutlookClicked"] }, { kind: "directive", type: PresentationDesignerDirective, selector: "[presentationDesigner]:not(tsi-tab-panel)" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiActionErpListComponent, decorators: [{
             type: Component,
@@ -21124,7 +21298,7 @@ class TsiNotesComponent extends TsiFormComponentBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotesComponent, deps: [{ token: NoteService }, { token: ErrorResponseManagerService }, { token: i1$3.DynamicDialogRef }, { token: i1$3.DynamicDialogConfig }, { token: TsiNotificationService }, { token: TsiConfirmationService }, { token: DialogDataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiNotesComponent, selector: "app-tsi-notes", providers: [...appProviders], usesInheritance: true, ngImport: i0, template: "<tsi-form class=\"form-horizontal\" autocomplete=\"off\" (onSubmit)=\"save()\" [isLoading]=\"isloading\">\r\n  <Tsi-Modal-Header [inputTitle]=\"'shared_notes_add_notes' | localize \" (onCloseClick)=\"hide()\">\r\n  </Tsi-Modal-Header>\r\n  <fieldset [disabled]=\"isDeleteMode() || isConsultMode() \">\r\n    <div class=\"modal-body\">\r\n      <div class=\"grid\">\r\n        <div class=\"col-6\">\r\n          <div class=\"grid\">\r\n            <Tsi-Label class=\"col-3\" [labelValue]=\"'shared_notes_class_name'\"></Tsi-Label>\r\n            <Tsi-Text-Box class=\"col-6\" [inputName]=\"'ClassName'\" [(inputField)]=\"note.className\"\r\n              [disabled]=\"true\"></Tsi-Text-Box>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"grid\">\r\n        <div class=\"col-12\">\r\n          <div presentationDesigner=\"Note\" class=\"grid flex\">\r\n            <Tsi-Label class=\"col-1\" [labelValue]=\"'shared_notes_note'\"></Tsi-Label>\r\n            <Tsi-Text-Area class=\"col-10\" [inputName]=\"'Note'\" [(inputField)]=\"note.note\" [rows]=\"5\"\r\n              [cols]=\"5\"></Tsi-Text-Area>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"grid\">\r\n        <div class=\"col-12\">\r\n          <div presentationDesigner=\"avertir\" class=\"grid flex\">\r\n            <Tsi-Label class=\"col-1\" [labelValue]=\"'shared_notes_avertir'\"></Tsi-Label>\r\n            <Tsi-CheckBox class=\"col-2\" [inputName]=\"'avertir'\" [(inputField)]=\"note.avertir\"></Tsi-CheckBox>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </fieldset>\r\n  <Tsi-Modal-Footer [showSaveAndCloseButton]=\"mode == modeRef.delete\" [cancelDisabled]=\"saving\" [saveDisabled]=\"isSubmitDisabled()\"\r\n    (onCancelClick)=\"hide()\"></Tsi-Modal-Footer>\r\n</tsi-form>", styles: [""], dependencies: [{ kind: "component", type: TsiCheckboxComponent, selector: "Tsi-CheckBox", inputs: ["class", "isBinary", "checked", "tooltipText", "tooltipPosition"], outputs: ["inputFieldChange", "checkedChange"] }, { kind: "component", type: TsiTextAreaComponent, selector: "Tsi-Text-Area", inputs: ["rows", "cols"], 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: 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: TsiModalHeaderComponent, selector: "Tsi-Modal-Header", inputs: ["inputTitle"], outputs: ["onCloseClick"] }, { kind: "component", type: TsiFormComponent, selector: "tsi-form", inputs: ["class", "autocomplete", "optionalEndpoints", "disabled", "isLoading", "modalSize", "formEndpoint", "formName", "isReportingToolbarDisabled", "isCreateOnly", "statusInputDisabled"], outputs: ["onSave", "onSubmit", "onSubmitFormWorkflowConfiguration", "formRefChange", "onStatusChange"] }, { kind: "directive", type: PresentationDesignerDirective, selector: "[presentationDesigner]" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiNotesComponent, selector: "app-tsi-notes", providers: [...appProviders], usesInheritance: true, ngImport: i0, template: "<tsi-form class=\"form-horizontal\" autocomplete=\"off\" (onSubmit)=\"save()\" [isLoading]=\"isloading\">\r\n  <Tsi-Modal-Header [inputTitle]=\"'shared_notes_add_notes' | localize \" (onCloseClick)=\"hide()\">\r\n  </Tsi-Modal-Header>\r\n  <fieldset [disabled]=\"isDeleteMode() || isConsultMode() \">\r\n    <div class=\"modal-body\">\r\n      <div class=\"grid\">\r\n        <div class=\"col-6\">\r\n          <div class=\"grid\">\r\n            <Tsi-Label class=\"col-3\" [labelValue]=\"'shared_notes_class_name'\"></Tsi-Label>\r\n            <Tsi-Text-Box class=\"col-6\" [inputName]=\"'ClassName'\" [(inputField)]=\"note.className\"\r\n              [disabled]=\"true\"></Tsi-Text-Box>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"grid\">\r\n        <div class=\"col-12\">\r\n          <div presentationDesigner=\"Note\" class=\"grid flex\">\r\n            <Tsi-Label class=\"col-1\" [labelValue]=\"'shared_notes_note'\"></Tsi-Label>\r\n            <Tsi-Text-Area class=\"col-10\" [inputName]=\"'Note'\" [(inputField)]=\"note.note\" [rows]=\"5\"\r\n              [cols]=\"5\"></Tsi-Text-Area>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"grid\">\r\n        <div class=\"col-12\">\r\n          <div presentationDesigner=\"avertir\" class=\"grid flex\">\r\n            <Tsi-Label class=\"col-1\" [labelValue]=\"'shared_notes_avertir'\"></Tsi-Label>\r\n            <Tsi-CheckBox class=\"col-2\" [inputName]=\"'avertir'\" [(inputField)]=\"note.avertir\"></Tsi-CheckBox>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </fieldset>\r\n  <Tsi-Modal-Footer [showSaveAndCloseButton]=\"mode == modeRef.delete\" [cancelDisabled]=\"saving\" [saveDisabled]=\"isSubmitDisabled()\"\r\n    (onCancelClick)=\"hide()\"></Tsi-Modal-Footer>\r\n</tsi-form>", styles: [""], dependencies: [{ kind: "component", type: TsiCheckboxComponent, selector: "Tsi-CheckBox", inputs: ["class", "isBinary", "checked", "tooltipText", "tooltipPosition"], outputs: ["inputFieldChange", "checkedChange"] }, { kind: "component", type: TsiTextAreaComponent, selector: "Tsi-Text-Area", inputs: ["rows", "cols"], 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: 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: TsiModalHeaderComponent, selector: "Tsi-Modal-Header", inputs: ["inputTitle"], outputs: ["onCloseClick"] }, { kind: "component", type: TsiFormComponent, selector: "tsi-form", inputs: ["class", "autocomplete", "optionalEndpoints", "disabled", "isLoading", "modalSize", "formEndpoint", "formName", "isReportingToolbarDisabled", "isCreateOnly", "statusInputDisabled"], outputs: ["onSave", "onSubmit", "onSubmitFormWorkflowConfiguration", "formRefChange", "onStatusChange"] }, { 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: TsiNotesComponent, decorators: [{
             type: Component,
@@ -21442,7 +21616,7 @@ class CreateOrEditEntityInformationsComponent extends TsiFormComponentBaseCompon
         return comparison[field] || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreateOrEditEntityInformationsComponent, deps: [{ token: EntityConfigurationService }, { token: ErrorResponseManagerService }, { token: i1$3.DynamicDialogRef }, { token: i1$3.DynamicDialogConfig }, { token: TsiNotificationService }, { token: TsiConfirmationService }, { token: ApiExplorerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CreateOrEditEntityInformationsComponent, selector: "app-create-or-edit-entity-informations", providers: [...appProviders], usesInheritance: true, ngImport: i0, template: "<tsi-form class=\"form-horizontal\" autocomplete=\"off\" (onSubmit)=\"save()\" [isLoading]=\"isloading\">\r\n  <Tsi-Modal-Header [inputTitle]=\"header | modalLabel : mode : 'administration_entityRelations_title' | localize\"\r\n    (onCloseClick)=\"hide()\">\r\n  </Tsi-Modal-Header>\r\n\r\n  <div *ngIf=\"uid\" class=\"flex align-items-center gap-2 mb-2\">\r\n    <span class=\"font-semibold\">{{'administration_gestionEntityInformation_uid' | localize}} :</span>\r\n    <span>{{ uid }}</span>\r\n  </div>\r\n\r\n  <p-tabView>\r\n    <p-tabPanel [header]=\"'administration_tab_entityInformation' | localize\">\r\n      <fieldset [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n        <div class=\"modal-body\">\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\" [labelValue]=\"'administration_gestionEntityInformation_className'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'ClassName'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.className\"\r\n                  (inputFieldChange)=\"getColonnesByClassNameAsKeyValuePair($event)\"\r\n                  [disabled]=\"isDeleteMode() || isConsultMode() || isEditMode()\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\" [labelValue]=\"'administration_gestionEntityInformation_formName'\"></Tsi-Label>\r\n                <Tsi-Search-Combo class=\"col-8\" [datasource]=\"componentsOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.formName\" id-field=\"key\" label-field=\"value\" [showClear]=\"true\"\r\n                  [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_listComponent'\"></Tsi-Label>\r\n                <Tsi-Search-Combo class=\"col-8\" [datasource]=\"componentsOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.listComponent\" id-field=\"key\" label-field=\"value\"\r\n                  [showClear]=\"true\" [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\" [labelValue]=\"'administration_gestionEntityInformation_logged'\"></Tsi-Label>\r\n                <Tsi-CheckBox class=\"col-8\" [inputName]=\"'Logged'\" [(inputField)]=\"entityWithRelations.entity.logged\">\r\n                </Tsi-CheckBox>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\" [labelValue]=\"'administration_gestionEntityInformation_listRoute'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'ListRoute'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.listRoute\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\" [labelValue]=\"'administration_gestionEntityInformation_formRoute'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'FormRoute'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.formRoute\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_discriminatorPropertyName'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'DiscriminatorPropertyName'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.discriminatorPropertyName\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_discriminatorClassName'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'DiscriminatorClassName'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.discriminatorClassName\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_keyColumns'\"></Tsi-Label>\r\n                <div class=\"col-8\">\r\n                  <p-multiSelect [options]=\"keyColumnOptions\" [(ngModel)]=\"entityWithRelations.entity.keyColumns\"\r\n                    optionValue=\"key\" optionLabel=\"value\" display=\"chip\" defaultLabel=\"Select columns\" [filter]=\"true\">\r\n                  </p-multiSelect>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_isWorkflow'\"></Tsi-Label>\r\n                <Tsi-CheckBox class=\"col-8\" [inputName]=\"'IsWorkflow'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.isWorkflow\">\r\n                </Tsi-CheckBox>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_statusColumnName'\"></Tsi-Label>\r\n\r\n                <Tsi-Search-Combo class=\"col-6\" [datasource]=\"keyColumnOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.statusColumnName\" id-field=\"key\" label-field=\"value\"\r\n                  [showClear]=\"true\" [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n              </div>\r\n\r\n            </div>\r\n\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_statusEnumName'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'StatusEnumName'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.statusEnumName\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_defaultStatus'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'DefaultStatus'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.defaultStatus\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_advancedSearchComponent'\"></Tsi-Label>\r\n                <Tsi-Search-Combo class=\"col-8\" [datasource]=\"componentsOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.advancedSearchComponent\" id-field=\"key\" label-field=\"value\"\r\n                  [showClear]=\"true\" [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_cardHeaderPhotoColumn'\"></Tsi-Label>\r\n\r\n                <Tsi-Search-Combo class=\"col-6\" [datasource]=\"keyColumnOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.cardHeaderPhotoColumn\" id-field=\"key\" label-field=\"value\"\r\n                  [showClear]=\"true\" [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_cardTitleColumn'\"></Tsi-Label>\r\n\r\n                <Tsi-Search-Combo class=\"col-6\" [datasource]=\"keyColumnOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.cardTitleColumn\" id-field=\"key\" label-field=\"value\"\r\n                  [showClear]=\"true\" [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_cardSubHeaderColumn'\"></Tsi-Label>\r\n                <Tsi-Search-Combo class=\"col-6\" [datasource]=\"keyColumnOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.cardSubHeaderColumn\" id-field=\"key\" label-field=\"value\"\r\n                  [showClear]=\"true\" [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_cardDescriptionColumn'\"></Tsi-Label>\r\n                <Tsi-Search-Combo class=\"col-6\" [datasource]=\"keyColumnOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.cardDescriptionColumn\" id-field=\"key\" label-field=\"value\"\r\n                  [showClear]=\"true\" [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_calendarStartDate'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'CalendarStartDate'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.calendarStartDateColumn\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_calendarEndDate'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'CalenderEndDate'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.calendarEndDateColumn\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </fieldset>\r\n    </p-tabPanel>\r\n    <p-tabPanel [header]=\"'administration_tab_relations' | localize\">\r\n      <div class=\"grid\">\r\n        <Tsi-Generic-Editable-Grid [columns]=\"entitiesRelationsColumns\" [gridData]=\"entityWithRelations.relations\"\r\n          [parent]=\"this\" (addedRowEventEmitter)=\"onAddRelation()\" [showAddButton]=\"isEditMode()\">\r\n        </Tsi-Generic-Editable-Grid>\r\n      </div>\r\n    </p-tabPanel>\r\n    <p-tabPanel [header]=\"'administration_tab_permissions' | localize\">\r\n      <div class=\"grid\">\r\n        <tsi-view-grid [header]=\"entityWithRelations.entity.className ?? ''\" class=\"col-12 mb-3\"\r\n          [columns]=\"permissionsGridColumns\" [getDataFromApi]=\"false\" [gridData]=\"endpointInfos\">\r\n        </tsi-view-grid>\r\n      </div>\r\n    </p-tabPanel>\r\n    <p-tabPanel [header]=\"'administration_tab_properties' | localize\">\r\n      <div class=\"flex align-items-center gap-2 mb-3\">\r\n        <span class=\"p-input-icon-left\">\r\n          <i class=\"pi pi-search\"></i>\r\n          <input pInputText type=\"text\" [(ngModel)]=\"propertiesSearchText\" (ngModelChange)=\"onPropertiesSearch()\"\r\n            [placeholder]=\"'administration_properties_searchPlaceholder' | localize\" class=\"p-inputtext-sm\" />\r\n        </span>\r\n      </div>\r\n\r\n      <div class=\"properties-grid-section mb-3\">\r\n        <h4 class=\"properties-grid-title\">{{ 'administration_properties_modelColumns_title' | localize }}</h4>\r\n        <p-table [value]=\"pagedModelColumns\" styleClass=\"p-datatable-sm p-datatable-gridlines\">\r\n          <ng-template pTemplate=\"header\">\r\n            <tr>\r\n              <th *ngFor=\"let col of propertiesGridColumns\">{{ (col.header ?? '') | localize }}</th>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"body\" let-row>\r\n            <tr>\r\n              <td *ngFor=\"let col of propertiesGridColumns\" [ngClass]=\"getComparisonClass('model', row, col.field)\">\r\n                <span *ngIf=\"col.type !== 'checkBox'\">{{ row[col.field] }}</span>\r\n                <p-checkbox *ngIf=\"col.type === 'checkBox'\" [ngModel]=\"row[col.field]\" [disabled]=\"true\"\r\n                  [binary]=\"true\"></p-checkbox>\r\n              </td>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"emptymessage\">\r\n            <tr>\r\n              <td [attr.colspan]=\"propertiesGridColumns.length\" class=\"text-center\">\r\n                {{'administration_properties_emptyMessage' | localize}}</td>\r\n            </tr>\r\n          </ng-template>\r\n        </p-table>\r\n      </div>\r\n\r\n      <div class=\"properties-grid-section mb-3\">\r\n        <h4 class=\"properties-grid-title\">{{ 'administration_properties_projectDbColumns_title' | localize }}</h4>\r\n        <p-table [value]=\"pagedDbColumns\" styleClass=\"p-datatable-sm p-datatable-gridlines\">\r\n          <ng-template pTemplate=\"header\">\r\n            <tr>\r\n              <th *ngFor=\"let col of propertiesGridColumns\">{{ (col.header ?? '') | localize }}</th>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"body\" let-row>\r\n            <tr>\r\n              <td *ngFor=\"let col of propertiesGridColumns\" [ngClass]=\"getComparisonClass('db', row, col.field)\">\r\n                <span *ngIf=\"col.type !== 'checkBox'\">{{ row[col.field] }}</span>\r\n                <Tsi-CheckBox *ngIf=\"col.type === 'checkBox'\" [ngModel]=\"row[col.field]\"\r\n                  [disabled]=\"true\"></Tsi-CheckBox>\r\n              </td>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"emptymessage\">\r\n            <tr>\r\n              <td [attr.colspan]=\"propertiesGridColumns.length\" class=\"text-center\">\r\n                {{'administration_properties_emptyMessage' | localize}}</td>\r\n            </tr>\r\n          </ng-template>\r\n        </p-table>\r\n      </div>\r\n\r\n      <div class=\"properties-grid-section mb-3\">\r\n        <h4 class=\"properties-grid-title\">{{ 'administration_properties_sqlColumns_title' | localize }}</h4>\r\n        <p-table [value]=\"pagedSqlColumns\" styleClass=\"p-datatable-sm p-datatable-gridlines\">\r\n          <ng-template pTemplate=\"header\">\r\n            <tr>\r\n              <th *ngFor=\"let col of propertiesGridColumns\">{{ (col.header ?? '') | localize }}</th>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"body\" let-row>\r\n            <tr>\r\n              <td *ngFor=\"let col of propertiesGridColumns\" [ngClass]=\"getComparisonClass('sql', row, col.field)\">\r\n                <span *ngIf=\"col.type !== 'checkBox'\">{{ row[col.field] }}</span>\r\n                <p-checkbox *ngIf=\"col.type === 'checkBox'\" [ngModel]=\"row[col.field]\" [disabled]=\"true\"\r\n                  [binary]=\"true\"></p-checkbox>\r\n              </td>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"emptymessage\">\r\n            <tr>\r\n              <td [attr.colspan]=\"propertiesGridColumns.length\" class=\"text-center\">\r\n                {{'administration_properties_emptyMessage' | localize}}</td>\r\n            </tr>\r\n          </ng-template>\r\n        </p-table>\r\n      </div>\r\n\r\n      <p-paginator [rows]=\"propertiesPageSize\" [totalRecords]=\"propertiesTotalRecords\" [first]=\"propertiesFirst\"\r\n        (onPageChange)=\"onPropertiesPageChange($event)\" [rowsPerPageOptions]=\"[10, 25, 50]\">\r\n      </p-paginator>\r\n\r\n      <div class=\"comparison-legend mt-3\">\r\n        <span class=\"legend-item comparison-missing-legend\">{{ 'administration_properties_comparison_missing' | localize\r\n          }}</span>\r\n        <span class=\"legend-item comparison-type-mismatch-legend\">{{ 'administration_properties_comparison_type' |\r\n          localize }}</span>\r\n        <span class=\"legend-item comparison-length-mismatch-legend\">{{ 'administration_properties_comparison_length' |\r\n          localize }}</span>\r\n      </div>\r\n    </p-tabPanel>\r\n  </p-tabView>\r\n\r\n  <Tsi-Modal-Footer [isConsult]=\"isConsultMode()\" [cancelDisabled]=\"saving\" [saveDisabled]=\"isSubmitDisabled()\"\r\n    (onCancelClick)=\"hide()\" [showSaveAndCloseButton]=\"false\">\r\n  </Tsi-Modal-Footer>\r\n</tsi-form>", styles: [":host ::ng-deep .comparison-missing{background-color:#ef9a9a!important}:host ::ng-deep .comparison-type-mismatch{background-color:#ffcdd2!important}:host ::ng-deep .comparison-length-mismatch{background-color:#fff9c4!important}.properties-grid-section{border:1px solid #dee2e6;border-radius:6px;overflow:hidden}.properties-grid-title{margin:0;padding:.75rem 1rem;background-color:#f8f9fa;border-bottom:1px solid #dee2e6;font-size:.95rem;font-weight:600}.comparison-legend{display:flex;gap:1rem;flex-wrap:wrap}.comparison-legend .legend-item{padding:.25rem .75rem;border-radius:4px;font-size:.8rem}.comparison-legend .comparison-missing-legend{background-color:#ef9a9a}.comparison-legend .comparison-type-mismatch-legend{background-color:#ffcdd2}.comparison-legend .comparison-length-mismatch-legend{background-color:#fff9c4}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "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: "component", type: i7$1.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7$1.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: i11.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "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: "component", type: EditableGridComponent, selector: "Tsi-Generic-Editable-Grid", inputs: ["selectedItems", "configuration", "key", "items", "saveEvent", "showGlobalSearch", "showAddButton", "showDeleteButton", "showEditButton", "showRowSummary", "scrollHeight", "sizingMode", "rowPerPage", "pageSize", "entityPrimaryKeyName", "columns", "gridData", "isTableLoading", "parent", "showSaveButton", "showActionColumn", "enableRowDisabling", "rowSummaryConfig", "showHaveSumary", "showRowSumary", "selectKeyOnly", "selectionMode", "showConsultButton", "editableGridBusinessClass", "orderColumn", "deleteLineButtonDisabled", "showDuplicateButton", "id"], outputs: ["refreshEventEmitter", "saveDataEventEmitter", "rowChangedEventEmitter", "selectedRowEventEmitter", "addedRowEventEmitter", "focusOutEventEmitter", "cellChanged", "rowDeletedEventEmitter", "selectedItemsChange", "onRowSelect", "focusOutRow", "onConsultClicked", "rowDuplicatedEventEmitter"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "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: 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: TsiViewGridComponent, selector: "tsi-view-grid", inputs: ["columns", "gridConfiguration", "viewComponent", "crudService", "header", "modalSize", "showConsultButton", "showSearchField", "searchFields", "formEndpoint", "formName", "id", "showImportExportButton", "targetBusinessClass", "getDataFromApi", "gridData", "isSearchButtonDisabled", "selectKeyOnly", "selectionMode", "selectedItems", "key", "showGlobalSearch", "showExportButton", "showCalenderView", "showHeaderFilters", "showFilterButton", "selectAll", "checkedByField", "sortMode", "sizingMode", "searchOnInit"], outputs: ["summariesChange", "selectedItemsChange", "buttonColumnClicked", "searchFieldsValueChanged", "getAllPagedResultChanged"] }, { kind: "component", type: 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: TsiModalHeaderComponent, selector: "Tsi-Modal-Header", inputs: ["inputTitle"], outputs: ["onCloseClick"] }, { kind: "component", type: TsiFormComponent, selector: "tsi-form", inputs: ["class", "autocomplete", "optionalEndpoints", "disabled", "isLoading", "modalSize", "formEndpoint", "formName", "isReportingToolbarDisabled", "isCreateOnly", "statusInputDisabled"], outputs: ["onSave", "onSubmit", "onSubmitFormWorkflowConfiguration", "formRefChange", "onStatusChange"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: ModalLabelPipe, name: "modalLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CreateOrEditEntityInformationsComponent, selector: "app-create-or-edit-entity-informations", providers: [...appProviders], usesInheritance: true, ngImport: i0, template: "<tsi-form class=\"form-horizontal\" autocomplete=\"off\" (onSubmit)=\"save()\" [isLoading]=\"isloading\">\r\n  <Tsi-Modal-Header [inputTitle]=\"header | modalLabel : mode : 'administration_entityRelations_title' | localize\"\r\n    (onCloseClick)=\"hide()\">\r\n  </Tsi-Modal-Header>\r\n\r\n  <div *ngIf=\"uid\" class=\"flex align-items-center gap-2 mb-2\">\r\n    <span class=\"font-semibold\">{{'administration_gestionEntityInformation_uid' | localize}} :</span>\r\n    <span>{{ uid }}</span>\r\n  </div>\r\n\r\n  <p-tabView>\r\n    <p-tabPanel [header]=\"'administration_tab_entityInformation' | localize\">\r\n      <fieldset [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n        <div class=\"modal-body\">\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\" [labelValue]=\"'administration_gestionEntityInformation_className'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'ClassName'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.className\"\r\n                  (inputFieldChange)=\"getColonnesByClassNameAsKeyValuePair($event)\"\r\n                  [disabled]=\"isDeleteMode() || isConsultMode() || isEditMode()\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\" [labelValue]=\"'administration_gestionEntityInformation_formName'\"></Tsi-Label>\r\n                <Tsi-Search-Combo class=\"col-8\" [datasource]=\"componentsOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.formName\" id-field=\"key\" label-field=\"value\" [showClear]=\"true\"\r\n                  [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_listComponent'\"></Tsi-Label>\r\n                <Tsi-Search-Combo class=\"col-8\" [datasource]=\"componentsOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.listComponent\" id-field=\"key\" label-field=\"value\"\r\n                  [showClear]=\"true\" [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\" [labelValue]=\"'administration_gestionEntityInformation_logged'\"></Tsi-Label>\r\n                <Tsi-CheckBox class=\"col-8\" [inputName]=\"'Logged'\" [(inputField)]=\"entityWithRelations.entity.logged\">\r\n                </Tsi-CheckBox>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\" [labelValue]=\"'administration_gestionEntityInformation_listRoute'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'ListRoute'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.listRoute\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\" [labelValue]=\"'administration_gestionEntityInformation_formRoute'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'FormRoute'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.formRoute\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_discriminatorPropertyName'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'DiscriminatorPropertyName'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.discriminatorPropertyName\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_discriminatorClassName'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'DiscriminatorClassName'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.discriminatorClassName\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_keyColumns'\"></Tsi-Label>\r\n                <div class=\"col-8\">\r\n                  <p-multiSelect [options]=\"keyColumnOptions\" [(ngModel)]=\"entityWithRelations.entity.keyColumns\"\r\n                    optionValue=\"key\" optionLabel=\"value\" display=\"chip\" defaultLabel=\"Select columns\" [filter]=\"true\">\r\n                  </p-multiSelect>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_isWorkflow'\"></Tsi-Label>\r\n                <Tsi-CheckBox class=\"col-8\" [inputName]=\"'IsWorkflow'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.isWorkflow\">\r\n                </Tsi-CheckBox>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_statusColumnName'\"></Tsi-Label>\r\n\r\n                <Tsi-Search-Combo class=\"col-6\" [datasource]=\"keyColumnOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.statusColumnName\" id-field=\"key\" label-field=\"value\"\r\n                  [showClear]=\"true\" [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n              </div>\r\n\r\n            </div>\r\n\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_statusEnumName'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'StatusEnumName'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.statusEnumName\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_defaultStatus'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'DefaultStatus'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.defaultStatus\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_advancedSearchComponent'\"></Tsi-Label>\r\n                <Tsi-Search-Combo class=\"col-8\" [datasource]=\"componentsOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.advancedSearchComponent\" id-field=\"key\" label-field=\"value\"\r\n                  [showClear]=\"true\" [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_cardHeaderPhotoColumn'\"></Tsi-Label>\r\n\r\n                <Tsi-Search-Combo class=\"col-6\" [datasource]=\"keyColumnOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.cardHeaderPhotoColumn\" id-field=\"key\" label-field=\"value\"\r\n                  [showClear]=\"true\" [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_cardTitleColumn'\"></Tsi-Label>\r\n\r\n                <Tsi-Search-Combo class=\"col-6\" [datasource]=\"keyColumnOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.cardTitleColumn\" id-field=\"key\" label-field=\"value\"\r\n                  [showClear]=\"true\" [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_cardSubHeaderColumn'\"></Tsi-Label>\r\n                <Tsi-Search-Combo class=\"col-6\" [datasource]=\"keyColumnOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.cardSubHeaderColumn\" id-field=\"key\" label-field=\"value\"\r\n                  [showClear]=\"true\" [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_cardDescriptionColumn'\"></Tsi-Label>\r\n                <Tsi-Search-Combo class=\"col-6\" [datasource]=\"keyColumnOptions\"\r\n                  [(bind)]=\"entityWithRelations.entity.cardDescriptionColumn\" id-field=\"key\" label-field=\"value\"\r\n                  [showClear]=\"true\" [disabled]=\"isDeleteMode() || isConsultMode()\">\r\n                </Tsi-Search-Combo>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"grid\">\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_calendarStartDate'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'CalendarStartDate'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.calendarStartDateColumn\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-6\">\r\n              <div class=\"grid\">\r\n                <Tsi-Label class=\"col-4\"\r\n                  [labelValue]=\"'administration_gestionEntityInformation_calendarEndDate'\"></Tsi-Label>\r\n                <Tsi-Text-Box class=\"col-8\" [inputName]=\"'CalenderEndDate'\"\r\n                  [(inputField)]=\"entityWithRelations.entity.calendarEndDateColumn\">\r\n                </Tsi-Text-Box>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </fieldset>\r\n    </p-tabPanel>\r\n    <p-tabPanel [header]=\"'administration_tab_relations' | localize\">\r\n      <div class=\"grid\">\r\n        <Tsi-Generic-Editable-Grid [columns]=\"entitiesRelationsColumns\" [gridData]=\"entityWithRelations.relations\"\r\n          [parent]=\"this\" (addedRowEventEmitter)=\"onAddRelation()\" [showAddButton]=\"isEditMode()\">\r\n        </Tsi-Generic-Editable-Grid>\r\n      </div>\r\n    </p-tabPanel>\r\n    <p-tabPanel [header]=\"'administration_tab_permissions' | localize\">\r\n      <div class=\"grid\">\r\n        <tsi-view-grid [header]=\"entityWithRelations.entity.className ?? ''\" class=\"col-12 mb-3\"\r\n          [columns]=\"permissionsGridColumns\" [getDataFromApi]=\"false\" [gridData]=\"endpointInfos\">\r\n        </tsi-view-grid>\r\n      </div>\r\n    </p-tabPanel>\r\n    <p-tabPanel [header]=\"'administration_tab_properties' | localize\">\r\n      <div class=\"flex align-items-center gap-2 mb-3\">\r\n        <span class=\"p-input-icon-left\">\r\n          <i class=\"pi pi-search\"></i>\r\n          <input pInputText type=\"text\" [(ngModel)]=\"propertiesSearchText\" (ngModelChange)=\"onPropertiesSearch()\"\r\n            [placeholder]=\"'administration_properties_searchPlaceholder' | localize\" class=\"p-inputtext-sm\" />\r\n        </span>\r\n      </div>\r\n\r\n      <div class=\"properties-grid-section mb-3\">\r\n        <h4 class=\"properties-grid-title\">{{ 'administration_properties_modelColumns_title' | localize }}</h4>\r\n        <p-table [value]=\"pagedModelColumns\" styleClass=\"p-datatable-sm p-datatable-gridlines\">\r\n          <ng-template pTemplate=\"header\">\r\n            <tr>\r\n              <th *ngFor=\"let col of propertiesGridColumns\">{{ (col.header ?? '') | localize }}</th>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"body\" let-row>\r\n            <tr>\r\n              <td *ngFor=\"let col of propertiesGridColumns\" [ngClass]=\"getComparisonClass('model', row, col.field)\">\r\n                <span *ngIf=\"col.type !== 'checkBox'\">{{ row[col.field] }}</span>\r\n                <p-checkbox *ngIf=\"col.type === 'checkBox'\" [ngModel]=\"row[col.field]\" [disabled]=\"true\"\r\n                  [binary]=\"true\"></p-checkbox>\r\n              </td>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"emptymessage\">\r\n            <tr>\r\n              <td [attr.colspan]=\"propertiesGridColumns.length\" class=\"text-center\">\r\n                {{'administration_properties_emptyMessage' | localize}}</td>\r\n            </tr>\r\n          </ng-template>\r\n        </p-table>\r\n      </div>\r\n\r\n      <div class=\"properties-grid-section mb-3\">\r\n        <h4 class=\"properties-grid-title\">{{ 'administration_properties_projectDbColumns_title' | localize }}</h4>\r\n        <p-table [value]=\"pagedDbColumns\" styleClass=\"p-datatable-sm p-datatable-gridlines\">\r\n          <ng-template pTemplate=\"header\">\r\n            <tr>\r\n              <th *ngFor=\"let col of propertiesGridColumns\">{{ (col.header ?? '') | localize }}</th>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"body\" let-row>\r\n            <tr>\r\n              <td *ngFor=\"let col of propertiesGridColumns\" [ngClass]=\"getComparisonClass('db', row, col.field)\">\r\n                <span *ngIf=\"col.type !== 'checkBox'\">{{ row[col.field] }}</span>\r\n                <Tsi-CheckBox *ngIf=\"col.type === 'checkBox'\" [ngModel]=\"row[col.field]\"\r\n                  [disabled]=\"true\"></Tsi-CheckBox>\r\n              </td>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"emptymessage\">\r\n            <tr>\r\n              <td [attr.colspan]=\"propertiesGridColumns.length\" class=\"text-center\">\r\n                {{'administration_properties_emptyMessage' | localize}}</td>\r\n            </tr>\r\n          </ng-template>\r\n        </p-table>\r\n      </div>\r\n\r\n      <div class=\"properties-grid-section mb-3\">\r\n        <h4 class=\"properties-grid-title\">{{ 'administration_properties_sqlColumns_title' | localize }}</h4>\r\n        <p-table [value]=\"pagedSqlColumns\" styleClass=\"p-datatable-sm p-datatable-gridlines\">\r\n          <ng-template pTemplate=\"header\">\r\n            <tr>\r\n              <th *ngFor=\"let col of propertiesGridColumns\">{{ (col.header ?? '') | localize }}</th>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"body\" let-row>\r\n            <tr>\r\n              <td *ngFor=\"let col of propertiesGridColumns\" [ngClass]=\"getComparisonClass('sql', row, col.field)\">\r\n                <span *ngIf=\"col.type !== 'checkBox'\">{{ row[col.field] }}</span>\r\n                <p-checkbox *ngIf=\"col.type === 'checkBox'\" [ngModel]=\"row[col.field]\" [disabled]=\"true\"\r\n                  [binary]=\"true\"></p-checkbox>\r\n              </td>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"emptymessage\">\r\n            <tr>\r\n              <td [attr.colspan]=\"propertiesGridColumns.length\" class=\"text-center\">\r\n                {{'administration_properties_emptyMessage' | localize}}</td>\r\n            </tr>\r\n          </ng-template>\r\n        </p-table>\r\n      </div>\r\n\r\n      <p-paginator [rows]=\"propertiesPageSize\" [totalRecords]=\"propertiesTotalRecords\" [first]=\"propertiesFirst\"\r\n        (onPageChange)=\"onPropertiesPageChange($event)\" [rowsPerPageOptions]=\"[10, 25, 50]\">\r\n      </p-paginator>\r\n\r\n      <div class=\"comparison-legend mt-3\">\r\n        <span class=\"legend-item comparison-missing-legend\">{{ 'administration_properties_comparison_missing' | localize\r\n          }}</span>\r\n        <span class=\"legend-item comparison-type-mismatch-legend\">{{ 'administration_properties_comparison_type' |\r\n          localize }}</span>\r\n        <span class=\"legend-item comparison-length-mismatch-legend\">{{ 'administration_properties_comparison_length' |\r\n          localize }}</span>\r\n      </div>\r\n    </p-tabPanel>\r\n  </p-tabView>\r\n\r\n  <Tsi-Modal-Footer [isConsult]=\"isConsultMode()\" [cancelDisabled]=\"saving\" [saveDisabled]=\"isSubmitDisabled()\"\r\n    (onCancelClick)=\"hide()\" [showSaveAndCloseButton]=\"false\">\r\n  </Tsi-Modal-Footer>\r\n</tsi-form>", styles: [":host ::ng-deep .comparison-missing{background-color:#ef9a9a!important}:host ::ng-deep .comparison-type-mismatch{background-color:#ffcdd2!important}:host ::ng-deep .comparison-length-mismatch{background-color:#fff9c4!important}.properties-grid-section{border:1px solid #dee2e6;border-radius:6px;overflow:hidden}.properties-grid-title{margin:0;padding:.75rem 1rem;background-color:#f8f9fa;border-bottom:1px solid #dee2e6;font-size:.95rem;font-weight:600}.comparison-legend{display:flex;gap:1rem;flex-wrap:wrap}.comparison-legend .legend-item{padding:.25rem .75rem;border-radius:4px;font-size:.8rem}.comparison-legend .comparison-missing-legend{background-color:#ef9a9a}.comparison-legend .comparison-type-mismatch-legend{background-color:#ffcdd2}.comparison-legend .comparison-length-mismatch-legend{background-color:#fff9c4}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: "component", type: i3.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "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: "component", type: i7$1.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7$1.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: i11.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "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: "component", type: EditableGridComponent, selector: "Tsi-Generic-Editable-Grid", inputs: ["selectedItems", "configuration", "key", "items", "saveEvent", "showGlobalSearch", "showAddButton", "showDeleteButton", "showEditButton", "showRowSummary", "scrollHeight", "sizingMode", "rowPerPage", "pageSize", "entityPrimaryKeyName", "columns", "gridData", "isTableLoading", "parent", "showSaveButton", "showActionColumn", "enableRowDisabling", "rowSummaryConfig", "showHaveSumary", "showRowSumary", "selectKeyOnly", "selectionMode", "showConsultButton", "editableGridBusinessClass", "orderColumn", "deleteLineButtonDisabled", "showDuplicateButton", "id"], outputs: ["refreshEventEmitter", "saveDataEventEmitter", "rowChangedEventEmitter", "selectedRowEventEmitter", "addedRowEventEmitter", "focusOutEventEmitter", "cellChanged", "rowDeletedEventEmitter", "selectedItemsChange", "onRowSelect", "focusOutRow", "onConsultClicked", "rowDuplicatedEventEmitter"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "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: 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: TsiViewGridComponent, selector: "tsi-view-grid", inputs: ["columns", "gridConfiguration", "viewComponent", "crudService", "header", "modalSize", "showConsultButton", "showSearchField", "searchFields", "formEndpoint", "formName", "id", "showImportExportButton", "targetBusinessClass", "getDataFromApi", "gridData", "isSearchButtonDisabled", "selectKeyOnly", "selectionMode", "selectedItems", "key", "showGlobalSearch", "showExportButton", "showCalenderView", "showHeaderFilters", "showFilterButton", "selectAll", "checkedByField", "sortMode", "sizingMode", "searchOnInit"], outputs: ["summariesChange", "selectedItemsChange", "buttonColumnClicked", "searchFieldsValueChanged", "getAllPagedResultChanged"] }, { kind: "component", type: 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: TsiModalHeaderComponent, selector: "Tsi-Modal-Header", inputs: ["inputTitle"], outputs: ["onCloseClick"] }, { kind: "component", type: TsiFormComponent, selector: "tsi-form", inputs: ["class", "autocomplete", "optionalEndpoints", "disabled", "isLoading", "modalSize", "formEndpoint", "formName", "isReportingToolbarDisabled", "isCreateOnly", "statusInputDisabled"], outputs: ["onSave", "onSubmit", "onSubmitFormWorkflowConfiguration", "formRefChange", "onStatusChange"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: ModalLabelPipe, name: "modalLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreateOrEditEntityInformationsComponent, decorators: [{
             type: Component,
@@ -21480,7 +21654,7 @@ class TsiNotesGridComponent extends TsiListBaseComponent {
         this.titleComponent = 'shared_notes_note';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotesGridComponent, deps: [{ token: NoteService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiNotesGridComponent, selector: "app-tsi-notes-grid", providers: [...appProviders], usesInheritance: true, ngImport: i0, template: "<Tsi-Generic-Crud [cudComponent]=\"comp\" [header]=\"titleComponent\" [columns]=\"columns\" [crudService]=\"notesService\"\r\n  [modalSize]=\"modalSize\" [showUploadButton]=\"false\" [showNoteButton]=\"false\" presentationDesigner [id]=\"'app-tsi-notes-grid'\"\r\n></Tsi-Generic-Crud>", styles: [""], dependencies: [{ kind: "component", type: TsiGenericCrudComponent, selector: "Tsi-Generic-Crud", inputs: ["entityInfo", "modalData", "columns", "gridConfiguration", "cudComponent", "crudService", "header", "modalSize", "descriminatorValue", "presentationSettings", "preventAddEvent", "formEndpoint", "formName", "isSearchButtonDisabled", "showHeaderFilters", "showEditButton", "showDeleteButton", "showAddButton", "showConsultButton", "showUploadButton", "showNoteButton", "showDownloadButton", "showInfoButton", "showDuplicateButton", "showFormButton", "showCalenderView", "showCardView", "showImportFromOutlookButton", "showKanbanView", "showKanbanViewOfWorkFlowEtat", "showSearchField", "searchFields", "calenderSchema", "showActionButton", "sizingMode", "selectKeyOnly", "selectionMode", "selectedItems", "key", "id", "businessClass", "searchOnInit", "showGlobalSearch", "showExportButton", "showReporting"], outputs: ["selectedItemsChange", "searchFieldsValueChanged", "buttonColumnClicked", "onImportFromOutlookClicked"] }, { kind: "directive", type: PresentationDesignerDirective, selector: "[presentationDesigner]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiNotesGridComponent, selector: "app-tsi-notes-grid", providers: [...appProviders], usesInheritance: true, ngImport: i0, template: "<Tsi-Generic-Crud [cudComponent]=\"comp\" [header]=\"titleComponent\" [columns]=\"columns\" [crudService]=\"notesService\"\r\n  [modalSize]=\"modalSize\" [showUploadButton]=\"false\" [showNoteButton]=\"false\" presentationDesigner [id]=\"'app-tsi-notes-grid'\"\r\n></Tsi-Generic-Crud>", styles: [""], dependencies: [{ kind: "component", type: TsiGenericCrudComponent, selector: "Tsi-Generic-Crud", inputs: ["entityInfo", "modalData", "columns", "gridConfiguration", "cudComponent", "crudService", "header", "modalSize", "descriminatorValue", "presentationSettings", "preventAddEvent", "formEndpoint", "formName", "isSearchButtonDisabled", "showHeaderFilters", "showEditButton", "showDeleteButton", "showAddButton", "showConsultButton", "showUploadButton", "showNoteButton", "showDownloadButton", "showInfoButton", "showDuplicateButton", "showFormButton", "showCalenderView", "showCardView", "showImportFromOutlookButton", "showKanbanView", "showKanbanViewOfWorkFlowEtat", "showSearchField", "searchFields", "calenderSchema", "showActionButton", "sizingMode", "selectKeyOnly", "selectionMode", "selectedItems", "key", "id", "businessClass", "searchOnInit", "showGlobalSearch", "showExportButton", "showReporting"], outputs: ["selectedItemsChange", "searchFieldsValueChanged", "buttonColumnClicked", "onImportFromOutlookClicked"] }, { kind: "directive", type: PresentationDesignerDirective, selector: "[presentationDesigner]:not(tsi-tab-panel)" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiNotesGridComponent, decorators: [{
             type: Component,
@@ -21629,7 +21803,7 @@ class TsiProgressBarComponent {
             clearTimeout(this.hideTimeoutId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiProgressBarComponent, deps: [{ token: ProgressBarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiProgressBarComponent, selector: "tsi-progress-bar", inputs: { showBar: "showBar", processName: "processName", showValue: "showValue", color: "color", showCurrentStep: "showCurrentStep", unit: "unit" }, outputs: { completed: "completed", showBarChange: "showBarChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card\" *ngIf=\"showBar\">\r\n  \r\n  <p-toast />\r\n  <p-progressBar [value]=\"progressPercent\" \r\n        [showValue]=\"showValue\" \r\n        [color]=\"color\" \r\n        [style]=\"{ height: '8px' }\" >\r\n\r\n    <ng-template pTemplate=\"progressPercent\" let-progressPercent>\r\n      <span>{{ progressLevel }} / {{ maxLevel }} {{unit}} ({{ progressPercent }}%)</span>\r\n    </ng-template>\r\n  \r\n  </p-progressBar>\r\n\r\n  <div *ngIf=\"warningMessage; else progressBarBlock\" class=\"text-center text-danger p-2\">\r\n    <strong>\u26A0\uFE0F {{ warningMessage }}</strong>\r\n  </div>\r\n\r\n  <ng-template #progressBarBlock>\r\n    <div class=\"mt-2 text-center\">\r\n      <strong *ngIf=\"unit; else percentOnly\">\r\n        {{ progressLevel }} / {{ maxLevel }} {{ unit }} ({{ progressPercent }}%)\r\n      </strong>\r\n      <ng-template #percentOnly>\r\n        <strong>{{ progressPercent }}%</strong>\r\n      </ng-template>\r\n\r\n      <span *ngIf=\"currentStep && showCurrentStep\"> - {{ currentStep }}</span>\r\n    \r\n    </div>\r\n\r\n    <div class=\"mt-1 text-center\" *ngIf=\"title\">\r\n      <small>{{ title }}</small>\r\n    </div>\r\n   </ng-template>\r\n\r\n</div>", styles: ["::ng-deep .custom-progress-bar .p-progressbar{height:30px!important}::ng-deep .custom-progress-bar .p-progressbar-value{font-size:14px;line-height:30px}::ng-deep .custom-progress-bar .p-progressbar-value{background-color:#007ad9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i5$3.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiProgressBarComponent, selector: "tsi-progress-bar", inputs: { showBar: "showBar", processName: "processName", showValue: "showValue", color: "color", showCurrentStep: "showCurrentStep", unit: "unit" }, outputs: { completed: "completed", showBarChange: "showBarChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card\" *ngIf=\"showBar\">\r\n  \r\n  <p-toast />\r\n  <p-progressBar [value]=\"progressPercent\" \r\n        [showValue]=\"showValue\" \r\n        [color]=\"color\" \r\n        [style]=\"{ height: '8px' }\" >\r\n\r\n    <ng-template pTemplate=\"progressPercent\" let-progressPercent>\r\n      <span>{{ progressLevel }} / {{ maxLevel }} {{unit}} ({{ progressPercent }}%)</span>\r\n    </ng-template>\r\n  \r\n  </p-progressBar>\r\n\r\n  <div *ngIf=\"warningMessage; else progressBarBlock\" class=\"text-center text-danger p-2\">\r\n    <strong>\u26A0\uFE0F {{ warningMessage }}</strong>\r\n  </div>\r\n\r\n  <ng-template #progressBarBlock>\r\n    <div class=\"mt-2 text-center\">\r\n      <strong *ngIf=\"unit; else percentOnly\">\r\n        {{ progressLevel }} / {{ maxLevel }} {{ unit }} ({{ progressPercent }}%)\r\n      </strong>\r\n      <ng-template #percentOnly>\r\n        <strong>{{ progressPercent }}%</strong>\r\n      </ng-template>\r\n\r\n      <span *ngIf=\"currentStep && showCurrentStep\"> - {{ currentStep }}</span>\r\n    \r\n    </div>\r\n\r\n    <div class=\"mt-1 text-center\" *ngIf=\"title\">\r\n      <small>{{ title }}</small>\r\n    </div>\r\n   </ng-template>\r\n\r\n</div>", styles: ["::ng-deep .custom-progress-bar .p-progressbar{height:30px!important}::ng-deep .custom-progress-bar .p-progressbar-value{font-size:14px;line-height:30px}::ng-deep .custom-progress-bar .p-progressbar-value{background-color:#007ad9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i5$3.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiProgressBarComponent, decorators: [{
             type: Component,
@@ -21759,7 +21933,7 @@ class TsiTenantsComponent {
         await firstValueFrom(this._identityAuthorisationService.logout(logoutReasonEnum.VOLONTARY));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTenantsComponent, deps: [{ token: IdentityPlatformAuthenticationService }, { token: IdentityManagerService }, { token: TsiNotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiTenantsComponent, selector: "Tsi-tenants", inputs: { showTenants: "showTenants", isLoading: "isLoading", isLoginPage: "isLoginPage", autoConnectEnabled: "autoConnectEnabled", loginModel: "loginModel", tenants: "tenants", applicationUid: "applicationUid", selectedTenantUid: "selectedTenantUid", applicationUrl: "applicationUrl", userToken: "userToken", applications: "applications", proceedTrigger: "proceedTrigger" }, outputs: { cancelEvent: "cancelEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column gap-4\">\r\n    <div *ngIf=\"showTenants\" class=\"w-full loginForm-input\">\r\n        <label *ngIf=\"isLoginPage\" for=\"connectionString\" class=\"text-900 text-xl font-medium\">\r\n            <Tsi-Label  [labelValue]=\"'connectionString'\" class=\"tsi-text-color-default\"></Tsi-Label>\r\n        </label>\r\n\r\n        <div *ngIf=\"!isLoginPage\" class=\"flex align-items-center cursor-pointer tooltip-text\">\r\n            <i class=\"pi pi-database\"></i>\r\n            <span>{{ 'connectionString' | localize }}</span>\r\n        </div>\r\n\r\n        <Tsi-Search-Combo id=\"societe\" id-field=\"key\" label-field=\"value\" [datasource]=\"tenants\"\r\n            (bindChange)=\"onTenantChange($event)\" [(bind)]=\"selectedTenantUid\"\r\n            [showClear]=\"true\"\r\n            [showAddButton]=\"false\"\r\n            [showSearchButton]=\"false\">\r\n        </Tsi-Search-Combo>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"showTenants && isLoginPage\" class=\"w-ful loginForm-submit flex gap-2\">\r\n\r\n        <button pButton id=\"continueButton\" pRipple class=\"w-full p-3 text-xl btn\"\r\n            [disabled]=\"!selectedTenantUid || isLoading\" type=\"button\" (click)=\"proceedLoginAsync()\"\r\n            [ngClass]=\"{'button-loading' : isLoading }\">\r\n            <div class=\"button-text\">\r\n                <Tsi-Label [labelValue]=\"'Continuer'\"></Tsi-Label>\r\n            </div>\r\n        </button>\r\n\r\n        <button pButton id=\"cancelButton\" pRipple class=\"w-full p-3 text-xl btn cancel-btn\" [disabled]=\"isLoading\"\r\n            type=\"button\" (click)=\"cancel()\">\r\n            <div class=\"button-text\">\r\n                <Tsi-Label [labelValue]=\"'Cancel'\"></Tsi-Label>\r\n            </div>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<app-spinner *ngIf=\"isLoading\" ></app-spinner>", styles: [".loginForm-input{display:flex;flex-direction:column;gap:1rem}.loginForm-submit button{border-radius:50px}.loginForm-submit .button-text{font-size:1rem;font-weight:600;padding:1rem}.btn{background:#f48d23;color:#fff;border-color:#f48d23}.btn:enabled:hover{background:#f48d23;color:#fff;border-color:#f48d23;opacity:.9}.cancel-btn{background:#3c3c3c;color:#fff;border-color:#3c3c3c}.cancel-btn:enabled:hover{background:#3c3c3c;color:#fff;border-color:#3c3c3c;opacity:.9}.tsi-text-color-default{color:#1b1f3d}.button-loading .button-text{visibility:hidden;opacity:0}.button-text{color:#fff;transition:all .2s}.button-text:hover{cursor:pointer}.btn:disabled{cursor:default}.btn{display:flex;justify-content:center}.tooltip-text{text-decoration:none;color:var(--primary-color);font-family:inherit;font-size:.9rem;display:flex;align-items:center;gap:.5rem;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "reloadDataSource", "isFiltered", "selectedLabel", "maxWidth", "businessClass", "searchDebounceTime", "comboType", "statusMetadata", "currentRowItem", "datasource", "bind", "maxSelectedLabels", "tooltipMaxDisplayedItems", "bindMode", "showSearchButton", "showAddButton", "showConsultButton", "showUpdateButton"], outputs: ["bindChange", "datasource-loaded", "init", "isLoaded", "selectedLabelChange", "onClick", "onSearchButtonClick", "selectionChange"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiTenantsComponent, selector: "Tsi-tenants", inputs: { showTenants: "showTenants", isLoading: "isLoading", isLoginPage: "isLoginPage", autoConnectEnabled: "autoConnectEnabled", loginModel: "loginModel", tenants: "tenants", applicationUid: "applicationUid", selectedTenantUid: "selectedTenantUid", applicationUrl: "applicationUrl", userToken: "userToken", applications: "applications", proceedTrigger: "proceedTrigger" }, outputs: { cancelEvent: "cancelEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column gap-4\">\r\n    <div *ngIf=\"showTenants\" class=\"w-full loginForm-input\">\r\n        <label *ngIf=\"isLoginPage\" for=\"connectionString\" class=\"text-900 text-xl font-medium\">\r\n            <Tsi-Label  [labelValue]=\"'connectionString'\" class=\"tsi-text-color-default\"></Tsi-Label>\r\n        </label>\r\n\r\n        <div *ngIf=\"!isLoginPage\" class=\"flex align-items-center cursor-pointer tooltip-text\">\r\n            <i class=\"pi pi-database\"></i>\r\n            <span>{{ 'connectionString' | localize }}</span>\r\n        </div>\r\n\r\n        <Tsi-Search-Combo id=\"societe\" id-field=\"key\" label-field=\"value\" [datasource]=\"tenants\"\r\n            (bindChange)=\"onTenantChange($event)\" [(bind)]=\"selectedTenantUid\"\r\n            [showClear]=\"true\"\r\n            [showAddButton]=\"false\"\r\n            [showSearchButton]=\"false\">\r\n        </Tsi-Search-Combo>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"showTenants && isLoginPage\" class=\"w-ful loginForm-submit flex gap-2\">\r\n\r\n        <button pButton id=\"continueButton\" pRipple class=\"w-full p-3 text-xl btn\"\r\n            [disabled]=\"!selectedTenantUid || isLoading\" type=\"button\" (click)=\"proceedLoginAsync()\"\r\n            [ngClass]=\"{'button-loading' : isLoading }\">\r\n            <div class=\"button-text\">\r\n                <Tsi-Label [labelValue]=\"'Continuer'\"></Tsi-Label>\r\n            </div>\r\n        </button>\r\n\r\n        <button pButton id=\"cancelButton\" pRipple class=\"w-full p-3 text-xl btn cancel-btn\" [disabled]=\"isLoading\"\r\n            type=\"button\" (click)=\"cancel()\">\r\n            <div class=\"button-text\">\r\n                <Tsi-Label [labelValue]=\"'Cancel'\"></Tsi-Label>\r\n            </div>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<app-spinner *ngIf=\"isLoading\" ></app-spinner>", styles: [".loginForm-input{display:flex;flex-direction:column;gap:1rem}.loginForm-submit button{border-radius:50px}.loginForm-submit .button-text{font-size:1rem;font-weight:600;padding:1rem}.btn{background:#f48d23;color:#fff;border-color:#f48d23}.btn:enabled:hover{background:#f48d23;color:#fff;border-color:#f48d23;opacity:.9}.cancel-btn{background:#3c3c3c;color:#fff;border-color:#3c3c3c}.cancel-btn:enabled:hover{background:#3c3c3c;color:#fff;border-color:#3c3c3c;opacity:.9}.tsi-text-color-default{color:#1b1f3d}.button-loading .button-text{visibility:hidden;opacity:0}.button-text{color:#fff;transition:all .2s}.button-text:hover{cursor:pointer}.btn:disabled{cursor:default}.btn{display:flex;justify-content:center}.tooltip-text{text-decoration:none;color:var(--primary-color);font-family:inherit;font-size:.9rem;display:flex;align-items:center;gap:.5rem;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: TsiSearchComboComponent, selector: "Tsi-Search-Combo", inputs: ["elementSourceUrl", "listSourceUrl", "listSourceParams", "id-field", "label-field", "multiple", "sort", "showClear", "reloadDataSource", "isFiltered", "selectedLabel", "maxWidth", "businessClass", "searchDebounceTime", "comboType", "statusMetadata", "currentRowItem", "datasource", "bind", "maxSelectedLabels", "tooltipMaxDisplayedItems", "bindMode", "showSearchButton", "showAddButton", "showConsultButton", "showUpdateButton"], outputs: ["bindChange", "datasource-loaded", "init", "isLoaded", "selectedLabelChange", "onClick", "onSearchButtonClick", "selectionChange"] }, { kind: "component", type: TsiLabelComponent, selector: "Tsi-Label", inputs: ["labelValue", "styleClass", "infoText"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiTenantsComponent, decorators: [{
             type: Component,
@@ -22509,7 +22683,7 @@ class LocalePocComponent {
         this.integer = 123456789;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LocalePocComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LocalePocComponent, selector: "lib-locale-poc", ngImport: i0, template: "<div class=\"card w-10 locale-poc-container\">\r\n\r\n  <h3 class=\"mb-2\">Locale Formatting POC</h3>\r\n\r\n  <!-- Explanation -->\r\n  <p class=\"text-700 line-height-3 mb-4\">\r\n      This page is a proof-of-concept used to validate the locale integration of the UI library.\r\n      It allows testers and developers to enter numeric values using the library input components\r\n      and immediately verify how those values are formatted by the corresponding display components.\r\n      <br /><br />\r\n      The objective is to ensure that number formatting (group separators, decimal separators,\r\n      currency formatting, and integer grouping) behaves correctly for the currently active locale.\r\n      This page is mainly intended for QA testing and debugging during internationalization development.\r\n  </p>\r\n\r\n  <!-- Locale Info Table -->\r\n  <div class=\"mb-4 overflow-auto\">\r\n      <h4 class=\"mb-2\">Supported Locales & Format</h4>\r\n      <table class=\"table-auto w-full text-sm border-collapse border border-300\">\r\n          <thead>\r\n              <tr class=\"bg-gray-200\">\r\n                  <th class=\"border border-300 p-2 text-left\">Full Label</th>\r\n                  <th class=\"border border-300 p-2 text-left\">Code</th>\r\n                  <th class=\"border border-300 p-2 text-left\">Thousands Separator</th>\r\n                  <th class=\"border border-300 p-2 text-left\">Decimal Separator</th>\r\n              </tr>\r\n          </thead>\r\n          <tbody>\r\n              <tr>\r\n                  <td>French (France)</td>\r\n                  <td>fr-FR</td>\r\n                  <td class=\"font-bold text-lg\">\u23BD (space)</td>\r\n                  <td class=\"font-bold text-lg\">, (comma)</td>\r\n              </tr>\r\n              <tr>\r\n                  <td>English (United Kingdom)</td>\r\n                  <td>en-GB</td>\r\n                  <td class=\"font-bold text-lg\">, (comma)</td>\r\n                  <td class=\"font-bold text-lg\">. (dot)</td>\r\n              </tr>\r\n              <tr>\r\n                  <td>Arabic (Tunisia)</td>\r\n                  <td>ar-TN</td>\r\n                  <td class=\"font-bold text-lg\">. (dot)</td>\r\n                  <td class=\"font-bold text-lg\">, (comma)</td>\r\n              </tr>\r\n          </tbody>\r\n      </table>\r\n  </div>\r\n\r\n  <!-- Input / Display Table -->\r\n  <p-table [value]=\"[{}]\" styleClass=\"p-datatable-sm\">\r\n\r\n      <ng-template pTemplate=\"header\">\r\n          <tr>\r\n              <th style=\"width: 25%\">Field</th>\r\n              <th style=\"width: 35%\">Input Component</th>\r\n              <th style=\"width: 40%\">Display Component</th>\r\n          </tr>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"body\">\r\n\r\n          <tr>\r\n              <td>Currency (Societe)</td>\r\n              <td>\r\n                  <Tsi-Currency-Societe-Input [(inputField)]=\"currencySociete\" />\r\n              </td>\r\n              <td>\r\n                  <Tsi-Currency-Societe-Display [inputData]=\"currencySociete\" />\r\n              </td>\r\n          </tr>\r\n\r\n          <tr>\r\n              <td>Currency (Other)</td>\r\n              <td>\r\n                  <Tsi-Currency-Other-Input [(inputField)]=\"currencyOther\" currency=\"EUR\" />\r\n              </td>\r\n              <td>\r\n                  <Tsi-Currency-Other-Display [inputData]=\"currencyOther\" currency=\"EUR\" />\r\n              </td>\r\n          </tr>\r\n\r\n          <tr>\r\n              <td>Decimal</td>\r\n              <td>\r\n                  <Tsi-Decimal-Input [(inputField)]=\"decimal\" [numOfDecimal]=\"3\" />\r\n              </td>\r\n              <td>\r\n                  <Tsi-Decimal-Display [inputData]=\"decimal\" [numOfDecimal]=\"3\" />\r\n              </td>\r\n          </tr>\r\n\r\n          <tr>\r\n              <td>Rate</td>\r\n              <td>\r\n                  <Tsi-Rate-Input [(inputField)]=\"rate\" [numOfDecimal]=\"3\" [isFraction]=\"false\" />\r\n              </td>\r\n              <td>\r\n                  <Tsi-Rate-Display [inputData]=\"rate\" [numOfDecimal]=\"3\" [isFraction]=\"false\" />\r\n              </td>\r\n          </tr>\r\n\r\n          <tr>\r\n              <td>Integer</td>\r\n              <td>\r\n                  <Tsi-Integer [(inputField)]=\"integer\" />\r\n              </td>\r\n              <td>\r\n                  <Tsi-Integer-Display [inputData]=\"integer\" />\r\n              </td>\r\n          </tr>\r\n\r\n      </ng-template>\r\n\r\n  </p-table>\r\n\r\n</div>", styles: [".locale-poc-container{padding:1rem!important}\n"], dependencies: [{ kind: "directive", type: i2$2.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: "component", type: TsiCurrencyOtherInputComponent, selector: "Tsi-Currency-Other-Input", inputs: ["numOfDecimal", "currency", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiCurrencySocieteInputComponent, selector: "Tsi-Currency-Societe-Input", inputs: ["class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiDecimalInputComponent, selector: "Tsi-Decimal-Input", inputs: ["numOfDecimal", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiRateInputComponent, selector: "Tsi-Rate-Input", inputs: ["required", "isFraction", "numOfDecimal"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["inputData", "currency"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LocalePocComponent, selector: "lib-locale-poc", ngImport: i0, template: "<div class=\"card w-10 locale-poc-container\">\r\n\r\n  <h3 class=\"mb-2\">Locale Formatting POC</h3>\r\n\r\n  <!-- Explanation -->\r\n  <p class=\"text-700 line-height-3 mb-4\">\r\n      This page is a proof-of-concept used to validate the locale integration of the UI library.\r\n      It allows testers and developers to enter numeric values using the library input components\r\n      and immediately verify how those values are formatted by the corresponding display components.\r\n      <br /><br />\r\n      The objective is to ensure that number formatting (group separators, decimal separators,\r\n      currency formatting, and integer grouping) behaves correctly for the currently active locale.\r\n      This page is mainly intended for QA testing and debugging during internationalization development.\r\n  </p>\r\n\r\n  <!-- Locale Info Table -->\r\n  <div class=\"mb-4 overflow-auto\">\r\n      <h4 class=\"mb-2\">Supported Locales & Format</h4>\r\n      <table class=\"table-auto w-full text-sm border-collapse border border-300\">\r\n          <thead>\r\n              <tr class=\"bg-gray-200\">\r\n                  <th class=\"border border-300 p-2 text-left\">Full Label</th>\r\n                  <th class=\"border border-300 p-2 text-left\">Code</th>\r\n                  <th class=\"border border-300 p-2 text-left\">Thousands Separator</th>\r\n                  <th class=\"border border-300 p-2 text-left\">Decimal Separator</th>\r\n              </tr>\r\n          </thead>\r\n          <tbody>\r\n              <tr>\r\n                  <td>French (France)</td>\r\n                  <td>fr-FR</td>\r\n                  <td class=\"font-bold text-lg\">\u23BD (space)</td>\r\n                  <td class=\"font-bold text-lg\">, (comma)</td>\r\n              </tr>\r\n              <tr>\r\n                  <td>English (United Kingdom)</td>\r\n                  <td>en-GB</td>\r\n                  <td class=\"font-bold text-lg\">, (comma)</td>\r\n                  <td class=\"font-bold text-lg\">. (dot)</td>\r\n              </tr>\r\n              <tr>\r\n                  <td>Arabic (Tunisia)</td>\r\n                  <td>ar-TN</td>\r\n                  <td class=\"font-bold text-lg\">. (dot)</td>\r\n                  <td class=\"font-bold text-lg\">, (comma)</td>\r\n              </tr>\r\n          </tbody>\r\n      </table>\r\n  </div>\r\n\r\n  <!-- Input / Display Table -->\r\n  <p-table [value]=\"[{}]\" styleClass=\"p-datatable-sm\">\r\n\r\n      <ng-template pTemplate=\"header\">\r\n          <tr>\r\n              <th style=\"width: 25%\">Field</th>\r\n              <th style=\"width: 35%\">Input Component</th>\r\n              <th style=\"width: 40%\">Display Component</th>\r\n          </tr>\r\n      </ng-template>\r\n\r\n      <ng-template pTemplate=\"body\">\r\n\r\n          <tr>\r\n              <td>Currency (Societe)</td>\r\n              <td>\r\n                  <Tsi-Currency-Societe-Input [(inputField)]=\"currencySociete\" />\r\n              </td>\r\n              <td>\r\n                  <Tsi-Currency-Societe-Display [inputData]=\"currencySociete\" />\r\n              </td>\r\n          </tr>\r\n\r\n          <tr>\r\n              <td>Currency (Other)</td>\r\n              <td>\r\n                  <Tsi-Currency-Other-Input [(inputField)]=\"currencyOther\" currency=\"EUR\" />\r\n              </td>\r\n              <td>\r\n                  <Tsi-Currency-Other-Display [inputData]=\"currencyOther\" currency=\"EUR\" />\r\n              </td>\r\n          </tr>\r\n\r\n          <tr>\r\n              <td>Decimal</td>\r\n              <td>\r\n                  <Tsi-Decimal-Input [(inputField)]=\"decimal\" [numOfDecimal]=\"3\" />\r\n              </td>\r\n              <td>\r\n                  <Tsi-Decimal-Display [inputData]=\"decimal\" [numOfDecimal]=\"3\" />\r\n              </td>\r\n          </tr>\r\n\r\n          <tr>\r\n              <td>Rate</td>\r\n              <td>\r\n                  <Tsi-Rate-Input [(inputField)]=\"rate\" [numOfDecimal]=\"3\" [isFraction]=\"false\" />\r\n              </td>\r\n              <td>\r\n                  <Tsi-Rate-Display [inputData]=\"rate\" [numOfDecimal]=\"3\" [isFraction]=\"false\" />\r\n              </td>\r\n          </tr>\r\n\r\n          <tr>\r\n              <td>Integer</td>\r\n              <td>\r\n                  <Tsi-Integer [(inputField)]=\"integer\" />\r\n              </td>\r\n              <td>\r\n                  <Tsi-Integer-Display [inputData]=\"integer\" />\r\n              </td>\r\n          </tr>\r\n\r\n      </ng-template>\r\n\r\n  </p-table>\r\n\r\n</div>", styles: [".locale-poc-container{padding:1rem!important}\n"], dependencies: [{ 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: "component", type: TsiCurrencyOtherInputComponent, selector: "Tsi-Currency-Other-Input", inputs: ["numOfDecimal", "currency", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiCurrencySocieteInputComponent, selector: "Tsi-Currency-Societe-Input", inputs: ["class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiDecimalInputComponent, selector: "Tsi-Decimal-Input", inputs: ["numOfDecimal", "class"], outputs: ["inputFieldChange"] }, { kind: "component", type: TsiIntegerComponent, selector: "Tsi-Integer", inputs: ["class", "minValue", "maxValue", "delayChangeTime"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiRateInputComponent, selector: "Tsi-Rate-Input", inputs: ["required", "isFraction", "numOfDecimal"], outputs: ["newItemEvent", "inputFieldChange"] }, { kind: "component", type: TsiCurrencyOtherDisplayComponent, selector: "Tsi-Currency-Other-Display", inputs: ["inputData", "currency"] }, { kind: "component", type: TsiCurrencySocieteDisplayComponent, selector: "Tsi-Currency-Societe-Display", inputs: ["inputData"] }, { kind: "component", type: TsiDecimalDisplayComponent, selector: "Tsi-Decimal-Display", inputs: ["inputData", "formatDecimal", "numOfDecimal"] }, { kind: "component", type: TsiIntegerDisplayComponent, selector: "Tsi-Integer-Display", inputs: ["inputData"] }, { kind: "component", type: TsiRateDisplayComponent, selector: "Tsi-Rate-Display", inputs: ["isFraction", "inputData", "numOfDecimal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LocalePocComponent, decorators: [{
             type: Component,
@@ -22948,6 +23122,7 @@ const _tsiDirectives = [
     ValidationDirective,
     PresentationDesignerDirective,
     PresentationDesignerDirectiveBase,
+    PresentationDesignerTabPanelDirective,
     AutoSelectDirective,
     TsiTemplate,
 ];
@@ -22963,7 +23138,7 @@ class SharedModule {
             tooltip: 1400
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SharedModule, deps: [{ token: i2$2.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SharedModule, deps: [{ token: i2$1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SharedModule, declarations: [LocalizePipe,
             TsiDecimalPipe,
             ModalLabelPipe,
@@ -23065,6 +23240,7 @@ class SharedModule {
             ValidationDirective,
             PresentationDesignerDirective,
             PresentationDesignerDirectiveBase,
+            PresentationDesignerTabPanelDirective,
             AutoSelectDirective,
             TsiTemplate, DisplayNestedPropComponent,
             ToNumberPipe,
@@ -23253,6 +23429,7 @@ class SharedModule {
             ValidationDirective,
             PresentationDesignerDirective,
             PresentationDesignerDirectiveBase,
+            PresentationDesignerTabPanelDirective,
             AutoSelectDirective,
             TsiTemplate] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SharedModule, providers: [
@@ -23332,7 +23509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         DialogService
                     ]
                 }]
-        }], ctorParameters: () => [{ type: i2$2.PrimeNGConfig }] });
+        }], ctorParameters: () => [{ type: i2$1.PrimeNGConfig }] });
 
 /**
  * HTTP interceptor responsible for tracking all outgoing HTTP requests.
@@ -23366,5 +23543,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionErpService, ActionPlacement, AdDirective, AdItem, AddReportPopupComponent, AdminGuard, 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, 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, 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, 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, UserIdentityService, ValidationDirective, VerificationCodeComponent, VerificationCodeInscriptionComponent, VerificationCodeSmsComponent, WorkflowConfigurationService, WorkflowEtatForm, WorkflowEtatKanbanRequest, WorkflowEtatSuivantResponse, appProviders, authorization, dashboardConst, defaultCardHeader, distinct, executeImportResult, initSharedComponents, isNullOrEmpty, isPinnableCssSize, lengthValidator, locals, logoutReasonEnum, lowerFirst, menuItems, menuPreferences, primengDateLocalAr, primengLocaleAr, queryParamNamesConst, rangeValidator, registerLibraryLocales, requestHeaderNames, resolveCssSize, rtlModeKeys, splitArrayIntoChunks, tokenQueryParamName, updateEntityWorkflowInformation, updateEntityWorkflowInstanceResponse, userLanguage, workflowEtatDetailledResponse, workflowInstanceInformationResponse };
+export { ActionErpService, ActionPlacement, AdDirective, AdItem, AddReportPopupComponent, AdminGuard, 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, 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, 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, UserIdentityService, ValidationDirective, VerificationCodeComponent, VerificationCodeInscriptionComponent, VerificationCodeSmsComponent, WorkflowConfigurationService, WorkflowEtatForm, WorkflowEtatKanbanRequest, WorkflowEtatSuivantResponse, appProviders, authorization, dashboardConst, defaultCardHeader, distinct, executeImportResult, initSharedComponents, isNullOrEmpty, isPinnableCssSize, lengthValidator, locals, logoutReasonEnum, lowerFirst, menuItems, menuPreferences, primengDateLocalAr, primengLocaleAr, queryParamNamesConst, rangeValidator, registerLibraryLocales, requestHeaderNames, resolveCssSize, rtlModeKeys, splitArrayIntoChunks, tokenQueryParamName, updateEntityWorkflowInformation, updateEntityWorkflowInstanceResponse, userLanguage, workflowEtatDetailledResponse, workflowInstanceInformationResponse };
 //# sourceMappingURL=tsi-developpement-tsi-shared-ui.mjs.map