@tsi-developpement/tsi-shared-ui 1.7.2 → 1.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/enums/action-placement.mjs +2 -2
- package/esm2022/lib/tsi-components/output-components/tsi-generic-grid/tsi-generic-grid.component.mjs +7 -4
- package/esm2022/lib/tsi-components/tsi-generic-crud/tsi-generic-crud.component.mjs +9 -9
- package/fesm2022/tsi-developpement-tsi-shared-ui.mjs +15 -12
- package/fesm2022/tsi-developpement-tsi-shared-ui.mjs.map +1 -1
- package/lib/enums/action-placement.d.ts +1 -1
- package/package.json +1 -1
|
@@ -5530,7 +5530,7 @@ class ExportExcelHelper {
|
|
|
5530
5530
|
|
|
5531
5531
|
var ActionPlacement;
|
|
5532
5532
|
(function (ActionPlacement) {
|
|
5533
|
-
ActionPlacement["
|
|
5533
|
+
ActionPlacement["Overflow"] = "overflow";
|
|
5534
5534
|
ActionPlacement["Inline"] = "inline";
|
|
5535
5535
|
})(ActionPlacement || (ActionPlacement = {}));
|
|
5536
5536
|
|
|
@@ -7447,7 +7447,9 @@ class TsiGenericGridComponent {
|
|
|
7447
7447
|
return this._selectedColumns;
|
|
7448
7448
|
}
|
|
7449
7449
|
set selectedColumns(value) {
|
|
7450
|
-
let safeValue = value
|
|
7450
|
+
let safeValue = value
|
|
7451
|
+
? [...value.filter(c => c.field != this.overflowColumnField)]
|
|
7452
|
+
: [];
|
|
7451
7453
|
this.inlineActionColumns = safeValue.filter(c => c.isButton === true && c.actionDisplay === ActionPlacement.Inline);
|
|
7452
7454
|
this.overflowActionColumns = safeValue.filter(c => c.isButton === true && c.actionDisplay !== ActionPlacement.Inline);
|
|
7453
7455
|
this.hasOverflowActions = this.overflowActionColumns.length > 1;
|
|
@@ -7460,6 +7462,7 @@ class TsiGenericGridComponent {
|
|
|
7460
7462
|
buttonIcon: 'pi pi-ellipsis-v',
|
|
7461
7463
|
styleClass: 'p-button-text hover:shadow-8',
|
|
7462
7464
|
header: 'More actions',
|
|
7465
|
+
translatedHeader: this.localize.transform('More actions'),
|
|
7463
7466
|
},
|
|
7464
7467
|
...safeValue.filter(c => !(c.isButton === true && c.actionDisplay === ActionPlacement.Inline))
|
|
7465
7468
|
];
|
|
@@ -8963,7 +8966,7 @@ class TsiGenericGridComponent {
|
|
|
8963
8966
|
};
|
|
8964
8967
|
}
|
|
8965
8968
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsiGenericGridComponent, deps: [{ token: StatusColorService }, { token: FichierService }, { token: HtmlTemplateGeneratorService }, { token: i1$1.DatePipe }, { token: TsiNotificationService }, { token: LocalizePipe }, { token: LayoutHelperService }, { token: LayoutService }, { token: i4.PrimeNGConfig }, { token: AppSettingsService }, { token: ErrorResponseManagerService }, { token: i0.EnvironmentInjector }, { token: i1$3.DynamicDialogConfig }, { token: i1$3.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8966
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: { cudComponent: "cudComponent", modalSize: "modalSize", entityInfo: "entityInfo", formName: "formName", id: "id", pagedRequest: "pagedRequest", configuration: "configuration", page: "page", key: "key", columns: "columns", isSearchButtonDisabled: "isSearchButtonDisabled", filteredColumns: "filteredColumns", gridData: "gridData", isTableLoading: "isTableLoading", parent: "parent", showSearchBox: "showSearchBox", showActionColumn: "showActionColumn", showHeaderFilters: "showHeaderFilters", showFilterButton: "showFilterButton", isGridDataPagedInApi: "isGridDataPagedInApi", header: "header", ShowFilterColumns: "ShowFilterColumns", showImportExportButton: "showImportExportButton", crudService: "crudService", searchFields: "searchFields", sortMode: "sortMode", filtersHtmlTemplate: "filtersHtmlTemplate", presentationSettings: "presentationSettings", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", searchOnInit: "searchOnInit", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showSearchField: "showSearchField", showCalenderView: "showCalenderView", calenderSchema: "calenderSchema", showCardView: "showCardView", showKanbanView: "showKanbanView", showKanbanViewOfWorkFlowEtat: "showKanbanViewOfWorkFlowEtat", businessClass: "businessClass", page$: "page$", checkedByField: "checkedByField", selectAll: "selectAll", targetBusinessClass: "targetBusinessClass", descriminatorValue: "descriminatorValue" }, outputs: { onSave: "onSave", editRow: "editRow", deleteRow: "deleteRow", load: "load", buttonColumnClicked: "buttonColumnClicked", filtersHtmlTemplateChange: "filtersHtmlTemplateChange", selectedItemsChange: "selectedItemsChange", searchFieldsValueChanged: "searchFieldsValueChanged", calendarEventClick: "calendarEventClick", statusFilterChanged: "statusFilterChanged" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableHeaderCheckbox", first: true, predicate: ["tableHeaderCheckbox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"grid\">\r\n\r\n <div class=\"col-12\" [@slideInOut]=\"showSearchField ? 'in' : 'out'\" *ngIf=\"showGlobalSearch\">\r\n <tsi-search-box \r\n [isRtlMode]=\"isRtlMode\" \r\n [(searchFields)]=\"searchFields\" \r\n [businessClass]=\"businessClass\"\r\n [entityInfo]=\"entityInfo\"\r\n [statusMetadata]=\"statusMetadata\"\r\n [descriminatorValue]=\"descriminatorValue\"\r\n (searchFieldsChange)=\"searchFieldsValueChanges($event)\" \r\n (keywordValueChanged)=\"keywordValueChanged($event)\"\r\n (searchFieldsApplied)=\"search($event)\"\r\n (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n (workflowEtatFilterChanged)=\"onWorkflowEtatFilterChanged($event)\"\r\n (comboBoxLabelChanged)=\"comboBoxLabelChanged($event)\">\r\n </tsi-search-box>\r\n </div>\r\n\r\n <div *ngIf=\"_showCalenderView === false && _showCardView === false && _showKanbanView === false\" class=\"col-12\">\r\n \r\n <p-table #dt \r\n [lazy]=\"isGridDataPagedInApi\" \r\n [lazyLoadOnInit]=\"searchOnInit\" \r\n [totalRecords]=\"page.totalCount\" \r\n [loading]=\"page.loading\" \r\n [reorderableColumns]=\"true\"\r\n [resizableColumns]=\"true\" \r\n [columns]=\"selectedColumns\" \r\n [value]=\"page.items\"\r\n [paginator]=\"true\" \r\n [scrollable]=\"true\" \r\n [(rows)]=\"page.pageSize\"\r\n [showCurrentPageReport]=\"true\" \r\n [globalFilterFields]=\"fields()\" \r\n [tableStyle]=\"{ 'min-width': '50rem' }\"\r\n [rowsPerPageOptions]=\"[1, 10, 25, 50]\" \r\n [sortMode]=\"sortMode\"\r\n [multiSortMeta]=\"sortMetas\" \r\n [selectAll]=\"selectAll\"\r\n [selectionMode]=\"selectionMode\" \r\n [(selection)]=\"selection\" \r\n (onLazyLoad)=\"lazyLoad($event)\"\r\n (onRowUnselect)=\"onSelectedItemsChanged()\"\r\n (selectAllChange)=\"onSelectAllChange($event)\" \r\n (onRowSelect)=\"onSelectedItemsChanged()\"\r\n columnResizeMode=\"expand\" \r\n dataKey=\"{{ key }}\" \r\n scrollHeight=\"600px\" \r\n styleClass=\"p-datatable-gridlines\" \r\n currentPageReportTemplate=\"{{ 'Showing' | localize }} {{getFirstElementIndex()}} {{\r\n 'to' | localize\r\n }} {last} {{ 'of' | localize }} \r\n {totalRecords} {{ 'entries' | localize }}\" \r\n >\r\n\r\n <ng-template pTemplate=\"caption\">\r\n <div class=\"flex justify-content-between align-items-center\">\r\n <div class=\"ml-2\">\r\n {{ header | localize }}\r\n </div>\r\n\r\n <div class=\"p-1 flex align-items-center\">\r\n <div *ngIf=\"showFilterButton\" presentationDesignerBase=\"grid_toggle_header_filters\">\r\n <Tsi-Button [icon]=\"filterIcon\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"filterTooltip\"\r\n styleClass=\"p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n (click)=\"toggleHeaderFilters()\"></Tsi-Button>\r\n </div>\r\n\r\n <div *ngIf=\"showHeaderFilters\" presentationDesignerBase=\"grid_toggle_header_filter_mode\">\r\n <Tsi-Button [icon]=\"filterModeIcon\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n [tooltipText]=\"filterModeTooltip\" [styleClass]=\"'ml-1 p-button-primary p-button-icon-only'\"\r\n (click)=\"toggleHeaderFiltersMode()\"></Tsi-Button>\r\n </div>\r\n\r\n <div presentationDesignerBase=\"grid_clear_filter_button\">\r\n <Tsi-Button [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"'icon-clear-filter'\"\r\n styleClass=\"ml-1 p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n (click)=\"onClearFilters()\" [iconSrc]=\"'assets/layout/images/icon/icon-clear-filter.svg'\">\r\n </Tsi-Button>\r\n </div>\r\n\r\n <div *ngIf=\"showExportButton\" presentationDesignerBase=\"grid_export_button\">\r\n <Tsi-Button icon=\"p-button-icon pi pi-file-excel\" (onClick)=\"exportExcel()\"\r\n styleClass=\"p-element p-button-success hover:shadow-6 ml-2 p-1 p-button p-component p-button-icon-only\"\r\n [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"XLS\"></Tsi-Button>\r\n </div>\r\n\r\n <p-multiSelect class=\"ml-1\" [options]=\"columns\" [ngModel]=\"selectedColumns\" optionLabel=\"translatedHeader\"\r\n selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" [style]=\"{ 'min-width': '180px' }\"\r\n placeholder=\"{{ 'choose_columns' | localize }}\" (ngModelChange)=\"onSelectedColumnsChange($event)\">\r\n </p-multiSelect>\r\n </div>\r\n\r\n <!-- <div> -->\r\n <!-- <button *ngIf=\"showGlobalSearch\" type=\"button\" pButton pRipple icon=\"pi pi-search\" (click)=\"search()\"></button> -->\r\n <!-- </div> -->\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\"\r\n [ngClass]=\"page.loading ? 'no-z-index' : 'z-index-checkbox'\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n style=\"padding: .3rem !important; width: 3rem;\">\r\n <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </th>\r\n \r\n <ng-container *ngFor=\"let col of columns\">\r\n <th *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.overflow)\"\r\n scope=\"col\" [style]=\"col.style\" pTooltip=\"{{ col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n [pSortableColumn]=\"(!col.isButton || !isOverflowColumn(col.field) || col.type == displayTypes.IMAGE_DISPLAY) ? \r\n col.field : null\"\r\n [pResizableColumnDisabled]=\"col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)\"\r\n [tooltipDisabled]=\"col.isButton || isOverflowColumn(col.field)\" \r\n [pReorderableColumnDisabled]=\"col.isButton || isOverflowColumn(col.field)\" pReorderableColumn\r\n pResizableColumn [ngStyle]=\"page.items.length > 0 ? col.headerColumnStyle : {}\"\r\n [class.disabled-column]=\"col.isButton || isOverflowColumn(col.field) || col.type === displayTypes.IMAGE_DISPLAY\" \r\n [ngClass]=\"[\r\n getHeaderClassColor(col.type),\r\n (col.isButton ) ? 'w-1rem' : '',\r\n (col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)) ? 'non-resizable-column' : '',\r\n ]\"\r\n [ngStyle]=\"page.items.length > 0 ? col.headerColumnStyle : {}\">\r\n\r\n <ng-container *ngIf=\"notInSpecifiedColumn(col.field)\">\r\n <span>\r\n <table class=\"p-0 m-0\">\r\n <tr>\r\n <td class=\"col p-0 m-0\" [ngClass]=\"{'w-1rem': col.isButton}\">\r\n {{ col.header | localize }}\r\n </td>\r\n <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\">\r\n <p-sortIcon \r\n *ngIf=\"col.type !== displayTypes.IMAGE_DISPLAY\"\r\n class=\"w-1rem m-0 p-0\"\r\n field=\"{{ col.field }}\"\r\n ></p-sortIcon>\r\n </td>\r\n </tr>\r\n </table>\r\n </span>\r\n </ng-container>\r\n </th>\r\n </ng-container>\r\n </tr>\r\n\r\n <tr *ngIf=\"showHeaderFilters\">\r\n <!-- <th scope=\"col\" style=\"width:3rem\"></th>\r\n <th scope=\"col\" style=\"width:3rem\"></th> -->\r\n <th [ngClass]=\"page.loading ? 'no-z-index' : ''\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n style=\"width: 4rem\"></th>\r\n <th style=\"overflow: inherit\" scope=\"col\" *ngFor=\"let col of columns\">\r\n <p-columnFilter [type]=\"col.filterInputType\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n [minFractionDigits]=\"col.numOfDecimal\" [maxFractionDigits]=\"col.numOfDecimal\" [showButtons]=\"false\"\r\n [matchMode]=\"filterMatchMode.EQUALS\">\r\n </p-columnFilter>\r\n </th>\r\n </tr>\r\n \r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n\r\n <!-- CASE : multiple selection -->\r\n <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\" *ngIf=\"\r\n selectionMode == multipleGridSelectionMode;\r\n else notMultipleSelectionModeBlock\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event,item)\" (dragenter)=\"onDragEnter($event)\"\r\n (dragleave)=\"onDragLeave($event)\">\r\n <td [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\" style=\"padding: .3rem !important;\">\r\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n </td>\r\n <!-- <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n (click)=\"edit(item)\"></button>\r\n </div>\r\n </td>\r\n <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n </div>\r\n </td> -->\r\n \r\n <ng-container *ngFor=\"let col of columns\">\r\n <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.overflow)\" [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\" [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n style=\"height: min-content; margin-left: -.5rem;\">\r\n <!-- Tsi-Currency-Societe-Input -->\r\n\r\n <div *ngIf=\"\r\n col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n else currencyOtherOutputBlock\r\n \">\r\n <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Societe-Display>\r\n </div>\r\n\r\n <!-- Tsi-Currency-Other-Input -->\r\n <ng-template #currencyOtherOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n else datePickerOutputBlock\r\n \">\r\n <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Other-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #datePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATE_DISPLAY;\r\n else dateTimePickerOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #dateTimePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATETIME_DISPLAY;\r\n else checkBoxOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-CheckBox -->\r\n <ng-template #checkBoxOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CHECKBOX_DISPLAY;\r\n else decimalOutputBlock\r\n \">\r\n <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Checkbox-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Decimal-Input -->\r\n <ng-template #decimalOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DECIMAL_DISPLAY;\r\n else integerOutputBlock\r\n \">\r\n <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n [numOfDecimal]=\"col.numOfDecimal\">\r\n </Tsi-Decimal-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Integer -->\r\n <ng-template #integerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.INTEGER_DISPLAY;\r\n else rateOutputBlock\r\n \">\r\n <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Integer-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Rate-Input -->\r\n <ng-template #rateOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.RATE_DISPLAY;\r\n else displayNestedPropOutputBlock\r\n \">\r\n <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n </Tsi-Rate-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-nested-prop -->\r\n <ng-template #displayNestedPropOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n else displayStatusColorBlock\r\n \">\r\n <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n [displayValue]=\"col.displayNestedPropertylabelField\">\r\n </Tsi-Display-Nested-Prop>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #displayStatusColorBlock>\r\n <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <span\r\n class=\"px-2 py-1 rounded text-white text-sm\"\r\n [style.background-color]=\"item[col.field]\">\r\n {{item[col.field]}}\r\n </span>\r\n </div> \r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #displayStatusValueColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n class=\"px-2 py-1 font-bold status-badge\"\r\n [style.background-color]=\"opt.colorHex\"\r\n [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n [ngClass]=\"{\r\n 'text-black bg-white': !opt.colorHex,\r\n 'text-white': opt.colorHex\r\n }\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n class=\"px-2 py-1 font-bold status-badge\">\r\n {{ item[col.field] }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-status-column -->\r\n <ng-template #displayStatusColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n\r\n <span\r\n *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n class=\"font-bold status-badge\"\r\n [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n [style.padding-top]=\"'0.1rem'\"\r\n [style.padding-bottom]=\"'0.1rem'\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n class=\"font-bold status-badge\">\r\n {{ item[col.field] }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-nested-prop -->\r\n <ng-template #displayButtonBlock>\r\n <ng-container *ngIf=\"col.isButton; else displayTextEyeBlock\" >\r\n <div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\"\r\n icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n (click)=\"buttonClicked(item, col.field)\" ></Tsi-Button>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-text-eye -->\r\n <ng-template #displayTextEyeBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.TEXT_DISPLAY;\r\n else moreActionsBlock\r\n \">\r\n <span>\r\n {{ item[col.field] }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- more actions -->\r\n <ng-template #moreActionsBlock>\r\n <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n <p-menu \r\n appendTo=\"body\" \r\n #menuMoreActions \r\n [model]=\"overflowActionsMenu\" \r\n [popup]=\"true\"\r\n styleClass=\"overflow-menu\"\r\n [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n \r\n <ng-template pTemplate=\"item\" let-menuItem>\r\n <a \r\n pRipple \r\n class=\"flex align-items-center p-menuitem-link\"\r\n [ngClass]=\"menuItem.styleClass\"\r\n (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n <i \r\n class=\"p-menuitem-icon\"\r\n [class]=\"menuItem.iconClass\" \r\n [ngClass]=\"menuItem.iconStyleClass\">\r\n </i>\r\n <span class=\"menu-label\">\r\n {{ menuItem.label | localize }}\r\n </span>\r\n </a>\r\n </ng-template>\r\n </p-menu>\r\n <p-button \r\n type=\"button\"\r\n icon=\"{{col.buttonIcon}}\"\r\n styleClass=\"{{col.styleClass}} overflow-btn\"\r\n (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n </p-button> \r\n\r\n <!--<div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\"\r\n icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\" ></Tsi-Button>\r\n </div>-->\r\n\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Text-Box -->\r\n <ng-template #defaultTextOutputBlock>\r\n <ng-container>\r\n <span>\r\n {{ item[col.field] }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n\r\n <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n class=\"drag-message cursor-follow\">\r\n {{ \"Jointure\" | localize }}\r\n </div>\r\n </tr>\r\n\r\n \r\n <!-- CASE : single or none selection -->\r\n <ng-template #notMultipleSelectionModeBlock>\r\n <ng-container>\r\n <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\"\r\n [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"index\" id=\"tsi-grid-row-{{index}}\">\r\n\r\n <!-- <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n (click)=\"edit(item)\"></button>\r\n </div>\r\n </td>\r\n <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n </div>\r\n </td> -->\r\n\r\n <ng-container *ngFor=\"let col of columns\">\r\n\r\n <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.overflow)\" [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\" style=\"height: min-content; background: white;\"\r\n [ngClass]=\"{\r\n 'w-1rem': col.isButton,\r\n }\">\r\n\r\n <div *ngIf=\"\r\n col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n else currencyOtherOutputBlock\r\n \">\r\n <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Societe-Display>\r\n </div>\r\n\r\n <!-- Tsi-Currency-Other-Input -->\r\n <ng-template #currencyOtherOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n else datePickerOutputBlock\r\n \">\r\n <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Other-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #datePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATE_DISPLAY;\r\n else dateTimePickerOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #dateTimePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATETIME_DISPLAY;\r\n else checkBoxOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n\r\n <!-- Tsi-CheckBox -->\r\n <ng-template #checkBoxOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CHECKBOX_DISPLAY;\r\n else decimalOutputBlock\r\n \">\r\n <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Checkbox-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Decimal-Input -->\r\n <ng-template #decimalOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DECIMAL_DISPLAY;\r\n else integerOutputBlock\r\n \">\r\n <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n [numOfDecimal]=\"col.numOfDecimal\">\r\n </Tsi-Decimal-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Integer -->\r\n <ng-template #integerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.INTEGER_DISPLAY;\r\n else rateOutputBlock\r\n \">\r\n <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Integer-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Rate-Input -->\r\n <ng-template #rateOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.RATE_DISPLAY;\r\n else displayNestedPropOutputBlock\r\n \">\r\n <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n </Tsi-Rate-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-nested-prop -->\r\n <ng-template #displayNestedPropOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n else displayStatusColorBlock\r\n \">\r\n <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n [displayValue]=\"col.displayNestedPropertylabelField\">\r\n </Tsi-Display-Nested-Prop>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #displayStatusColorBlock>\r\n <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <span\r\n class=\"px-2 py-1 rounded text-white text-sm\"\r\n [style.background-color]=\"item[col.field]\">\r\n {{item[col.field]}}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n\r\n <ng-template #displayStatusValueColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n class=\"px-2 py-1 font-bold status-badge\"\r\n [style.background-color]=\"opt.colorHex\"\r\n [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n [ngClass]=\"{\r\n 'text-black bg-white': !opt.colorHex,\r\n 'text-white': opt.colorHex\r\n }\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n class=\"px-2 py-1 font-bold status-badge\">\r\n {{ item[col.field] }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-status-prop -->\r\n <ng-template #displayStatusColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n\r\n <span\r\n *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n class=\"status-badge font-bold\"\r\n [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n [style.padding-top]=\"'0.1rem'\"\r\n [style.padding-bottom]=\"'0.1rem'\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n class=\"status-badge font-bold\">\r\n {{ item[col.field] }}\r\n </span>\r\n \r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n \r\n <!-- display-nested-prop -->\r\n <ng-template #displayButtonBlock>\r\n <ng-container *ngIf=\"col.isButton; else displayImage\">\r\n <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n (click)=\"buttonClicked(item, col.field)\"\r\n [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-image -->\r\n <ng-template #displayImage>\r\n <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayTextEyeBlock\">\r\n <div class=\"h-2rem\">\r\n <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n [width]=\"'100%'\" [height]=\"'100%'\">\r\n </tsi-image-display>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-text-eye -->\r\n <ng-template #displayTextEyeBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.TEXT_DISPLAY;\r\n else moreActionsBlock\r\n \">\r\n <span>\r\n <span class=\"cursor-pointer pi pi-eye\" (click)=\"eyeClicked(item[col.field])\"></span>\r\n {{ truncateString(item[col.field], 50) }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- more actions -->\r\n <ng-template #moreActionsBlock>\r\n <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n <p-menu \r\n appendTo=\"body\" \r\n #menuMoreActions \r\n [model]=\"overflowActionsMenu\" \r\n [popup]=\"true\"\r\n styleClass=\"overflow-menu\"\r\n [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n \r\n <ng-template pTemplate=\"item\" let-menuItem>\r\n <a \r\n pRipple \r\n class=\"flex align-items-center p-menuitem-link\"\r\n [ngClass]=\"menuItem.styleClass\"\r\n (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n <i \r\n class=\"p-menuitem-icon\"\r\n [class]=\"menuItem.iconClass\" \r\n [ngClass]=\"menuItem.iconStyleClass\">\r\n </i>\r\n <span class=\"menu-label\">\r\n {{ menuItem.label | localize }}\r\n </span>\r\n </a>\r\n </ng-template>\r\n </p-menu>\r\n <p-button \r\n type=\"button\"\r\n icon=\"{{col.buttonIcon}}\"\r\n styleClass=\"{{col.styleClass}} overflow-btn\"\r\n (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n </p-button> \r\n\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Text-Box -->\r\n <ng-template #defaultTextOutputBlock>\r\n <ng-container>\r\n <span>\r\n {{ item[col.field] }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </ng-template>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"footer\">\r\n <tr>\r\n <td *ngIf=\"selectionMode == multipleGridSelectionMode\"></td>\r\n <td class=\"pr-0\" *ngFor=\"let col of selectedColumns\">\r\n <div *ngIf=\"col.showSummary\">\r\n <!-- CURRENCY_SOCIETE_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Currency-Societe-Display>\r\n </div>\r\n\r\n <!-- INTEGER_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.INTEGER_DISPLAY\">\r\n <Tsi-Integer-Display [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Integer-Display>\r\n </div>\r\n\r\n <!-- RATE_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.RATE_DISPLAY\">\r\n <Tsi-Rate-Display [isFraction]=\"col.isFraction ?? false\" [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Rate-Display>\r\n </div>\r\n\r\n <!-- DECIMAL_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY\">\r\n <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col.field)\"\r\n [numOfDecimal]=\"col.numOfDecimal\">\r\n </Tsi-Decimal-Display>\r\n </div>\r\n\r\n <div *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Currency-Other-Display>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n \r\n <ng-template pTemplate=\"summary\">\r\n {{ page.totalCount }} {{ \"records_label\" | localize }}\r\n <span *ngIf=\"colorful\">\r\n <span>View Grid</span>\r\n <span class=\"pl-2\">| SearchOnInit : {{ searchOnInit }}</span>\r\n <span class=\"pl-2\">| Pagination In Api : {{ isGridDataPagedInApi }}</span>\r\n </span>\r\n </ng-template>\r\n </p-table>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"_showCalenderView === true\" class=\"col-12\">\r\n <tsi-calender [schema]=\"calenderSchema\" [eventsData]=\"page.items\" [crudService]=\"crudService\"\r\n (dateRangeChange)=\"handleDateRangeChange($event)\" (eventClick)=\"handleCalendarEventClick($event)\"></tsi-calender>\r\n </div>\r\n\r\n <div *ngIf=\"_showCardView === true\" class=\"col-12\">\r\n <Tsi-card-list [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\">\r\n </Tsi-card-list>\r\n </div>\r\n\r\n <div *ngIf=\"_showKanbanView === true && !_showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n <Tsi-kanban [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\" [crudService]=\"crudService\">\r\n </Tsi-kanban>\r\n </div>\r\n\r\n <div *ngIf=\"_showKanbanView === true && _showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n <Tsi-kanban-workflow-etat [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n [page$]=\"page$\" [page]=\"page\" [descriminatorValue]=\"descriminatorValue\" (callSearch)=\"callSearchHandler($event)\">\r\n </Tsi-kanban-workflow-etat>\r\n </div>\r\n</div>", styles: [".p-button.p-button-icon-only.p-button-rounded{border-radius:50%;height:1rem}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.p-inputgroup.rtl-mode .p-inputgroup-addon:last-child,.p-inputgroup.rtl-mode button:last-child,.p-inputgroup.rtl-mode input:last-child,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:6px 0 0 6px/6px 0px 0px 6px!important}.p-inputgroup.ltr-mode .p-inputgroup-addon:last-child,.p-inputgroup.ltr-mode button:last-child,.p-inputgroup.ltr-mode input:last-child,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:0 6px 6px 0/0px 6px 6px 0px!important}.p-paginator .p-dropdown{height:auto;border:none;border-bottom:1px solid}.p-datatable .frozen-column{position:sticky;left:0;z-index:1;background:#fff}.frozen-column-ltr-mode{min-width:2rem;position:sticky;left:0;background-color:#fff}.frozen-column-rtl-mode{min-width:2rem;position:sticky;right:0;background-color:#fff}.disabled-column{background-color:#f5f5f5;color:#d3d3d3;pointer-events:none}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:max-content;width:100%;text-align:center;white-space:nowrap;border-radius:.4rem;padding:.1rem .2rem;font-weight:600;line-height:1.2;color:#fff;box-shadow:0 1px 2px #0000000d;transition:all .2s ease-in-out;cursor:default;transform-origin:top center;border-top-left-radius:inherit;border-bottom-right-radius:inherit}.status-badge:hover{transform:scale(1.06);box-shadow:0 2px 4px #0000001a;filter:brightness(1.2)}td span,td div{padding:0 .5rem}.custom-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.button-icon{width:1.5rem;height:1.5rem}.custom-button:hover{background-color:#f0f0f0}table{width:100%!important}.right-to-left{text-align:start}::ng-deep th.non-resizable-column .p-column-resizer{display:none!important;pointer-events:none!important}::ng-deep .cursor-follow{position:fixed;background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.85rem;z-index:1000;pointer-events:none;white-space:nowrap}::ng-deep .overflow-menu.p-menu-overlay{border-radius:8px;border:none;padding:.4rem;min-width:0!important;background:#fff;box-shadow:0 8px 24px #0000001f;animation:fadeScaleIn .12s ease-out}::ng-deep .overflow-menu .p-menuitem-link{padding:0}::ng-deep .overflow-menu-item{padding:.55rem .75rem;border-radius:8px;gap:.5rem;font-size:.85rem;white-space:nowrap;transition:all .15s ease}::ng-deep .overflow-menu-item:hover{background-color:#f5f7fa}::ng-deep .menu-icon{font-size:.9rem;width:18px;text-align:center;opacity:.8}::ng-deep .menu-label{font-weight:400}::ng-deep .overflow-btn{width:28px;height:28px;padding:0}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.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: i5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i5.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i5.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i16.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i6.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: 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: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: TsiSearchBoxComponent, selector: "tsi-search-box", inputs: ["searchFields", "businessClass", "descriminatorValue", "isRtlMode", "isSearchButtonDisabled", "entityInfo", "statusMetadata"], outputs: ["searchFieldsChange", "searchFieldsApplied", "keywordValueChanged", "statusFilterChanged", "workflowEtatFilterChanged", "comboBoxLabelChanged"] }, { kind: "component", type: TsiCardListComponent, selector: "Tsi-card-list", inputs: ["cardBusinessClass", "header", "id", "page", "page$"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiImageDisplayComponent, selector: "tsi-image-display", inputs: ["src", "alt", "width", "height", "isRounded", "headerTitles"] }, { kind: "component", type: TsiKanbanComponent, selector: "Tsi-kanban", inputs: ["cardBusinessClass", "header", "id", "page$", "crudService", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiCalenderComponent, selector: "tsi-calender", inputs: ["crudService", "schema", "eventsData"], outputs: ["eventClick", "dateRangeChange"] }, { kind: "component", type: TsiKanbanWorkflowEtatComponent, selector: "Tsi-kanban-workflow-etat", inputs: ["cardBusinessClass", "header", "id", "page$", "descriminatorValue", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]", inputs: ["presentationDesigner", "presentationDesignerBase"] }, { kind: "component", type: DisplayNestedPropComponent, selector: "Tsi-Display-Nested-Prop", inputs: ["id", "displayValue", "sourceUrl"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
|
|
8969
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TsiGenericGridComponent, selector: "Tsi-Generic-Grid", inputs: { cudComponent: "cudComponent", modalSize: "modalSize", entityInfo: "entityInfo", formName: "formName", id: "id", pagedRequest: "pagedRequest", configuration: "configuration", page: "page", key: "key", columns: "columns", isSearchButtonDisabled: "isSearchButtonDisabled", filteredColumns: "filteredColumns", gridData: "gridData", isTableLoading: "isTableLoading", parent: "parent", showSearchBox: "showSearchBox", showActionColumn: "showActionColumn", showHeaderFilters: "showHeaderFilters", showFilterButton: "showFilterButton", isGridDataPagedInApi: "isGridDataPagedInApi", header: "header", ShowFilterColumns: "ShowFilterColumns", showImportExportButton: "showImportExportButton", crudService: "crudService", searchFields: "searchFields", sortMode: "sortMode", filtersHtmlTemplate: "filtersHtmlTemplate", presentationSettings: "presentationSettings", selectKeyOnly: "selectKeyOnly", selectionMode: "selectionMode", selectedItems: "selectedItems", searchOnInit: "searchOnInit", showGlobalSearch: "showGlobalSearch", showExportButton: "showExportButton", showSearchField: "showSearchField", showCalenderView: "showCalenderView", calenderSchema: "calenderSchema", showCardView: "showCardView", showKanbanView: "showKanbanView", showKanbanViewOfWorkFlowEtat: "showKanbanViewOfWorkFlowEtat", businessClass: "businessClass", page$: "page$", checkedByField: "checkedByField", selectAll: "selectAll", targetBusinessClass: "targetBusinessClass", descriminatorValue: "descriminatorValue" }, outputs: { onSave: "onSave", editRow: "editRow", deleteRow: "deleteRow", load: "load", buttonColumnClicked: "buttonColumnClicked", filtersHtmlTemplateChange: "filtersHtmlTemplateChange", selectedItemsChange: "selectedItemsChange", searchFieldsValueChanged: "searchFieldsValueChanged", calendarEventClick: "calendarEventClick", statusFilterChanged: "statusFilterChanged" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableHeaderCheckbox", first: true, predicate: ["tableHeaderCheckbox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"grid\">\r\n\r\n <div class=\"col-12\" [@slideInOut]=\"showSearchField ? 'in' : 'out'\" *ngIf=\"showGlobalSearch\">\r\n <tsi-search-box \r\n [isRtlMode]=\"isRtlMode\" \r\n [(searchFields)]=\"searchFields\" \r\n [businessClass]=\"businessClass\"\r\n [entityInfo]=\"entityInfo\"\r\n [statusMetadata]=\"statusMetadata\"\r\n [descriminatorValue]=\"descriminatorValue\"\r\n (searchFieldsChange)=\"searchFieldsValueChanges($event)\" \r\n (keywordValueChanged)=\"keywordValueChanged($event)\"\r\n (searchFieldsApplied)=\"search($event)\"\r\n (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n (workflowEtatFilterChanged)=\"onWorkflowEtatFilterChanged($event)\"\r\n (comboBoxLabelChanged)=\"comboBoxLabelChanged($event)\">\r\n </tsi-search-box>\r\n </div>\r\n\r\n <div *ngIf=\"_showCalenderView === false && _showCardView === false && _showKanbanView === false\" class=\"col-12\">\r\n \r\n <p-table #dt \r\n [lazy]=\"isGridDataPagedInApi\" \r\n [lazyLoadOnInit]=\"searchOnInit\" \r\n [totalRecords]=\"page.totalCount\" \r\n [loading]=\"page.loading\" \r\n [reorderableColumns]=\"true\"\r\n [resizableColumns]=\"true\" \r\n [columns]=\"selectedColumns\" \r\n [value]=\"page.items\"\r\n [paginator]=\"true\" \r\n [scrollable]=\"true\" \r\n [(rows)]=\"page.pageSize\"\r\n [showCurrentPageReport]=\"true\" \r\n [globalFilterFields]=\"fields()\" \r\n [tableStyle]=\"{ 'min-width': '50rem' }\"\r\n [rowsPerPageOptions]=\"[1, 10, 25, 50]\" \r\n [sortMode]=\"sortMode\"\r\n [multiSortMeta]=\"sortMetas\" \r\n [selectAll]=\"selectAll\"\r\n [selectionMode]=\"selectionMode\" \r\n [(selection)]=\"selection\" \r\n (onLazyLoad)=\"lazyLoad($event)\"\r\n (onRowUnselect)=\"onSelectedItemsChanged()\"\r\n (selectAllChange)=\"onSelectAllChange($event)\" \r\n (onRowSelect)=\"onSelectedItemsChanged()\"\r\n columnResizeMode=\"expand\" \r\n dataKey=\"{{ key }}\" \r\n scrollHeight=\"600px\" \r\n styleClass=\"p-datatable-gridlines\" \r\n currentPageReportTemplate=\"{{ 'Showing' | localize }} {{getFirstElementIndex()}} {{\r\n 'to' | localize\r\n }} {last} {{ 'of' | localize }} \r\n {totalRecords} {{ 'entries' | localize }}\" \r\n >\r\n\r\n <ng-template pTemplate=\"caption\">\r\n <div class=\"flex justify-content-between align-items-center\">\r\n <div class=\"ml-2\">\r\n {{ header | localize }}\r\n </div>\r\n\r\n <div class=\"p-1 flex align-items-center\">\r\n <div *ngIf=\"showFilterButton\" presentationDesignerBase=\"grid_toggle_header_filters\">\r\n <Tsi-Button [icon]=\"filterIcon\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"filterTooltip\"\r\n styleClass=\"p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n (click)=\"toggleHeaderFilters()\"></Tsi-Button>\r\n </div>\r\n\r\n <div *ngIf=\"showHeaderFilters\" presentationDesignerBase=\"grid_toggle_header_filter_mode\">\r\n <Tsi-Button [icon]=\"filterModeIcon\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n [tooltipText]=\"filterModeTooltip\" [styleClass]=\"'ml-1 p-button-primary p-button-icon-only'\"\r\n (click)=\"toggleHeaderFiltersMode()\"></Tsi-Button>\r\n </div>\r\n\r\n <div presentationDesignerBase=\"grid_clear_filter_button\">\r\n <Tsi-Button [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"'icon-clear-filter'\"\r\n styleClass=\"ml-1 p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n (click)=\"onClearFilters()\" [iconSrc]=\"'assets/layout/images/icon/icon-clear-filter.svg'\">\r\n </Tsi-Button>\r\n </div>\r\n\r\n <div *ngIf=\"showExportButton\" presentationDesignerBase=\"grid_export_button\">\r\n <Tsi-Button icon=\"p-button-icon pi pi-file-excel\" (onClick)=\"exportExcel()\"\r\n styleClass=\"p-element p-button-success hover:shadow-6 ml-2 p-1 p-button p-component p-button-icon-only\"\r\n [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"XLS\"></Tsi-Button>\r\n </div>\r\n\r\n <p-multiSelect class=\"ml-1\" [options]=\"columns\" [ngModel]=\"selectedColumns\" optionLabel=\"translatedHeader\"\r\n selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" [style]=\"{ 'min-width': '180px' }\"\r\n placeholder=\"{{ 'choose_columns' | localize }}\" (ngModelChange)=\"onSelectedColumnsChange($event)\">\r\n </p-multiSelect>\r\n </div>\r\n\r\n <!-- <div> -->\r\n <!-- <button *ngIf=\"showGlobalSearch\" type=\"button\" pButton pRipple icon=\"pi pi-search\" (click)=\"search()\"></button> -->\r\n <!-- </div> -->\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\"\r\n [ngClass]=\"page.loading ? 'no-z-index' : 'z-index-checkbox'\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n style=\"padding: .3rem !important; width: 3rem;\">\r\n <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </th>\r\n \r\n <ng-container *ngFor=\"let col of columns\">\r\n <th *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\"\r\n scope=\"col\" [style]=\"col.style\" pTooltip=\"{{ col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n [pSortableColumn]=\"(!col.isButton || !isOverflowColumn(col.field) || col.type == displayTypes.IMAGE_DISPLAY) ? \r\n col.field : null\"\r\n [pResizableColumnDisabled]=\"col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)\"\r\n [tooltipDisabled]=\"col.isButton || isOverflowColumn(col.field)\" \r\n [pReorderableColumnDisabled]=\"col.isButton || isOverflowColumn(col.field)\" pReorderableColumn\r\n pResizableColumn [ngStyle]=\"page.items.length > 0 ? col.headerColumnStyle : {}\"\r\n [class.disabled-column]=\"col.isButton || isOverflowColumn(col.field) || col.type === displayTypes.IMAGE_DISPLAY\" \r\n [ngClass]=\"[\r\n getHeaderClassColor(col.type),\r\n (col.isButton ) ? 'w-1rem' : '',\r\n (col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)) ? 'non-resizable-column' : '',\r\n ]\"\r\n [ngStyle]=\"page.items.length > 0 ? col.headerColumnStyle : {}\">\r\n\r\n <ng-container *ngIf=\"notInSpecifiedColumn(col.field)\">\r\n <span>\r\n <table class=\"p-0 m-0\">\r\n <tr>\r\n <td class=\"col p-0 m-0\" [ngClass]=\"{'w-1rem': col.isButton}\">\r\n {{ col.header | localize }}\r\n </td>\r\n <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\">\r\n <p-sortIcon \r\n *ngIf=\"col.type !== displayTypes.IMAGE_DISPLAY\"\r\n class=\"w-1rem m-0 p-0\"\r\n field=\"{{ col.field }}\"\r\n ></p-sortIcon>\r\n </td>\r\n </tr>\r\n </table>\r\n </span>\r\n </ng-container>\r\n </th>\r\n </ng-container>\r\n </tr>\r\n\r\n <tr *ngIf=\"showHeaderFilters\">\r\n <!-- <th scope=\"col\" style=\"width:3rem\"></th>\r\n <th scope=\"col\" style=\"width:3rem\"></th> -->\r\n <th [ngClass]=\"page.loading ? 'no-z-index' : ''\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n style=\"width: 4rem\"></th>\r\n <th style=\"overflow: inherit\" scope=\"col\" *ngFor=\"let col of columns\">\r\n <p-columnFilter [type]=\"col.filterInputType\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n [minFractionDigits]=\"col.numOfDecimal\" [maxFractionDigits]=\"col.numOfDecimal\" [showButtons]=\"false\"\r\n [matchMode]=\"filterMatchMode.EQUALS\">\r\n </p-columnFilter>\r\n </th>\r\n </tr>\r\n \r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n\r\n <!-- CASE : multiple selection -->\r\n <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\" *ngIf=\"\r\n selectionMode == multipleGridSelectionMode;\r\n else notMultipleSelectionModeBlock\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event,item)\" (dragenter)=\"onDragEnter($event)\"\r\n (dragleave)=\"onDragLeave($event)\">\r\n <td [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\" style=\"padding: .3rem !important;\">\r\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n </td>\r\n <!-- <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n (click)=\"edit(item)\"></button>\r\n </div>\r\n </td>\r\n <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n </div>\r\n </td> -->\r\n \r\n <ng-container *ngFor=\"let col of columns\">\r\n <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\" [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n style=\"height: min-content; margin-left: -.5rem;\">\r\n <!-- Tsi-Currency-Societe-Input -->\r\n\r\n <div *ngIf=\"\r\n col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n else currencyOtherOutputBlock\r\n \">\r\n <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Societe-Display>\r\n </div>\r\n\r\n <!-- Tsi-Currency-Other-Input -->\r\n <ng-template #currencyOtherOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n else datePickerOutputBlock\r\n \">\r\n <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Other-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #datePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATE_DISPLAY;\r\n else dateTimePickerOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #dateTimePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATETIME_DISPLAY;\r\n else checkBoxOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-CheckBox -->\r\n <ng-template #checkBoxOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CHECKBOX_DISPLAY;\r\n else decimalOutputBlock\r\n \">\r\n <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Checkbox-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Decimal-Input -->\r\n <ng-template #decimalOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DECIMAL_DISPLAY;\r\n else integerOutputBlock\r\n \">\r\n <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n [numOfDecimal]=\"col.numOfDecimal\">\r\n </Tsi-Decimal-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Integer -->\r\n <ng-template #integerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.INTEGER_DISPLAY;\r\n else rateOutputBlock\r\n \">\r\n <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Integer-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Rate-Input -->\r\n <ng-template #rateOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.RATE_DISPLAY;\r\n else displayNestedPropOutputBlock\r\n \">\r\n <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n </Tsi-Rate-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-nested-prop -->\r\n <ng-template #displayNestedPropOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n else displayStatusColorBlock\r\n \">\r\n <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n [displayValue]=\"col.displayNestedPropertylabelField\">\r\n </Tsi-Display-Nested-Prop>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #displayStatusColorBlock>\r\n <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <span\r\n class=\"px-2 py-1 rounded text-white text-sm\"\r\n [style.background-color]=\"item[col.field]\">\r\n {{item[col.field]}}\r\n </span>\r\n </div> \r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #displayStatusValueColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n class=\"px-2 py-1 font-bold status-badge\"\r\n [style.background-color]=\"opt.colorHex\"\r\n [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n [ngClass]=\"{\r\n 'text-black bg-white': !opt.colorHex,\r\n 'text-white': opt.colorHex\r\n }\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n class=\"px-2 py-1 font-bold status-badge\">\r\n {{ item[col.field] }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-status-column -->\r\n <ng-template #displayStatusColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n\r\n <span\r\n *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n class=\"font-bold status-badge\"\r\n [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n [style.padding-top]=\"'0.1rem'\"\r\n [style.padding-bottom]=\"'0.1rem'\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n class=\"font-bold status-badge\">\r\n {{ item[col.field] }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-nested-prop -->\r\n <ng-template #displayButtonBlock>\r\n <ng-container *ngIf=\"col.isButton; else displayTextEyeBlock\" >\r\n <div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\"\r\n icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n (click)=\"buttonClicked(item, col.field)\" ></Tsi-Button>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-text-eye -->\r\n <ng-template #displayTextEyeBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.TEXT_DISPLAY;\r\n else moreActionsBlock\r\n \">\r\n <span>\r\n {{ item[col.field] }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- more actions -->\r\n <ng-template #moreActionsBlock>\r\n <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n <p-menu \r\n appendTo=\"body\" \r\n #menuMoreActions \r\n [model]=\"overflowActionsMenu\" \r\n [popup]=\"true\"\r\n styleClass=\"overflow-menu\"\r\n [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n \r\n <ng-template pTemplate=\"item\" let-menuItem>\r\n <a \r\n pRipple \r\n class=\"flex align-items-center p-menuitem-link\"\r\n [ngClass]=\"menuItem.styleClass\"\r\n (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n <i \r\n class=\"p-menuitem-icon\"\r\n [class]=\"menuItem.iconClass\" \r\n [ngClass]=\"menuItem.iconStyleClass\">\r\n </i>\r\n <span class=\"menu-label\">\r\n {{ menuItem.label | localize }}\r\n </span>\r\n </a>\r\n </ng-template>\r\n </p-menu>\r\n <p-button \r\n type=\"button\"\r\n icon=\"{{col.buttonIcon}}\"\r\n styleClass=\"{{col.styleClass}} overflow-btn\"\r\n (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n </p-button> \r\n\r\n <!--<div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\"\r\n icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\" ></Tsi-Button>\r\n </div>-->\r\n\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Text-Box -->\r\n <ng-template #defaultTextOutputBlock>\r\n <ng-container>\r\n <span>\r\n {{ item[col.field] }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n\r\n <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n class=\"drag-message cursor-follow\">\r\n {{ \"Jointure\" | localize }}\r\n </div>\r\n </tr>\r\n\r\n \r\n <!-- CASE : single or none selection -->\r\n <ng-template #notMultipleSelectionModeBlock>\r\n <ng-container>\r\n <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\"\r\n [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"index\" id=\"tsi-grid-row-{{index}}\">\r\n\r\n <!-- <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n (click)=\"edit(item)\"></button>\r\n </div>\r\n </td>\r\n <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n </div>\r\n </td> -->\r\n\r\n <ng-container *ngFor=\"let col of columns\">\r\n\r\n <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\" \r\n style=\"height: min-content; background: white;\"\r\n [ngClass]=\"{\r\n 'w-1rem': col.isButton,\r\n }\">\r\n\r\n <div *ngIf=\"\r\n col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n else currencyOtherOutputBlock\r\n \">\r\n <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Societe-Display>\r\n </div>\r\n\r\n <!-- Tsi-Currency-Other-Input -->\r\n <ng-template #currencyOtherOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n else datePickerOutputBlock\r\n \">\r\n <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Other-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #datePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATE_DISPLAY;\r\n else dateTimePickerOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #dateTimePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATETIME_DISPLAY;\r\n else checkBoxOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n\r\n <!-- Tsi-CheckBox -->\r\n <ng-template #checkBoxOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CHECKBOX_DISPLAY;\r\n else decimalOutputBlock\r\n \">\r\n <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Checkbox-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Decimal-Input -->\r\n <ng-template #decimalOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DECIMAL_DISPLAY;\r\n else integerOutputBlock\r\n \">\r\n <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n [numOfDecimal]=\"col.numOfDecimal\">\r\n </Tsi-Decimal-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Integer -->\r\n <ng-template #integerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.INTEGER_DISPLAY;\r\n else rateOutputBlock\r\n \">\r\n <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Integer-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Rate-Input -->\r\n <ng-template #rateOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.RATE_DISPLAY;\r\n else displayNestedPropOutputBlock\r\n \">\r\n <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n </Tsi-Rate-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-nested-prop -->\r\n <ng-template #displayNestedPropOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n else displayStatusColorBlock\r\n \">\r\n <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n [displayValue]=\"col.displayNestedPropertylabelField\">\r\n </Tsi-Display-Nested-Prop>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #displayStatusColorBlock>\r\n <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <span\r\n class=\"px-2 py-1 rounded text-white text-sm\"\r\n [style.background-color]=\"item[col.field]\">\r\n {{item[col.field]}}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n\r\n <ng-template #displayStatusValueColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n class=\"px-2 py-1 font-bold status-badge\"\r\n [style.background-color]=\"opt.colorHex\"\r\n [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n [ngClass]=\"{\r\n 'text-black bg-white': !opt.colorHex,\r\n 'text-white': opt.colorHex\r\n }\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n class=\"px-2 py-1 font-bold status-badge\">\r\n {{ item[col.field] }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-status-prop -->\r\n <ng-template #displayStatusColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n\r\n <span\r\n *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n class=\"status-badge font-bold\"\r\n [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n [style.padding-top]=\"'0.1rem'\"\r\n [style.padding-bottom]=\"'0.1rem'\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n class=\"status-badge font-bold\">\r\n {{ item[col.field] }}\r\n </span>\r\n \r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n \r\n <!-- display-nested-prop -->\r\n <ng-template #displayButtonBlock>\r\n <ng-container *ngIf=\"col.isButton; else displayImage\">\r\n <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n (click)=\"buttonClicked(item, col.field)\"\r\n [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-image -->\r\n <ng-template #displayImage>\r\n <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayTextEyeBlock\">\r\n <div class=\"h-2rem\">\r\n <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n [width]=\"'100%'\" [height]=\"'100%'\">\r\n </tsi-image-display>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-text-eye -->\r\n <ng-template #displayTextEyeBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.TEXT_DISPLAY;\r\n else moreActionsBlock\r\n \">\r\n <span>\r\n <span class=\"cursor-pointer pi pi-eye\" (click)=\"eyeClicked(item[col.field])\"></span>\r\n {{ truncateString(item[col.field], 50) }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- more actions -->\r\n <ng-template #moreActionsBlock>\r\n <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n <p-menu \r\n appendTo=\"body\" \r\n #menuMoreActions \r\n [model]=\"overflowActionsMenu\" \r\n [popup]=\"true\"\r\n styleClass=\"overflow-menu\"\r\n [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n \r\n <ng-template pTemplate=\"item\" let-menuItem>\r\n <a \r\n pRipple \r\n class=\"flex align-items-center p-menuitem-link\"\r\n [ngClass]=\"menuItem.styleClass\"\r\n (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n <i \r\n class=\"p-menuitem-icon\"\r\n [class]=\"menuItem.iconClass\" \r\n [ngClass]=\"menuItem.iconStyleClass\">\r\n </i>\r\n <span class=\"menu-label\">\r\n {{ menuItem.label | localize }}\r\n </span>\r\n </a>\r\n </ng-template>\r\n </p-menu>\r\n <p-button \r\n type=\"button\"\r\n icon=\"{{col.buttonIcon}}\"\r\n styleClass=\"{{col.styleClass}} overflow-btn\"\r\n (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n </p-button> \r\n\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Text-Box -->\r\n <ng-template #defaultTextOutputBlock>\r\n <ng-container>\r\n <span>\r\n {{ item[col.field] }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </ng-template>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"footer\">\r\n <tr>\r\n <td *ngIf=\"selectionMode == multipleGridSelectionMode\"></td>\r\n\r\n <ng-container *ngFor=\"let col of selectedColumns\">\r\n <td class=\"pr-0\" *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\">\r\n <div *ngIf=\"col.showSummary\">\r\n <!-- CURRENCY_SOCIETE_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Currency-Societe-Display>\r\n </div>\r\n\r\n <!-- INTEGER_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.INTEGER_DISPLAY\">\r\n <Tsi-Integer-Display [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Integer-Display>\r\n </div>\r\n\r\n <!-- RATE_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.RATE_DISPLAY\">\r\n <Tsi-Rate-Display [isFraction]=\"col.isFraction ?? false\" [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Rate-Display>\r\n </div>\r\n\r\n <!-- DECIMAL_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY\">\r\n <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col.field)\"\r\n [numOfDecimal]=\"col.numOfDecimal\">\r\n </Tsi-Decimal-Display>\r\n </div>\r\n\r\n <div *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Currency-Other-Display>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container> \r\n </tr>\r\n </ng-template>\r\n \r\n <ng-template pTemplate=\"summary\">\r\n {{ page.totalCount }} {{ \"records_label\" | localize }}\r\n <span *ngIf=\"colorful\">\r\n <span>View Grid</span>\r\n <span class=\"pl-2\">| SearchOnInit : {{ searchOnInit }}</span>\r\n <span class=\"pl-2\">| Pagination In Api : {{ isGridDataPagedInApi }}</span>\r\n </span>\r\n </ng-template>\r\n </p-table>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"_showCalenderView === true\" class=\"col-12\">\r\n <tsi-calender [schema]=\"calenderSchema\" [eventsData]=\"page.items\" [crudService]=\"crudService\"\r\n (dateRangeChange)=\"handleDateRangeChange($event)\" (eventClick)=\"handleCalendarEventClick($event)\"></tsi-calender>\r\n </div>\r\n\r\n <div *ngIf=\"_showCardView === true\" class=\"col-12\">\r\n <Tsi-card-list [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\">\r\n </Tsi-card-list>\r\n </div>\r\n\r\n <div *ngIf=\"_showKanbanView === true && !_showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n <Tsi-kanban [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\" [crudService]=\"crudService\">\r\n </Tsi-kanban>\r\n </div>\r\n\r\n <div *ngIf=\"_showKanbanView === true && _showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n <Tsi-kanban-workflow-etat [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n [page$]=\"page$\" [page]=\"page\" [descriminatorValue]=\"descriminatorValue\" (callSearch)=\"callSearchHandler($event)\">\r\n </Tsi-kanban-workflow-etat>\r\n </div>\r\n</div>", styles: [".p-button.p-button-icon-only.p-button-rounded{border-radius:50%;height:1rem}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.p-inputgroup.rtl-mode .p-inputgroup-addon:last-child,.p-inputgroup.rtl-mode button:last-child,.p-inputgroup.rtl-mode input:last-child,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:6px 0 0 6px/6px 0px 0px 6px!important}.p-inputgroup.ltr-mode .p-inputgroup-addon:last-child,.p-inputgroup.ltr-mode button:last-child,.p-inputgroup.ltr-mode input:last-child,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:0 6px 6px 0/0px 6px 6px 0px!important}.p-paginator .p-dropdown{height:auto;border:none;border-bottom:1px solid}.p-datatable .frozen-column{position:sticky;left:0;z-index:1;background:#fff}.frozen-column-ltr-mode{min-width:2rem;position:sticky;left:0;background-color:#fff}.frozen-column-rtl-mode{min-width:2rem;position:sticky;right:0;background-color:#fff}.disabled-column{background-color:#f5f5f5;color:#d3d3d3;pointer-events:none}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:max-content;width:100%;text-align:center;white-space:nowrap;border-radius:.4rem;padding:.1rem .2rem;font-weight:600;line-height:1.2;color:#fff;box-shadow:0 1px 2px #0000000d;transition:all .2s ease-in-out;cursor:default;transform-origin:top center;border-top-left-radius:inherit;border-bottom-right-radius:inherit}.status-badge:hover{transform:scale(1.06);box-shadow:0 2px 4px #0000001a;filter:brightness(1.2)}td span,td div{padding:0 .5rem}.custom-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.button-icon{width:1.5rem;height:1.5rem}.custom-button:hover{background-color:#f0f0f0}table{width:100%!important}.right-to-left{text-align:start}::ng-deep th.non-resizable-column .p-column-resizer{display:none!important;pointer-events:none!important}::ng-deep .cursor-follow{position:fixed;background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.85rem;z-index:1000;pointer-events:none;white-space:nowrap}::ng-deep .overflow-menu.p-menu-overlay{border-radius:8px;border:none;padding:.4rem;min-width:0!important;background:#fff;box-shadow:0 8px 24px #0000001f;animation:fadeScaleIn .12s ease-out}::ng-deep .overflow-menu .p-menuitem-link{padding:0}::ng-deep .overflow-menu-item{padding:.55rem .75rem;border-radius:8px;gap:.5rem;font-size:.85rem;white-space:nowrap;transition:all .15s ease}::ng-deep .overflow-menu-item:hover{background-color:#f5f7fa}::ng-deep .menu-icon{font-size:.9rem;width:18px;text-align:center;opacity:.8}::ng-deep .menu-label{font-weight:400}::ng-deep .overflow-btn{width:28px;height:28px;padding:0}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.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: i5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i5.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i5.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i16.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i6.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: 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: TsiButtonComponent, selector: "Tsi-Button", inputs: ["disabled", "text", "style", "tooltipText", "tooltipPosition", "buttonType", "icon", "styleClass", "iconSrc", "id", "iconWidth", "iconClass"], outputs: ["onClick", "rightClick"] }, { kind: "component", type: TsiSearchBoxComponent, selector: "tsi-search-box", inputs: ["searchFields", "businessClass", "descriminatorValue", "isRtlMode", "isSearchButtonDisabled", "entityInfo", "statusMetadata"], outputs: ["searchFieldsChange", "searchFieldsApplied", "keywordValueChanged", "statusFilterChanged", "workflowEtatFilterChanged", "comboBoxLabelChanged"] }, { kind: "component", type: TsiCardListComponent, selector: "Tsi-card-list", inputs: ["cardBusinessClass", "header", "id", "page", "page$"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiImageDisplayComponent, selector: "tsi-image-display", inputs: ["src", "alt", "width", "height", "isRounded", "headerTitles"] }, { kind: "component", type: TsiKanbanComponent, selector: "Tsi-kanban", inputs: ["cardBusinessClass", "header", "id", "page$", "crudService", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "component", type: TsiCalenderComponent, selector: "tsi-calender", inputs: ["crudService", "schema", "eventsData"], outputs: ["eventClick", "dateRangeChange"] }, { kind: "component", type: TsiKanbanWorkflowEtatComponent, selector: "Tsi-kanban-workflow-etat", inputs: ["cardBusinessClass", "header", "id", "page$", "descriminatorValue", "page"], outputs: ["buttonClicked", "callSearch"] }, { kind: "directive", type: PresentationDesignerDirectiveBase, selector: "[presentationDesignerBase]", inputs: ["presentationDesigner", "presentationDesignerBase"] }, { kind: "component", type: DisplayNestedPropComponent, selector: "Tsi-Display-Nested-Prop", inputs: ["id", "displayValue", "sourceUrl"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
|
|
8967
8970
|
trigger('slideInOut', [
|
|
8968
8971
|
state('in', style({
|
|
8969
8972
|
height: '*',
|
|
@@ -8995,7 +8998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8995
8998
|
})),
|
|
8996
8999
|
transition('in <=> out', animate('600ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
|
|
8997
9000
|
])
|
|
8998
|
-
], template: "<div class=\"grid\">\r\n\r\n <div class=\"col-12\" [@slideInOut]=\"showSearchField ? 'in' : 'out'\" *ngIf=\"showGlobalSearch\">\r\n <tsi-search-box \r\n [isRtlMode]=\"isRtlMode\" \r\n [(searchFields)]=\"searchFields\" \r\n [businessClass]=\"businessClass\"\r\n [entityInfo]=\"entityInfo\"\r\n [statusMetadata]=\"statusMetadata\"\r\n [descriminatorValue]=\"descriminatorValue\"\r\n (searchFieldsChange)=\"searchFieldsValueChanges($event)\" \r\n (keywordValueChanged)=\"keywordValueChanged($event)\"\r\n (searchFieldsApplied)=\"search($event)\"\r\n (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n (workflowEtatFilterChanged)=\"onWorkflowEtatFilterChanged($event)\"\r\n (comboBoxLabelChanged)=\"comboBoxLabelChanged($event)\">\r\n </tsi-search-box>\r\n </div>\r\n\r\n <div *ngIf=\"_showCalenderView === false && _showCardView === false && _showKanbanView === false\" class=\"col-12\">\r\n \r\n <p-table #dt \r\n [lazy]=\"isGridDataPagedInApi\" \r\n [lazyLoadOnInit]=\"searchOnInit\" \r\n [totalRecords]=\"page.totalCount\" \r\n [loading]=\"page.loading\" \r\n [reorderableColumns]=\"true\"\r\n [resizableColumns]=\"true\" \r\n [columns]=\"selectedColumns\" \r\n [value]=\"page.items\"\r\n [paginator]=\"true\" \r\n [scrollable]=\"true\" \r\n [(rows)]=\"page.pageSize\"\r\n [showCurrentPageReport]=\"true\" \r\n [globalFilterFields]=\"fields()\" \r\n [tableStyle]=\"{ 'min-width': '50rem' }\"\r\n [rowsPerPageOptions]=\"[1, 10, 25, 50]\" \r\n [sortMode]=\"sortMode\"\r\n [multiSortMeta]=\"sortMetas\" \r\n [selectAll]=\"selectAll\"\r\n [selectionMode]=\"selectionMode\" \r\n [(selection)]=\"selection\" \r\n (onLazyLoad)=\"lazyLoad($event)\"\r\n (onRowUnselect)=\"onSelectedItemsChanged()\"\r\n (selectAllChange)=\"onSelectAllChange($event)\" \r\n (onRowSelect)=\"onSelectedItemsChanged()\"\r\n columnResizeMode=\"expand\" \r\n dataKey=\"{{ key }}\" \r\n scrollHeight=\"600px\" \r\n styleClass=\"p-datatable-gridlines\" \r\n currentPageReportTemplate=\"{{ 'Showing' | localize }} {{getFirstElementIndex()}} {{\r\n 'to' | localize\r\n }} {last} {{ 'of' | localize }} \r\n {totalRecords} {{ 'entries' | localize }}\" \r\n >\r\n\r\n <ng-template pTemplate=\"caption\">\r\n <div class=\"flex justify-content-between align-items-center\">\r\n <div class=\"ml-2\">\r\n {{ header | localize }}\r\n </div>\r\n\r\n <div class=\"p-1 flex align-items-center\">\r\n <div *ngIf=\"showFilterButton\" presentationDesignerBase=\"grid_toggle_header_filters\">\r\n <Tsi-Button [icon]=\"filterIcon\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"filterTooltip\"\r\n styleClass=\"p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n (click)=\"toggleHeaderFilters()\"></Tsi-Button>\r\n </div>\r\n\r\n <div *ngIf=\"showHeaderFilters\" presentationDesignerBase=\"grid_toggle_header_filter_mode\">\r\n <Tsi-Button [icon]=\"filterModeIcon\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n [tooltipText]=\"filterModeTooltip\" [styleClass]=\"'ml-1 p-button-primary p-button-icon-only'\"\r\n (click)=\"toggleHeaderFiltersMode()\"></Tsi-Button>\r\n </div>\r\n\r\n <div presentationDesignerBase=\"grid_clear_filter_button\">\r\n <Tsi-Button [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"'icon-clear-filter'\"\r\n styleClass=\"ml-1 p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n (click)=\"onClearFilters()\" [iconSrc]=\"'assets/layout/images/icon/icon-clear-filter.svg'\">\r\n </Tsi-Button>\r\n </div>\r\n\r\n <div *ngIf=\"showExportButton\" presentationDesignerBase=\"grid_export_button\">\r\n <Tsi-Button icon=\"p-button-icon pi pi-file-excel\" (onClick)=\"exportExcel()\"\r\n styleClass=\"p-element p-button-success hover:shadow-6 ml-2 p-1 p-button p-component p-button-icon-only\"\r\n [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"XLS\"></Tsi-Button>\r\n </div>\r\n\r\n <p-multiSelect class=\"ml-1\" [options]=\"columns\" [ngModel]=\"selectedColumns\" optionLabel=\"translatedHeader\"\r\n selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" [style]=\"{ 'min-width': '180px' }\"\r\n placeholder=\"{{ 'choose_columns' | localize }}\" (ngModelChange)=\"onSelectedColumnsChange($event)\">\r\n </p-multiSelect>\r\n </div>\r\n\r\n <!-- <div> -->\r\n <!-- <button *ngIf=\"showGlobalSearch\" type=\"button\" pButton pRipple icon=\"pi pi-search\" (click)=\"search()\"></button> -->\r\n <!-- </div> -->\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\"\r\n [ngClass]=\"page.loading ? 'no-z-index' : 'z-index-checkbox'\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n style=\"padding: .3rem !important; width: 3rem;\">\r\n <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </th>\r\n \r\n <ng-container *ngFor=\"let col of columns\">\r\n <th *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.overflow)\"\r\n scope=\"col\" [style]=\"col.style\" pTooltip=\"{{ col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n [pSortableColumn]=\"(!col.isButton || !isOverflowColumn(col.field) || col.type == displayTypes.IMAGE_DISPLAY) ? \r\n col.field : null\"\r\n [pResizableColumnDisabled]=\"col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)\"\r\n [tooltipDisabled]=\"col.isButton || isOverflowColumn(col.field)\" \r\n [pReorderableColumnDisabled]=\"col.isButton || isOverflowColumn(col.field)\" pReorderableColumn\r\n pResizableColumn [ngStyle]=\"page.items.length > 0 ? col.headerColumnStyle : {}\"\r\n [class.disabled-column]=\"col.isButton || isOverflowColumn(col.field) || col.type === displayTypes.IMAGE_DISPLAY\" \r\n [ngClass]=\"[\r\n getHeaderClassColor(col.type),\r\n (col.isButton ) ? 'w-1rem' : '',\r\n (col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)) ? 'non-resizable-column' : '',\r\n ]\"\r\n [ngStyle]=\"page.items.length > 0 ? col.headerColumnStyle : {}\">\r\n\r\n <ng-container *ngIf=\"notInSpecifiedColumn(col.field)\">\r\n <span>\r\n <table class=\"p-0 m-0\">\r\n <tr>\r\n <td class=\"col p-0 m-0\" [ngClass]=\"{'w-1rem': col.isButton}\">\r\n {{ col.header | localize }}\r\n </td>\r\n <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\">\r\n <p-sortIcon \r\n *ngIf=\"col.type !== displayTypes.IMAGE_DISPLAY\"\r\n class=\"w-1rem m-0 p-0\"\r\n field=\"{{ col.field }}\"\r\n ></p-sortIcon>\r\n </td>\r\n </tr>\r\n </table>\r\n </span>\r\n </ng-container>\r\n </th>\r\n </ng-container>\r\n </tr>\r\n\r\n <tr *ngIf=\"showHeaderFilters\">\r\n <!-- <th scope=\"col\" style=\"width:3rem\"></th>\r\n <th scope=\"col\" style=\"width:3rem\"></th> -->\r\n <th [ngClass]=\"page.loading ? 'no-z-index' : ''\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n style=\"width: 4rem\"></th>\r\n <th style=\"overflow: inherit\" scope=\"col\" *ngFor=\"let col of columns\">\r\n <p-columnFilter [type]=\"col.filterInputType\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n [minFractionDigits]=\"col.numOfDecimal\" [maxFractionDigits]=\"col.numOfDecimal\" [showButtons]=\"false\"\r\n [matchMode]=\"filterMatchMode.EQUALS\">\r\n </p-columnFilter>\r\n </th>\r\n </tr>\r\n \r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n\r\n <!-- CASE : multiple selection -->\r\n <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\" *ngIf=\"\r\n selectionMode == multipleGridSelectionMode;\r\n else notMultipleSelectionModeBlock\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event,item)\" (dragenter)=\"onDragEnter($event)\"\r\n (dragleave)=\"onDragLeave($event)\">\r\n <td [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\" style=\"padding: .3rem !important;\">\r\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n </td>\r\n <!-- <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n (click)=\"edit(item)\"></button>\r\n </div>\r\n </td>\r\n <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n </div>\r\n </td> -->\r\n \r\n <ng-container *ngFor=\"let col of columns\">\r\n <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.overflow)\" [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\" [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n style=\"height: min-content; margin-left: -.5rem;\">\r\n <!-- Tsi-Currency-Societe-Input -->\r\n\r\n <div *ngIf=\"\r\n col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n else currencyOtherOutputBlock\r\n \">\r\n <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Societe-Display>\r\n </div>\r\n\r\n <!-- Tsi-Currency-Other-Input -->\r\n <ng-template #currencyOtherOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n else datePickerOutputBlock\r\n \">\r\n <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Other-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #datePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATE_DISPLAY;\r\n else dateTimePickerOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #dateTimePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATETIME_DISPLAY;\r\n else checkBoxOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-CheckBox -->\r\n <ng-template #checkBoxOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CHECKBOX_DISPLAY;\r\n else decimalOutputBlock\r\n \">\r\n <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Checkbox-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Decimal-Input -->\r\n <ng-template #decimalOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DECIMAL_DISPLAY;\r\n else integerOutputBlock\r\n \">\r\n <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n [numOfDecimal]=\"col.numOfDecimal\">\r\n </Tsi-Decimal-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Integer -->\r\n <ng-template #integerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.INTEGER_DISPLAY;\r\n else rateOutputBlock\r\n \">\r\n <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Integer-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Rate-Input -->\r\n <ng-template #rateOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.RATE_DISPLAY;\r\n else displayNestedPropOutputBlock\r\n \">\r\n <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n </Tsi-Rate-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-nested-prop -->\r\n <ng-template #displayNestedPropOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n else displayStatusColorBlock\r\n \">\r\n <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n [displayValue]=\"col.displayNestedPropertylabelField\">\r\n </Tsi-Display-Nested-Prop>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #displayStatusColorBlock>\r\n <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <span\r\n class=\"px-2 py-1 rounded text-white text-sm\"\r\n [style.background-color]=\"item[col.field]\">\r\n {{item[col.field]}}\r\n </span>\r\n </div> \r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #displayStatusValueColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n class=\"px-2 py-1 font-bold status-badge\"\r\n [style.background-color]=\"opt.colorHex\"\r\n [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n [ngClass]=\"{\r\n 'text-black bg-white': !opt.colorHex,\r\n 'text-white': opt.colorHex\r\n }\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n class=\"px-2 py-1 font-bold status-badge\">\r\n {{ item[col.field] }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-status-column -->\r\n <ng-template #displayStatusColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n\r\n <span\r\n *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n class=\"font-bold status-badge\"\r\n [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n [style.padding-top]=\"'0.1rem'\"\r\n [style.padding-bottom]=\"'0.1rem'\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n class=\"font-bold status-badge\">\r\n {{ item[col.field] }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-nested-prop -->\r\n <ng-template #displayButtonBlock>\r\n <ng-container *ngIf=\"col.isButton; else displayTextEyeBlock\" >\r\n <div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\"\r\n icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n (click)=\"buttonClicked(item, col.field)\" ></Tsi-Button>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-text-eye -->\r\n <ng-template #displayTextEyeBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.TEXT_DISPLAY;\r\n else moreActionsBlock\r\n \">\r\n <span>\r\n {{ item[col.field] }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- more actions -->\r\n <ng-template #moreActionsBlock>\r\n <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n <p-menu \r\n appendTo=\"body\" \r\n #menuMoreActions \r\n [model]=\"overflowActionsMenu\" \r\n [popup]=\"true\"\r\n styleClass=\"overflow-menu\"\r\n [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n \r\n <ng-template pTemplate=\"item\" let-menuItem>\r\n <a \r\n pRipple \r\n class=\"flex align-items-center p-menuitem-link\"\r\n [ngClass]=\"menuItem.styleClass\"\r\n (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n <i \r\n class=\"p-menuitem-icon\"\r\n [class]=\"menuItem.iconClass\" \r\n [ngClass]=\"menuItem.iconStyleClass\">\r\n </i>\r\n <span class=\"menu-label\">\r\n {{ menuItem.label | localize }}\r\n </span>\r\n </a>\r\n </ng-template>\r\n </p-menu>\r\n <p-button \r\n type=\"button\"\r\n icon=\"{{col.buttonIcon}}\"\r\n styleClass=\"{{col.styleClass}} overflow-btn\"\r\n (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n </p-button> \r\n\r\n <!--<div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\"\r\n icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\" ></Tsi-Button>\r\n </div>-->\r\n\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Text-Box -->\r\n <ng-template #defaultTextOutputBlock>\r\n <ng-container>\r\n <span>\r\n {{ item[col.field] }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n\r\n <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n class=\"drag-message cursor-follow\">\r\n {{ \"Jointure\" | localize }}\r\n </div>\r\n </tr>\r\n\r\n \r\n <!-- CASE : single or none selection -->\r\n <ng-template #notMultipleSelectionModeBlock>\r\n <ng-container>\r\n <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\"\r\n [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"index\" id=\"tsi-grid-row-{{index}}\">\r\n\r\n <!-- <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n (click)=\"edit(item)\"></button>\r\n </div>\r\n </td>\r\n <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n </div>\r\n </td> -->\r\n\r\n <ng-container *ngFor=\"let col of columns\">\r\n\r\n <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.overflow)\" [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\" style=\"height: min-content; background: white;\"\r\n [ngClass]=\"{\r\n 'w-1rem': col.isButton,\r\n }\">\r\n\r\n <div *ngIf=\"\r\n col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n else currencyOtherOutputBlock\r\n \">\r\n <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Societe-Display>\r\n </div>\r\n\r\n <!-- Tsi-Currency-Other-Input -->\r\n <ng-template #currencyOtherOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n else datePickerOutputBlock\r\n \">\r\n <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Other-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #datePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATE_DISPLAY;\r\n else dateTimePickerOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #dateTimePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATETIME_DISPLAY;\r\n else checkBoxOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n\r\n <!-- Tsi-CheckBox -->\r\n <ng-template #checkBoxOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CHECKBOX_DISPLAY;\r\n else decimalOutputBlock\r\n \">\r\n <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Checkbox-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Decimal-Input -->\r\n <ng-template #decimalOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DECIMAL_DISPLAY;\r\n else integerOutputBlock\r\n \">\r\n <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n [numOfDecimal]=\"col.numOfDecimal\">\r\n </Tsi-Decimal-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Integer -->\r\n <ng-template #integerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.INTEGER_DISPLAY;\r\n else rateOutputBlock\r\n \">\r\n <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Integer-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Rate-Input -->\r\n <ng-template #rateOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.RATE_DISPLAY;\r\n else displayNestedPropOutputBlock\r\n \">\r\n <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n </Tsi-Rate-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-nested-prop -->\r\n <ng-template #displayNestedPropOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n else displayStatusColorBlock\r\n \">\r\n <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n [displayValue]=\"col.displayNestedPropertylabelField\">\r\n </Tsi-Display-Nested-Prop>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #displayStatusColorBlock>\r\n <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <span\r\n class=\"px-2 py-1 rounded text-white text-sm\"\r\n [style.background-color]=\"item[col.field]\">\r\n {{item[col.field]}}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n\r\n <ng-template #displayStatusValueColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n class=\"px-2 py-1 font-bold status-badge\"\r\n [style.background-color]=\"opt.colorHex\"\r\n [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n [ngClass]=\"{\r\n 'text-black bg-white': !opt.colorHex,\r\n 'text-white': opt.colorHex\r\n }\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n class=\"px-2 py-1 font-bold status-badge\">\r\n {{ item[col.field] }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-status-prop -->\r\n <ng-template #displayStatusColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n\r\n <span\r\n *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n class=\"status-badge font-bold\"\r\n [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n [style.padding-top]=\"'0.1rem'\"\r\n [style.padding-bottom]=\"'0.1rem'\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n class=\"status-badge font-bold\">\r\n {{ item[col.field] }}\r\n </span>\r\n \r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n \r\n <!-- display-nested-prop -->\r\n <ng-template #displayButtonBlock>\r\n <ng-container *ngIf=\"col.isButton; else displayImage\">\r\n <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n (click)=\"buttonClicked(item, col.field)\"\r\n [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-image -->\r\n <ng-template #displayImage>\r\n <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayTextEyeBlock\">\r\n <div class=\"h-2rem\">\r\n <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n [width]=\"'100%'\" [height]=\"'100%'\">\r\n </tsi-image-display>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-text-eye -->\r\n <ng-template #displayTextEyeBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.TEXT_DISPLAY;\r\n else moreActionsBlock\r\n \">\r\n <span>\r\n <span class=\"cursor-pointer pi pi-eye\" (click)=\"eyeClicked(item[col.field])\"></span>\r\n {{ truncateString(item[col.field], 50) }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- more actions -->\r\n <ng-template #moreActionsBlock>\r\n <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n <p-menu \r\n appendTo=\"body\" \r\n #menuMoreActions \r\n [model]=\"overflowActionsMenu\" \r\n [popup]=\"true\"\r\n styleClass=\"overflow-menu\"\r\n [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n \r\n <ng-template pTemplate=\"item\" let-menuItem>\r\n <a \r\n pRipple \r\n class=\"flex align-items-center p-menuitem-link\"\r\n [ngClass]=\"menuItem.styleClass\"\r\n (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n <i \r\n class=\"p-menuitem-icon\"\r\n [class]=\"menuItem.iconClass\" \r\n [ngClass]=\"menuItem.iconStyleClass\">\r\n </i>\r\n <span class=\"menu-label\">\r\n {{ menuItem.label | localize }}\r\n </span>\r\n </a>\r\n </ng-template>\r\n </p-menu>\r\n <p-button \r\n type=\"button\"\r\n icon=\"{{col.buttonIcon}}\"\r\n styleClass=\"{{col.styleClass}} overflow-btn\"\r\n (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n </p-button> \r\n\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Text-Box -->\r\n <ng-template #defaultTextOutputBlock>\r\n <ng-container>\r\n <span>\r\n {{ item[col.field] }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </ng-template>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"footer\">\r\n <tr>\r\n <td *ngIf=\"selectionMode == multipleGridSelectionMode\"></td>\r\n <td class=\"pr-0\" *ngFor=\"let col of selectedColumns\">\r\n <div *ngIf=\"col.showSummary\">\r\n <!-- CURRENCY_SOCIETE_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Currency-Societe-Display>\r\n </div>\r\n\r\n <!-- INTEGER_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.INTEGER_DISPLAY\">\r\n <Tsi-Integer-Display [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Integer-Display>\r\n </div>\r\n\r\n <!-- RATE_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.RATE_DISPLAY\">\r\n <Tsi-Rate-Display [isFraction]=\"col.isFraction ?? false\" [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Rate-Display>\r\n </div>\r\n\r\n <!-- DECIMAL_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY\">\r\n <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col.field)\"\r\n [numOfDecimal]=\"col.numOfDecimal\">\r\n </Tsi-Decimal-Display>\r\n </div>\r\n\r\n <div *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Currency-Other-Display>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n \r\n <ng-template pTemplate=\"summary\">\r\n {{ page.totalCount }} {{ \"records_label\" | localize }}\r\n <span *ngIf=\"colorful\">\r\n <span>View Grid</span>\r\n <span class=\"pl-2\">| SearchOnInit : {{ searchOnInit }}</span>\r\n <span class=\"pl-2\">| Pagination In Api : {{ isGridDataPagedInApi }}</span>\r\n </span>\r\n </ng-template>\r\n </p-table>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"_showCalenderView === true\" class=\"col-12\">\r\n <tsi-calender [schema]=\"calenderSchema\" [eventsData]=\"page.items\" [crudService]=\"crudService\"\r\n (dateRangeChange)=\"handleDateRangeChange($event)\" (eventClick)=\"handleCalendarEventClick($event)\"></tsi-calender>\r\n </div>\r\n\r\n <div *ngIf=\"_showCardView === true\" class=\"col-12\">\r\n <Tsi-card-list [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\">\r\n </Tsi-card-list>\r\n </div>\r\n\r\n <div *ngIf=\"_showKanbanView === true && !_showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n <Tsi-kanban [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\" [crudService]=\"crudService\">\r\n </Tsi-kanban>\r\n </div>\r\n\r\n <div *ngIf=\"_showKanbanView === true && _showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n <Tsi-kanban-workflow-etat [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n [page$]=\"page$\" [page]=\"page\" [descriminatorValue]=\"descriminatorValue\" (callSearch)=\"callSearchHandler($event)\">\r\n </Tsi-kanban-workflow-etat>\r\n </div>\r\n</div>", styles: [".p-button.p-button-icon-only.p-button-rounded{border-radius:50%;height:1rem}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.p-inputgroup.rtl-mode .p-inputgroup-addon:last-child,.p-inputgroup.rtl-mode button:last-child,.p-inputgroup.rtl-mode input:last-child,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:6px 0 0 6px/6px 0px 0px 6px!important}.p-inputgroup.ltr-mode .p-inputgroup-addon:last-child,.p-inputgroup.ltr-mode button:last-child,.p-inputgroup.ltr-mode input:last-child,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:0 6px 6px 0/0px 6px 6px 0px!important}.p-paginator .p-dropdown{height:auto;border:none;border-bottom:1px solid}.p-datatable .frozen-column{position:sticky;left:0;z-index:1;background:#fff}.frozen-column-ltr-mode{min-width:2rem;position:sticky;left:0;background-color:#fff}.frozen-column-rtl-mode{min-width:2rem;position:sticky;right:0;background-color:#fff}.disabled-column{background-color:#f5f5f5;color:#d3d3d3;pointer-events:none}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:max-content;width:100%;text-align:center;white-space:nowrap;border-radius:.4rem;padding:.1rem .2rem;font-weight:600;line-height:1.2;color:#fff;box-shadow:0 1px 2px #0000000d;transition:all .2s ease-in-out;cursor:default;transform-origin:top center;border-top-left-radius:inherit;border-bottom-right-radius:inherit}.status-badge:hover{transform:scale(1.06);box-shadow:0 2px 4px #0000001a;filter:brightness(1.2)}td span,td div{padding:0 .5rem}.custom-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.button-icon{width:1.5rem;height:1.5rem}.custom-button:hover{background-color:#f0f0f0}table{width:100%!important}.right-to-left{text-align:start}::ng-deep th.non-resizable-column .p-column-resizer{display:none!important;pointer-events:none!important}::ng-deep .cursor-follow{position:fixed;background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.85rem;z-index:1000;pointer-events:none;white-space:nowrap}::ng-deep .overflow-menu.p-menu-overlay{border-radius:8px;border:none;padding:.4rem;min-width:0!important;background:#fff;box-shadow:0 8px 24px #0000001f;animation:fadeScaleIn .12s ease-out}::ng-deep .overflow-menu .p-menuitem-link{padding:0}::ng-deep .overflow-menu-item{padding:.55rem .75rem;border-radius:8px;gap:.5rem;font-size:.85rem;white-space:nowrap;transition:all .15s ease}::ng-deep .overflow-menu-item:hover{background-color:#f5f7fa}::ng-deep .menu-icon{font-size:.9rem;width:18px;text-align:center;opacity:.8}::ng-deep .menu-label{font-weight:400}::ng-deep .overflow-btn{width:28px;height:28px;padding:0}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"] }]
|
|
9001
|
+
], template: "<div class=\"grid\">\r\n\r\n <div class=\"col-12\" [@slideInOut]=\"showSearchField ? 'in' : 'out'\" *ngIf=\"showGlobalSearch\">\r\n <tsi-search-box \r\n [isRtlMode]=\"isRtlMode\" \r\n [(searchFields)]=\"searchFields\" \r\n [businessClass]=\"businessClass\"\r\n [entityInfo]=\"entityInfo\"\r\n [statusMetadata]=\"statusMetadata\"\r\n [descriminatorValue]=\"descriminatorValue\"\r\n (searchFieldsChange)=\"searchFieldsValueChanges($event)\" \r\n (keywordValueChanged)=\"keywordValueChanged($event)\"\r\n (searchFieldsApplied)=\"search($event)\"\r\n (statusFilterChanged)=\"onStatusFilterChanged($event)\"\r\n (workflowEtatFilterChanged)=\"onWorkflowEtatFilterChanged($event)\"\r\n (comboBoxLabelChanged)=\"comboBoxLabelChanged($event)\">\r\n </tsi-search-box>\r\n </div>\r\n\r\n <div *ngIf=\"_showCalenderView === false && _showCardView === false && _showKanbanView === false\" class=\"col-12\">\r\n \r\n <p-table #dt \r\n [lazy]=\"isGridDataPagedInApi\" \r\n [lazyLoadOnInit]=\"searchOnInit\" \r\n [totalRecords]=\"page.totalCount\" \r\n [loading]=\"page.loading\" \r\n [reorderableColumns]=\"true\"\r\n [resizableColumns]=\"true\" \r\n [columns]=\"selectedColumns\" \r\n [value]=\"page.items\"\r\n [paginator]=\"true\" \r\n [scrollable]=\"true\" \r\n [(rows)]=\"page.pageSize\"\r\n [showCurrentPageReport]=\"true\" \r\n [globalFilterFields]=\"fields()\" \r\n [tableStyle]=\"{ 'min-width': '50rem' }\"\r\n [rowsPerPageOptions]=\"[1, 10, 25, 50]\" \r\n [sortMode]=\"sortMode\"\r\n [multiSortMeta]=\"sortMetas\" \r\n [selectAll]=\"selectAll\"\r\n [selectionMode]=\"selectionMode\" \r\n [(selection)]=\"selection\" \r\n (onLazyLoad)=\"lazyLoad($event)\"\r\n (onRowUnselect)=\"onSelectedItemsChanged()\"\r\n (selectAllChange)=\"onSelectAllChange($event)\" \r\n (onRowSelect)=\"onSelectedItemsChanged()\"\r\n columnResizeMode=\"expand\" \r\n dataKey=\"{{ key }}\" \r\n scrollHeight=\"600px\" \r\n styleClass=\"p-datatable-gridlines\" \r\n currentPageReportTemplate=\"{{ 'Showing' | localize }} {{getFirstElementIndex()}} {{\r\n 'to' | localize\r\n }} {last} {{ 'of' | localize }} \r\n {totalRecords} {{ 'entries' | localize }}\" \r\n >\r\n\r\n <ng-template pTemplate=\"caption\">\r\n <div class=\"flex justify-content-between align-items-center\">\r\n <div class=\"ml-2\">\r\n {{ header | localize }}\r\n </div>\r\n\r\n <div class=\"p-1 flex align-items-center\">\r\n <div *ngIf=\"showFilterButton\" presentationDesignerBase=\"grid_toggle_header_filters\">\r\n <Tsi-Button [icon]=\"filterIcon\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"filterTooltip\"\r\n styleClass=\"p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n (click)=\"toggleHeaderFilters()\"></Tsi-Button>\r\n </div>\r\n\r\n <div *ngIf=\"showHeaderFilters\" presentationDesignerBase=\"grid_toggle_header_filter_mode\">\r\n <Tsi-Button [icon]=\"filterModeIcon\" [tooltipPosition]=\"tooltipPosition.Top\"\r\n [tooltipText]=\"filterModeTooltip\" [styleClass]=\"'ml-1 p-button-primary p-button-icon-only'\"\r\n (click)=\"toggleHeaderFiltersMode()\"></Tsi-Button>\r\n </div>\r\n\r\n <div presentationDesignerBase=\"grid_clear_filter_button\">\r\n <Tsi-Button [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"'icon-clear-filter'\"\r\n styleClass=\"ml-1 p-element hover:shadow-6 p-button-primary p-button p-component p-button-icon-only\"\r\n (click)=\"onClearFilters()\" [iconSrc]=\"'assets/layout/images/icon/icon-clear-filter.svg'\">\r\n </Tsi-Button>\r\n </div>\r\n\r\n <div *ngIf=\"showExportButton\" presentationDesignerBase=\"grid_export_button\">\r\n <Tsi-Button icon=\"p-button-icon pi pi-file-excel\" (onClick)=\"exportExcel()\"\r\n styleClass=\"p-element p-button-success hover:shadow-6 ml-2 p-1 p-button p-component p-button-icon-only\"\r\n [tooltipPosition]=\"tooltipPosition.Top\" tooltipText=\"XLS\"></Tsi-Button>\r\n </div>\r\n\r\n <p-multiSelect class=\"ml-1\" [options]=\"columns\" [ngModel]=\"selectedColumns\" optionLabel=\"translatedHeader\"\r\n selectedItemsLabel=\"{0} {{ 'columns_selected' | localize }}\" [style]=\"{ 'min-width': '180px' }\"\r\n placeholder=\"{{ 'choose_columns' | localize }}\" (ngModelChange)=\"onSelectedColumnsChange($event)\">\r\n </p-multiSelect>\r\n </div>\r\n\r\n <!-- <div> -->\r\n <!-- <button *ngIf=\"showGlobalSearch\" type=\"button\" pButton pRipple icon=\"pi pi-search\" (click)=\"search()\"></button> -->\r\n <!-- </div> -->\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\"\r\n [ngClass]=\"page.loading ? 'no-z-index' : 'z-index-checkbox'\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n style=\"padding: .3rem !important; width: 3rem;\">\r\n <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </th>\r\n \r\n <ng-container *ngFor=\"let col of columns\">\r\n <th *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\"\r\n scope=\"col\" [style]=\"col.style\" pTooltip=\"{{ col.toolTipText | localize }}\" tooltipPosition=\"top\"\r\n [pSortableColumn]=\"(!col.isButton || !isOverflowColumn(col.field) || col.type == displayTypes.IMAGE_DISPLAY) ? \r\n col.field : null\"\r\n [pResizableColumnDisabled]=\"col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)\"\r\n [tooltipDisabled]=\"col.isButton || isOverflowColumn(col.field)\" \r\n [pReorderableColumnDisabled]=\"col.isButton || isOverflowColumn(col.field)\" pReorderableColumn\r\n pResizableColumn [ngStyle]=\"page.items.length > 0 ? col.headerColumnStyle : {}\"\r\n [class.disabled-column]=\"col.isButton || isOverflowColumn(col.field) || col.type === displayTypes.IMAGE_DISPLAY\" \r\n [ngClass]=\"[\r\n getHeaderClassColor(col.type),\r\n (col.isButton ) ? 'w-1rem' : '',\r\n (col.isButton || col.type === displayTypes.IMAGE_DISPLAY || isOverflowColumn(col.field)) ? 'non-resizable-column' : '',\r\n ]\"\r\n [ngStyle]=\"page.items.length > 0 ? col.headerColumnStyle : {}\">\r\n\r\n <ng-container *ngIf=\"notInSpecifiedColumn(col.field)\">\r\n <span>\r\n <table class=\"p-0 m-0\">\r\n <tr>\r\n <td class=\"col p-0 m-0\" [ngClass]=\"{'w-1rem': col.isButton}\">\r\n {{ col.header | localize }}\r\n </td>\r\n <td class=\"col-fixed p-0 m-0\" style=\"width: 1rem\">\r\n <p-sortIcon \r\n *ngIf=\"col.type !== displayTypes.IMAGE_DISPLAY\"\r\n class=\"w-1rem m-0 p-0\"\r\n field=\"{{ col.field }}\"\r\n ></p-sortIcon>\r\n </td>\r\n </tr>\r\n </table>\r\n </span>\r\n </ng-container>\r\n </th>\r\n </ng-container>\r\n </tr>\r\n\r\n <tr *ngIf=\"showHeaderFilters\">\r\n <!-- <th scope=\"col\" style=\"width:3rem\"></th>\r\n <th scope=\"col\" style=\"width:3rem\"></th> -->\r\n <th [ngClass]=\"page.loading ? 'no-z-index' : ''\" *ngIf=\"selectionMode == multipleGridSelectionMode\"\r\n style=\"width: 4rem\"></th>\r\n <th style=\"overflow: inherit\" scope=\"col\" *ngFor=\"let col of columns\">\r\n <p-columnFilter [type]=\"col.filterInputType\" [field]=\"col.field\" [display]=\"changeHeaderFiltersMode\"\r\n [minFractionDigits]=\"col.numOfDecimal\" [maxFractionDigits]=\"col.numOfDecimal\" [showButtons]=\"false\"\r\n [matchMode]=\"filterMatchMode.EQUALS\">\r\n </p-columnFilter>\r\n </th>\r\n </tr>\r\n \r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"body\" let-item let-columns=\"columns\" let-index=\"rowIndex\">\r\n\r\n <!-- CASE : multiple selection -->\r\n <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\" *ngIf=\"\r\n selectionMode == multipleGridSelectionMode;\r\n else notMultipleSelectionModeBlock\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event,item)\" (dragenter)=\"onDragEnter($event)\"\r\n (dragleave)=\"onDragLeave($event)\">\r\n <td [ngStyle]=\"page.items.length > 0 ? getCheckboxStyle() : {}\" style=\"padding: .3rem !important;\">\r\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n </td>\r\n <!-- <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n (click)=\"edit(item)\"></button>\r\n </div>\r\n </td>\r\n <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n </div>\r\n </td> -->\r\n \r\n <ng-container *ngFor=\"let col of columns\">\r\n <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\" [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n style=\"height: min-content; margin-left: -.5rem;\">\r\n <!-- Tsi-Currency-Societe-Input -->\r\n\r\n <div *ngIf=\"\r\n col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n else currencyOtherOutputBlock\r\n \">\r\n <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Societe-Display>\r\n </div>\r\n\r\n <!-- Tsi-Currency-Other-Input -->\r\n <ng-template #currencyOtherOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n else datePickerOutputBlock\r\n \">\r\n <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Other-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #datePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATE_DISPLAY;\r\n else dateTimePickerOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #dateTimePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATETIME_DISPLAY;\r\n else checkBoxOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-CheckBox -->\r\n <ng-template #checkBoxOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CHECKBOX_DISPLAY;\r\n else decimalOutputBlock\r\n \">\r\n <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Checkbox-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Decimal-Input -->\r\n <ng-template #decimalOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DECIMAL_DISPLAY;\r\n else integerOutputBlock\r\n \">\r\n <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n [numOfDecimal]=\"col.numOfDecimal\">\r\n </Tsi-Decimal-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Integer -->\r\n <ng-template #integerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.INTEGER_DISPLAY;\r\n else rateOutputBlock\r\n \">\r\n <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Integer-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Rate-Input -->\r\n <ng-template #rateOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.RATE_DISPLAY;\r\n else displayNestedPropOutputBlock\r\n \">\r\n <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n </Tsi-Rate-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-nested-prop -->\r\n <ng-template #displayNestedPropOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n else displayStatusColorBlock\r\n \">\r\n <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n [displayValue]=\"col.displayNestedPropertylabelField\">\r\n </Tsi-Display-Nested-Prop>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #displayStatusColorBlock>\r\n <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <span\r\n class=\"px-2 py-1 rounded text-white text-sm\"\r\n [style.background-color]=\"item[col.field]\">\r\n {{item[col.field]}}\r\n </span>\r\n </div> \r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #displayStatusValueColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n class=\"px-2 py-1 font-bold status-badge\"\r\n [style.background-color]=\"opt.colorHex\"\r\n [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n [ngClass]=\"{\r\n 'text-black bg-white': !opt.colorHex,\r\n 'text-white': opt.colorHex\r\n }\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n class=\"px-2 py-1 font-bold status-badge\">\r\n {{ item[col.field] }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-status-column -->\r\n <ng-template #displayStatusColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n\r\n <span\r\n *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n class=\"font-bold status-badge\"\r\n [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n [style.padding-top]=\"'0.1rem'\"\r\n [style.padding-bottom]=\"'0.1rem'\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n class=\"font-bold status-badge\">\r\n {{ item[col.field] }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-nested-prop -->\r\n <ng-template #displayButtonBlock>\r\n <ng-container *ngIf=\"col.isButton; else displayTextEyeBlock\" >\r\n <div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\"\r\n icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n (click)=\"buttonClicked(item, col.field)\" ></Tsi-Button>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-text-eye -->\r\n <ng-template #displayTextEyeBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.TEXT_DISPLAY;\r\n else moreActionsBlock\r\n \">\r\n <span>\r\n {{ item[col.field] }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- more actions -->\r\n <ng-template #moreActionsBlock>\r\n <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n <p-menu \r\n appendTo=\"body\" \r\n #menuMoreActions \r\n [model]=\"overflowActionsMenu\" \r\n [popup]=\"true\"\r\n styleClass=\"overflow-menu\"\r\n [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n \r\n <ng-template pTemplate=\"item\" let-menuItem>\r\n <a \r\n pRipple \r\n class=\"flex align-items-center p-menuitem-link\"\r\n [ngClass]=\"menuItem.styleClass\"\r\n (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n <i \r\n class=\"p-menuitem-icon\"\r\n [class]=\"menuItem.iconClass\" \r\n [ngClass]=\"menuItem.iconStyleClass\">\r\n </i>\r\n <span class=\"menu-label\">\r\n {{ menuItem.label | localize }}\r\n </span>\r\n </a>\r\n </ng-template>\r\n </p-menu>\r\n <p-button \r\n type=\"button\"\r\n icon=\"{{col.buttonIcon}}\"\r\n styleClass=\"{{col.styleClass}} overflow-btn\"\r\n (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n </p-button> \r\n\r\n <!--<div class=\"align-items-center frozen-column-rtl-mode justify-content-center p-2\">\r\n <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\"\r\n icon=\"{{ col.buttonIcon }}\" [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n [text]=\"col.buttonLabel ? col.buttonLabel : item[col.field]\"\r\n (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\" ></Tsi-Button>\r\n </div>-->\r\n\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Text-Box -->\r\n <ng-template #defaultTextOutputBlock>\r\n <ng-container>\r\n <span>\r\n {{ item[col.field] }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n\r\n <div *ngIf=\"isDragOver\" [ngStyle]=\"{ left: messagePosition.x + 'px', top: messagePosition.y + 'px' }\"\r\n class=\"drag-message cursor-follow\">\r\n {{ \"Jointure\" | localize }}\r\n </div>\r\n </tr>\r\n\r\n \r\n <!-- CASE : single or none selection -->\r\n <ng-template #notMultipleSelectionModeBlock>\r\n <ng-container>\r\n <tr [ngStyle]=\"item.color && item.color !== '' ? {'background-color': item.color} : {}\"\r\n [pSelectableRow]=\"item\" [pSelectableRowIndex]=\"index\" id=\"tsi-grid-row-{{index}}\">\r\n\r\n <!-- <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-pencil\" class=\"p-button-rounded p-button-text\"\r\n (click)=\"edit(item)\"></button>\r\n </div>\r\n </td>\r\n <td class=\"p-1\">\r\n <div class=\"flex align-items-center justify-content-center p-0\">\r\n <button pButton pRipple type=\"button\" icon=\"pi pi-trash\"\r\n class=\"p-button-rounded p-button-text p-button-danger\" (click)=\"delete(item)\"></button>\r\n </div>\r\n </td> -->\r\n\r\n <ng-container *ngFor=\"let col of columns\">\r\n\r\n <td *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\" [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\" \r\n style=\"height: min-content; background: white;\"\r\n [ngClass]=\"{\r\n 'w-1rem': col.isButton,\r\n }\">\r\n\r\n <div *ngIf=\"\r\n col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY;\r\n else currencyOtherOutputBlock\r\n \">\r\n <Tsi-Currency-Societe-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Societe-Display>\r\n </div>\r\n\r\n <!-- Tsi-Currency-Other-Input -->\r\n <ng-template #currencyOtherOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CURRENCY_OTHER_DISPLAY;\r\n else datePickerOutputBlock\r\n \">\r\n <Tsi-Currency-Other-Display [currency]=\"col.currencyCode\" [inputData]=\"item[col.field]\">\r\n </Tsi-Currency-Other-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #datePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATE_DISPLAY;\r\n else dateTimePickerOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Date-Picker -->\r\n <ng-template #dateTimePickerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DATETIME_DISPLAY;\r\n else checkBoxOutputBlock\r\n \">\r\n <Tsi-Date-Display [inputData]=\"item[col.field]\" [showTime]=\"true\">\r\n </Tsi-Date-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n\r\n <!-- Tsi-CheckBox -->\r\n <ng-template #checkBoxOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.CHECKBOX_DISPLAY;\r\n else decimalOutputBlock\r\n \">\r\n <Tsi-Checkbox-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Checkbox-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Decimal-Input -->\r\n <ng-template #decimalOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.DECIMAL_DISPLAY;\r\n else integerOutputBlock\r\n \">\r\n <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"item[col.field]\"\r\n [numOfDecimal]=\"col.numOfDecimal\">\r\n </Tsi-Decimal-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Integer -->\r\n <ng-template #integerOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.INTEGER_DISPLAY;\r\n else rateOutputBlock\r\n \">\r\n <Tsi-Integer-Display [inputData]=\"item[col.field]\">\r\n </Tsi-Integer-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Rate-Input -->\r\n <ng-template #rateOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.RATE_DISPLAY;\r\n else displayNestedPropOutputBlock\r\n \">\r\n <Tsi-Rate-Display [isFraction]=\"col.isFraction\" [inputData]=\"item[col.field]\">\r\n </Tsi-Rate-Display>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-nested-prop -->\r\n <ng-template #displayNestedPropOutputBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.NESTED_PROP_DISPLAY;\r\n else displayStatusColorBlock\r\n \">\r\n <Tsi-Display-Nested-Prop [sourceUrl]=\"col.displayNestedPropertySourceUrl\" [id]=\"item[col.field]\"\r\n [displayValue]=\"col.displayNestedPropertylabelField\">\r\n </Tsi-Display-Nested-Prop>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #displayStatusColorBlock>\r\n <ng-container *ngIf=\"col.isStatusColor; else displayStatusValueColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <span\r\n class=\"px-2 py-1 rounded text-white text-sm\"\r\n [style.background-color]=\"item[col.field]\">\r\n {{item[col.field]}}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n\r\n <ng-template #displayStatusValueColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumnValue; else displayStatusColumnBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && getStatusOptionForStatusHistory(item[col.field]) as opt\"\r\n class=\"px-2 py-1 font-bold status-badge\"\r\n [style.background-color]=\"opt.colorHex\"\r\n [style.color]=\"opt.colorHex ? 'white' : 'black'\"\r\n [ngClass]=\"{\r\n 'text-black bg-white': !opt.colorHex,\r\n 'text-white': opt.colorHex\r\n }\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadataForStatusHistory && !getStatusOptionForStatusHistory(item[col.field])\"\r\n class=\"px-2 py-1 font-bold status-badge\">\r\n {{ item[col.field] }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-status-prop -->\r\n <ng-template #displayStatusColumnBlock>\r\n <ng-container *ngIf=\"col.isStatusColumn; else displayButtonBlock\">\r\n <div class=\"align-items-center justify-content-center p-2\">\r\n <!--<p-tag \r\n [value]=\"item[col.field]\"\r\n [style.backgroundColor]=\"getStatusColor(item[col.field])\">\r\n </p-tag>-->\r\n\r\n <span\r\n *ngIf=\"statusMetadata && getStatusOption(item[col.field]) as opt\"\r\n class=\"status-badge font-bold\"\r\n [style.background-color]=\"lightenColor(opt.colorHex)\"\r\n [style.color]=\"getReadableTextColor(opt.colorHex)\"\r\n [style.padding-top]=\"'0.1rem'\"\r\n [style.padding-bottom]=\"'0.1rem'\"\r\n >\r\n {{ opt.translatedLabel }}\r\n </span>\r\n <span\r\n *ngIf=\"statusMetadata && !getStatusOption(item[col.field])\"\r\n class=\"status-badge font-bold\">\r\n {{ item[col.field] }}\r\n </span>\r\n \r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n \r\n <!-- display-nested-prop -->\r\n <ng-template #displayButtonBlock>\r\n <ng-container *ngIf=\"col.isButton; else displayImage\">\r\n <div [ngStyle]=\"page.items.length > 0 ? col.ngStyle : {}\"\r\n [ngClass]=\"page.loading ? 'no-z-index' : ''\"\r\n class=\"flex align-items-center frozen-column-rtl-mode justify-content-center p-0\">\r\n <Tsi-Button [styleClass]=\"col.styleClass\" type=\"button\" icon=\"{{ col.buttonIcon }}\"\r\n [tooltipPosition]=\"tooltipPosition.Top\" [tooltipText]=\"col.toolTipText\"\r\n (click)=\"buttonClicked(item, col.field)\"\r\n [text]=\"col.isIconButton ? '' : (col.buttonLabel ?? item[col.field])\"></Tsi-Button>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-image -->\r\n <ng-template #displayImage>\r\n <ng-container *ngIf=\"col.type == displayTypes.IMAGE_DISPLAY; else displayTextEyeBlock\">\r\n <div class=\"h-2rem\">\r\n <tsi-image-display [headerTitles]=\"getHeaderTitles(col.headerTitles, item)\"\r\n [isRounded]=\"col.isRounded\" [src]=\"item[col.field]\" [alt]=\"col.header || 'image'\"\r\n [width]=\"'100%'\" [height]=\"'100%'\">\r\n </tsi-image-display>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- display-text-eye -->\r\n <ng-template #displayTextEyeBlock>\r\n <ng-container *ngIf=\"\r\n col.type == displayTypes.TEXT_DISPLAY;\r\n else moreActionsBlock\r\n \">\r\n <span>\r\n <span class=\"cursor-pointer pi pi-eye\" (click)=\"eyeClicked(item[col.field])\"></span>\r\n {{ truncateString(item[col.field], 50) }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- more actions -->\r\n <ng-template #moreActionsBlock>\r\n <ng-container *ngIf=\"col.field == overflowColumnField; else defaultTextOutputBlock\">\r\n\r\n <p-menu \r\n appendTo=\"body\" \r\n #menuMoreActions \r\n [model]=\"overflowActionsMenu\" \r\n [popup]=\"true\"\r\n styleClass=\"overflow-menu\"\r\n [style]=\"{ 'width': 'auto', 'min-width': '0px' }\">\r\n \r\n <ng-template pTemplate=\"item\" let-menuItem>\r\n <a \r\n pRipple \r\n class=\"flex align-items-center p-menuitem-link\"\r\n [ngClass]=\"menuItem.styleClass\"\r\n (click)=\"onOverflowActionClicked(item, menuItem)\">\r\n <i \r\n class=\"p-menuitem-icon\"\r\n [class]=\"menuItem.iconClass\" \r\n [ngClass]=\"menuItem.iconStyleClass\">\r\n </i>\r\n <span class=\"menu-label\">\r\n {{ menuItem.label | localize }}\r\n </span>\r\n </a>\r\n </ng-template>\r\n </p-menu>\r\n <p-button \r\n type=\"button\"\r\n icon=\"{{col.buttonIcon}}\"\r\n styleClass=\"{{col.styleClass}} overflow-btn\"\r\n (onClick)=\"overflowColumnClicked(menuMoreActions, $event, item)\">\r\n </p-button> \r\n\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- Tsi-Text-Box -->\r\n <ng-template #defaultTextOutputBlock>\r\n <ng-container>\r\n <span>\r\n {{ item[col.field] }}\r\n </span>\r\n </ng-container>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </ng-template>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"footer\">\r\n <tr>\r\n <td *ngIf=\"selectionMode == multipleGridSelectionMode\"></td>\r\n\r\n <ng-container *ngFor=\"let col of selectedColumns\">\r\n <td class=\"pr-0\" *ngIf=\"!(col.isButton && col.actionDisplay == actionPlacement.Overflow)\">\r\n <div *ngIf=\"col.showSummary\">\r\n <!-- CURRENCY_SOCIETE_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.CURRENCY_SOCIETE_DISPLAY\">\r\n <Tsi-Currency-Societe-Display [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Currency-Societe-Display>\r\n </div>\r\n\r\n <!-- INTEGER_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.INTEGER_DISPLAY\">\r\n <Tsi-Integer-Display [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Integer-Display>\r\n </div>\r\n\r\n <!-- RATE_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.RATE_DISPLAY\">\r\n <Tsi-Rate-Display [isFraction]=\"col.isFraction ?? false\" [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Rate-Display>\r\n </div>\r\n\r\n <!-- DECIMAL_DISPLAY -->\r\n <div *ngIf=\"col.type == displayTypes.DECIMAL_DISPLAY\">\r\n <Tsi-Decimal-Display [formatDecimal]=\"col.formatDecimal\" [inputData]=\"getSummary(col.field)\"\r\n [numOfDecimal]=\"col.numOfDecimal\">\r\n </Tsi-Decimal-Display>\r\n </div>\r\n\r\n <div *ngIf=\"col.type == displayTypes.CURRENCY_OTHER_DISPLAY\">\r\n <Tsi-Currency-Other-Display [currency]=\"col.currencyOtherCode\" [inputData]=\"getSummary(col.field)\">\r\n </Tsi-Currency-Other-Display>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container> \r\n </tr>\r\n </ng-template>\r\n \r\n <ng-template pTemplate=\"summary\">\r\n {{ page.totalCount }} {{ \"records_label\" | localize }}\r\n <span *ngIf=\"colorful\">\r\n <span>View Grid</span>\r\n <span class=\"pl-2\">| SearchOnInit : {{ searchOnInit }}</span>\r\n <span class=\"pl-2\">| Pagination In Api : {{ isGridDataPagedInApi }}</span>\r\n </span>\r\n </ng-template>\r\n </p-table>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"_showCalenderView === true\" class=\"col-12\">\r\n <tsi-calender [schema]=\"calenderSchema\" [eventsData]=\"page.items\" [crudService]=\"crudService\"\r\n (dateRangeChange)=\"handleDateRangeChange($event)\" (eventClick)=\"handleCalendarEventClick($event)\"></tsi-calender>\r\n </div>\r\n\r\n <div *ngIf=\"_showCardView === true\" class=\"col-12\">\r\n <Tsi-card-list [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\">\r\n </Tsi-card-list>\r\n </div>\r\n\r\n <div *ngIf=\"_showKanbanView === true && !_showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n <Tsi-kanban [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n [page$]=\"page$\" [page]=\"page\" (callSearch)=\"callSearchHandler($event)\" [crudService]=\"crudService\">\r\n </Tsi-kanban>\r\n </div>\r\n\r\n <div *ngIf=\"_showKanbanView === true && _showKanbanViewOfWorkFlowEtat\" class=\"col-12\">\r\n <Tsi-kanban-workflow-etat [cardBusinessClass]=\"businessClass\" [id]=\"id\" (buttonClicked)=\"buttonColumnClicked.emit($event)\"\r\n [page$]=\"page$\" [page]=\"page\" [descriminatorValue]=\"descriminatorValue\" (callSearch)=\"callSearchHandler($event)\">\r\n </Tsi-kanban-workflow-etat>\r\n </div>\r\n</div>", styles: [".p-button.p-button-icon-only.p-button-rounded{border-radius:50%;height:1rem}:host ::ng-deep .p-multiselect{border-radius:13px}:host ::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem!important}.p-inputgroup.rtl-mode .p-inputgroup-addon:last-child,.p-inputgroup.rtl-mode button:last-child,.p-inputgroup.rtl-mode input:last-child,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.rtl-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:6px 0 0 6px/6px 0px 0px 6px!important}.p-inputgroup.ltr-mode .p-inputgroup-addon:last-child,.p-inputgroup.ltr-mode button:last-child,.p-inputgroup.ltr-mode input:last-child,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component,.p-inputgroup.ltr-mode>.p-inputwrapper:last-child>.p-component>.p-inputtext{border-radius:0 6px 6px 0/0px 6px 6px 0px!important}.p-paginator .p-dropdown{height:auto;border:none;border-bottom:1px solid}.p-datatable .frozen-column{position:sticky;left:0;z-index:1;background:#fff}.frozen-column-ltr-mode{min-width:2rem;position:sticky;left:0;background-color:#fff}.frozen-column-rtl-mode{min-width:2rem;position:sticky;right:0;background-color:#fff}.disabled-column{background-color:#f5f5f5;color:#d3d3d3;pointer-events:none}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:max-content;width:100%;text-align:center;white-space:nowrap;border-radius:.4rem;padding:.1rem .2rem;font-weight:600;line-height:1.2;color:#fff;box-shadow:0 1px 2px #0000000d;transition:all .2s ease-in-out;cursor:default;transform-origin:top center;border-top-left-radius:inherit;border-bottom-right-radius:inherit}.status-badge:hover{transform:scale(1.06);box-shadow:0 2px 4px #0000001a;filter:brightness(1.2)}td span,td div{padding:0 .5rem}.custom-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.button-icon{width:1.5rem;height:1.5rem}.custom-button:hover{background-color:#f0f0f0}table{width:100%!important}.right-to-left{text-align:start}::ng-deep th.non-resizable-column .p-column-resizer{display:none!important;pointer-events:none!important}::ng-deep .cursor-follow{position:fixed;background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.85rem;z-index:1000;pointer-events:none;white-space:nowrap}::ng-deep .overflow-menu.p-menu-overlay{border-radius:8px;border:none;padding:.4rem;min-width:0!important;background:#fff;box-shadow:0 8px 24px #0000001f;animation:fadeScaleIn .12s ease-out}::ng-deep .overflow-menu .p-menuitem-link{padding:0}::ng-deep .overflow-menu-item{padding:.55rem .75rem;border-radius:8px;gap:.5rem;font-size:.85rem;white-space:nowrap;transition:all .15s ease}::ng-deep .overflow-menu-item:hover{background-color:#f5f7fa}::ng-deep .menu-icon{font-size:.9rem;width:18px;text-align:center;opacity:.8}::ng-deep .menu-label{font-weight:400}::ng-deep .overflow-btn{width:28px;height:28px;padding:0}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"] }]
|
|
8999
9002
|
}], ctorParameters: () => [{ type: StatusColorService }, { type: FichierService }, { type: HtmlTemplateGeneratorService }, { type: i1$1.DatePipe }, { type: TsiNotificationService }, { type: LocalizePipe }, { type: LayoutHelperService }, { type: LayoutService }, { type: i4.PrimeNGConfig }, { type: AppSettingsService }, { type: ErrorResponseManagerService }, { type: i0.EnvironmentInjector }, { type: i1$3.DynamicDialogConfig }, { type: i1$3.DynamicDialogRef }], propDecorators: { cudComponent: [{
|
|
9000
9003
|
type: Input
|
|
9001
9004
|
}], modalSize: [{
|
|
@@ -11138,7 +11141,7 @@ class TsiGenericCrudComponent {
|
|
|
11138
11141
|
order: 3,
|
|
11139
11142
|
toolTipText: 'shared_actions_info',
|
|
11140
11143
|
isIconButton: true,
|
|
11141
|
-
actionDisplay: ActionPlacement.
|
|
11144
|
+
actionDisplay: ActionPlacement.Overflow,
|
|
11142
11145
|
},
|
|
11143
11146
|
...this.selectedColumns,
|
|
11144
11147
|
];
|
|
@@ -11155,7 +11158,7 @@ class TsiGenericCrudComponent {
|
|
|
11155
11158
|
order: 2,
|
|
11156
11159
|
toolTipText: 'Télécharger',
|
|
11157
11160
|
isIconButton: true,
|
|
11158
|
-
actionDisplay: ActionPlacement.
|
|
11161
|
+
actionDisplay: ActionPlacement.Overflow,
|
|
11159
11162
|
},
|
|
11160
11163
|
...this.selectedColumns,
|
|
11161
11164
|
];
|
|
@@ -11172,7 +11175,7 @@ class TsiGenericCrudComponent {
|
|
|
11172
11175
|
order: 4,
|
|
11173
11176
|
toolTipText: 'shared_actions_attachment',
|
|
11174
11177
|
isIconButton: true,
|
|
11175
|
-
actionDisplay: ActionPlacement.
|
|
11178
|
+
actionDisplay: ActionPlacement.Overflow,
|
|
11176
11179
|
},
|
|
11177
11180
|
...this.selectedColumns,
|
|
11178
11181
|
];
|
|
@@ -11190,7 +11193,7 @@ class TsiGenericCrudComponent {
|
|
|
11190
11193
|
order: 5,
|
|
11191
11194
|
toolTipText: 'shared_actions_notes',
|
|
11192
11195
|
isIconButton: true,
|
|
11193
|
-
actionDisplay: ActionPlacement.
|
|
11196
|
+
actionDisplay: ActionPlacement.Overflow,
|
|
11194
11197
|
},
|
|
11195
11198
|
...this.selectedColumns,
|
|
11196
11199
|
];
|
|
@@ -11208,7 +11211,7 @@ class TsiGenericCrudComponent {
|
|
|
11208
11211
|
order: 8,
|
|
11209
11212
|
toolTipText: 'shared_actions_form',
|
|
11210
11213
|
isIconButton: true,
|
|
11211
|
-
actionDisplay: ActionPlacement.
|
|
11214
|
+
actionDisplay: ActionPlacement.Overflow,
|
|
11212
11215
|
},
|
|
11213
11216
|
...this.selectedColumns,
|
|
11214
11217
|
];
|
|
@@ -11227,7 +11230,7 @@ class TsiGenericCrudComponent {
|
|
|
11227
11230
|
toolTipText: 'Delete',
|
|
11228
11231
|
buttonType: ButtonType.Submit,
|
|
11229
11232
|
isIconButton: true,
|
|
11230
|
-
actionDisplay: ActionPlacement.
|
|
11233
|
+
actionDisplay: ActionPlacement.Overflow,
|
|
11231
11234
|
},
|
|
11232
11235
|
...this.selectedColumns,
|
|
11233
11236
|
];
|
|
@@ -11263,7 +11266,7 @@ class TsiGenericCrudComponent {
|
|
|
11263
11266
|
order: 0,
|
|
11264
11267
|
toolTipText: 'Consulter',
|
|
11265
11268
|
isIconButton: true,
|
|
11266
|
-
actionDisplay: ActionPlacement.
|
|
11269
|
+
actionDisplay: ActionPlacement.Overflow,
|
|
11267
11270
|
},
|
|
11268
11271
|
...this.selectedColumns,
|
|
11269
11272
|
];
|
|
@@ -11281,7 +11284,7 @@ class TsiGenericCrudComponent {
|
|
|
11281
11284
|
order: 7,
|
|
11282
11285
|
toolTipText: 'Dupliquer',
|
|
11283
11286
|
isIconButton: true,
|
|
11284
|
-
actionDisplay: ActionPlacement.
|
|
11287
|
+
actionDisplay: ActionPlacement.Overflow,
|
|
11285
11288
|
},
|
|
11286
11289
|
...this.selectedColumns,
|
|
11287
11290
|
];
|