@tsi-developpement/tsi-shared-ui 1.8.44 → 1.8.45

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

@@ -7230,6 +7230,15 @@ class EditableGridComponent extends TsiInputBase {
         this.focusOutRow = new EventEmitter();
         this.onConsultClicked = new EventEmitter();
         this.rowDuplicatedEventEmitter = new EventEmitter();
+        /**
+         * Tracks rows by their business key (`key` input) so PrimeNG reuses existing row views
+         * instead of destroying/recreating them when the row array is replaced with objects sharing
+         * the same key (e.g. after a recalculation that clones the data). Without this, every cell
+         * editor — including server-backed search combos — is re-instantiated and re-fetches its data.
+         * Falls back to the row index when the key is absent (e.g. brand-new rows).
+         * Arrow property so `this` is preserved when PrimeNG invokes it.
+         */
+        this.rowTrackBy = (index, item) => item?.[this.key] ?? index;
         this._entityValidationsService = inject(EntityValidationsService);
         this._registerGridContainsFilter();
     }
@@ -7796,11 +7805,11 @@ class EditableGridComponent extends TsiInputBase {
         return `${EditableGridComponent.SEARCH_LABEL_PREFIX}${column.field}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditableGridComponent, deps: [{ token: LocalizePipe }, { token: i2$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: ["events", "saveEvent"], showGlobalSearch: "showGlobalSearch", showAddButton: "showAddButton", showDeleteButton: "showDeleteButton", showEditButton: "showEditButton", showRowSummary: "showRowSummary", scrollHeight: "scrollHeight", rowPerPage: "rowPerPage", pageSize: "pageSize", entityPrimaryKeyName: "entityPrimaryKeyName", columns: "columns", gridData: "gridData", isTableLoading: "isTableLoading", parent: "parent", events: "events", 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: { itemsSave: "itemsSave", 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    [resizableColumns]=\"true\" columnResizeMode=\"expand\" appendTo=\"body\" styleClass=\"p-datatable-sm\" [value]=\"gridData\"\r\n    [columns]=\"selectedColumns\" [dataKey]=\"key\" [scrollHeight]=\"scrollHeight\" styleClass=\"p-datatable-gridlines\"\r\n    (selectionChange)=\"selectionChange($event)\" #editableTable [totalRecords]=\"gridData.length\"\r\n    [globalFilterFields]=\"globalFilterFields\">\r\n    <!-- [tableStyle]=\"{'min-width': '50rem','width': 'inherit'}\" -->\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\" scope=\"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          [ngStyle]=\"isAr ? {'text-align': 'start'} : {}\">\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\" (bindChange)=\"inputChanged(col)\"\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\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\" (bindChange)=\"inputChanged(col)\"\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]\" (inputFieldChange)=\"inputChanged(col)\"\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\" (inputFieldChange)=\"inputChanged(col)\" [(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                      (inputFieldChange)=\"inputChanged(col)\" [(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                      (inputFieldChange)=\"inputChanged(col)\" [(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\" (inputFieldChange)=\"inputChanged(col)\"\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                      (inputFieldChange)=\"inputChanged(col)\" [(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                      (inputFieldChange)=\"inputChanged(col)\" [(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\" (inputFieldChange)=\"inputChanged(col)\"\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\" scope=\"col\" *ngFor=\"let col of columns\">\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}::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.ɵ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: ["events", "saveEvent"], showGlobalSearch: "showGlobalSearch", showAddButton: "showAddButton", showDeleteButton: "showDeleteButton", showEditButton: "showEditButton", showRowSummary: "showRowSummary", scrollHeight: "scrollHeight", rowPerPage: "rowPerPage", pageSize: "pageSize", entityPrimaryKeyName: "entityPrimaryKeyName", columns: "columns", gridData: "gridData", isTableLoading: "isTableLoading", parent: "parent", events: "events", 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: { itemsSave: "itemsSave", 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    [resizableColumns]=\"true\" columnResizeMode=\"expand\" appendTo=\"body\" styleClass=\"p-datatable-sm\" [value]=\"gridData\"\r\n    [columns]=\"selectedColumns\" [dataKey]=\"key\" [scrollHeight]=\"scrollHeight\" styleClass=\"p-datatable-gridlines\"\r\n    (selectionChange)=\"selectionChange($event)\" #editableTable [totalRecords]=\"gridData.length\"\r\n    [globalFilterFields]=\"globalFilterFields\" [rowTrackBy]=\"rowTrackBy\">\r\n    <!-- [tableStyle]=\"{'min-width': '50rem','width': 'inherit'}\" -->\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\" scope=\"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          [ngStyle]=\"isAr ? {'text-align': 'start'} : {}\">\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\" (bindChange)=\"inputChanged(col)\"\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\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\" (bindChange)=\"inputChanged(col)\"\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]\" (inputFieldChange)=\"inputChanged(col)\"\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\" (inputFieldChange)=\"inputChanged(col)\" [(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                      (inputFieldChange)=\"inputChanged(col)\" [(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                      (inputFieldChange)=\"inputChanged(col)\" [(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\" (inputFieldChange)=\"inputChanged(col)\"\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                      (inputFieldChange)=\"inputChanged(col)\" [(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                      (inputFieldChange)=\"inputChanged(col)\" [(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\" (inputFieldChange)=\"inputChanged(col)\"\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\" scope=\"col\" *ngFor=\"let col of columns\">\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}::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" }] }); }
 }
 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    [resizableColumns]=\"true\" columnResizeMode=\"expand\" appendTo=\"body\" styleClass=\"p-datatable-sm\" [value]=\"gridData\"\r\n    [columns]=\"selectedColumns\" [dataKey]=\"key\" [scrollHeight]=\"scrollHeight\" styleClass=\"p-datatable-gridlines\"\r\n    (selectionChange)=\"selectionChange($event)\" #editableTable [totalRecords]=\"gridData.length\"\r\n    [globalFilterFields]=\"globalFilterFields\">\r\n    <!-- [tableStyle]=\"{'min-width': '50rem','width': 'inherit'}\" -->\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\" scope=\"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          [ngStyle]=\"isAr ? {'text-align': 'start'} : {}\">\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\" (bindChange)=\"inputChanged(col)\"\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\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\" (bindChange)=\"inputChanged(col)\"\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]\" (inputFieldChange)=\"inputChanged(col)\"\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\" (inputFieldChange)=\"inputChanged(col)\" [(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                      (inputFieldChange)=\"inputChanged(col)\" [(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                      (inputFieldChange)=\"inputChanged(col)\" [(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\" (inputFieldChange)=\"inputChanged(col)\"\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                      (inputFieldChange)=\"inputChanged(col)\" [(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                      (inputFieldChange)=\"inputChanged(col)\" [(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\" (inputFieldChange)=\"inputChanged(col)\"\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\" scope=\"col\" *ngFor=\"let col of columns\">\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}::ng-deep .p-datatable .p-datatable-tfoot>tr>td{padding:1.8px!important}.p-button.p-button-icon-only.p-button-rounded{border-radius:50%}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.grid-cell{overflow:visible!important}.p-datatable .p-cell-editing{overflow:visible!important;position:relative;z-index:1}td,.p-editable-column{overflow:visible!important}.p-editable-column input{width:100%}::ng-deep .p-tabview .p-tabview-panels{overflow:visible!important}\n"] }]
+            args: [{ selector: 'Tsi-Generic-Editable-Grid', providers: [GenericValidationStateService], template: "<div class=\"card\">\r\n  <p-table #dt [selectionMode]=\"selectionMode\" [(selection)]=\"selectedItems\" editMode=\"row\"\r\n    [paginator]=\"gridData.length > pageSize\" [rowsPerPageOptions]=\"rowPerPage\" [rows]=\"pageSize\"\r\n    (onRowSelect)=\"onRowSelected($event)\" (onRowUnselect)=\"onRowUnselect($event)\" [scrollable]=\"true\"\r\n    [resizableColumns]=\"true\" columnResizeMode=\"expand\" appendTo=\"body\" styleClass=\"p-datatable-sm\" [value]=\"gridData\"\r\n    [columns]=\"selectedColumns\" [dataKey]=\"key\" [scrollHeight]=\"scrollHeight\" styleClass=\"p-datatable-gridlines\"\r\n    (selectionChange)=\"selectionChange($event)\" #editableTable [totalRecords]=\"gridData.length\"\r\n    [globalFilterFields]=\"globalFilterFields\" [rowTrackBy]=\"rowTrackBy\">\r\n    <!-- [tableStyle]=\"{'min-width': '50rem','width': 'inherit'}\" -->\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\" scope=\"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          [ngStyle]=\"isAr ? {'text-align': 'start'} : {}\">\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\" (bindChange)=\"inputChanged(col)\"\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\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\" (bindChange)=\"inputChanged(col)\"\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]\" (inputFieldChange)=\"inputChanged(col)\"\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\" (inputFieldChange)=\"inputChanged(col)\" [(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                      (inputFieldChange)=\"inputChanged(col)\" [(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                      (inputFieldChange)=\"inputChanged(col)\" [(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\" (inputFieldChange)=\"inputChanged(col)\"\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                      (inputFieldChange)=\"inputChanged(col)\" [(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                      (inputFieldChange)=\"inputChanged(col)\" [(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\" (inputFieldChange)=\"inputChanged(col)\"\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\" scope=\"col\" *ngFor=\"let col of columns\">\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}::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: [{
                 type: ViewChild,
                 args: ["editableTable"]