@dflat-core/web 1.7.2079 → 1.7.2081
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.
|
@@ -18060,6 +18060,12 @@ var DataGridComponent = class DataGridComponent {
|
|
|
18060
18060
|
isUndefined(val) {
|
|
18061
18061
|
return Utilities.IsNil(val);
|
|
18062
18062
|
}
|
|
18063
|
+
isBooleanColumn(column) {
|
|
18064
|
+
return column.Display?.type === "boolean" || this.getColumnField(column)?.FilterType === FilterType.CheckBox;
|
|
18065
|
+
}
|
|
18066
|
+
isChecked(value) {
|
|
18067
|
+
return value === true || value === 1 || value === "1" || typeof value === "string" && value.toLowerCase() === "true";
|
|
18068
|
+
}
|
|
18063
18069
|
getHeaderLabel(column) {
|
|
18064
18070
|
return column.Display?.enumMap?.length ? "" : column.Name;
|
|
18065
18071
|
}
|
|
@@ -19218,8 +19224,8 @@ var DataGridComponent = class DataGridComponent {
|
|
|
19218
19224
|
}
|
|
19219
19225
|
],
|
|
19220
19226
|
ngImport: i0,
|
|
19221
|
-
template: "<div #datagridContainer [class]=\"this.datagridClass\" tabindex=\"-1\" (keydown)=\"onGridKeyDown($event)\" (scroll)=\"onGridScroll($event)\"\r\n (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\" (contextmenu)=\"openEmptyAreaContextMenu($event)\">\r\n <ng-container>\r\n <table class=\"data-grid-datatable\">\r\n <ng-container *ngIf=\"this.facade.style as ctx\">\r\n <ng-container *ngIf=\"this.facade.config.columns$ | async as rcolumns\">\r\n <thead>\r\n <tr>\r\n <th class=\"header row-state\" (click)=\"addFilterQuery()\"></th>\r\n <!-- En-tête : poignée de déplacement à gauche, intitulé, indicateur de tri,\r\n flèche du menu (tri, agrégation) à droite. Le clic ne trie plus. -->\r\n <th #thHeader *ngFor=\"let col of rcolumns;let i = index\"\r\n [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n [attr.class]=\"'header' | gridStyle : ctx : { column : col }\"\r\n [style.width.px]=\"colWidth(col)\" [style.min-width.px]=\"colWidth(col)\" [style.max-width.px]=\"colWidth(col)\"\r\n [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n <div class=\"header-cell\"\r\n [class.col-dragging]=\"draggedColumn === col.Property\">\r\n <span class=\"header-handle\" title=\"Déplacer la colonne\"\r\n (mousedown)=\"onHeaderMouseDown(col, $event)\">\r\n <i class=\"fa fa-ellipsis-v\"></i>\r\n </span>\r\n <label>{{ getHeaderLabel(col) }}</label>\r\n <i *ngIf=\"this.facade.filter.isAsc(col.Property)\" class=\"fa fa-long-arrow-up header-sort\" title=\"Tri croissant\"></i>\r\n <i *ngIf=\"this.facade.filter.isDesc(col.Property)\" class=\"fa fa-long-arrow-down header-sort\" title=\"Tri décroissant\"></i>\r\n <sup *ngIf=\"this.facade.filter.sortRank(col.Property) > 0\" class=\"header-sort-rank\"\r\n title=\"Rang dans le tri personnalisé\">{{ this.facade.filter.sortRank(col.Property) }}</sup>\r\n <i *ngIf=\"activeAggregations[col.Property]\" class=\"header-agg\" [title]=\"'Agrégation : ' + aggregationLabel(activeAggregations[col.Property])\">Σ</i>\r\n <!-- Dernière colonne suivie de la colonne vide de fin : sa flèche est dans la colonne vide. -->\r\n <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n *ngIf=\"!(ctx.enableLastColumnResize && i === rcolumns.length - 1)\"\r\n [class.open]=\"headerMenu?.column.Property === col.Property\"\r\n (click)=\"toggleHeaderMenu(col, $event)\">\r\n <i class=\"fa fa-caret-down\"></i>\r\n </button>\r\n </div>\r\n <!-- Bord droit : largeur de la colonne (tirer), ajustée au contenu (double clic). -->\r\n <span class=\"col-resizer\" title=\"Largeur de la colonne (double clic : ajuster au contenu)\"\r\n (mousedown)=\"startResize(col, $event)\" (dblclick)=\"autoFitColumn(col, $event)\"\r\n (click)=\"$event.stopPropagation()\"></span>\r\n </th>\r\n <th *ngIf=\"ctx.enableLastColumnResize\" #lastColumnHeader class=\"header last-column\"\r\n (contextmenu)=\"openHeaderContextMenu($event, rcolumns[rcolumns.length - 1])\">\r\n <div class=\"header-cell header-cell-end\" *ngIf=\"rcolumns.length > 0\">\r\n <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n [class.open]=\"headerMenu?.column.Property === rcolumns[rcolumns.length - 1].Property\"\r\n (click)=\"toggleHeaderMenu(rcolumns[rcolumns.length - 1], $event)\">\r\n <i class=\"fa fa-caret-down\"></i>\r\n </button>\r\n </div>\r\n </th>\r\n\r\n </tr>\r\n <ng-container *ngIf=\"this.facade.filter.additionalQuery$ | async as additionalQuery\">\r\n <tr #thFilterRows *ngFor=\"let filterRow of additionalQuery.Rows;let i = index\" >\r\n <th class=\"filter-header row-state\" (click)=\"removeFilterQuery(i)\"></th>\r\n <th class=\"filter-header\" [ngClass]=\"{disabled: !col.IsFilterEnabled}\" *ngFor=\"let col of rcolumns;let i = index\"\r\n [attr.id]=\"guid.toString() + '-filter-' + i\">\r\n <input *ngIf=\"col.IsFilterEnabled\" type=\"text\"\r\n class=\"filter-header-input\"\r\n name=\"keyword\"\r\n #uniquename=\"ngModel\"\r\n [attr.id]=\"guid.toString() + '-filter-input-' + col.Property\"\r\n [placeholder]=\"filterRow.ClausesByPropertyName.get(col.Property).FilterValues?.length ? 'Filtre avancé : ' + filterRow.ClausesByPropertyName.get(col.Property).FilterValues.length + ' valeur(s)' : ''\"\r\n [(ngModel)]=\"filterRow.ClausesByPropertyName.get(col.Property).FilterValue\"\r\n (ngModelChange)=\"handleFilterChanged($event, filterRow, col.Property)\"\r\n (change)=\"validateFilterChanged($event, filterRow, col.Property)\"\r\n />\r\n </th>\r\n <ng-container>\r\n <th #lastColumnFilter class=\"filter-header last-column\"></th>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </thead>\r\n\r\n <tbody>\r\n <ng-container *ngIf=\"this.facade.data\">\r\n <ng-container *ngFor=\"let row of this.data.Values; let r = index;\">\r\n <tr\r\n [class]=\"'alternating' | gridStyle : ctx : { row : row, index : r, maxIndex : this.data.Values.length, hasAggregates: hasAggregates }\"\r\n [class.selected]=\"isRowSelected(row)\"\r\n [attr.id]=\"guid.toString() + '-row-' + row.Id\"\r\n (mousedown)=\"onRowMouseDown(row, $event)\"\r\n (mouseup)=\"onRowMouseUp(row, $event)\"\r\n (click)=\"onRowClick(row, $event)\"\r\n\r\n [rowRef]=\"guid + '-row-' + row.Id\"\r\n >\r\n\r\n <th [attr.class]=\"'rowstate' | gridStyle : ctx : { row : row }\">\r\n <ng-container *ngIf=\"selectionStyler.isModified(row) && !selectionStyler.isInvalid(row) && !selectionStyler.isWarning(row)\">\r\n <div class=\"new-rowstate\"><span>...</span></div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectionStyler.isInvalid(row)\">\r\n <div> <img class=\"error-row-icon\" src=\"assets/images/error.svg\" /> </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectionStyler.isWarning(row) && !selectionStyler.isInvalid(row)\">\r\n <div> <img class=\"error-row-icon\" src=\"assets/images/warning.svg\" /> </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ctx.displayDetail\">\r\n <button type=\"button\" [attr.id]=\"row.Id + '_button'\" class=\"toggle-button btn\" (click)=\"toggleDetail(row)\">\r\n <i class=\"fa fa-chevron-right fa-custom\"></i>\r\n </button>\r\n </ng-container>\r\n </th>\r\n\r\n <td *ngFor=\"let column of rcolumns; index as i\"\r\n [attr.id]=\"cellId(row, column)\"\r\n [style.max-width.px]=\"colWidth(column)\" [attr.data-sized]=\"colWidth(column) ? '' : null\"\r\n [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\"\r\n [class]=\"'cell' | gridStyle : ctx : { row : row,column : column,index : r }\"\r\n [class.selected]=\"isRowSelected(row)\"\r\n (mousedown)=\"onCellMouseDown(r, i, $event)\"\r\n (mouseenter)=\"onCellMouseEnter(r, i, $event)\"\r\n (click)=\"onCellClick(row, column)\"\r\n (dblclick)=\"onCellDblClick(row, column)\">\r\n\r\n <alg-datagrid-cell #dataGridCellComponent\r\n class=\"gridcell-container\"\r\n [entity]=\"row\"\r\n [isEditable]=\"canEditCell(row, column)\"\r\n [property]=\"column.Property\"\r\n [managed]=\"true\"\r\n [mode]=\"showEditor(row, column) ? 'edit' : 'view'\"\r\n [class.grid-cursor]=\"isCursorCell(row, column)\"\r\n [class.grid-range]=\"isInRange(r, i)\"\r\n (contextmenu)=\"openContextMenu($event, row, column)\">\r\n\r\n <ng-template alg-editMode>\r\n <!-- Éditeur du champ du formulaire qui correspond à la colonne (sinon déduit de la colonne), à la hauteur de la ligne. -->\r\n <alg-field class=\"grid-editor\"\r\n [field]=\"getEditField(column)\"\r\n [form]=\"getRowForm(row)\"\r\n [showLabel]=\"false\"\r\n (propertyChanged)=\"onCellChanged(row, $event)\"\r\n >\r\n <!-- [focusable]=\"cellFocus\" -->\r\n </alg-field>\r\n </ng-template>\r\n <ng-template alg-viewMode>\r\n\r\n <div [ngSwitch]=\"column.Display?.type\" *ngIf=\"!isUndefined(row[column.Property])\">\r\n <div *ngSwitchCase=\"'url'\">\r\n <a [routerLink]=\"[$safeNavigationMigration(column.Display?.baseUrl),row[column.Property]]\">\r\n {{ row.Id || row[column.Property] }}\r\n </a>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'img'\" class=\"image\">\r\n <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\"\r\n [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"20\" [imageWidth]=\"20\">\r\n </alg-image>\r\n\r\n <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n {{ row[column.ToolTipProperty] }}\r\n </div>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'img-file'\" class=\"image\">\r\n\r\n <alg-image\r\n [imageUrl]=\"this.getImageUrl(row,column)\" [wide]=\"true\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n </alg-image>\r\n\r\n <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n {{ row[column.ToolTipProperty] }}\r\n </div>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'wide-img'\" class=\"image\">\r\n <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\" [wide]=\"true\"\r\n [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n </alg-image>\r\n\r\n <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n {{ row[column.ToolTipProperty] }}\r\n </div>\r\n </div>\r\n\r\n <span *ngSwitchCase=\"'date'\">\r\n {{row[column.Property]| date: column.Display?.format || 'dd/MM/yyyy'}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'boolean'\">{{row[column.Property] ? 'OUI' : 'NON'}} </span>\r\n\r\n <span *ngSwitchCase=\"'datetime'\">{{row[column.Property] | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}</span>\r\n\r\n <span *ngSwitchCase=\"'money'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\"\r\n class=\"money\">\r\n {{\r\n row[column.Property]\r\n | currency: column.Display?.currency\r\n || (column.Display?.sourceProperty && row[column.Display?.sourceProperty] ? row[column.Display?.sourceProperty] : false)\r\n || 'EUR' : 'symbol'\r\n\r\n | todefine: $safeNavigationMigration(column.Display?.handleError)\r\n }}\r\n\r\n <div class=\"tool-tip\" *ngIf=\"ctx.showOnToolTip(row,column)\">\r\n {{ctx.showOnToolTip(row,column)}}\r\n </div>\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'percent'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | percent : column.Display?.format\r\n || '1.0-2' | todefine: $safeNavigationMigration(column.Display?.handleError)}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'number'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | number: column.Display?.format\r\n || '1.0-3' | todefine : $safeNavigationMigration(column.Display?.handleError)}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'fixedsizeinteger'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n {{row[column.Property] | tofixedsizeinteger : $safeNavigationMigration(column.Display?.completingCaracter) : $safeNavigationMigration(column.Display?.width) }}\r\n </span>\r\n <span *ngSwitchDefault [innerText]=\"column.Property == 'Id' ? (row[column.Property] < 0 ? '' : row[column.Property]) : row[column.Property]\">\r\n </span>\r\n </div>\r\n\r\n <div *ngIf=\"isUndefined(row[column.Property])\">\r\n <span *ngIf=\"!isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\" class=\"mw-invalid\">\r\n {{ column.Display?.nullCaseText }}\r\n </span>\r\n\r\n <span *ngIf=\"isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\">\r\n \r\n </span>\r\n </div>\r\n\r\n </ng-template>\r\n\r\n </alg-datagrid-cell>\r\n </td>\r\n <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n <!-- Colonne vide de fin : clic droit = menu de la dernière colonne. -->\r\n <td (contextmenu)=\"openContextMenu($event, row, rcolumns[rcolumns.length - 1])\"></td>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n\r\n <tfoot>\r\n <tr class=\"empty-row\" *ngIf=\"hasAggregates\">\r\n <td></td>\r\n </tr>\r\n <tr class=\"aggregation-row\" *ngIf=\"hasAggregates\">\r\n <td class=\"row-state\"></td>\r\n <td *ngFor=\"let column of rcolumns; index as i\" [attr.class]=\"'cell' | gridStyle : ctx : { column : column, index : i }\"\r\n [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n\r\n <ng-container *ngFor=\"let agg of columnAggregates[column.Property]\">\r\n\r\n <span class=\"agg-label\">{{ aggregationLabel(agg.op) }}</span>\r\n <span [ngSwitch]=\"agg.op === 'COUNT' ? 'count' : column.Display?.type\">\r\n\r\n <span *ngSwitchCase=\"'count'\">{{ agg.value | number: '1.0-0' }}</span>\r\n <span *ngSwitchCase=\"'percent'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\r\n <span *ngSwitchCase=\"'fixedsizeinteger'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\r\n\r\n <span *ngSwitchCase=\"'money'\" class=\"money\">\r\n {{ agg.value | currency: getColCurrency(column) }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'date'\">\r\n {{agg.value | date: column.Display?.format || 'dd/MM/yyyy'}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'datetime'\">\r\n {{agg.value | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'number'\">\r\n {{agg.value | number: column.Display?.format || '1.0-3'}}\r\n </span>\r\n\r\n <span *ngSwitchDefault>\r\n {{agg.value}}\r\n </span>\r\n\r\n </span>\r\n\r\n </ng-container>\r\n\r\n </td>\r\n\r\n <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n <td class=\"last-column\"></td>\r\n </ng-container>\r\n\r\n </tr>\r\n </tfoot>\r\n </ng-container>\r\n </ng-container>\r\n </table>\r\n </ng-container>\r\n</div>\r\n\r\n\r\n<!-- Emplacement visé par une colonne déplacée : trait orange sur la séparation des deux en-têtes. -->\r\n<div class=\"col-drop-indicator\" *ngIf=\"dropIndicator\"\r\n [ngStyle]=\"{ left: dropIndicator.left + 'px', top: dropIndicator.top + 'px', height: dropIndicator.height + 'px' }\"></div>\r\n\r\n<!-- Menu d'une colonne (flèche de l'en-tête ou clic droit sur une cellule), en trois zones séparées\r\n par un trait : Tri (sous-menu « Trier »), Actions (celles du panneau des actions), Fonctions (sous-menu « Fonctions »). -->\r\n<div class=\"header-menu\" *ngIf=\"headerMenu\"\r\n [ngStyle]=\"{ top: headerMenu.y + 'px', left: headerMenu.x + 'px', visibility: headerMenu.ready ? 'visible' : 'hidden' }\"\r\n (click)=\"$event.stopPropagation()\" (contextmenu)=\"$event.preventDefault()\">\r\n <ul>\r\n <!-- Tri : sous-menu « Trier » (croissant, décroissant, personnalisé). -->\r\n <li class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'sort'\"\r\n [class.checked]=\"this.facade.filter.isAsc(headerMenu.column.Property) || this.facade.filter.isDesc(headerMenu.column.Property) || this.facade.filter.getSortList().length > 1\"\r\n (mouseenter)=\"setSubmenu('sort')\" (click)=\"setSubmenu('sort')\">\r\n <i class=\"fa fa-sort\"></i><span>Trier</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu\" *ngIf=\"headerMenu.submenu === 'sort'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <li [class.checked]=\"this.facade.filter.isAsc(headerMenu.column.Property)\" (click)=\"sortColumn('asc')\">\r\n <i class=\"fa fa-sort-amount-asc\"></i><span>Par ordre croissant</span>\r\n </li>\r\n <li [class.checked]=\"this.facade.filter.isDesc(headerMenu.column.Property)\" (click)=\"sortColumn('desc')\">\r\n <i class=\"fa fa-sort-amount-desc\"></i><span>Par ordre décroissant</span>\r\n </li>\r\n <li [class.checked]=\"this.facade.filter.getSortList().length > 1\" (click)=\"openCustomSort()\">\r\n <i class=\"fa fa-sort\"></i><span>Tri personnalisé…</span>\r\n </li>\r\n </ul>\r\n </li>\r\n <!-- Filtre sur la valeur de la cellule (clic droit sur une cellule) : première ligne des filtres composés. -->\r\n <li *ngIf=\"cellFilterValue() !== undefined\" (click)=\"filterOnCell()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <i class=\"fa fa-filter\"></i><span>Filtrer sur « {{ cellFilterLabel() }} »</span>\r\n </li>\r\n <!-- Filtre avancé : valeurs distinctes de la colonne sur les résultats, à cocher (condition « dans la liste »). -->\r\n <li *ngIf=\"headerMenu.column.IsFilterEnabled\" class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'distinct'\"\r\n [class.checked]=\"this.facade.filter.getFilterValues(headerMenu.column.Property).length > 0\"\r\n (mouseenter)=\"setSubmenu('distinct')\" (click)=\"setSubmenu('distinct')\">\r\n <i class=\"fa fa-filter\"></i><span>Filtre avancé</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu header-submenu-distinct\" *ngIf=\"headerMenu.submenu === 'distinct'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <alg-grid-distinct-filter [facade]=\"this.facade\" [entityKey]=\"this.entityKey\" [property]=\"headerMenu.column.Property\"\r\n (done)=\"closeViewMenu()\" (loaded)=\"onViewMenuLoaded()\"></alg-grid-distinct-filter>\r\n </ul>\r\n </li>\r\n <!-- Affichage : vues personnalisées (cochée = affichée), puis « Modifier… ». -->\r\n <li *ngIf=\"this.facade.config.viewChooser\" class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'columns'\"\r\n (mouseenter)=\"setSubmenu('columns')\" (click)=\"setSubmenu('columns')\">\r\n <i class=\"fa fa-columns\"></i><span>Affichage</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu header-submenu-columns\" *ngIf=\"headerMenu.submenu === 'columns'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <alg-grid-view-menu [chooser]=\"this.facade.config.viewChooser\" (done)=\"closeViewMenu()\" (loaded)=\"onViewMenuLoaded()\"></alg-grid-view-menu>\r\n </ul>\r\n </li>\r\n <!-- Colonnes figées à gauche, de la première jusqu'à celle-ci. -->\r\n <li [class.checked]=\"isFrozen(columnIndex(headerMenu.column))\" (click)=\"toggleFrozen()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <i class=\"fa fa-thumb-tack\"></i>\r\n <span>{{ frozenUntil === columnIndex(headerMenu.column) ? 'Libérer les colonnes' : 'Figer jusqu\\'à cette colonne' }}</span>\r\n </li>\r\n <li *ngIf=\"frozenUntil !== undefined && frozenUntil !== columnIndex(headerMenu.column)\"\r\n (click)=\"unfreezeColumns()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <i class=\"fa fa-unlock\"></i><span>Libérer les colonnes</span>\r\n </li>\r\n\r\n <!-- Actions -->\r\n <ng-container *ngIf=\"visibleActions.length > 0\">\r\n <li class=\"separator\"></li>\r\n <ng-container *ngFor=\"let action of visibleActions\">\r\n <ng-container *ngIf=\"{ disabled: (action.disabled$ | async) } as state\">\r\n <li class=\"menu-action\" [class.disabled]=\"state.disabled\"\r\n (click)=\"executeMenuAction(action, state.disabled)\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <img class=\"menu-action-icon\" [src]=\"getActionImageUrl(action.icon)\" [alt]=\"action.title\" />\r\n <span>{{ action.title }}</span>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Affichage -->\r\n <li class=\"separator\"></li>\r\n <li class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'display'\"\r\n (mouseenter)=\"setSubmenu('display')\" (click)=\"setSubmenu('display')\">\r\n <i class=\"fa fa-calculator\"></i><span>Fonctions</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu\" *ngIf=\"headerMenu.submenu === 'display'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <li *ngFor=\"let op of getAggregationOptions(headerMenu.column)\"\r\n [class.checked]=\"activeAggregations[headerMenu.column.Property] === op\"\r\n (click)=\"aggregateColumn(op)\">\r\n <i class=\"fa fa-check\"></i><span>{{ aggregationLabel(op) }}</span>\r\n </li>\r\n <ng-container *ngIf=\"activeAggregations[headerMenu.column.Property]\">\r\n <li class=\"separator\"></li>\r\n <li (click)=\"aggregateColumn(null)\">\r\n <i class=\"fa fa-times\"></i><span>Ne plus afficher</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ul>\r\n</div>\r\n\r\n",
|
|
19222
|
-
styles: [".home-page{font-family:Open sans,sans-serif;background:#fff;-webkit-font-smoothing:antialiased;height:100%;width:100%;padding:16px}.main-container{margin:0 50px}.main-container-modal{width:calc(100% - 50px);margin:10px 25px 0}.moyen-titre{font-weight:700;font-size:24px;color:#4d5a81;margin:8px 0;border-bottom:solid 1px #DBE4FF}.grand-titre{font-weight:700;font-size:28px;color:#4d5a81;margin:0 0 8px}.petit-titre{font-weight:700;font-size:16px;color:#4d5a81;margin:0 0 8px}.petit-titre.underlined{border-bottom:solid 1px #4D5A81}.paragraph{padding:0 15px}.paragraph-highlight{padding:5px 15px 0 12px;border-left:5px solid #8EA7F8;border-bottom:1px solid #DBE4FF;border-top:1px solid #DBE4FF;border-right:1px solid #DBE4FF;background-color:#f7faff}.highlight{background-color:#f7faff;border:1px solid #DBE4FF;border-radius:5px;padding:15px;color:#3c5dc4;margin:0 0 16px}.highlight p{margin-bottom:0}.highlight:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"53.294\" height=\"50.629\" viewBox=\"0 0 53.294 50.629\">%0D%0A <path id=\"allerg\\e8ne\" d=\"M830.494,25.793l-5.814,6.783.727,8.963-8.721,1.938-4.6,7.752L803.847,47.6l-8.236,3.634-4.6-7.51-8.721-1.938.727-8.963L777.2,26.035l5.814-6.783-.727-8.963,8.721-1.938L795.61.6l8.236,3.634L812.083.6l4.6,7.752,8.721,1.938-.727,8.963Zm-24.467,2.422V13.681h-4.845V28.216Zm0,9.69V33.06h-4.845v4.845Z\" transform=\"translate(-777.2 -0.6)\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 8px 24px 0;filter:invert(31%) sepia(51%) saturate(1323%) hue-rotate(199deg) brightness(99%) contrast(94%)}.notification{background-color:#dbe4ff;border:1px solid #C4D0F9;border-radius:5px;color:#4d5a81;margin:16px;padding:5px 15px;text-align:justify}.notification:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info-circle\" class=\"svg-inline--fa fa-info-circle fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\"></path></svg>');background-repeat:no-repeat;margin:0 8px 0 0;filter:invert(31%) sepia(8%) saturate(2329%) hue-rotate(188deg) brightness(103%) contrast(85%)}.notification-text{padding:0 15px 0 30px;font-size:16px}:host{flex:1}.header.last-column{border-left:none!important;width:100%}table thead .sorting,table thead .sorting_asc,table thead .sorting_desc,table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table thead th:first-child,table tfoot tr:first-child{position:sticky;left:0;z-index:2}table tbody th:first-child{position:sticky;left:0;z-index:1;border-right:none}table tbody th:first-child div{text-align:center;vertical-align:middle;line-height:20px}table tbody tr.row-odd th:first-child{background:#ebf0ff}table tbody tr.selected.row-odd.mw-invalid th:first-child,table tbody tr.selected.row-even.mw-invalid th:first-child,table tbody tr.selected.row-odd.mw-warning th:first-child,table tbody tr.selected.row-even.mw-warning th:first-child,table tbody tr.selected.row-even th:first-child,table tbody tr.selected.row-odd th:first-child{background-color:#8ea7f8;color:#fff}table tbody tr.row-odd.mw-invalid th:first-child,table tbody tr.row-even.mw-invalid th:first-child{background-color:#f2dede}table tbody tr.row-odd.mw-warning th:first-child,table tbody tr.row-even.mw-warning th:first-child{background-color:#fff4de}table thead th{position:-webkit-sticky;position:sticky;top:0;z-index:1;background:#fff;border-left:1px solid #3C5DC4;border-bottom:1px solid #3C5DC4}table thead .sorting{background-image:none;cursor:pointer}table thead .sorting_asc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxNjIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxNTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+z5ABTAAAAI5JREFUeNpi/P//PwO1ABMDFQELIQXVjfe4gFQbEJe11iv9otRl2UCcBcSphBQy4gszoKu0gNROIJYB4jtA7AF03V2SXQY0iBFIFUMNAgEVIM6DipPsTQcgDkQTSwRia5IMA9rOC6RqgVgQTQokXgOUZyfFZSFQF/zAgh2BOIjkCBjQRDtq2Khh9DAMIMAAT9AmNBDSXegAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_desc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxQTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxOTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1fsfwAAAAJdJREFUeNpi/P//PwO1ABMDFcGoYaOG0cMwFmyC1Y33IoHUAiD+h8MBGa31SvOJddk6IN4PxBxY8FEgXkO0N4G2/gRSLUD8GU3qPRA3A+U/kxpmIBege2U9EB/ApYERX6kBDDtlILUDiFWA+AkQuwNddY2s2ARqvAukJgDxbyCehM8gnLGJBmYDsSoQTyWkkHHQFo4AAQYAAA0piq4hbqwAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-image:none}.checkbok-container{align-items:center;margin:0;padding:0}.gridcell-container{padding:0;min-width:fit-content}.gridcell-container input[type=number]{display:block;size:1;font-size:10pt;width:100%!important;height:100%;margin:0!important;border:2px solid #F78383}.datagrid-custom-container{height:100%;overflow:auto;margin-left:-1px}.data-grid-datatable{table-layout:fixed;cursor:pointer;border-spacing:0px}.data-grid-datatable td{box-shadow:none;padding:2px 5px;white-space:nowrap}.data-grid-datatable td.row-state{padding:2px 5px;width:16px}.data-grid-datatable td.img{padding:2px 5px}.data-grid-datatable td.row-state img{height:16px;width:16px;margin-top:-3px;padding:0}.data-grid-datatable tr{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header{vertical-align:bottom;padding:2px 5px 2px 0;font-weight:400;color:#3c5dc4;white-space:nowrap;line-height:25px;min-width:32px;margin-bottom:5px}.header.img{min-width:16px}.header.row-state{min-width:27px;position:-webkit-sticky;position:sticky;top:0;left:0;z-index:2;background:#fff;border-left:none;border-right:none}.filter-header{background-color:#f7f7f7!important}.filter-header.disabled{background-color:#9fa9c7!important}.filter-header.row-state:hover:before{position:relative;display:block;float:left;width:16px;height:16px;content:\" \";background-size:16px 16px;-webkit-background-size:16px 16px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"57\" height=\"57\" viewBox=\"0 0 57 57\">%0D%0A <path id=\"Rond_Croix\" data-name=\"Rond Croix\" d=\"M28.5,57A28.5,28.5,0,0,1,8.347,8.347,28.5,28.5,0,1,1,48.652,48.652,28.317,28.317,0,0,1,28.5,57Zm0-24.036h0l11.9,11.9L44.869,40.4,32.964,28.5,44.869,16.593,40.4,12.129,28.5,24.034,16.594,12.129l-4.465,4.464L24.034,28.5,12.129,40.4l4.463,4.465L28.5,32.965Z\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 0 0 3px;filter:brightness(0) saturate(100%) invert(70%) sepia(93%) saturate(1540%) hue-rotate(309deg) brightness(105%) contrast(94%)}.filter-header-input{height:calc(100% - 2px);width:calc(100% - 2px);margin:0;border:none!important;background-color:#f7f7f7;padding:0 0 0 5px;color:#4d5a81}.header.row-state:before{position:relative;display:block;float:left;width:16px;height:16px;content:\" \";background-size:16px 16px;-webkit-background-size:16px 16px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->%0D%0A<path fill=\"currentColor\" d=\"M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z\"/></svg>');background-repeat:no-repeat;margin:0 0 3px 5px;filter:brightness(0) saturate(100%) invert(56%) sepia(79%) saturate(2301%) hue-rotate(202deg) brightness(92%) contrast(91%)}.filter-header.last-column{border-left:none!important}.header label{cursor:pointer;margin-bottom:0;margin-right:10px;padding-left:5px;width:100%}.row-odd{background-color:#ebf0ff;border-left:1px solid #C1D0FD;border-bottom:1px solid #C1D0FD}.row-even{background-color:#f7faff;border-left:1px solid #C1D0FD;border-bottom:1px solid #C1D0FD}.error-row-icon{padding:2px;width:20px}.selected{background-color:#8ea7f8;color:#fff}.mw-invalid{font-weight:600;background-color:#f2dede;border:1px solid var(--red-error)}.mw-invalid td{background-color:#f2dede!important}.data-grid-datatable tbody tr.mw-invalid>td,.data-grid-datatable tbody tr.mw-invalid>th{box-shadow:inset 0 1px 0 var(--red-error),inset 0 -1px 0 var(--red-error)}span.mw-invalid{padding:0 3px;color:var(--red-error);background-color:transparent}.mw-warning.selected,.mw-invalid.selected{background-color:#8ea7f8}.mw-warning.selected td,.mw-invalid.selected td{background-color:#8ea7f8!important}.mw-warning{font-weight:600;background-color:#fff4de;border:1px solid var(--orange-algorima)}.mw-warning td{background-color:#fff4de!important}.mw-modified{font-weight:600;border:1px solid var(--main-bg-color)}.first-row{border-top:none}.last-row,.last-row td{border-bottom:none!important}.data-grid-datatable>tbody>tr{z-index:50}.image{position:relative;display:flex;flex-direction:row}.image img{height:20px;width:auto}td.money{position:relative}.tool-tip{visibility:hidden;background-color:#424242;color:#fff;text-align:left;border-radius:3px;font-size:15px;position:absolute;z-index:1;top:-10%;left:150%;opacity:0;transition:opacity .3s;padding:5px 15px;white-space:nowrap;overflow:visible}.tool-tip:after{content:\" \";position:absolute;top:50%;right:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent rgb(66,66,66) transparent transparent}.image:hover .tool-tip{visibility:visible;opacity:1}td.money:hover .tool-tip{visibility:visible;opacity:1;left:100%;height:28px;font-size:13px;margin-top:0;padding:5px 10px 10px}.disabled{pointer-events:none}.edit-mode{background-color:#fff;border:1px solid #4465C9;min-width:90px!important;height:30px!important}.edit-mode .form-group{min-height:0px}.edit-mode .inactivated{background-color:#dbe4ff80}.edit-mode .inactivated-fo{background-color:#dbe4ff}.edit-mode .ecartclass{border:2px solid #4465C9}.edit-mode .error-cell{font-weight:700;color:#f78383!important}.edit-mode .selected{color:#4d5a81}.highlight-1,.highlight-1.selected,.edit-mode.highlight-1.selected{background-color:#4d5a81!important;color:#fff!important}.highlight-2,.highlight-2.selected,.edit-mode.highlight-2.selected{background-color:#dbe4ff!important;color:#4d5a81!important}.highlight-3,.highlight-3.selected,.edit-mode.highlight-3.selected{background-color:#4465c9!important;color:#fff!important}.highlight-4,.highlight-4.selected,.edit-mode.highlight-4.selected{background-color:#f78383!important;color:#fff!important}.highlight-5,.highlight-5.selected{background-color:#4465c9!important;color:#fff}.fixed-column{position:-webkit-sticky;position:sticky;left:27px;z-index:2!important;border-left:none}.fixed-header{position:-webkit-sticky;position:sticky;left:27px;z-index:3!important;background:#fff}.has-focus{padding:0!important}.has-focus ::ng-deep input,.has-focus ::ng-deep input:focus-visible,.has-focus ::ng-deep input:focus{border-radius:.1;outline:none!important;width:100%;height:29px;min-height:0;margin:0;border:1px solid #4465C9}.has-focus ::ng-deep .form-group{margin-bottom:0;min-height:0}.has-focus ::ng-deep .field-container{margin-bottom:0}.edit-mode.has-focus{width:90px!important}.bordered{border-left:1px solid #14358f!important;border-right:1px solid #14358f!important}.match-keywords{color:var(--main-bg-color);font-weight:700}.datagrid-img img{height:20px;width:20px}.right-align{text-align:right}.left-align{text-align:left}.detail-div{height:0px;overflow:hidden;transition:all .2s linear;width:100%}.fa-custom{font-size:smaller}.detail-div-show{height:150px;transition:all .2s linear}.toggleable{visibility:collapse}.toggleable-show{visibility:visible}.toggle-button-down{transform:rotate(90deg);transition:all .2s linear}.no-result{color:#5272d3;height:100%;width:100%;padding:15px 15px 150px}.new-rowstate{display:flex;flex-direction:row;align-items:center;align-self:center;height:100%;width:100%}.new-rowstate span{height:100%;width:100%;margin-top:-6px}.context-menu{position:absolute;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 12px #0000004d;padding:8px;z-index:1000;min-width:75px;max-width:250px;transition:all .3s ease-in-out}.context-menu ul{list-style:none;margin:0;padding:0}.context-menu li{padding:10px 14px;cursor:pointer;border-radius:8px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.context-menu li:hover{background:linear-gradient(135deg,#ffffff4d,#ffffff1a);transform:scale(1.02)}.context-menu li:active{transform:scale(.98)}.grid-container{overflow:auto;position:relative}.aggregation-row{position:sticky;bottom:0;z-index:50;background:#f7faff!important;background-color:#f7faff!important;font-weight:700;border-top:1px solid #4D5A81!important;border-bottom:1px solid #4D5A81!important}.aggregation-row td{background:#f7faff!important;background-color:#f7faff!important;border-top:1px solid #4D5A81!important;border-bottom:1px solid #4D5A81!important;border-left:none!important;border-right:none!important}.empty-row td{padding:0}.col-resizer{position:absolute;top:0;right:-5px;z-index:4;width:10px;height:100%;cursor:col-resize}.col-resizer:hover{background:#3c5dc440}.data-grid-datatable td[data-sized]{overflow:hidden;text-overflow:ellipsis}:where(.data-grid-datatable tbody tr,.data-grid-datatable tfoot tr){background-color:#fff}.data-grid-datatable td[data-frozen]{position:sticky;z-index:1;background-color:inherit}.data-grid-datatable thead th[data-frozen]{position:sticky;z-index:3}.data-grid-datatable td[data-frozen]:has(+td:not([data-frozen])),.data-grid-datatable thead th[data-frozen]:has(+th:not([data-frozen])){box-shadow:inset -2px 0 #3c5dc459}table thead th.header{background-image:none!important;cursor:default}.header-cell{position:relative;display:flex;align-items:center;gap:2px}.header-cell label{flex:1 1 auto;cursor:default;margin:0;padding-left:2px;overflow:hidden;text-overflow:ellipsis}.header-cell.col-dragging{opacity:.8}.dg-column-ghost{border:1px solid #C1D0FD;box-sizing:border-box}.col-drop-indicator{position:fixed;z-index:3100;width:1px;border-radius:0;background:var(--orange-algorima, #f59d0f);pointer-events:none}.header-cell-end{justify-content:flex-end;align-items:center;height:25px}.header-handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:content-box;width:17px;height:20px;padding:0 2px;color:#3c5dc4;opacity:.35;cursor:grab}.header-handle:hover{opacity:1}.header-handle:active{cursor:grabbing}.header-sort,.header-agg{flex-shrink:0;color:#3c5dc4;font-size:11px;font-style:normal}.header-menu-button{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:18px;padding:0;border:0;border-radius:3px;background:none;color:#3c5dc4;opacity:.5;cursor:pointer}.header-menu-button:hover,.header-menu-button.open{opacity:1;background:#4465c926}.header-menu{position:fixed;z-index:3000;width:230px;padding:4px 0;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003}.header-menu ul{margin:0;padding:0;list-style:none}.header-menu li{display:flex;align-items:center;gap:8px;padding:5px 12px;color:#3c5dc4;font-size:12.5px;cursor:pointer}.header-menu li i{width:14px;text-align:center;visibility:visible}.header-menu li:hover{background:#dbe4ff}.header-menu li.checked{font-weight:600}.header-menu li.separator{height:1px;margin:4px 0;padding:0;background:#dbe4ff;cursor:default}.header-menu li .fa-check{visibility:hidden}.header-menu li.checked>.fa-check{visibility:visible}.header-menu li.menu-action.disabled{opacity:.45;cursor:default}.header-menu li.menu-action.disabled:hover{background:none}.header-menu .menu-action-icon{width:14px;height:14px;filter:brightness(0) saturate(100%) invert(36%) sepia(91%) saturate(628%) hue-rotate(191deg) brightness(89%) contrast(85%) brightness(75%)}.header-menu li.has-submenu{position:relative}.header-menu li.has-submenu.open{background:#dbe4ff}.header-menu li.has-submenu .submenu-caret{margin-left:auto}.header-menu .header-submenu{position:absolute;top:-5px;left:100%;width:200px;padding:4px 0;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003;font-weight:400}.header-menu .header-submenu.left{left:auto;right:100%}.header-menu .header-submenu.header-submenu-distinct{width:240px}.header-menu .header-submenu.header-submenu-columns{width:240px;max-height:320px;overflow-y:auto}.header-menu .header-submenu .column-choice input[type=checkbox]{width:14px;margin:0;pointer-events:none}.header-menu .header-submenu .submenu-loading{opacity:.6;cursor:default}.header-menu .header-submenu .view-lock{margin-left:auto;padding-left:8px;opacity:.5;font-size:11px}.header-menu .header-submenu.up{top:auto;bottom:-5px}.header-sort-rank{flex-shrink:0;color:#3c5dc4;font-size:9px}.aggregation-row .agg-label{margin-right:4px;color:#3c5dc4;font-size:10.5px;opacity:.7}.datagrid-custom-container:focus,.datagrid-custom-container:focus-visible{outline:none}.data-grid-datatable td .image ::ng-deep img{display:block}.data-grid-datatable td:has(>.grid-cursor){outline:2px solid #4465C9;outline-offset:-2px}.data-grid-datatable td:has(>.grid-range){background-color:#4465c940!important;box-shadow:inset 0 0 0 1px #4465c980;color:#4d5a81!important}.data-grid-datatable td:has(>.grid-range) ::ng-deep *{color:#4d5a81!important}.data-grid-datatable td:has(.grid-editor){padding:0!important;background-color:#fff}.grid-editor{display:block;height:23px;overflow:visible;color:#4d5a81}.grid-editor ::ng-deep .field-container,.grid-editor ::ng-deep .form-group,.grid-editor ::ng-deep .form-group>div,.grid-editor ::ng-deep .checkbox-container{margin:0!important;padding:0;min-height:0!important;height:23px}.grid-editor ::ng-deep .validation-message,.grid-editor ::ng-deep .checkbox-label{display:none}.grid-editor ::ng-deep input,.grid-editor ::ng-deep input:focus,.grid-editor ::ng-deep textarea{box-sizing:border-box;width:100%;height:23px!important;min-height:0!important;margin:0!important;padding:0 4px;border:1px solid #4465C9;border-radius:0;box-shadow:none;font-size:inherit;line-height:normal;resize:none}.grid-editor ::ng-deep input.ng-invalid.ng-touched,.grid-editor ::ng-deep input.ng-invalid.ng-dirty{border-color:#f78383}.grid-editor ::ng-deep input[type=checkbox]{width:auto}.grid-editor ::ng-deep .ng-select .ng-select-container{color:#4d5a81;min-height:0!important;height:23px!important;border-radius:0;border-color:#4465c9}.grid-editor ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:0}.grid-editor ::ng-deep .ng-select .ng-select-container .ng-value-container{padding-top:0}.grid-editor ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%!important;border:none}.grid-editor ::ng-deep .form-group>div{flex:1;min-width:0;width:100%}.grid-editor ::ng-deep .ng-select{width:100%}.grid-editor ::ng-deep alg-selector{display:flex;width:100%;height:23px}.grid-editor ::ng-deep .input-select-default,.grid-editor ::ng-deep .input-select-default.with-button{flex:1;min-width:0;padding-right:0;margin-right:0}.grid-editor ::ng-deep .input-group-btn{float:none}.grid-editor ::ng-deep .btn,.grid-editor ::ng-deep .btn-32,.grid-editor ::ng-deep .btn-input-select{height:23px;width:23px;padding:0;line-height:1;border-radius:0}.grid-editor ::ng-deep .input-with-button{display:flex;height:23px}.grid-editor ::ng-deep .switch{margin:2px 0 0 4px;transform:scale(.7);transform-origin:left top}::ng-deep body.dg-column-dragging,::ng-deep body.dg-column-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}\n"],
|
|
19227
|
+
template: "<div #datagridContainer [class]=\"this.datagridClass\" tabindex=\"-1\" (keydown)=\"onGridKeyDown($event)\" (scroll)=\"onGridScroll($event)\"\r\n (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\" (contextmenu)=\"openEmptyAreaContextMenu($event)\">\r\n <ng-container>\r\n <table class=\"data-grid-datatable\">\r\n <ng-container *ngIf=\"this.facade.style as ctx\">\r\n <ng-container *ngIf=\"this.facade.config.columns$ | async as rcolumns\">\r\n <thead>\r\n <tr>\r\n <th class=\"header row-state\" (click)=\"addFilterQuery()\"></th>\r\n <!-- En-tête : poignée de déplacement à gauche, intitulé, indicateur de tri,\r\n flèche du menu (tri, agrégation) à droite. Le clic ne trie plus. -->\r\n <th #thHeader *ngFor=\"let col of rcolumns;let i = index\"\r\n [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n [attr.class]=\"'header' | gridStyle : ctx : { column : col }\"\r\n [style.width.px]=\"colWidth(col)\" [style.min-width.px]=\"colWidth(col)\" [style.max-width.px]=\"colWidth(col)\"\r\n [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n <div class=\"header-cell\"\r\n [class.col-dragging]=\"draggedColumn === col.Property\">\r\n <span class=\"header-handle\" title=\"Déplacer la colonne\"\r\n (mousedown)=\"onHeaderMouseDown(col, $event)\">\r\n <i class=\"fa fa-ellipsis-v\"></i>\r\n </span>\r\n <label>{{ getHeaderLabel(col) }}</label>\r\n <i *ngIf=\"this.facade.filter.isAsc(col.Property)\" class=\"fa fa-long-arrow-up header-sort\" title=\"Tri croissant\"></i>\r\n <i *ngIf=\"this.facade.filter.isDesc(col.Property)\" class=\"fa fa-long-arrow-down header-sort\" title=\"Tri décroissant\"></i>\r\n <sup *ngIf=\"this.facade.filter.sortRank(col.Property) > 0\" class=\"header-sort-rank\"\r\n title=\"Rang dans le tri personnalisé\">{{ this.facade.filter.sortRank(col.Property) }}</sup>\r\n <i *ngIf=\"activeAggregations[col.Property]\" class=\"header-agg\" [title]=\"'Agrégation : ' + aggregationLabel(activeAggregations[col.Property])\">Σ</i>\r\n <!-- Dernière colonne suivie de la colonne vide de fin : sa flèche est dans la colonne vide. -->\r\n <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n *ngIf=\"!(ctx.enableLastColumnResize && i === rcolumns.length - 1)\"\r\n [class.open]=\"headerMenu?.column.Property === col.Property\"\r\n (click)=\"toggleHeaderMenu(col, $event)\">\r\n <i class=\"fa fa-caret-down\"></i>\r\n </button>\r\n </div>\r\n <!-- Bord droit : largeur de la colonne (tirer), ajustée au contenu (double clic). -->\r\n <span class=\"col-resizer\" title=\"Largeur de la colonne (double clic : ajuster au contenu)\"\r\n (mousedown)=\"startResize(col, $event)\" (dblclick)=\"autoFitColumn(col, $event)\"\r\n (click)=\"$event.stopPropagation()\"></span>\r\n </th>\r\n <th *ngIf=\"ctx.enableLastColumnResize\" #lastColumnHeader class=\"header last-column\"\r\n (contextmenu)=\"openHeaderContextMenu($event, rcolumns[rcolumns.length - 1])\">\r\n <div class=\"header-cell header-cell-end\" *ngIf=\"rcolumns.length > 0\">\r\n <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n [class.open]=\"headerMenu?.column.Property === rcolumns[rcolumns.length - 1].Property\"\r\n (click)=\"toggleHeaderMenu(rcolumns[rcolumns.length - 1], $event)\">\r\n <i class=\"fa fa-caret-down\"></i>\r\n </button>\r\n </div>\r\n </th>\r\n\r\n </tr>\r\n <ng-container *ngIf=\"this.facade.filter.additionalQuery$ | async as additionalQuery\">\r\n <tr #thFilterRows *ngFor=\"let filterRow of additionalQuery.Rows;let i = index\" >\r\n <th class=\"filter-header row-state\" (click)=\"removeFilterQuery(i)\"></th>\r\n <th class=\"filter-header\" [ngClass]=\"{disabled: !col.IsFilterEnabled}\" *ngFor=\"let col of rcolumns;let i = index\"\r\n [attr.id]=\"guid.toString() + '-filter-' + i\">\r\n <input *ngIf=\"col.IsFilterEnabled\" type=\"text\"\r\n class=\"filter-header-input\"\r\n name=\"keyword\"\r\n #uniquename=\"ngModel\"\r\n [attr.id]=\"guid.toString() + '-filter-input-' + col.Property\"\r\n [placeholder]=\"filterRow.ClausesByPropertyName.get(col.Property).FilterValues?.length ? 'Filtre avancé : ' + filterRow.ClausesByPropertyName.get(col.Property).FilterValues.length + ' valeur(s)' : ''\"\r\n [(ngModel)]=\"filterRow.ClausesByPropertyName.get(col.Property).FilterValue\"\r\n (ngModelChange)=\"handleFilterChanged($event, filterRow, col.Property)\"\r\n (change)=\"validateFilterChanged($event, filterRow, col.Property)\"\r\n />\r\n </th>\r\n <ng-container>\r\n <th #lastColumnFilter class=\"filter-header last-column\"></th>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </thead>\r\n\r\n <tbody>\r\n <ng-container *ngIf=\"this.facade.data\">\r\n <ng-container *ngFor=\"let row of this.data.Values; let r = index;\">\r\n <tr\r\n [class]=\"'alternating' | gridStyle : ctx : { row : row, index : r, maxIndex : this.data.Values.length, hasAggregates: hasAggregates }\"\r\n [class.selected]=\"isRowSelected(row)\"\r\n [attr.id]=\"guid.toString() + '-row-' + row.Id\"\r\n (mousedown)=\"onRowMouseDown(row, $event)\"\r\n (mouseup)=\"onRowMouseUp(row, $event)\"\r\n (click)=\"onRowClick(row, $event)\"\r\n\r\n [rowRef]=\"guid + '-row-' + row.Id\"\r\n >\r\n\r\n <th [attr.class]=\"'rowstate' | gridStyle : ctx : { row : row }\">\r\n <ng-container *ngIf=\"selectionStyler.isModified(row) && !selectionStyler.isInvalid(row) && !selectionStyler.isWarning(row)\">\r\n <div class=\"new-rowstate\"><span>...</span></div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectionStyler.isInvalid(row)\">\r\n <div> <img class=\"error-row-icon\" src=\"assets/images/error.svg\" /> </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectionStyler.isWarning(row) && !selectionStyler.isInvalid(row)\">\r\n <div> <img class=\"error-row-icon\" src=\"assets/images/warning.svg\" /> </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ctx.displayDetail\">\r\n <button type=\"button\" [attr.id]=\"row.Id + '_button'\" class=\"toggle-button btn\" (click)=\"toggleDetail(row)\">\r\n <i class=\"fa fa-chevron-right fa-custom\"></i>\r\n </button>\r\n </ng-container>\r\n </th>\r\n\r\n <td *ngFor=\"let column of rcolumns; index as i\"\r\n [attr.id]=\"cellId(row, column)\"\r\n [style.max-width.px]=\"colWidth(column)\" [attr.data-sized]=\"colWidth(column) ? '' : null\"\r\n [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\"\r\n [class]=\"'cell' | gridStyle : ctx : { row : row,column : column,index : r }\"\r\n [class.selected]=\"isRowSelected(row)\"\r\n (mousedown)=\"onCellMouseDown(r, i, $event)\"\r\n (mouseenter)=\"onCellMouseEnter(r, i, $event)\"\r\n (click)=\"onCellClick(row, column)\"\r\n (dblclick)=\"onCellDblClick(row, column)\">\r\n\r\n <alg-datagrid-cell #dataGridCellComponent\r\n class=\"gridcell-container\"\r\n [entity]=\"row\"\r\n [isEditable]=\"canEditCell(row, column)\"\r\n [property]=\"column.Property\"\r\n [managed]=\"true\"\r\n [mode]=\"showEditor(row, column) ? 'edit' : 'view'\"\r\n [class.grid-cursor]=\"isCursorCell(row, column)\"\r\n [class.grid-range]=\"isInRange(r, i)\"\r\n (contextmenu)=\"openContextMenu($event, row, column)\">\r\n\r\n <ng-template alg-editMode>\r\n <!-- Éditeur du champ du formulaire qui correspond à la colonne (sinon déduit de la colonne), à la hauteur de la ligne. -->\r\n <alg-field class=\"grid-editor\"\r\n [field]=\"getEditField(column)\"\r\n [form]=\"getRowForm(row)\"\r\n [showLabel]=\"false\"\r\n (propertyChanged)=\"onCellChanged(row, $event)\"\r\n >\r\n <!-- [focusable]=\"cellFocus\" -->\r\n </alg-field>\r\n </ng-template>\r\n <ng-template alg-viewMode>\r\n\r\n <!-- Colonne booléenne : case à cocher centrée, valeur vide comprise (non cochée). -->\r\n <div *ngIf=\"isBooleanColumn(column)\" class=\"grid-checkbox\">\r\n <input type=\"checkbox\" tabindex=\"-1\" [checked]=\"isChecked(row[column.Property])\" />\r\n </div>\r\n\r\n <div [ngSwitch]=\"column.Display?.type\" *ngIf=\"!isBooleanColumn(column) && !isUndefined(row[column.Property])\">\r\n <div *ngSwitchCase=\"'url'\">\r\n <a [routerLink]=\"[$safeNavigationMigration(column.Display?.baseUrl),row[column.Property]]\">\r\n {{ row.Id || row[column.Property] }}\r\n </a>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'img'\" class=\"image\">\r\n <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\"\r\n [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"20\" [imageWidth]=\"20\">\r\n </alg-image>\r\n\r\n <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n {{ row[column.ToolTipProperty] }}\r\n </div>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'img-file'\" class=\"image\">\r\n\r\n <alg-image\r\n [imageUrl]=\"this.getImageUrl(row,column)\" [wide]=\"true\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n </alg-image>\r\n\r\n <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n {{ row[column.ToolTipProperty] }}\r\n </div>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'wide-img'\" class=\"image\">\r\n <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\" [wide]=\"true\"\r\n [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n </alg-image>\r\n\r\n <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n {{ row[column.ToolTipProperty] }}\r\n </div>\r\n </div>\r\n\r\n <span *ngSwitchCase=\"'date'\">\r\n {{row[column.Property]| date: column.Display?.format || 'dd/MM/yyyy'}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'boolean'\">{{row[column.Property] ? 'OUI' : 'NON'}} </span>\r\n\r\n <span *ngSwitchCase=\"'datetime'\">{{row[column.Property] | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}</span>\r\n\r\n <span *ngSwitchCase=\"'money'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\"\r\n class=\"money\">\r\n {{\r\n row[column.Property]\r\n | currency: column.Display?.currency\r\n || (column.Display?.sourceProperty && row[column.Display?.sourceProperty] ? row[column.Display?.sourceProperty] : false)\r\n || 'EUR' : 'symbol'\r\n\r\n | todefine: $safeNavigationMigration(column.Display?.handleError)\r\n }}\r\n\r\n <div class=\"tool-tip\" *ngIf=\"ctx.showOnToolTip(row,column)\">\r\n {{ctx.showOnToolTip(row,column)}}\r\n </div>\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'percent'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | percent : column.Display?.format\r\n || '1.0-2' | todefine: $safeNavigationMigration(column.Display?.handleError)}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'number'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | number: column.Display?.format\r\n || '1.0-3' | todefine : $safeNavigationMigration(column.Display?.handleError)}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'fixedsizeinteger'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n {{row[column.Property] | tofixedsizeinteger : $safeNavigationMigration(column.Display?.completingCaracter) : $safeNavigationMigration(column.Display?.width) }}\r\n </span>\r\n <span *ngSwitchDefault [innerText]=\"column.Property == 'Id' ? (row[column.Property] < 0 ? '' : row[column.Property]) : row[column.Property]\">\r\n </span>\r\n </div>\r\n\r\n <div *ngIf=\"!isBooleanColumn(column) && isUndefined(row[column.Property])\">\r\n <span *ngIf=\"!isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\" class=\"mw-invalid\">\r\n {{ column.Display?.nullCaseText }}\r\n </span>\r\n\r\n <span *ngIf=\"isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\">\r\n \r\n </span>\r\n </div>\r\n\r\n </ng-template>\r\n\r\n </alg-datagrid-cell>\r\n </td>\r\n <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n <!-- Colonne vide de fin : clic droit = menu de la dernière colonne. -->\r\n <td (contextmenu)=\"openContextMenu($event, row, rcolumns[rcolumns.length - 1])\"></td>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n\r\n <tfoot>\r\n <tr class=\"empty-row\" *ngIf=\"hasAggregates\">\r\n <td></td>\r\n </tr>\r\n <tr class=\"aggregation-row\" *ngIf=\"hasAggregates\">\r\n <td class=\"row-state\"></td>\r\n <td *ngFor=\"let column of rcolumns; index as i\" [attr.class]=\"'cell' | gridStyle : ctx : { column : column, index : i }\"\r\n [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n\r\n <ng-container *ngFor=\"let agg of columnAggregates[column.Property]\">\r\n\r\n <span class=\"agg-label\">{{ aggregationLabel(agg.op) }}</span>\r\n <span [ngSwitch]=\"agg.op === 'COUNT' ? 'count' : column.Display?.type\">\r\n\r\n <span *ngSwitchCase=\"'count'\">{{ agg.value | number: '1.0-0' }}</span>\r\n <span *ngSwitchCase=\"'percent'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\r\n <span *ngSwitchCase=\"'fixedsizeinteger'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\r\n\r\n <span *ngSwitchCase=\"'money'\" class=\"money\">\r\n {{ agg.value | currency: getColCurrency(column) }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'date'\">\r\n {{agg.value | date: column.Display?.format || 'dd/MM/yyyy'}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'datetime'\">\r\n {{agg.value | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'number'\">\r\n {{agg.value | number: column.Display?.format || '1.0-3'}}\r\n </span>\r\n\r\n <span *ngSwitchDefault>\r\n {{agg.value}}\r\n </span>\r\n\r\n </span>\r\n\r\n </ng-container>\r\n\r\n </td>\r\n\r\n <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n <td class=\"last-column\"></td>\r\n </ng-container>\r\n\r\n </tr>\r\n </tfoot>\r\n </ng-container>\r\n </ng-container>\r\n </table>\r\n </ng-container>\r\n</div>\r\n\r\n\r\n<!-- Emplacement visé par une colonne déplacée : trait orange sur la séparation des deux en-têtes. -->\r\n<div class=\"col-drop-indicator\" *ngIf=\"dropIndicator\"\r\n [ngStyle]=\"{ left: dropIndicator.left + 'px', top: dropIndicator.top + 'px', height: dropIndicator.height + 'px' }\"></div>\r\n\r\n<!-- Menu d'une colonne (flèche de l'en-tête ou clic droit sur une cellule), en trois zones séparées\r\n par un trait : Tri (sous-menu « Trier »), Actions (celles du panneau des actions), Fonctions (sous-menu « Fonctions »). -->\r\n<div class=\"header-menu\" *ngIf=\"headerMenu\"\r\n [ngStyle]=\"{ top: headerMenu.y + 'px', left: headerMenu.x + 'px', visibility: headerMenu.ready ? 'visible' : 'hidden' }\"\r\n (click)=\"$event.stopPropagation()\" (contextmenu)=\"$event.preventDefault()\">\r\n <ul>\r\n <!-- Tri : sous-menu « Trier » (croissant, décroissant, personnalisé). -->\r\n <li class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'sort'\"\r\n [class.checked]=\"this.facade.filter.isAsc(headerMenu.column.Property) || this.facade.filter.isDesc(headerMenu.column.Property) || this.facade.filter.getSortList().length > 1\"\r\n (mouseenter)=\"setSubmenu('sort')\" (click)=\"setSubmenu('sort')\">\r\n <i class=\"fa fa-sort\"></i><span>Trier</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu\" *ngIf=\"headerMenu.submenu === 'sort'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <li [class.checked]=\"this.facade.filter.isAsc(headerMenu.column.Property)\" (click)=\"sortColumn('asc')\">\r\n <i class=\"fa fa-sort-amount-asc\"></i><span>Par ordre croissant</span>\r\n </li>\r\n <li [class.checked]=\"this.facade.filter.isDesc(headerMenu.column.Property)\" (click)=\"sortColumn('desc')\">\r\n <i class=\"fa fa-sort-amount-desc\"></i><span>Par ordre décroissant</span>\r\n </li>\r\n <li [class.checked]=\"this.facade.filter.getSortList().length > 1\" (click)=\"openCustomSort()\">\r\n <i class=\"fa fa-sort\"></i><span>Tri personnalisé…</span>\r\n </li>\r\n </ul>\r\n </li>\r\n <!-- Filtre sur la valeur de la cellule (clic droit sur une cellule) : première ligne des filtres composés. -->\r\n <li *ngIf=\"cellFilterValue() !== undefined\" (click)=\"filterOnCell()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <i class=\"fa fa-filter\"></i><span>Filtrer sur « {{ cellFilterLabel() }} »</span>\r\n </li>\r\n <!-- Filtre avancé : valeurs distinctes de la colonne sur les résultats, à cocher (condition « dans la liste »). -->\r\n <li *ngIf=\"headerMenu.column.IsFilterEnabled\" class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'distinct'\"\r\n [class.checked]=\"this.facade.filter.getFilterValues(headerMenu.column.Property).length > 0\"\r\n (mouseenter)=\"setSubmenu('distinct')\" (click)=\"setSubmenu('distinct')\">\r\n <i class=\"fa fa-filter\"></i><span>Filtre avancé</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu header-submenu-distinct\" *ngIf=\"headerMenu.submenu === 'distinct'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <alg-grid-distinct-filter [facade]=\"this.facade\" [entityKey]=\"this.entityKey\" [property]=\"headerMenu.column.Property\"\r\n (done)=\"closeViewMenu()\" (loaded)=\"onViewMenuLoaded()\"></alg-grid-distinct-filter>\r\n </ul>\r\n </li>\r\n <!-- Affichage : vues personnalisées (cochée = affichée), puis « Modifier… ». -->\r\n <li *ngIf=\"this.facade.config.viewChooser\" class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'columns'\"\r\n (mouseenter)=\"setSubmenu('columns')\" (click)=\"setSubmenu('columns')\">\r\n <i class=\"fa fa-columns\"></i><span>Affichage</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu header-submenu-columns\" *ngIf=\"headerMenu.submenu === 'columns'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <alg-grid-view-menu [chooser]=\"this.facade.config.viewChooser\" (done)=\"closeViewMenu()\" (loaded)=\"onViewMenuLoaded()\"></alg-grid-view-menu>\r\n </ul>\r\n </li>\r\n <!-- Colonnes figées à gauche, de la première jusqu'à celle-ci. -->\r\n <li [class.checked]=\"isFrozen(columnIndex(headerMenu.column))\" (click)=\"toggleFrozen()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <i class=\"fa fa-thumb-tack\"></i>\r\n <span>{{ frozenUntil === columnIndex(headerMenu.column) ? 'Libérer les colonnes' : 'Figer jusqu\\'à cette colonne' }}</span>\r\n </li>\r\n <li *ngIf=\"frozenUntil !== undefined && frozenUntil !== columnIndex(headerMenu.column)\"\r\n (click)=\"unfreezeColumns()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <i class=\"fa fa-unlock\"></i><span>Libérer les colonnes</span>\r\n </li>\r\n\r\n <!-- Actions -->\r\n <ng-container *ngIf=\"visibleActions.length > 0\">\r\n <li class=\"separator\"></li>\r\n <ng-container *ngFor=\"let action of visibleActions\">\r\n <ng-container *ngIf=\"{ disabled: (action.disabled$ | async) } as state\">\r\n <li class=\"menu-action\" [class.disabled]=\"state.disabled\"\r\n (click)=\"executeMenuAction(action, state.disabled)\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <img class=\"menu-action-icon\" [src]=\"getActionImageUrl(action.icon)\" [alt]=\"action.title\" />\r\n <span>{{ action.title }}</span>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Affichage -->\r\n <li class=\"separator\"></li>\r\n <li class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'display'\"\r\n (mouseenter)=\"setSubmenu('display')\" (click)=\"setSubmenu('display')\">\r\n <i class=\"fa fa-calculator\"></i><span>Fonctions</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu\" *ngIf=\"headerMenu.submenu === 'display'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <li *ngFor=\"let op of getAggregationOptions(headerMenu.column)\"\r\n [class.checked]=\"activeAggregations[headerMenu.column.Property] === op\"\r\n (click)=\"aggregateColumn(op)\">\r\n <i class=\"fa fa-check\"></i><span>{{ aggregationLabel(op) }}</span>\r\n </li>\r\n <ng-container *ngIf=\"activeAggregations[headerMenu.column.Property]\">\r\n <li class=\"separator\"></li>\r\n <li (click)=\"aggregateColumn(null)\">\r\n <i class=\"fa fa-times\"></i><span>Ne plus afficher</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ul>\r\n</div>\r\n\r\n",
|
|
19228
|
+
styles: [".home-page{font-family:Open sans,sans-serif;background:#fff;-webkit-font-smoothing:antialiased;height:100%;width:100%;padding:16px}.main-container{margin:0 50px}.main-container-modal{width:calc(100% - 50px);margin:10px 25px 0}.moyen-titre{font-weight:700;font-size:24px;color:#4d5a81;margin:8px 0;border-bottom:solid 1px #DBE4FF}.grand-titre{font-weight:700;font-size:28px;color:#4d5a81;margin:0 0 8px}.petit-titre{font-weight:700;font-size:16px;color:#4d5a81;margin:0 0 8px}.petit-titre.underlined{border-bottom:solid 1px #4D5A81}.paragraph{padding:0 15px}.paragraph-highlight{padding:5px 15px 0 12px;border-left:5px solid #8EA7F8;border-bottom:1px solid #DBE4FF;border-top:1px solid #DBE4FF;border-right:1px solid #DBE4FF;background-color:#f7faff}.highlight{background-color:#f7faff;border:1px solid #DBE4FF;border-radius:5px;padding:15px;color:#3c5dc4;margin:0 0 16px}.highlight p{margin-bottom:0}.highlight:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"53.294\" height=\"50.629\" viewBox=\"0 0 53.294 50.629\">%0D%0A <path id=\"allerg\\e8ne\" d=\"M830.494,25.793l-5.814,6.783.727,8.963-8.721,1.938-4.6,7.752L803.847,47.6l-8.236,3.634-4.6-7.51-8.721-1.938.727-8.963L777.2,26.035l5.814-6.783-.727-8.963,8.721-1.938L795.61.6l8.236,3.634L812.083.6l4.6,7.752,8.721,1.938-.727,8.963Zm-24.467,2.422V13.681h-4.845V28.216Zm0,9.69V33.06h-4.845v4.845Z\" transform=\"translate(-777.2 -0.6)\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 8px 24px 0;filter:invert(31%) sepia(51%) saturate(1323%) hue-rotate(199deg) brightness(99%) contrast(94%)}.notification{background-color:#dbe4ff;border:1px solid #C4D0F9;border-radius:5px;color:#4d5a81;margin:16px;padding:5px 15px;text-align:justify}.notification:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info-circle\" class=\"svg-inline--fa fa-info-circle fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\"></path></svg>');background-repeat:no-repeat;margin:0 8px 0 0;filter:invert(31%) sepia(8%) saturate(2329%) hue-rotate(188deg) brightness(103%) contrast(85%)}.notification-text{padding:0 15px 0 30px;font-size:16px}:host{flex:1}.header.last-column{border-left:none!important;width:100%}table thead .sorting,table thead .sorting_asc,table thead .sorting_desc,table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table thead th:first-child,table tfoot tr:first-child{position:sticky;left:0;z-index:2}table tbody th:first-child{position:sticky;left:0;z-index:1;border-right:none}table tbody th:first-child div{text-align:center;vertical-align:middle;line-height:20px}table tbody tr.row-odd th:first-child{background:#ebf0ff}table tbody tr.selected.row-odd.mw-invalid th:first-child,table tbody tr.selected.row-even.mw-invalid th:first-child,table tbody tr.selected.row-odd.mw-warning th:first-child,table tbody tr.selected.row-even.mw-warning th:first-child,table tbody tr.selected.row-even th:first-child,table tbody tr.selected.row-odd th:first-child{background-color:#8ea7f8;color:#fff}table tbody tr.row-odd.mw-invalid th:first-child,table tbody tr.row-even.mw-invalid th:first-child{background-color:#f2dede}table tbody tr.row-odd.mw-warning th:first-child,table tbody tr.row-even.mw-warning th:first-child{background-color:#fff4de}table thead th{position:-webkit-sticky;position:sticky;top:0;z-index:1;background:#fff;border-left:1px solid #3C5DC4;border-bottom:1px solid #3C5DC4}table thead .sorting{background-image:none;cursor:pointer}table thead .sorting_asc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxNjIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxNTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+z5ABTAAAAI5JREFUeNpi/P//PwO1ABMDFQELIQXVjfe4gFQbEJe11iv9otRl2UCcBcSphBQy4gszoKu0gNROIJYB4jtA7AF03V2SXQY0iBFIFUMNAgEVIM6DipPsTQcgDkQTSwRia5IMA9rOC6RqgVgQTQokXgOUZyfFZSFQF/zAgh2BOIjkCBjQRDtq2Khh9DAMIMAAT9AmNBDSXegAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_desc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxQTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxOTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1fsfwAAAAJdJREFUeNpi/P//PwO1ABMDFcGoYaOG0cMwFmyC1Y33IoHUAiD+h8MBGa31SvOJddk6IN4PxBxY8FEgXkO0N4G2/gRSLUD8GU3qPRA3A+U/kxpmIBege2U9EB/ApYERX6kBDDtlILUDiFWA+AkQuwNddY2s2ARqvAukJgDxbyCehM8gnLGJBmYDsSoQTyWkkHHQFo4AAQYAAA0piq4hbqwAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-image:none}.checkbok-container{align-items:center;margin:0;padding:0}.gridcell-container{padding:0;min-width:fit-content}.gridcell-container input[type=number]{display:block;size:1;font-size:10pt;width:100%!important;height:100%;margin:0!important;border:2px solid #F78383}.datagrid-custom-container{height:100%;overflow:auto;margin-left:-1px}.data-grid-datatable{table-layout:fixed;cursor:pointer;border-spacing:0px}.data-grid-datatable td{box-shadow:none;padding:2px 5px;white-space:nowrap}.data-grid-datatable td.row-state{padding:2px 5px;width:16px}.data-grid-datatable td.img{padding:2px 5px}.data-grid-datatable td.row-state img{height:16px;width:16px;margin-top:-3px;padding:0}.data-grid-datatable tr{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header{vertical-align:bottom;padding:2px 5px 2px 0;font-weight:400;color:#3c5dc4;white-space:nowrap;line-height:25px;min-width:32px;margin-bottom:5px}.header.img{min-width:16px}.header.row-state{min-width:27px;position:-webkit-sticky;position:sticky;top:0;left:0;z-index:2;background:#fff;border-left:none;border-right:none}.filter-header{background-color:#f7f7f7!important}.filter-header.disabled{background-color:#9fa9c7!important}.filter-header.row-state:hover:before{position:relative;display:block;float:left;width:16px;height:16px;content:\" \";background-size:16px 16px;-webkit-background-size:16px 16px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"57\" height=\"57\" viewBox=\"0 0 57 57\">%0D%0A <path id=\"Rond_Croix\" data-name=\"Rond Croix\" d=\"M28.5,57A28.5,28.5,0,0,1,8.347,8.347,28.5,28.5,0,1,1,48.652,48.652,28.317,28.317,0,0,1,28.5,57Zm0-24.036h0l11.9,11.9L44.869,40.4,32.964,28.5,44.869,16.593,40.4,12.129,28.5,24.034,16.594,12.129l-4.465,4.464L24.034,28.5,12.129,40.4l4.463,4.465L28.5,32.965Z\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 0 0 3px;filter:brightness(0) saturate(100%) invert(70%) sepia(93%) saturate(1540%) hue-rotate(309deg) brightness(105%) contrast(94%)}.filter-header-input{height:calc(100% - 2px);width:calc(100% - 2px);margin:0;border:none!important;background-color:#f7f7f7;padding:0 0 0 5px;color:#4d5a81}.header.row-state:before{position:relative;display:block;float:left;width:16px;height:16px;content:\" \";background-size:16px 16px;-webkit-background-size:16px 16px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->%0D%0A<path fill=\"currentColor\" d=\"M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z\"/></svg>');background-repeat:no-repeat;margin:0 0 3px 5px;filter:brightness(0) saturate(100%) invert(56%) sepia(79%) saturate(2301%) hue-rotate(202deg) brightness(92%) contrast(91%)}.filter-header.last-column{border-left:none!important}.header label{cursor:pointer;margin-bottom:0;margin-right:10px;padding-left:5px;width:100%}.row-odd{background-color:#ebf0ff;border-left:1px solid #C1D0FD;border-bottom:1px solid #C1D0FD}.row-even{background-color:#f7faff;border-left:1px solid #C1D0FD;border-bottom:1px solid #C1D0FD}.error-row-icon{padding:2px;width:20px}.selected{background-color:#8ea7f8;color:#fff}.mw-invalid{font-weight:600;background-color:#f2dede;border:1px solid var(--red-error)}.mw-invalid td{background-color:#f2dede!important}.data-grid-datatable tbody tr.mw-invalid>td,.data-grid-datatable tbody tr.mw-invalid>th{box-shadow:inset 0 1px 0 var(--red-error),inset 0 -1px 0 var(--red-error)}span.mw-invalid{padding:0 3px;color:var(--red-error);background-color:transparent}.mw-warning.selected,.mw-invalid.selected{background-color:#8ea7f8}.mw-warning.selected td,.mw-invalid.selected td{background-color:#8ea7f8!important}.mw-warning{font-weight:600;background-color:#fff4de;border:1px solid var(--orange-algorima)}.mw-warning td{background-color:#fff4de!important}.mw-modified{font-weight:600;border:1px solid var(--main-bg-color)}.first-row{border-top:none}.last-row,.last-row td{border-bottom:none!important}.data-grid-datatable>tbody>tr{z-index:50}.image{position:relative;display:flex;flex-direction:row}.image img{height:20px;width:auto}td.money{position:relative}.tool-tip{visibility:hidden;background-color:#424242;color:#fff;text-align:left;border-radius:3px;font-size:15px;position:absolute;z-index:1;top:-10%;left:150%;opacity:0;transition:opacity .3s;padding:5px 15px;white-space:nowrap;overflow:visible}.tool-tip:after{content:\" \";position:absolute;top:50%;right:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent rgb(66,66,66) transparent transparent}.image:hover .tool-tip{visibility:visible;opacity:1}td.money:hover .tool-tip{visibility:visible;opacity:1;left:100%;height:28px;font-size:13px;margin-top:0;padding:5px 10px 10px}.disabled{pointer-events:none}.edit-mode{background-color:#fff;border:1px solid #4465C9;min-width:90px!important;height:30px!important}.edit-mode .form-group{min-height:0px}.edit-mode .inactivated{background-color:#dbe4ff80}.edit-mode .inactivated-fo{background-color:#dbe4ff}.edit-mode .ecartclass{border:2px solid #4465C9}.edit-mode .error-cell{font-weight:700;color:#f78383!important}.edit-mode .selected{color:#4d5a81}.highlight-1,.highlight-1.selected,.edit-mode.highlight-1.selected{background-color:#4d5a81!important;color:#fff!important}.highlight-2,.highlight-2.selected,.edit-mode.highlight-2.selected{background-color:#dbe4ff!important;color:#4d5a81!important}.highlight-3,.highlight-3.selected,.edit-mode.highlight-3.selected{background-color:#4465c9!important;color:#fff!important}.highlight-4,.highlight-4.selected,.edit-mode.highlight-4.selected{background-color:#f78383!important;color:#fff!important}.highlight-5,.highlight-5.selected{background-color:#4465c9!important;color:#fff}.fixed-column{position:-webkit-sticky;position:sticky;left:27px;z-index:2!important;border-left:none}.fixed-header{position:-webkit-sticky;position:sticky;left:27px;z-index:3!important;background:#fff}.has-focus{padding:0!important}.has-focus ::ng-deep input,.has-focus ::ng-deep input:focus-visible,.has-focus ::ng-deep input:focus{border-radius:.1;outline:none!important;width:100%;height:29px;min-height:0;margin:0;border:1px solid #4465C9}.has-focus ::ng-deep .form-group{margin-bottom:0;min-height:0}.has-focus ::ng-deep .field-container{margin-bottom:0}.edit-mode.has-focus{width:90px!important}.bordered{border-left:1px solid #14358f!important;border-right:1px solid #14358f!important}.match-keywords{color:var(--main-bg-color);font-weight:700}.datagrid-img img{height:20px;width:20px}.right-align{text-align:right}.left-align{text-align:left}.detail-div{height:0px;overflow:hidden;transition:all .2s linear;width:100%}.fa-custom{font-size:smaller}.detail-div-show{height:150px;transition:all .2s linear}.toggleable{visibility:collapse}.toggleable-show{visibility:visible}.toggle-button-down{transform:rotate(90deg);transition:all .2s linear}.no-result{color:#5272d3;height:100%;width:100%;padding:15px 15px 150px}.new-rowstate{display:flex;flex-direction:row;align-items:center;align-self:center;height:100%;width:100%}.new-rowstate span{height:100%;width:100%;margin-top:-6px}.context-menu{position:absolute;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 12px #0000004d;padding:8px;z-index:1000;min-width:75px;max-width:250px;transition:all .3s ease-in-out}.context-menu ul{list-style:none;margin:0;padding:0}.context-menu li{padding:10px 14px;cursor:pointer;border-radius:8px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.context-menu li:hover{background:linear-gradient(135deg,#ffffff4d,#ffffff1a);transform:scale(1.02)}.context-menu li:active{transform:scale(.98)}.grid-container{overflow:auto;position:relative}.aggregation-row{position:sticky;bottom:0;z-index:50;background:#f7faff!important;background-color:#f7faff!important;font-weight:700;border-top:1px solid #4D5A81!important;border-bottom:1px solid #4D5A81!important}.aggregation-row td{background:#f7faff!important;background-color:#f7faff!important;border-top:1px solid #4D5A81!important;border-bottom:1px solid #4D5A81!important;border-left:none!important;border-right:none!important}.empty-row td{padding:0}.col-resizer{position:absolute;top:0;right:-5px;z-index:4;width:10px;height:100%;cursor:col-resize}.col-resizer:hover{background:#3c5dc440}.data-grid-datatable td[data-sized]{overflow:hidden;text-overflow:ellipsis}:where(.data-grid-datatable tbody tr,.data-grid-datatable tfoot tr){background-color:#fff}.data-grid-datatable td[data-frozen]{position:sticky;z-index:1;background-color:inherit}.data-grid-datatable thead th[data-frozen]{position:sticky;z-index:3}.data-grid-datatable td[data-frozen]:has(+td:not([data-frozen])),.data-grid-datatable thead th[data-frozen]:has(+th:not([data-frozen])){box-shadow:inset -2px 0 #3c5dc459}table thead th.header{background-image:none!important;cursor:default}.header-cell{position:relative;display:flex;align-items:center;gap:2px}.header-cell label{flex:1 1 auto;cursor:default;margin:0;padding-left:2px;overflow:hidden;text-overflow:ellipsis}.header-cell.col-dragging{opacity:.8}.dg-column-ghost{border:1px solid #C1D0FD;box-sizing:border-box}.col-drop-indicator{position:fixed;z-index:3100;width:1px;border-radius:0;background:var(--orange-algorima, #f59d0f);pointer-events:none}.header-cell-end{justify-content:flex-end;align-items:center;height:25px}.header-handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:content-box;width:17px;height:20px;padding:0 2px;color:#3c5dc4;opacity:.35;cursor:grab}.header-handle:hover{opacity:1}.header-handle:active{cursor:grabbing}.header-sort,.header-agg{flex-shrink:0;color:#3c5dc4;font-size:11px;font-style:normal}.header-menu-button{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:18px;padding:0;border:0;border-radius:3px;background:none;color:#3c5dc4;opacity:.5;cursor:pointer}.header-menu-button:hover,.header-menu-button.open{opacity:1;background:#4465c926}.header-menu{position:fixed;z-index:3000;width:230px;padding:4px 0;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003}.header-menu ul{margin:0;padding:0;list-style:none}.header-menu li{display:flex;align-items:center;gap:8px;padding:5px 12px;color:#3c5dc4;font-size:12.5px;cursor:pointer}.header-menu li i{width:14px;text-align:center;visibility:visible}.header-menu li:hover{background:#dbe4ff}.header-menu li.checked{font-weight:600}.header-menu li.separator{height:1px;margin:4px 0;padding:0;background:#dbe4ff;cursor:default}.header-menu li .fa-check{visibility:hidden}.header-menu li.checked>.fa-check{visibility:visible}.header-menu li.menu-action.disabled{opacity:.45;cursor:default}.header-menu li.menu-action.disabled:hover{background:none}.header-menu .menu-action-icon{width:14px;height:14px;filter:brightness(0) saturate(100%) invert(36%) sepia(91%) saturate(628%) hue-rotate(191deg) brightness(89%) contrast(85%) brightness(75%)}.header-menu li.has-submenu{position:relative}.header-menu li.has-submenu.open{background:#dbe4ff}.header-menu li.has-submenu .submenu-caret{margin-left:auto}.header-menu .header-submenu{position:absolute;top:-5px;left:100%;width:200px;padding:4px 0;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003;font-weight:400}.header-menu .header-submenu.left{left:auto;right:100%}.header-menu .header-submenu.header-submenu-distinct{width:240px}.header-menu .header-submenu.header-submenu-columns{width:240px;max-height:320px;overflow-y:auto}.header-menu .header-submenu .column-choice input[type=checkbox]{width:14px;margin:0;pointer-events:none}.header-menu .header-submenu .submenu-loading{opacity:.6;cursor:default}.header-menu .header-submenu .view-lock{margin-left:auto;padding-left:8px;opacity:.5;font-size:11px}.header-menu .header-submenu.up{top:auto;bottom:-5px}.header-sort-rank{flex-shrink:0;color:#3c5dc4;font-size:9px}.aggregation-row .agg-label{margin-right:4px;color:#3c5dc4;font-size:10.5px;opacity:.7}.datagrid-custom-container:focus,.datagrid-custom-container:focus-visible{outline:none}.data-grid-datatable td .image ::ng-deep img{display:block}.data-grid-datatable td:has(>.grid-cursor){outline:2px solid #4465C9;outline-offset:-2px}.data-grid-datatable td:has(>.grid-range){background-color:#4465c940!important;box-shadow:inset 0 0 0 1px #4465c980;color:#4d5a81!important}.data-grid-datatable td:has(>.grid-range) ::ng-deep *{color:#4d5a81!important}.grid-checkbox{display:flex;align-items:center;justify-content:center}.grid-checkbox input[type=checkbox]{margin:0;pointer-events:none}.data-grid-datatable td:has(.grid-editor){padding:0!important;background-color:#fff}.grid-editor{display:block;height:23px;overflow:visible;color:#4d5a81}.grid-editor ::ng-deep .field-container,.grid-editor ::ng-deep .form-group,.grid-editor ::ng-deep .form-group>div,.grid-editor ::ng-deep .checkbox-container{margin:0!important;padding:0;min-height:0!important;height:23px}.grid-editor ::ng-deep .validation-message,.grid-editor ::ng-deep .checkbox-label{display:none}.grid-editor ::ng-deep input,.grid-editor ::ng-deep input:focus,.grid-editor ::ng-deep textarea{box-sizing:border-box;width:100%;height:23px!important;min-height:0!important;margin:0!important;padding:0 4px;border:1px solid #4465C9;border-radius:0;box-shadow:none;font-size:inherit;line-height:normal;resize:none}.grid-editor ::ng-deep input.ng-invalid.ng-touched,.grid-editor ::ng-deep input.ng-invalid.ng-dirty{border-color:#f78383}.grid-editor ::ng-deep input[type=checkbox]{width:auto}.grid-editor ::ng-deep .checkbox-container{display:flex;align-items:center;justify-content:center}.grid-editor ::ng-deep .switch{display:flex;align-items:center;width:auto;height:auto}.grid-editor ::ng-deep .switch .slider{display:none}.grid-editor ::ng-deep .switch input[type=checkbox]{opacity:1;width:14px;height:14px!important;margin:0!important;padding:0;border:none;cursor:pointer}.grid-editor ::ng-deep .ng-select .ng-select-container{color:#4d5a81;min-height:0!important;height:23px!important;border-radius:0;border-color:#4465c9}.grid-editor ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:0}.grid-editor ::ng-deep .ng-select .ng-select-container .ng-value-container{padding-top:0}.grid-editor ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%!important;border:none}.grid-editor ::ng-deep .form-group>div{flex:1;min-width:0;width:100%}.grid-editor ::ng-deep .ng-select{width:100%}.grid-editor ::ng-deep alg-selector{display:flex;width:100%;height:23px}.grid-editor ::ng-deep .input-select-default,.grid-editor ::ng-deep .input-select-default.with-button{flex:1;min-width:0;padding-right:0;margin-right:0}.grid-editor ::ng-deep .input-group-btn{float:none}.grid-editor ::ng-deep .btn,.grid-editor ::ng-deep .btn-32,.grid-editor ::ng-deep .btn-input-select{height:23px;width:23px;padding:0;line-height:1;border-radius:0}.grid-editor ::ng-deep .input-with-button{display:flex;height:23px}.grid-editor ::ng-deep .switch{margin:2px 0 0 4px;transform:scale(.7);transform-origin:left top}::ng-deep body.dg-column-dragging,::ng-deep body.dg-column-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}\n"],
|
|
19223
19229
|
dependencies: [
|
|
19224
19230
|
{
|
|
19225
19231
|
kind: "directive",
|
|
@@ -19449,8 +19455,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
19449
19455
|
provide: RowRefHost,
|
|
19450
19456
|
useExisting: forwardRef(() => DataGridComponent)
|
|
19451
19457
|
}],
|
|
19452
|
-
template: "<div #datagridContainer [class]=\"this.datagridClass\" tabindex=\"-1\" (keydown)=\"onGridKeyDown($event)\" (scroll)=\"onGridScroll($event)\"\r\n (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\" (contextmenu)=\"openEmptyAreaContextMenu($event)\">\r\n <ng-container>\r\n <table class=\"data-grid-datatable\">\r\n <ng-container *ngIf=\"this.facade.style as ctx\">\r\n <ng-container *ngIf=\"this.facade.config.columns$ | async as rcolumns\">\r\n <thead>\r\n <tr>\r\n <th class=\"header row-state\" (click)=\"addFilterQuery()\"></th>\r\n <!-- En-tête : poignée de déplacement à gauche, intitulé, indicateur de tri,\r\n flèche du menu (tri, agrégation) à droite. Le clic ne trie plus. -->\r\n <th #thHeader *ngFor=\"let col of rcolumns;let i = index\"\r\n [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n [attr.class]=\"'header' | gridStyle : ctx : { column : col }\"\r\n [style.width.px]=\"colWidth(col)\" [style.min-width.px]=\"colWidth(col)\" [style.max-width.px]=\"colWidth(col)\"\r\n [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n <div class=\"header-cell\"\r\n [class.col-dragging]=\"draggedColumn === col.Property\">\r\n <span class=\"header-handle\" title=\"Déplacer la colonne\"\r\n (mousedown)=\"onHeaderMouseDown(col, $event)\">\r\n <i class=\"fa fa-ellipsis-v\"></i>\r\n </span>\r\n <label>{{ getHeaderLabel(col) }}</label>\r\n <i *ngIf=\"this.facade.filter.isAsc(col.Property)\" class=\"fa fa-long-arrow-up header-sort\" title=\"Tri croissant\"></i>\r\n <i *ngIf=\"this.facade.filter.isDesc(col.Property)\" class=\"fa fa-long-arrow-down header-sort\" title=\"Tri décroissant\"></i>\r\n <sup *ngIf=\"this.facade.filter.sortRank(col.Property) > 0\" class=\"header-sort-rank\"\r\n title=\"Rang dans le tri personnalisé\">{{ this.facade.filter.sortRank(col.Property) }}</sup>\r\n <i *ngIf=\"activeAggregations[col.Property]\" class=\"header-agg\" [title]=\"'Agrégation : ' + aggregationLabel(activeAggregations[col.Property])\">Σ</i>\r\n <!-- Dernière colonne suivie de la colonne vide de fin : sa flèche est dans la colonne vide. -->\r\n <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n *ngIf=\"!(ctx.enableLastColumnResize && i === rcolumns.length - 1)\"\r\n [class.open]=\"headerMenu?.column.Property === col.Property\"\r\n (click)=\"toggleHeaderMenu(col, $event)\">\r\n <i class=\"fa fa-caret-down\"></i>\r\n </button>\r\n </div>\r\n <!-- Bord droit : largeur de la colonne (tirer), ajustée au contenu (double clic). -->\r\n <span class=\"col-resizer\" title=\"Largeur de la colonne (double clic : ajuster au contenu)\"\r\n (mousedown)=\"startResize(col, $event)\" (dblclick)=\"autoFitColumn(col, $event)\"\r\n (click)=\"$event.stopPropagation()\"></span>\r\n </th>\r\n <th *ngIf=\"ctx.enableLastColumnResize\" #lastColumnHeader class=\"header last-column\"\r\n (contextmenu)=\"openHeaderContextMenu($event, rcolumns[rcolumns.length - 1])\">\r\n <div class=\"header-cell header-cell-end\" *ngIf=\"rcolumns.length > 0\">\r\n <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n [class.open]=\"headerMenu?.column.Property === rcolumns[rcolumns.length - 1].Property\"\r\n (click)=\"toggleHeaderMenu(rcolumns[rcolumns.length - 1], $event)\">\r\n <i class=\"fa fa-caret-down\"></i>\r\n </button>\r\n </div>\r\n </th>\r\n\r\n </tr>\r\n <ng-container *ngIf=\"this.facade.filter.additionalQuery$ | async as additionalQuery\">\r\n <tr #thFilterRows *ngFor=\"let filterRow of additionalQuery.Rows;let i = index\" >\r\n <th class=\"filter-header row-state\" (click)=\"removeFilterQuery(i)\"></th>\r\n <th class=\"filter-header\" [ngClass]=\"{disabled: !col.IsFilterEnabled}\" *ngFor=\"let col of rcolumns;let i = index\"\r\n [attr.id]=\"guid.toString() + '-filter-' + i\">\r\n <input *ngIf=\"col.IsFilterEnabled\" type=\"text\"\r\n class=\"filter-header-input\"\r\n name=\"keyword\"\r\n #uniquename=\"ngModel\"\r\n [attr.id]=\"guid.toString() + '-filter-input-' + col.Property\"\r\n [placeholder]=\"filterRow.ClausesByPropertyName.get(col.Property).FilterValues?.length ? 'Filtre avancé : ' + filterRow.ClausesByPropertyName.get(col.Property).FilterValues.length + ' valeur(s)' : ''\"\r\n [(ngModel)]=\"filterRow.ClausesByPropertyName.get(col.Property).FilterValue\"\r\n (ngModelChange)=\"handleFilterChanged($event, filterRow, col.Property)\"\r\n (change)=\"validateFilterChanged($event, filterRow, col.Property)\"\r\n />\r\n </th>\r\n <ng-container>\r\n <th #lastColumnFilter class=\"filter-header last-column\"></th>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </thead>\r\n\r\n <tbody>\r\n <ng-container *ngIf=\"this.facade.data\">\r\n <ng-container *ngFor=\"let row of this.data.Values; let r = index;\">\r\n <tr\r\n [class]=\"'alternating' | gridStyle : ctx : { row : row, index : r, maxIndex : this.data.Values.length, hasAggregates: hasAggregates }\"\r\n [class.selected]=\"isRowSelected(row)\"\r\n [attr.id]=\"guid.toString() + '-row-' + row.Id\"\r\n (mousedown)=\"onRowMouseDown(row, $event)\"\r\n (mouseup)=\"onRowMouseUp(row, $event)\"\r\n (click)=\"onRowClick(row, $event)\"\r\n\r\n [rowRef]=\"guid + '-row-' + row.Id\"\r\n >\r\n\r\n <th [attr.class]=\"'rowstate' | gridStyle : ctx : { row : row }\">\r\n <ng-container *ngIf=\"selectionStyler.isModified(row) && !selectionStyler.isInvalid(row) && !selectionStyler.isWarning(row)\">\r\n <div class=\"new-rowstate\"><span>...</span></div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectionStyler.isInvalid(row)\">\r\n <div> <img class=\"error-row-icon\" src=\"assets/images/error.svg\" /> </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectionStyler.isWarning(row) && !selectionStyler.isInvalid(row)\">\r\n <div> <img class=\"error-row-icon\" src=\"assets/images/warning.svg\" /> </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ctx.displayDetail\">\r\n <button type=\"button\" [attr.id]=\"row.Id + '_button'\" class=\"toggle-button btn\" (click)=\"toggleDetail(row)\">\r\n <i class=\"fa fa-chevron-right fa-custom\"></i>\r\n </button>\r\n </ng-container>\r\n </th>\r\n\r\n <td *ngFor=\"let column of rcolumns; index as i\"\r\n [attr.id]=\"cellId(row, column)\"\r\n [style.max-width.px]=\"colWidth(column)\" [attr.data-sized]=\"colWidth(column) ? '' : null\"\r\n [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\"\r\n [class]=\"'cell' | gridStyle : ctx : { row : row,column : column,index : r }\"\r\n [class.selected]=\"isRowSelected(row)\"\r\n (mousedown)=\"onCellMouseDown(r, i, $event)\"\r\n (mouseenter)=\"onCellMouseEnter(r, i, $event)\"\r\n (click)=\"onCellClick(row, column)\"\r\n (dblclick)=\"onCellDblClick(row, column)\">\r\n\r\n <alg-datagrid-cell #dataGridCellComponent\r\n class=\"gridcell-container\"\r\n [entity]=\"row\"\r\n [isEditable]=\"canEditCell(row, column)\"\r\n [property]=\"column.Property\"\r\n [managed]=\"true\"\r\n [mode]=\"showEditor(row, column) ? 'edit' : 'view'\"\r\n [class.grid-cursor]=\"isCursorCell(row, column)\"\r\n [class.grid-range]=\"isInRange(r, i)\"\r\n (contextmenu)=\"openContextMenu($event, row, column)\">\r\n\r\n <ng-template alg-editMode>\r\n <!-- Éditeur du champ du formulaire qui correspond à la colonne (sinon déduit de la colonne), à la hauteur de la ligne. -->\r\n <alg-field class=\"grid-editor\"\r\n [field]=\"getEditField(column)\"\r\n [form]=\"getRowForm(row)\"\r\n [showLabel]=\"false\"\r\n (propertyChanged)=\"onCellChanged(row, $event)\"\r\n >\r\n <!-- [focusable]=\"cellFocus\" -->\r\n </alg-field>\r\n </ng-template>\r\n <ng-template alg-viewMode>\r\n\r\n <div [ngSwitch]=\"column.Display?.type\" *ngIf=\"!isUndefined(row[column.Property])\">\r\n <div *ngSwitchCase=\"'url'\">\r\n <a [routerLink]=\"[$safeNavigationMigration(column.Display?.baseUrl),row[column.Property]]\">\r\n {{ row.Id || row[column.Property] }}\r\n </a>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'img'\" class=\"image\">\r\n <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\"\r\n [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"20\" [imageWidth]=\"20\">\r\n </alg-image>\r\n\r\n <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n {{ row[column.ToolTipProperty] }}\r\n </div>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'img-file'\" class=\"image\">\r\n\r\n <alg-image\r\n [imageUrl]=\"this.getImageUrl(row,column)\" [wide]=\"true\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n </alg-image>\r\n\r\n <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n {{ row[column.ToolTipProperty] }}\r\n </div>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'wide-img'\" class=\"image\">\r\n <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\" [wide]=\"true\"\r\n [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n </alg-image>\r\n\r\n <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n {{ row[column.ToolTipProperty] }}\r\n </div>\r\n </div>\r\n\r\n <span *ngSwitchCase=\"'date'\">\r\n {{row[column.Property]| date: column.Display?.format || 'dd/MM/yyyy'}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'boolean'\">{{row[column.Property] ? 'OUI' : 'NON'}} </span>\r\n\r\n <span *ngSwitchCase=\"'datetime'\">{{row[column.Property] | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}</span>\r\n\r\n <span *ngSwitchCase=\"'money'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\"\r\n class=\"money\">\r\n {{\r\n row[column.Property]\r\n | currency: column.Display?.currency\r\n || (column.Display?.sourceProperty && row[column.Display?.sourceProperty] ? row[column.Display?.sourceProperty] : false)\r\n || 'EUR' : 'symbol'\r\n\r\n | todefine: $safeNavigationMigration(column.Display?.handleError)\r\n }}\r\n\r\n <div class=\"tool-tip\" *ngIf=\"ctx.showOnToolTip(row,column)\">\r\n {{ctx.showOnToolTip(row,column)}}\r\n </div>\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'percent'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | percent : column.Display?.format\r\n || '1.0-2' | todefine: $safeNavigationMigration(column.Display?.handleError)}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'number'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | number: column.Display?.format\r\n || '1.0-3' | todefine : $safeNavigationMigration(column.Display?.handleError)}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'fixedsizeinteger'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n {{row[column.Property] | tofixedsizeinteger : $safeNavigationMigration(column.Display?.completingCaracter) : $safeNavigationMigration(column.Display?.width) }}\r\n </span>\r\n <span *ngSwitchDefault [innerText]=\"column.Property == 'Id' ? (row[column.Property] < 0 ? '' : row[column.Property]) : row[column.Property]\">\r\n </span>\r\n </div>\r\n\r\n <div *ngIf=\"isUndefined(row[column.Property])\">\r\n <span *ngIf=\"!isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\" class=\"mw-invalid\">\r\n {{ column.Display?.nullCaseText }}\r\n </span>\r\n\r\n <span *ngIf=\"isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\">\r\n \r\n </span>\r\n </div>\r\n\r\n </ng-template>\r\n\r\n </alg-datagrid-cell>\r\n </td>\r\n <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n <!-- Colonne vide de fin : clic droit = menu de la dernière colonne. -->\r\n <td (contextmenu)=\"openContextMenu($event, row, rcolumns[rcolumns.length - 1])\"></td>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n\r\n <tfoot>\r\n <tr class=\"empty-row\" *ngIf=\"hasAggregates\">\r\n <td></td>\r\n </tr>\r\n <tr class=\"aggregation-row\" *ngIf=\"hasAggregates\">\r\n <td class=\"row-state\"></td>\r\n <td *ngFor=\"let column of rcolumns; index as i\" [attr.class]=\"'cell' | gridStyle : ctx : { column : column, index : i }\"\r\n [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n\r\n <ng-container *ngFor=\"let agg of columnAggregates[column.Property]\">\r\n\r\n <span class=\"agg-label\">{{ aggregationLabel(agg.op) }}</span>\r\n <span [ngSwitch]=\"agg.op === 'COUNT' ? 'count' : column.Display?.type\">\r\n\r\n <span *ngSwitchCase=\"'count'\">{{ agg.value | number: '1.0-0' }}</span>\r\n <span *ngSwitchCase=\"'percent'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\r\n <span *ngSwitchCase=\"'fixedsizeinteger'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\r\n\r\n <span *ngSwitchCase=\"'money'\" class=\"money\">\r\n {{ agg.value | currency: getColCurrency(column) }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'date'\">\r\n {{agg.value | date: column.Display?.format || 'dd/MM/yyyy'}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'datetime'\">\r\n {{agg.value | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'number'\">\r\n {{agg.value | number: column.Display?.format || '1.0-3'}}\r\n </span>\r\n\r\n <span *ngSwitchDefault>\r\n {{agg.value}}\r\n </span>\r\n\r\n </span>\r\n\r\n </ng-container>\r\n\r\n </td>\r\n\r\n <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n <td class=\"last-column\"></td>\r\n </ng-container>\r\n\r\n </tr>\r\n </tfoot>\r\n </ng-container>\r\n </ng-container>\r\n </table>\r\n </ng-container>\r\n</div>\r\n\r\n\r\n<!-- Emplacement visé par une colonne déplacée : trait orange sur la séparation des deux en-têtes. -->\r\n<div class=\"col-drop-indicator\" *ngIf=\"dropIndicator\"\r\n [ngStyle]=\"{ left: dropIndicator.left + 'px', top: dropIndicator.top + 'px', height: dropIndicator.height + 'px' }\"></div>\r\n\r\n<!-- Menu d'une colonne (flèche de l'en-tête ou clic droit sur une cellule), en trois zones séparées\r\n par un trait : Tri (sous-menu « Trier »), Actions (celles du panneau des actions), Fonctions (sous-menu « Fonctions »). -->\r\n<div class=\"header-menu\" *ngIf=\"headerMenu\"\r\n [ngStyle]=\"{ top: headerMenu.y + 'px', left: headerMenu.x + 'px', visibility: headerMenu.ready ? 'visible' : 'hidden' }\"\r\n (click)=\"$event.stopPropagation()\" (contextmenu)=\"$event.preventDefault()\">\r\n <ul>\r\n <!-- Tri : sous-menu « Trier » (croissant, décroissant, personnalisé). -->\r\n <li class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'sort'\"\r\n [class.checked]=\"this.facade.filter.isAsc(headerMenu.column.Property) || this.facade.filter.isDesc(headerMenu.column.Property) || this.facade.filter.getSortList().length > 1\"\r\n (mouseenter)=\"setSubmenu('sort')\" (click)=\"setSubmenu('sort')\">\r\n <i class=\"fa fa-sort\"></i><span>Trier</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu\" *ngIf=\"headerMenu.submenu === 'sort'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <li [class.checked]=\"this.facade.filter.isAsc(headerMenu.column.Property)\" (click)=\"sortColumn('asc')\">\r\n <i class=\"fa fa-sort-amount-asc\"></i><span>Par ordre croissant</span>\r\n </li>\r\n <li [class.checked]=\"this.facade.filter.isDesc(headerMenu.column.Property)\" (click)=\"sortColumn('desc')\">\r\n <i class=\"fa fa-sort-amount-desc\"></i><span>Par ordre décroissant</span>\r\n </li>\r\n <li [class.checked]=\"this.facade.filter.getSortList().length > 1\" (click)=\"openCustomSort()\">\r\n <i class=\"fa fa-sort\"></i><span>Tri personnalisé…</span>\r\n </li>\r\n </ul>\r\n </li>\r\n <!-- Filtre sur la valeur de la cellule (clic droit sur une cellule) : première ligne des filtres composés. -->\r\n <li *ngIf=\"cellFilterValue() !== undefined\" (click)=\"filterOnCell()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <i class=\"fa fa-filter\"></i><span>Filtrer sur « {{ cellFilterLabel() }} »</span>\r\n </li>\r\n <!-- Filtre avancé : valeurs distinctes de la colonne sur les résultats, à cocher (condition « dans la liste »). -->\r\n <li *ngIf=\"headerMenu.column.IsFilterEnabled\" class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'distinct'\"\r\n [class.checked]=\"this.facade.filter.getFilterValues(headerMenu.column.Property).length > 0\"\r\n (mouseenter)=\"setSubmenu('distinct')\" (click)=\"setSubmenu('distinct')\">\r\n <i class=\"fa fa-filter\"></i><span>Filtre avancé</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu header-submenu-distinct\" *ngIf=\"headerMenu.submenu === 'distinct'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <alg-grid-distinct-filter [facade]=\"this.facade\" [entityKey]=\"this.entityKey\" [property]=\"headerMenu.column.Property\"\r\n (done)=\"closeViewMenu()\" (loaded)=\"onViewMenuLoaded()\"></alg-grid-distinct-filter>\r\n </ul>\r\n </li>\r\n <!-- Affichage : vues personnalisées (cochée = affichée), puis « Modifier… ». -->\r\n <li *ngIf=\"this.facade.config.viewChooser\" class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'columns'\"\r\n (mouseenter)=\"setSubmenu('columns')\" (click)=\"setSubmenu('columns')\">\r\n <i class=\"fa fa-columns\"></i><span>Affichage</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu header-submenu-columns\" *ngIf=\"headerMenu.submenu === 'columns'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <alg-grid-view-menu [chooser]=\"this.facade.config.viewChooser\" (done)=\"closeViewMenu()\" (loaded)=\"onViewMenuLoaded()\"></alg-grid-view-menu>\r\n </ul>\r\n </li>\r\n <!-- Colonnes figées à gauche, de la première jusqu'à celle-ci. -->\r\n <li [class.checked]=\"isFrozen(columnIndex(headerMenu.column))\" (click)=\"toggleFrozen()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <i class=\"fa fa-thumb-tack\"></i>\r\n <span>{{ frozenUntil === columnIndex(headerMenu.column) ? 'Libérer les colonnes' : 'Figer jusqu\\'à cette colonne' }}</span>\r\n </li>\r\n <li *ngIf=\"frozenUntil !== undefined && frozenUntil !== columnIndex(headerMenu.column)\"\r\n (click)=\"unfreezeColumns()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <i class=\"fa fa-unlock\"></i><span>Libérer les colonnes</span>\r\n </li>\r\n\r\n <!-- Actions -->\r\n <ng-container *ngIf=\"visibleActions.length > 0\">\r\n <li class=\"separator\"></li>\r\n <ng-container *ngFor=\"let action of visibleActions\">\r\n <ng-container *ngIf=\"{ disabled: (action.disabled$ | async) } as state\">\r\n <li class=\"menu-action\" [class.disabled]=\"state.disabled\"\r\n (click)=\"executeMenuAction(action, state.disabled)\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <img class=\"menu-action-icon\" [src]=\"getActionImageUrl(action.icon)\" [alt]=\"action.title\" />\r\n <span>{{ action.title }}</span>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Affichage -->\r\n <li class=\"separator\"></li>\r\n <li class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'display'\"\r\n (mouseenter)=\"setSubmenu('display')\" (click)=\"setSubmenu('display')\">\r\n <i class=\"fa fa-calculator\"></i><span>Fonctions</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu\" *ngIf=\"headerMenu.submenu === 'display'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <li *ngFor=\"let op of getAggregationOptions(headerMenu.column)\"\r\n [class.checked]=\"activeAggregations[headerMenu.column.Property] === op\"\r\n (click)=\"aggregateColumn(op)\">\r\n <i class=\"fa fa-check\"></i><span>{{ aggregationLabel(op) }}</span>\r\n </li>\r\n <ng-container *ngIf=\"activeAggregations[headerMenu.column.Property]\">\r\n <li class=\"separator\"></li>\r\n <li (click)=\"aggregateColumn(null)\">\r\n <i class=\"fa fa-times\"></i><span>Ne plus afficher</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ul>\r\n</div>\r\n\r\n",
|
|
19453
|
-
styles: [".home-page{font-family:Open sans,sans-serif;background:#fff;-webkit-font-smoothing:antialiased;height:100%;width:100%;padding:16px}.main-container{margin:0 50px}.main-container-modal{width:calc(100% - 50px);margin:10px 25px 0}.moyen-titre{font-weight:700;font-size:24px;color:#4d5a81;margin:8px 0;border-bottom:solid 1px #DBE4FF}.grand-titre{font-weight:700;font-size:28px;color:#4d5a81;margin:0 0 8px}.petit-titre{font-weight:700;font-size:16px;color:#4d5a81;margin:0 0 8px}.petit-titre.underlined{border-bottom:solid 1px #4D5A81}.paragraph{padding:0 15px}.paragraph-highlight{padding:5px 15px 0 12px;border-left:5px solid #8EA7F8;border-bottom:1px solid #DBE4FF;border-top:1px solid #DBE4FF;border-right:1px solid #DBE4FF;background-color:#f7faff}.highlight{background-color:#f7faff;border:1px solid #DBE4FF;border-radius:5px;padding:15px;color:#3c5dc4;margin:0 0 16px}.highlight p{margin-bottom:0}.highlight:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"53.294\" height=\"50.629\" viewBox=\"0 0 53.294 50.629\">%0D%0A <path id=\"allerg\\e8ne\" d=\"M830.494,25.793l-5.814,6.783.727,8.963-8.721,1.938-4.6,7.752L803.847,47.6l-8.236,3.634-4.6-7.51-8.721-1.938.727-8.963L777.2,26.035l5.814-6.783-.727-8.963,8.721-1.938L795.61.6l8.236,3.634L812.083.6l4.6,7.752,8.721,1.938-.727,8.963Zm-24.467,2.422V13.681h-4.845V28.216Zm0,9.69V33.06h-4.845v4.845Z\" transform=\"translate(-777.2 -0.6)\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 8px 24px 0;filter:invert(31%) sepia(51%) saturate(1323%) hue-rotate(199deg) brightness(99%) contrast(94%)}.notification{background-color:#dbe4ff;border:1px solid #C4D0F9;border-radius:5px;color:#4d5a81;margin:16px;padding:5px 15px;text-align:justify}.notification:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info-circle\" class=\"svg-inline--fa fa-info-circle fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\"></path></svg>');background-repeat:no-repeat;margin:0 8px 0 0;filter:invert(31%) sepia(8%) saturate(2329%) hue-rotate(188deg) brightness(103%) contrast(85%)}.notification-text{padding:0 15px 0 30px;font-size:16px}:host{flex:1}.header.last-column{border-left:none!important;width:100%}table thead .sorting,table thead .sorting_asc,table thead .sorting_desc,table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table thead th:first-child,table tfoot tr:first-child{position:sticky;left:0;z-index:2}table tbody th:first-child{position:sticky;left:0;z-index:1;border-right:none}table tbody th:first-child div{text-align:center;vertical-align:middle;line-height:20px}table tbody tr.row-odd th:first-child{background:#ebf0ff}table tbody tr.selected.row-odd.mw-invalid th:first-child,table tbody tr.selected.row-even.mw-invalid th:first-child,table tbody tr.selected.row-odd.mw-warning th:first-child,table tbody tr.selected.row-even.mw-warning th:first-child,table tbody tr.selected.row-even th:first-child,table tbody tr.selected.row-odd th:first-child{background-color:#8ea7f8;color:#fff}table tbody tr.row-odd.mw-invalid th:first-child,table tbody tr.row-even.mw-invalid th:first-child{background-color:#f2dede}table tbody tr.row-odd.mw-warning th:first-child,table tbody tr.row-even.mw-warning th:first-child{background-color:#fff4de}table thead th{position:-webkit-sticky;position:sticky;top:0;z-index:1;background:#fff;border-left:1px solid #3C5DC4;border-bottom:1px solid #3C5DC4}table thead .sorting{background-image:none;cursor:pointer}table thead .sorting_asc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxNjIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxNTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+z5ABTAAAAI5JREFUeNpi/P//PwO1ABMDFQELIQXVjfe4gFQbEJe11iv9otRl2UCcBcSphBQy4gszoKu0gNROIJYB4jtA7AF03V2SXQY0iBFIFUMNAgEVIM6DipPsTQcgDkQTSwRia5IMA9rOC6RqgVgQTQokXgOUZyfFZSFQF/zAgh2BOIjkCBjQRDtq2Khh9DAMIMAAT9AmNBDSXegAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_desc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxQTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxOTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1fsfwAAAAJdJREFUeNpi/P//PwO1ABMDFcGoYaOG0cMwFmyC1Y33IoHUAiD+h8MBGa31SvOJddk6IN4PxBxY8FEgXkO0N4G2/gRSLUD8GU3qPRA3A+U/kxpmIBege2U9EB/ApYERX6kBDDtlILUDiFWA+AkQuwNddY2s2ARqvAukJgDxbyCehM8gnLGJBmYDsSoQTyWkkHHQFo4AAQYAAA0piq4hbqwAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-image:none}.checkbok-container{align-items:center;margin:0;padding:0}.gridcell-container{padding:0;min-width:fit-content}.gridcell-container input[type=number]{display:block;size:1;font-size:10pt;width:100%!important;height:100%;margin:0!important;border:2px solid #F78383}.datagrid-custom-container{height:100%;overflow:auto;margin-left:-1px}.data-grid-datatable{table-layout:fixed;cursor:pointer;border-spacing:0px}.data-grid-datatable td{box-shadow:none;padding:2px 5px;white-space:nowrap}.data-grid-datatable td.row-state{padding:2px 5px;width:16px}.data-grid-datatable td.img{padding:2px 5px}.data-grid-datatable td.row-state img{height:16px;width:16px;margin-top:-3px;padding:0}.data-grid-datatable tr{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header{vertical-align:bottom;padding:2px 5px 2px 0;font-weight:400;color:#3c5dc4;white-space:nowrap;line-height:25px;min-width:32px;margin-bottom:5px}.header.img{min-width:16px}.header.row-state{min-width:27px;position:-webkit-sticky;position:sticky;top:0;left:0;z-index:2;background:#fff;border-left:none;border-right:none}.filter-header{background-color:#f7f7f7!important}.filter-header.disabled{background-color:#9fa9c7!important}.filter-header.row-state:hover:before{position:relative;display:block;float:left;width:16px;height:16px;content:\" \";background-size:16px 16px;-webkit-background-size:16px 16px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"57\" height=\"57\" viewBox=\"0 0 57 57\">%0D%0A <path id=\"Rond_Croix\" data-name=\"Rond Croix\" d=\"M28.5,57A28.5,28.5,0,0,1,8.347,8.347,28.5,28.5,0,1,1,48.652,48.652,28.317,28.317,0,0,1,28.5,57Zm0-24.036h0l11.9,11.9L44.869,40.4,32.964,28.5,44.869,16.593,40.4,12.129,28.5,24.034,16.594,12.129l-4.465,4.464L24.034,28.5,12.129,40.4l4.463,4.465L28.5,32.965Z\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 0 0 3px;filter:brightness(0) saturate(100%) invert(70%) sepia(93%) saturate(1540%) hue-rotate(309deg) brightness(105%) contrast(94%)}.filter-header-input{height:calc(100% - 2px);width:calc(100% - 2px);margin:0;border:none!important;background-color:#f7f7f7;padding:0 0 0 5px;color:#4d5a81}.header.row-state:before{position:relative;display:block;float:left;width:16px;height:16px;content:\" \";background-size:16px 16px;-webkit-background-size:16px 16px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->%0D%0A<path fill=\"currentColor\" d=\"M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z\"/></svg>');background-repeat:no-repeat;margin:0 0 3px 5px;filter:brightness(0) saturate(100%) invert(56%) sepia(79%) saturate(2301%) hue-rotate(202deg) brightness(92%) contrast(91%)}.filter-header.last-column{border-left:none!important}.header label{cursor:pointer;margin-bottom:0;margin-right:10px;padding-left:5px;width:100%}.row-odd{background-color:#ebf0ff;border-left:1px solid #C1D0FD;border-bottom:1px solid #C1D0FD}.row-even{background-color:#f7faff;border-left:1px solid #C1D0FD;border-bottom:1px solid #C1D0FD}.error-row-icon{padding:2px;width:20px}.selected{background-color:#8ea7f8;color:#fff}.mw-invalid{font-weight:600;background-color:#f2dede;border:1px solid var(--red-error)}.mw-invalid td{background-color:#f2dede!important}.data-grid-datatable tbody tr.mw-invalid>td,.data-grid-datatable tbody tr.mw-invalid>th{box-shadow:inset 0 1px 0 var(--red-error),inset 0 -1px 0 var(--red-error)}span.mw-invalid{padding:0 3px;color:var(--red-error);background-color:transparent}.mw-warning.selected,.mw-invalid.selected{background-color:#8ea7f8}.mw-warning.selected td,.mw-invalid.selected td{background-color:#8ea7f8!important}.mw-warning{font-weight:600;background-color:#fff4de;border:1px solid var(--orange-algorima)}.mw-warning td{background-color:#fff4de!important}.mw-modified{font-weight:600;border:1px solid var(--main-bg-color)}.first-row{border-top:none}.last-row,.last-row td{border-bottom:none!important}.data-grid-datatable>tbody>tr{z-index:50}.image{position:relative;display:flex;flex-direction:row}.image img{height:20px;width:auto}td.money{position:relative}.tool-tip{visibility:hidden;background-color:#424242;color:#fff;text-align:left;border-radius:3px;font-size:15px;position:absolute;z-index:1;top:-10%;left:150%;opacity:0;transition:opacity .3s;padding:5px 15px;white-space:nowrap;overflow:visible}.tool-tip:after{content:\" \";position:absolute;top:50%;right:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent rgb(66,66,66) transparent transparent}.image:hover .tool-tip{visibility:visible;opacity:1}td.money:hover .tool-tip{visibility:visible;opacity:1;left:100%;height:28px;font-size:13px;margin-top:0;padding:5px 10px 10px}.disabled{pointer-events:none}.edit-mode{background-color:#fff;border:1px solid #4465C9;min-width:90px!important;height:30px!important}.edit-mode .form-group{min-height:0px}.edit-mode .inactivated{background-color:#dbe4ff80}.edit-mode .inactivated-fo{background-color:#dbe4ff}.edit-mode .ecartclass{border:2px solid #4465C9}.edit-mode .error-cell{font-weight:700;color:#f78383!important}.edit-mode .selected{color:#4d5a81}.highlight-1,.highlight-1.selected,.edit-mode.highlight-1.selected{background-color:#4d5a81!important;color:#fff!important}.highlight-2,.highlight-2.selected,.edit-mode.highlight-2.selected{background-color:#dbe4ff!important;color:#4d5a81!important}.highlight-3,.highlight-3.selected,.edit-mode.highlight-3.selected{background-color:#4465c9!important;color:#fff!important}.highlight-4,.highlight-4.selected,.edit-mode.highlight-4.selected{background-color:#f78383!important;color:#fff!important}.highlight-5,.highlight-5.selected{background-color:#4465c9!important;color:#fff}.fixed-column{position:-webkit-sticky;position:sticky;left:27px;z-index:2!important;border-left:none}.fixed-header{position:-webkit-sticky;position:sticky;left:27px;z-index:3!important;background:#fff}.has-focus{padding:0!important}.has-focus ::ng-deep input,.has-focus ::ng-deep input:focus-visible,.has-focus ::ng-deep input:focus{border-radius:.1;outline:none!important;width:100%;height:29px;min-height:0;margin:0;border:1px solid #4465C9}.has-focus ::ng-deep .form-group{margin-bottom:0;min-height:0}.has-focus ::ng-deep .field-container{margin-bottom:0}.edit-mode.has-focus{width:90px!important}.bordered{border-left:1px solid #14358f!important;border-right:1px solid #14358f!important}.match-keywords{color:var(--main-bg-color);font-weight:700}.datagrid-img img{height:20px;width:20px}.right-align{text-align:right}.left-align{text-align:left}.detail-div{height:0px;overflow:hidden;transition:all .2s linear;width:100%}.fa-custom{font-size:smaller}.detail-div-show{height:150px;transition:all .2s linear}.toggleable{visibility:collapse}.toggleable-show{visibility:visible}.toggle-button-down{transform:rotate(90deg);transition:all .2s linear}.no-result{color:#5272d3;height:100%;width:100%;padding:15px 15px 150px}.new-rowstate{display:flex;flex-direction:row;align-items:center;align-self:center;height:100%;width:100%}.new-rowstate span{height:100%;width:100%;margin-top:-6px}.context-menu{position:absolute;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 12px #0000004d;padding:8px;z-index:1000;min-width:75px;max-width:250px;transition:all .3s ease-in-out}.context-menu ul{list-style:none;margin:0;padding:0}.context-menu li{padding:10px 14px;cursor:pointer;border-radius:8px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.context-menu li:hover{background:linear-gradient(135deg,#ffffff4d,#ffffff1a);transform:scale(1.02)}.context-menu li:active{transform:scale(.98)}.grid-container{overflow:auto;position:relative}.aggregation-row{position:sticky;bottom:0;z-index:50;background:#f7faff!important;background-color:#f7faff!important;font-weight:700;border-top:1px solid #4D5A81!important;border-bottom:1px solid #4D5A81!important}.aggregation-row td{background:#f7faff!important;background-color:#f7faff!important;border-top:1px solid #4D5A81!important;border-bottom:1px solid #4D5A81!important;border-left:none!important;border-right:none!important}.empty-row td{padding:0}.col-resizer{position:absolute;top:0;right:-5px;z-index:4;width:10px;height:100%;cursor:col-resize}.col-resizer:hover{background:#3c5dc440}.data-grid-datatable td[data-sized]{overflow:hidden;text-overflow:ellipsis}:where(.data-grid-datatable tbody tr,.data-grid-datatable tfoot tr){background-color:#fff}.data-grid-datatable td[data-frozen]{position:sticky;z-index:1;background-color:inherit}.data-grid-datatable thead th[data-frozen]{position:sticky;z-index:3}.data-grid-datatable td[data-frozen]:has(+td:not([data-frozen])),.data-grid-datatable thead th[data-frozen]:has(+th:not([data-frozen])){box-shadow:inset -2px 0 #3c5dc459}table thead th.header{background-image:none!important;cursor:default}.header-cell{position:relative;display:flex;align-items:center;gap:2px}.header-cell label{flex:1 1 auto;cursor:default;margin:0;padding-left:2px;overflow:hidden;text-overflow:ellipsis}.header-cell.col-dragging{opacity:.8}.dg-column-ghost{border:1px solid #C1D0FD;box-sizing:border-box}.col-drop-indicator{position:fixed;z-index:3100;width:1px;border-radius:0;background:var(--orange-algorima, #f59d0f);pointer-events:none}.header-cell-end{justify-content:flex-end;align-items:center;height:25px}.header-handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:content-box;width:17px;height:20px;padding:0 2px;color:#3c5dc4;opacity:.35;cursor:grab}.header-handle:hover{opacity:1}.header-handle:active{cursor:grabbing}.header-sort,.header-agg{flex-shrink:0;color:#3c5dc4;font-size:11px;font-style:normal}.header-menu-button{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:18px;padding:0;border:0;border-radius:3px;background:none;color:#3c5dc4;opacity:.5;cursor:pointer}.header-menu-button:hover,.header-menu-button.open{opacity:1;background:#4465c926}.header-menu{position:fixed;z-index:3000;width:230px;padding:4px 0;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003}.header-menu ul{margin:0;padding:0;list-style:none}.header-menu li{display:flex;align-items:center;gap:8px;padding:5px 12px;color:#3c5dc4;font-size:12.5px;cursor:pointer}.header-menu li i{width:14px;text-align:center;visibility:visible}.header-menu li:hover{background:#dbe4ff}.header-menu li.checked{font-weight:600}.header-menu li.separator{height:1px;margin:4px 0;padding:0;background:#dbe4ff;cursor:default}.header-menu li .fa-check{visibility:hidden}.header-menu li.checked>.fa-check{visibility:visible}.header-menu li.menu-action.disabled{opacity:.45;cursor:default}.header-menu li.menu-action.disabled:hover{background:none}.header-menu .menu-action-icon{width:14px;height:14px;filter:brightness(0) saturate(100%) invert(36%) sepia(91%) saturate(628%) hue-rotate(191deg) brightness(89%) contrast(85%) brightness(75%)}.header-menu li.has-submenu{position:relative}.header-menu li.has-submenu.open{background:#dbe4ff}.header-menu li.has-submenu .submenu-caret{margin-left:auto}.header-menu .header-submenu{position:absolute;top:-5px;left:100%;width:200px;padding:4px 0;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003;font-weight:400}.header-menu .header-submenu.left{left:auto;right:100%}.header-menu .header-submenu.header-submenu-distinct{width:240px}.header-menu .header-submenu.header-submenu-columns{width:240px;max-height:320px;overflow-y:auto}.header-menu .header-submenu .column-choice input[type=checkbox]{width:14px;margin:0;pointer-events:none}.header-menu .header-submenu .submenu-loading{opacity:.6;cursor:default}.header-menu .header-submenu .view-lock{margin-left:auto;padding-left:8px;opacity:.5;font-size:11px}.header-menu .header-submenu.up{top:auto;bottom:-5px}.header-sort-rank{flex-shrink:0;color:#3c5dc4;font-size:9px}.aggregation-row .agg-label{margin-right:4px;color:#3c5dc4;font-size:10.5px;opacity:.7}.datagrid-custom-container:focus,.datagrid-custom-container:focus-visible{outline:none}.data-grid-datatable td .image ::ng-deep img{display:block}.data-grid-datatable td:has(>.grid-cursor){outline:2px solid #4465C9;outline-offset:-2px}.data-grid-datatable td:has(>.grid-range){background-color:#4465c940!important;box-shadow:inset 0 0 0 1px #4465c980;color:#4d5a81!important}.data-grid-datatable td:has(>.grid-range) ::ng-deep *{color:#4d5a81!important}.data-grid-datatable td:has(.grid-editor){padding:0!important;background-color:#fff}.grid-editor{display:block;height:23px;overflow:visible;color:#4d5a81}.grid-editor ::ng-deep .field-container,.grid-editor ::ng-deep .form-group,.grid-editor ::ng-deep .form-group>div,.grid-editor ::ng-deep .checkbox-container{margin:0!important;padding:0;min-height:0!important;height:23px}.grid-editor ::ng-deep .validation-message,.grid-editor ::ng-deep .checkbox-label{display:none}.grid-editor ::ng-deep input,.grid-editor ::ng-deep input:focus,.grid-editor ::ng-deep textarea{box-sizing:border-box;width:100%;height:23px!important;min-height:0!important;margin:0!important;padding:0 4px;border:1px solid #4465C9;border-radius:0;box-shadow:none;font-size:inherit;line-height:normal;resize:none}.grid-editor ::ng-deep input.ng-invalid.ng-touched,.grid-editor ::ng-deep input.ng-invalid.ng-dirty{border-color:#f78383}.grid-editor ::ng-deep input[type=checkbox]{width:auto}.grid-editor ::ng-deep .ng-select .ng-select-container{color:#4d5a81;min-height:0!important;height:23px!important;border-radius:0;border-color:#4465c9}.grid-editor ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:0}.grid-editor ::ng-deep .ng-select .ng-select-container .ng-value-container{padding-top:0}.grid-editor ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%!important;border:none}.grid-editor ::ng-deep .form-group>div{flex:1;min-width:0;width:100%}.grid-editor ::ng-deep .ng-select{width:100%}.grid-editor ::ng-deep alg-selector{display:flex;width:100%;height:23px}.grid-editor ::ng-deep .input-select-default,.grid-editor ::ng-deep .input-select-default.with-button{flex:1;min-width:0;padding-right:0;margin-right:0}.grid-editor ::ng-deep .input-group-btn{float:none}.grid-editor ::ng-deep .btn,.grid-editor ::ng-deep .btn-32,.grid-editor ::ng-deep .btn-input-select{height:23px;width:23px;padding:0;line-height:1;border-radius:0}.grid-editor ::ng-deep .input-with-button{display:flex;height:23px}.grid-editor ::ng-deep .switch{margin:2px 0 0 4px;transform:scale(.7);transform-origin:left top}::ng-deep body.dg-column-dragging,::ng-deep body.dg-column-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}\n"]
|
|
19458
|
+
template: "<div #datagridContainer [class]=\"this.datagridClass\" tabindex=\"-1\" (keydown)=\"onGridKeyDown($event)\" (scroll)=\"onGridScroll($event)\"\r\n (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\" (contextmenu)=\"openEmptyAreaContextMenu($event)\">\r\n <ng-container>\r\n <table class=\"data-grid-datatable\">\r\n <ng-container *ngIf=\"this.facade.style as ctx\">\r\n <ng-container *ngIf=\"this.facade.config.columns$ | async as rcolumns\">\r\n <thead>\r\n <tr>\r\n <th class=\"header row-state\" (click)=\"addFilterQuery()\"></th>\r\n <!-- En-tête : poignée de déplacement à gauche, intitulé, indicateur de tri,\r\n flèche du menu (tri, agrégation) à droite. Le clic ne trie plus. -->\r\n <th #thHeader *ngFor=\"let col of rcolumns;let i = index\"\r\n [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n [attr.class]=\"'header' | gridStyle : ctx : { column : col }\"\r\n [style.width.px]=\"colWidth(col)\" [style.min-width.px]=\"colWidth(col)\" [style.max-width.px]=\"colWidth(col)\"\r\n [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n <div class=\"header-cell\"\r\n [class.col-dragging]=\"draggedColumn === col.Property\">\r\n <span class=\"header-handle\" title=\"Déplacer la colonne\"\r\n (mousedown)=\"onHeaderMouseDown(col, $event)\">\r\n <i class=\"fa fa-ellipsis-v\"></i>\r\n </span>\r\n <label>{{ getHeaderLabel(col) }}</label>\r\n <i *ngIf=\"this.facade.filter.isAsc(col.Property)\" class=\"fa fa-long-arrow-up header-sort\" title=\"Tri croissant\"></i>\r\n <i *ngIf=\"this.facade.filter.isDesc(col.Property)\" class=\"fa fa-long-arrow-down header-sort\" title=\"Tri décroissant\"></i>\r\n <sup *ngIf=\"this.facade.filter.sortRank(col.Property) > 0\" class=\"header-sort-rank\"\r\n title=\"Rang dans le tri personnalisé\">{{ this.facade.filter.sortRank(col.Property) }}</sup>\r\n <i *ngIf=\"activeAggregations[col.Property]\" class=\"header-agg\" [title]=\"'Agrégation : ' + aggregationLabel(activeAggregations[col.Property])\">Σ</i>\r\n <!-- Dernière colonne suivie de la colonne vide de fin : sa flèche est dans la colonne vide. -->\r\n <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n *ngIf=\"!(ctx.enableLastColumnResize && i === rcolumns.length - 1)\"\r\n [class.open]=\"headerMenu?.column.Property === col.Property\"\r\n (click)=\"toggleHeaderMenu(col, $event)\">\r\n <i class=\"fa fa-caret-down\"></i>\r\n </button>\r\n </div>\r\n <!-- Bord droit : largeur de la colonne (tirer), ajustée au contenu (double clic). -->\r\n <span class=\"col-resizer\" title=\"Largeur de la colonne (double clic : ajuster au contenu)\"\r\n (mousedown)=\"startResize(col, $event)\" (dblclick)=\"autoFitColumn(col, $event)\"\r\n (click)=\"$event.stopPropagation()\"></span>\r\n </th>\r\n <th *ngIf=\"ctx.enableLastColumnResize\" #lastColumnHeader class=\"header last-column\"\r\n (contextmenu)=\"openHeaderContextMenu($event, rcolumns[rcolumns.length - 1])\">\r\n <div class=\"header-cell header-cell-end\" *ngIf=\"rcolumns.length > 0\">\r\n <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n [class.open]=\"headerMenu?.column.Property === rcolumns[rcolumns.length - 1].Property\"\r\n (click)=\"toggleHeaderMenu(rcolumns[rcolumns.length - 1], $event)\">\r\n <i class=\"fa fa-caret-down\"></i>\r\n </button>\r\n </div>\r\n </th>\r\n\r\n </tr>\r\n <ng-container *ngIf=\"this.facade.filter.additionalQuery$ | async as additionalQuery\">\r\n <tr #thFilterRows *ngFor=\"let filterRow of additionalQuery.Rows;let i = index\" >\r\n <th class=\"filter-header row-state\" (click)=\"removeFilterQuery(i)\"></th>\r\n <th class=\"filter-header\" [ngClass]=\"{disabled: !col.IsFilterEnabled}\" *ngFor=\"let col of rcolumns;let i = index\"\r\n [attr.id]=\"guid.toString() + '-filter-' + i\">\r\n <input *ngIf=\"col.IsFilterEnabled\" type=\"text\"\r\n class=\"filter-header-input\"\r\n name=\"keyword\"\r\n #uniquename=\"ngModel\"\r\n [attr.id]=\"guid.toString() + '-filter-input-' + col.Property\"\r\n [placeholder]=\"filterRow.ClausesByPropertyName.get(col.Property).FilterValues?.length ? 'Filtre avancé : ' + filterRow.ClausesByPropertyName.get(col.Property).FilterValues.length + ' valeur(s)' : ''\"\r\n [(ngModel)]=\"filterRow.ClausesByPropertyName.get(col.Property).FilterValue\"\r\n (ngModelChange)=\"handleFilterChanged($event, filterRow, col.Property)\"\r\n (change)=\"validateFilterChanged($event, filterRow, col.Property)\"\r\n />\r\n </th>\r\n <ng-container>\r\n <th #lastColumnFilter class=\"filter-header last-column\"></th>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </thead>\r\n\r\n <tbody>\r\n <ng-container *ngIf=\"this.facade.data\">\r\n <ng-container *ngFor=\"let row of this.data.Values; let r = index;\">\r\n <tr\r\n [class]=\"'alternating' | gridStyle : ctx : { row : row, index : r, maxIndex : this.data.Values.length, hasAggregates: hasAggregates }\"\r\n [class.selected]=\"isRowSelected(row)\"\r\n [attr.id]=\"guid.toString() + '-row-' + row.Id\"\r\n (mousedown)=\"onRowMouseDown(row, $event)\"\r\n (mouseup)=\"onRowMouseUp(row, $event)\"\r\n (click)=\"onRowClick(row, $event)\"\r\n\r\n [rowRef]=\"guid + '-row-' + row.Id\"\r\n >\r\n\r\n <th [attr.class]=\"'rowstate' | gridStyle : ctx : { row : row }\">\r\n <ng-container *ngIf=\"selectionStyler.isModified(row) && !selectionStyler.isInvalid(row) && !selectionStyler.isWarning(row)\">\r\n <div class=\"new-rowstate\"><span>...</span></div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectionStyler.isInvalid(row)\">\r\n <div> <img class=\"error-row-icon\" src=\"assets/images/error.svg\" /> </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectionStyler.isWarning(row) && !selectionStyler.isInvalid(row)\">\r\n <div> <img class=\"error-row-icon\" src=\"assets/images/warning.svg\" /> </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ctx.displayDetail\">\r\n <button type=\"button\" [attr.id]=\"row.Id + '_button'\" class=\"toggle-button btn\" (click)=\"toggleDetail(row)\">\r\n <i class=\"fa fa-chevron-right fa-custom\"></i>\r\n </button>\r\n </ng-container>\r\n </th>\r\n\r\n <td *ngFor=\"let column of rcolumns; index as i\"\r\n [attr.id]=\"cellId(row, column)\"\r\n [style.max-width.px]=\"colWidth(column)\" [attr.data-sized]=\"colWidth(column) ? '' : null\"\r\n [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\"\r\n [class]=\"'cell' | gridStyle : ctx : { row : row,column : column,index : r }\"\r\n [class.selected]=\"isRowSelected(row)\"\r\n (mousedown)=\"onCellMouseDown(r, i, $event)\"\r\n (mouseenter)=\"onCellMouseEnter(r, i, $event)\"\r\n (click)=\"onCellClick(row, column)\"\r\n (dblclick)=\"onCellDblClick(row, column)\">\r\n\r\n <alg-datagrid-cell #dataGridCellComponent\r\n class=\"gridcell-container\"\r\n [entity]=\"row\"\r\n [isEditable]=\"canEditCell(row, column)\"\r\n [property]=\"column.Property\"\r\n [managed]=\"true\"\r\n [mode]=\"showEditor(row, column) ? 'edit' : 'view'\"\r\n [class.grid-cursor]=\"isCursorCell(row, column)\"\r\n [class.grid-range]=\"isInRange(r, i)\"\r\n (contextmenu)=\"openContextMenu($event, row, column)\">\r\n\r\n <ng-template alg-editMode>\r\n <!-- Éditeur du champ du formulaire qui correspond à la colonne (sinon déduit de la colonne), à la hauteur de la ligne. -->\r\n <alg-field class=\"grid-editor\"\r\n [field]=\"getEditField(column)\"\r\n [form]=\"getRowForm(row)\"\r\n [showLabel]=\"false\"\r\n (propertyChanged)=\"onCellChanged(row, $event)\"\r\n >\r\n <!-- [focusable]=\"cellFocus\" -->\r\n </alg-field>\r\n </ng-template>\r\n <ng-template alg-viewMode>\r\n\r\n <!-- Colonne booléenne : case à cocher centrée, valeur vide comprise (non cochée). -->\r\n <div *ngIf=\"isBooleanColumn(column)\" class=\"grid-checkbox\">\r\n <input type=\"checkbox\" tabindex=\"-1\" [checked]=\"isChecked(row[column.Property])\" />\r\n </div>\r\n\r\n <div [ngSwitch]=\"column.Display?.type\" *ngIf=\"!isBooleanColumn(column) && !isUndefined(row[column.Property])\">\r\n <div *ngSwitchCase=\"'url'\">\r\n <a [routerLink]=\"[$safeNavigationMigration(column.Display?.baseUrl),row[column.Property]]\">\r\n {{ row.Id || row[column.Property] }}\r\n </a>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'img'\" class=\"image\">\r\n <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\"\r\n [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"20\" [imageWidth]=\"20\">\r\n </alg-image>\r\n\r\n <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n {{ row[column.ToolTipProperty] }}\r\n </div>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'img-file'\" class=\"image\">\r\n\r\n <alg-image\r\n [imageUrl]=\"this.getImageUrl(row,column)\" [wide]=\"true\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n </alg-image>\r\n\r\n <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n {{ row[column.ToolTipProperty] }}\r\n </div>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'wide-img'\" class=\"image\">\r\n <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\" [wide]=\"true\"\r\n [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n </alg-image>\r\n\r\n <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n {{ row[column.ToolTipProperty] }}\r\n </div>\r\n </div>\r\n\r\n <span *ngSwitchCase=\"'date'\">\r\n {{row[column.Property]| date: column.Display?.format || 'dd/MM/yyyy'}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'boolean'\">{{row[column.Property] ? 'OUI' : 'NON'}} </span>\r\n\r\n <span *ngSwitchCase=\"'datetime'\">{{row[column.Property] | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}</span>\r\n\r\n <span *ngSwitchCase=\"'money'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\"\r\n class=\"money\">\r\n {{\r\n row[column.Property]\r\n | currency: column.Display?.currency\r\n || (column.Display?.sourceProperty && row[column.Display?.sourceProperty] ? row[column.Display?.sourceProperty] : false)\r\n || 'EUR' : 'symbol'\r\n\r\n | todefine: $safeNavigationMigration(column.Display?.handleError)\r\n }}\r\n\r\n <div class=\"tool-tip\" *ngIf=\"ctx.showOnToolTip(row,column)\">\r\n {{ctx.showOnToolTip(row,column)}}\r\n </div>\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'percent'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | percent : column.Display?.format\r\n || '1.0-2' | todefine: $safeNavigationMigration(column.Display?.handleError)}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'number'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | number: column.Display?.format\r\n || '1.0-3' | todefine : $safeNavigationMigration(column.Display?.handleError)}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'fixedsizeinteger'\"\r\n [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n {{row[column.Property] | tofixedsizeinteger : $safeNavigationMigration(column.Display?.completingCaracter) : $safeNavigationMigration(column.Display?.width) }}\r\n </span>\r\n <span *ngSwitchDefault [innerText]=\"column.Property == 'Id' ? (row[column.Property] < 0 ? '' : row[column.Property]) : row[column.Property]\">\r\n </span>\r\n </div>\r\n\r\n <div *ngIf=\"!isBooleanColumn(column) && isUndefined(row[column.Property])\">\r\n <span *ngIf=\"!isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\" class=\"mw-invalid\">\r\n {{ column.Display?.nullCaseText }}\r\n </span>\r\n\r\n <span *ngIf=\"isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\">\r\n \r\n </span>\r\n </div>\r\n\r\n </ng-template>\r\n\r\n </alg-datagrid-cell>\r\n </td>\r\n <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n <!-- Colonne vide de fin : clic droit = menu de la dernière colonne. -->\r\n <td (contextmenu)=\"openContextMenu($event, row, rcolumns[rcolumns.length - 1])\"></td>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n\r\n <tfoot>\r\n <tr class=\"empty-row\" *ngIf=\"hasAggregates\">\r\n <td></td>\r\n </tr>\r\n <tr class=\"aggregation-row\" *ngIf=\"hasAggregates\">\r\n <td class=\"row-state\"></td>\r\n <td *ngFor=\"let column of rcolumns; index as i\" [attr.class]=\"'cell' | gridStyle : ctx : { column : column, index : i }\"\r\n [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n\r\n <ng-container *ngFor=\"let agg of columnAggregates[column.Property]\">\r\n\r\n <span class=\"agg-label\">{{ aggregationLabel(agg.op) }}</span>\r\n <span [ngSwitch]=\"agg.op === 'COUNT' ? 'count' : column.Display?.type\">\r\n\r\n <span *ngSwitchCase=\"'count'\">{{ agg.value | number: '1.0-0' }}</span>\r\n <span *ngSwitchCase=\"'percent'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\r\n <span *ngSwitchCase=\"'fixedsizeinteger'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\r\n\r\n <span *ngSwitchCase=\"'money'\" class=\"money\">\r\n {{ agg.value | currency: getColCurrency(column) }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'date'\">\r\n {{agg.value | date: column.Display?.format || 'dd/MM/yyyy'}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'datetime'\">\r\n {{agg.value | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'number'\">\r\n {{agg.value | number: column.Display?.format || '1.0-3'}}\r\n </span>\r\n\r\n <span *ngSwitchDefault>\r\n {{agg.value}}\r\n </span>\r\n\r\n </span>\r\n\r\n </ng-container>\r\n\r\n </td>\r\n\r\n <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n <td class=\"last-column\"></td>\r\n </ng-container>\r\n\r\n </tr>\r\n </tfoot>\r\n </ng-container>\r\n </ng-container>\r\n </table>\r\n </ng-container>\r\n</div>\r\n\r\n\r\n<!-- Emplacement visé par une colonne déplacée : trait orange sur la séparation des deux en-têtes. -->\r\n<div class=\"col-drop-indicator\" *ngIf=\"dropIndicator\"\r\n [ngStyle]=\"{ left: dropIndicator.left + 'px', top: dropIndicator.top + 'px', height: dropIndicator.height + 'px' }\"></div>\r\n\r\n<!-- Menu d'une colonne (flèche de l'en-tête ou clic droit sur une cellule), en trois zones séparées\r\n par un trait : Tri (sous-menu « Trier »), Actions (celles du panneau des actions), Fonctions (sous-menu « Fonctions »). -->\r\n<div class=\"header-menu\" *ngIf=\"headerMenu\"\r\n [ngStyle]=\"{ top: headerMenu.y + 'px', left: headerMenu.x + 'px', visibility: headerMenu.ready ? 'visible' : 'hidden' }\"\r\n (click)=\"$event.stopPropagation()\" (contextmenu)=\"$event.preventDefault()\">\r\n <ul>\r\n <!-- Tri : sous-menu « Trier » (croissant, décroissant, personnalisé). -->\r\n <li class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'sort'\"\r\n [class.checked]=\"this.facade.filter.isAsc(headerMenu.column.Property) || this.facade.filter.isDesc(headerMenu.column.Property) || this.facade.filter.getSortList().length > 1\"\r\n (mouseenter)=\"setSubmenu('sort')\" (click)=\"setSubmenu('sort')\">\r\n <i class=\"fa fa-sort\"></i><span>Trier</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu\" *ngIf=\"headerMenu.submenu === 'sort'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <li [class.checked]=\"this.facade.filter.isAsc(headerMenu.column.Property)\" (click)=\"sortColumn('asc')\">\r\n <i class=\"fa fa-sort-amount-asc\"></i><span>Par ordre croissant</span>\r\n </li>\r\n <li [class.checked]=\"this.facade.filter.isDesc(headerMenu.column.Property)\" (click)=\"sortColumn('desc')\">\r\n <i class=\"fa fa-sort-amount-desc\"></i><span>Par ordre décroissant</span>\r\n </li>\r\n <li [class.checked]=\"this.facade.filter.getSortList().length > 1\" (click)=\"openCustomSort()\">\r\n <i class=\"fa fa-sort\"></i><span>Tri personnalisé…</span>\r\n </li>\r\n </ul>\r\n </li>\r\n <!-- Filtre sur la valeur de la cellule (clic droit sur une cellule) : première ligne des filtres composés. -->\r\n <li *ngIf=\"cellFilterValue() !== undefined\" (click)=\"filterOnCell()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <i class=\"fa fa-filter\"></i><span>Filtrer sur « {{ cellFilterLabel() }} »</span>\r\n </li>\r\n <!-- Filtre avancé : valeurs distinctes de la colonne sur les résultats, à cocher (condition « dans la liste »). -->\r\n <li *ngIf=\"headerMenu.column.IsFilterEnabled\" class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'distinct'\"\r\n [class.checked]=\"this.facade.filter.getFilterValues(headerMenu.column.Property).length > 0\"\r\n (mouseenter)=\"setSubmenu('distinct')\" (click)=\"setSubmenu('distinct')\">\r\n <i class=\"fa fa-filter\"></i><span>Filtre avancé</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu header-submenu-distinct\" *ngIf=\"headerMenu.submenu === 'distinct'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <alg-grid-distinct-filter [facade]=\"this.facade\" [entityKey]=\"this.entityKey\" [property]=\"headerMenu.column.Property\"\r\n (done)=\"closeViewMenu()\" (loaded)=\"onViewMenuLoaded()\"></alg-grid-distinct-filter>\r\n </ul>\r\n </li>\r\n <!-- Affichage : vues personnalisées (cochée = affichée), puis « Modifier… ». -->\r\n <li *ngIf=\"this.facade.config.viewChooser\" class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'columns'\"\r\n (mouseenter)=\"setSubmenu('columns')\" (click)=\"setSubmenu('columns')\">\r\n <i class=\"fa fa-columns\"></i><span>Affichage</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu header-submenu-columns\" *ngIf=\"headerMenu.submenu === 'columns'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <alg-grid-view-menu [chooser]=\"this.facade.config.viewChooser\" (done)=\"closeViewMenu()\" (loaded)=\"onViewMenuLoaded()\"></alg-grid-view-menu>\r\n </ul>\r\n </li>\r\n <!-- Colonnes figées à gauche, de la première jusqu'à celle-ci. -->\r\n <li [class.checked]=\"isFrozen(columnIndex(headerMenu.column))\" (click)=\"toggleFrozen()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <i class=\"fa fa-thumb-tack\"></i>\r\n <span>{{ frozenUntil === columnIndex(headerMenu.column) ? 'Libérer les colonnes' : 'Figer jusqu\\'à cette colonne' }}</span>\r\n </li>\r\n <li *ngIf=\"frozenUntil !== undefined && frozenUntil !== columnIndex(headerMenu.column)\"\r\n (click)=\"unfreezeColumns()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <i class=\"fa fa-unlock\"></i><span>Libérer les colonnes</span>\r\n </li>\r\n\r\n <!-- Actions -->\r\n <ng-container *ngIf=\"visibleActions.length > 0\">\r\n <li class=\"separator\"></li>\r\n <ng-container *ngFor=\"let action of visibleActions\">\r\n <ng-container *ngIf=\"{ disabled: (action.disabled$ | async) } as state\">\r\n <li class=\"menu-action\" [class.disabled]=\"state.disabled\"\r\n (click)=\"executeMenuAction(action, state.disabled)\" (mouseenter)=\"setSubmenu(undefined)\">\r\n <img class=\"menu-action-icon\" [src]=\"getActionImageUrl(action.icon)\" [alt]=\"action.title\" />\r\n <span>{{ action.title }}</span>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Affichage -->\r\n <li class=\"separator\"></li>\r\n <li class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'display'\"\r\n (mouseenter)=\"setSubmenu('display')\" (click)=\"setSubmenu('display')\">\r\n <i class=\"fa fa-calculator\"></i><span>Fonctions</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n <ul class=\"header-submenu\" *ngIf=\"headerMenu.submenu === 'display'\"\r\n [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n (click)=\"$event.stopPropagation()\">\r\n <li *ngFor=\"let op of getAggregationOptions(headerMenu.column)\"\r\n [class.checked]=\"activeAggregations[headerMenu.column.Property] === op\"\r\n (click)=\"aggregateColumn(op)\">\r\n <i class=\"fa fa-check\"></i><span>{{ aggregationLabel(op) }}</span>\r\n </li>\r\n <ng-container *ngIf=\"activeAggregations[headerMenu.column.Property]\">\r\n <li class=\"separator\"></li>\r\n <li (click)=\"aggregateColumn(null)\">\r\n <i class=\"fa fa-times\"></i><span>Ne plus afficher</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ul>\r\n</div>\r\n\r\n",
|
|
19459
|
+
styles: [".home-page{font-family:Open sans,sans-serif;background:#fff;-webkit-font-smoothing:antialiased;height:100%;width:100%;padding:16px}.main-container{margin:0 50px}.main-container-modal{width:calc(100% - 50px);margin:10px 25px 0}.moyen-titre{font-weight:700;font-size:24px;color:#4d5a81;margin:8px 0;border-bottom:solid 1px #DBE4FF}.grand-titre{font-weight:700;font-size:28px;color:#4d5a81;margin:0 0 8px}.petit-titre{font-weight:700;font-size:16px;color:#4d5a81;margin:0 0 8px}.petit-titre.underlined{border-bottom:solid 1px #4D5A81}.paragraph{padding:0 15px}.paragraph-highlight{padding:5px 15px 0 12px;border-left:5px solid #8EA7F8;border-bottom:1px solid #DBE4FF;border-top:1px solid #DBE4FF;border-right:1px solid #DBE4FF;background-color:#f7faff}.highlight{background-color:#f7faff;border:1px solid #DBE4FF;border-radius:5px;padding:15px;color:#3c5dc4;margin:0 0 16px}.highlight p{margin-bottom:0}.highlight:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"53.294\" height=\"50.629\" viewBox=\"0 0 53.294 50.629\">%0D%0A <path id=\"allerg\\e8ne\" d=\"M830.494,25.793l-5.814,6.783.727,8.963-8.721,1.938-4.6,7.752L803.847,47.6l-8.236,3.634-4.6-7.51-8.721-1.938.727-8.963L777.2,26.035l5.814-6.783-.727-8.963,8.721-1.938L795.61.6l8.236,3.634L812.083.6l4.6,7.752,8.721,1.938-.727,8.963Zm-24.467,2.422V13.681h-4.845V28.216Zm0,9.69V33.06h-4.845v4.845Z\" transform=\"translate(-777.2 -0.6)\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 8px 24px 0;filter:invert(31%) sepia(51%) saturate(1323%) hue-rotate(199deg) brightness(99%) contrast(94%)}.notification{background-color:#dbe4ff;border:1px solid #C4D0F9;border-radius:5px;color:#4d5a81;margin:16px;padding:5px 15px;text-align:justify}.notification:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info-circle\" class=\"svg-inline--fa fa-info-circle fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\"></path></svg>');background-repeat:no-repeat;margin:0 8px 0 0;filter:invert(31%) sepia(8%) saturate(2329%) hue-rotate(188deg) brightness(103%) contrast(85%)}.notification-text{padding:0 15px 0 30px;font-size:16px}:host{flex:1}.header.last-column{border-left:none!important;width:100%}table thead .sorting,table thead .sorting_asc,table thead .sorting_desc,table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table thead th:first-child,table tfoot tr:first-child{position:sticky;left:0;z-index:2}table tbody th:first-child{position:sticky;left:0;z-index:1;border-right:none}table tbody th:first-child div{text-align:center;vertical-align:middle;line-height:20px}table tbody tr.row-odd th:first-child{background:#ebf0ff}table tbody tr.selected.row-odd.mw-invalid th:first-child,table tbody tr.selected.row-even.mw-invalid th:first-child,table tbody tr.selected.row-odd.mw-warning th:first-child,table tbody tr.selected.row-even.mw-warning th:first-child,table tbody tr.selected.row-even th:first-child,table tbody tr.selected.row-odd th:first-child{background-color:#8ea7f8;color:#fff}table tbody tr.row-odd.mw-invalid th:first-child,table tbody tr.row-even.mw-invalid th:first-child{background-color:#f2dede}table tbody tr.row-odd.mw-warning th:first-child,table tbody tr.row-even.mw-warning th:first-child{background-color:#fff4de}table thead th{position:-webkit-sticky;position:sticky;top:0;z-index:1;background:#fff;border-left:1px solid #3C5DC4;border-bottom:1px solid #3C5DC4}table thead .sorting{background-image:none;cursor:pointer}table thead .sorting_asc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxNjIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxNTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+z5ABTAAAAI5JREFUeNpi/P//PwO1ABMDFQELIQXVjfe4gFQbEJe11iv9otRl2UCcBcSphBQy4gszoKu0gNROIJYB4jtA7AF03V2SXQY0iBFIFUMNAgEVIM6DipPsTQcgDkQTSwRia5IMA9rOC6RqgVgQTQokXgOUZyfFZSFQF/zAgh2BOIjkCBjQRDtq2Khh9DAMIMAAT9AmNBDSXegAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_desc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxQTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxOTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1fsfwAAAAJdJREFUeNpi/P//PwO1ABMDFcGoYaOG0cMwFmyC1Y33IoHUAiD+h8MBGa31SvOJddk6IN4PxBxY8FEgXkO0N4G2/gRSLUD8GU3qPRA3A+U/kxpmIBege2U9EB/ApYERX6kBDDtlILUDiFWA+AkQuwNddY2s2ARqvAukJgDxbyCehM8gnLGJBmYDsSoQTyWkkHHQFo4AAQYAAA0piq4hbqwAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-image:none}.checkbok-container{align-items:center;margin:0;padding:0}.gridcell-container{padding:0;min-width:fit-content}.gridcell-container input[type=number]{display:block;size:1;font-size:10pt;width:100%!important;height:100%;margin:0!important;border:2px solid #F78383}.datagrid-custom-container{height:100%;overflow:auto;margin-left:-1px}.data-grid-datatable{table-layout:fixed;cursor:pointer;border-spacing:0px}.data-grid-datatable td{box-shadow:none;padding:2px 5px;white-space:nowrap}.data-grid-datatable td.row-state{padding:2px 5px;width:16px}.data-grid-datatable td.img{padding:2px 5px}.data-grid-datatable td.row-state img{height:16px;width:16px;margin-top:-3px;padding:0}.data-grid-datatable tr{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header{vertical-align:bottom;padding:2px 5px 2px 0;font-weight:400;color:#3c5dc4;white-space:nowrap;line-height:25px;min-width:32px;margin-bottom:5px}.header.img{min-width:16px}.header.row-state{min-width:27px;position:-webkit-sticky;position:sticky;top:0;left:0;z-index:2;background:#fff;border-left:none;border-right:none}.filter-header{background-color:#f7f7f7!important}.filter-header.disabled{background-color:#9fa9c7!important}.filter-header.row-state:hover:before{position:relative;display:block;float:left;width:16px;height:16px;content:\" \";background-size:16px 16px;-webkit-background-size:16px 16px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"57\" height=\"57\" viewBox=\"0 0 57 57\">%0D%0A <path id=\"Rond_Croix\" data-name=\"Rond Croix\" d=\"M28.5,57A28.5,28.5,0,0,1,8.347,8.347,28.5,28.5,0,1,1,48.652,48.652,28.317,28.317,0,0,1,28.5,57Zm0-24.036h0l11.9,11.9L44.869,40.4,32.964,28.5,44.869,16.593,40.4,12.129,28.5,24.034,16.594,12.129l-4.465,4.464L24.034,28.5,12.129,40.4l4.463,4.465L28.5,32.965Z\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 0 0 3px;filter:brightness(0) saturate(100%) invert(70%) sepia(93%) saturate(1540%) hue-rotate(309deg) brightness(105%) contrast(94%)}.filter-header-input{height:calc(100% - 2px);width:calc(100% - 2px);margin:0;border:none!important;background-color:#f7f7f7;padding:0 0 0 5px;color:#4d5a81}.header.row-state:before{position:relative;display:block;float:left;width:16px;height:16px;content:\" \";background-size:16px 16px;-webkit-background-size:16px 16px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->%0D%0A<path fill=\"currentColor\" d=\"M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z\"/></svg>');background-repeat:no-repeat;margin:0 0 3px 5px;filter:brightness(0) saturate(100%) invert(56%) sepia(79%) saturate(2301%) hue-rotate(202deg) brightness(92%) contrast(91%)}.filter-header.last-column{border-left:none!important}.header label{cursor:pointer;margin-bottom:0;margin-right:10px;padding-left:5px;width:100%}.row-odd{background-color:#ebf0ff;border-left:1px solid #C1D0FD;border-bottom:1px solid #C1D0FD}.row-even{background-color:#f7faff;border-left:1px solid #C1D0FD;border-bottom:1px solid #C1D0FD}.error-row-icon{padding:2px;width:20px}.selected{background-color:#8ea7f8;color:#fff}.mw-invalid{font-weight:600;background-color:#f2dede;border:1px solid var(--red-error)}.mw-invalid td{background-color:#f2dede!important}.data-grid-datatable tbody tr.mw-invalid>td,.data-grid-datatable tbody tr.mw-invalid>th{box-shadow:inset 0 1px 0 var(--red-error),inset 0 -1px 0 var(--red-error)}span.mw-invalid{padding:0 3px;color:var(--red-error);background-color:transparent}.mw-warning.selected,.mw-invalid.selected{background-color:#8ea7f8}.mw-warning.selected td,.mw-invalid.selected td{background-color:#8ea7f8!important}.mw-warning{font-weight:600;background-color:#fff4de;border:1px solid var(--orange-algorima)}.mw-warning td{background-color:#fff4de!important}.mw-modified{font-weight:600;border:1px solid var(--main-bg-color)}.first-row{border-top:none}.last-row,.last-row td{border-bottom:none!important}.data-grid-datatable>tbody>tr{z-index:50}.image{position:relative;display:flex;flex-direction:row}.image img{height:20px;width:auto}td.money{position:relative}.tool-tip{visibility:hidden;background-color:#424242;color:#fff;text-align:left;border-radius:3px;font-size:15px;position:absolute;z-index:1;top:-10%;left:150%;opacity:0;transition:opacity .3s;padding:5px 15px;white-space:nowrap;overflow:visible}.tool-tip:after{content:\" \";position:absolute;top:50%;right:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent rgb(66,66,66) transparent transparent}.image:hover .tool-tip{visibility:visible;opacity:1}td.money:hover .tool-tip{visibility:visible;opacity:1;left:100%;height:28px;font-size:13px;margin-top:0;padding:5px 10px 10px}.disabled{pointer-events:none}.edit-mode{background-color:#fff;border:1px solid #4465C9;min-width:90px!important;height:30px!important}.edit-mode .form-group{min-height:0px}.edit-mode .inactivated{background-color:#dbe4ff80}.edit-mode .inactivated-fo{background-color:#dbe4ff}.edit-mode .ecartclass{border:2px solid #4465C9}.edit-mode .error-cell{font-weight:700;color:#f78383!important}.edit-mode .selected{color:#4d5a81}.highlight-1,.highlight-1.selected,.edit-mode.highlight-1.selected{background-color:#4d5a81!important;color:#fff!important}.highlight-2,.highlight-2.selected,.edit-mode.highlight-2.selected{background-color:#dbe4ff!important;color:#4d5a81!important}.highlight-3,.highlight-3.selected,.edit-mode.highlight-3.selected{background-color:#4465c9!important;color:#fff!important}.highlight-4,.highlight-4.selected,.edit-mode.highlight-4.selected{background-color:#f78383!important;color:#fff!important}.highlight-5,.highlight-5.selected{background-color:#4465c9!important;color:#fff}.fixed-column{position:-webkit-sticky;position:sticky;left:27px;z-index:2!important;border-left:none}.fixed-header{position:-webkit-sticky;position:sticky;left:27px;z-index:3!important;background:#fff}.has-focus{padding:0!important}.has-focus ::ng-deep input,.has-focus ::ng-deep input:focus-visible,.has-focus ::ng-deep input:focus{border-radius:.1;outline:none!important;width:100%;height:29px;min-height:0;margin:0;border:1px solid #4465C9}.has-focus ::ng-deep .form-group{margin-bottom:0;min-height:0}.has-focus ::ng-deep .field-container{margin-bottom:0}.edit-mode.has-focus{width:90px!important}.bordered{border-left:1px solid #14358f!important;border-right:1px solid #14358f!important}.match-keywords{color:var(--main-bg-color);font-weight:700}.datagrid-img img{height:20px;width:20px}.right-align{text-align:right}.left-align{text-align:left}.detail-div{height:0px;overflow:hidden;transition:all .2s linear;width:100%}.fa-custom{font-size:smaller}.detail-div-show{height:150px;transition:all .2s linear}.toggleable{visibility:collapse}.toggleable-show{visibility:visible}.toggle-button-down{transform:rotate(90deg);transition:all .2s linear}.no-result{color:#5272d3;height:100%;width:100%;padding:15px 15px 150px}.new-rowstate{display:flex;flex-direction:row;align-items:center;align-self:center;height:100%;width:100%}.new-rowstate span{height:100%;width:100%;margin-top:-6px}.context-menu{position:absolute;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 12px #0000004d;padding:8px;z-index:1000;min-width:75px;max-width:250px;transition:all .3s ease-in-out}.context-menu ul{list-style:none;margin:0;padding:0}.context-menu li{padding:10px 14px;cursor:pointer;border-radius:8px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.context-menu li:hover{background:linear-gradient(135deg,#ffffff4d,#ffffff1a);transform:scale(1.02)}.context-menu li:active{transform:scale(.98)}.grid-container{overflow:auto;position:relative}.aggregation-row{position:sticky;bottom:0;z-index:50;background:#f7faff!important;background-color:#f7faff!important;font-weight:700;border-top:1px solid #4D5A81!important;border-bottom:1px solid #4D5A81!important}.aggregation-row td{background:#f7faff!important;background-color:#f7faff!important;border-top:1px solid #4D5A81!important;border-bottom:1px solid #4D5A81!important;border-left:none!important;border-right:none!important}.empty-row td{padding:0}.col-resizer{position:absolute;top:0;right:-5px;z-index:4;width:10px;height:100%;cursor:col-resize}.col-resizer:hover{background:#3c5dc440}.data-grid-datatable td[data-sized]{overflow:hidden;text-overflow:ellipsis}:where(.data-grid-datatable tbody tr,.data-grid-datatable tfoot tr){background-color:#fff}.data-grid-datatable td[data-frozen]{position:sticky;z-index:1;background-color:inherit}.data-grid-datatable thead th[data-frozen]{position:sticky;z-index:3}.data-grid-datatable td[data-frozen]:has(+td:not([data-frozen])),.data-grid-datatable thead th[data-frozen]:has(+th:not([data-frozen])){box-shadow:inset -2px 0 #3c5dc459}table thead th.header{background-image:none!important;cursor:default}.header-cell{position:relative;display:flex;align-items:center;gap:2px}.header-cell label{flex:1 1 auto;cursor:default;margin:0;padding-left:2px;overflow:hidden;text-overflow:ellipsis}.header-cell.col-dragging{opacity:.8}.dg-column-ghost{border:1px solid #C1D0FD;box-sizing:border-box}.col-drop-indicator{position:fixed;z-index:3100;width:1px;border-radius:0;background:var(--orange-algorima, #f59d0f);pointer-events:none}.header-cell-end{justify-content:flex-end;align-items:center;height:25px}.header-handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:content-box;width:17px;height:20px;padding:0 2px;color:#3c5dc4;opacity:.35;cursor:grab}.header-handle:hover{opacity:1}.header-handle:active{cursor:grabbing}.header-sort,.header-agg{flex-shrink:0;color:#3c5dc4;font-size:11px;font-style:normal}.header-menu-button{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:18px;padding:0;border:0;border-radius:3px;background:none;color:#3c5dc4;opacity:.5;cursor:pointer}.header-menu-button:hover,.header-menu-button.open{opacity:1;background:#4465c926}.header-menu{position:fixed;z-index:3000;width:230px;padding:4px 0;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003}.header-menu ul{margin:0;padding:0;list-style:none}.header-menu li{display:flex;align-items:center;gap:8px;padding:5px 12px;color:#3c5dc4;font-size:12.5px;cursor:pointer}.header-menu li i{width:14px;text-align:center;visibility:visible}.header-menu li:hover{background:#dbe4ff}.header-menu li.checked{font-weight:600}.header-menu li.separator{height:1px;margin:4px 0;padding:0;background:#dbe4ff;cursor:default}.header-menu li .fa-check{visibility:hidden}.header-menu li.checked>.fa-check{visibility:visible}.header-menu li.menu-action.disabled{opacity:.45;cursor:default}.header-menu li.menu-action.disabled:hover{background:none}.header-menu .menu-action-icon{width:14px;height:14px;filter:brightness(0) saturate(100%) invert(36%) sepia(91%) saturate(628%) hue-rotate(191deg) brightness(89%) contrast(85%) brightness(75%)}.header-menu li.has-submenu{position:relative}.header-menu li.has-submenu.open{background:#dbe4ff}.header-menu li.has-submenu .submenu-caret{margin-left:auto}.header-menu .header-submenu{position:absolute;top:-5px;left:100%;width:200px;padding:4px 0;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003;font-weight:400}.header-menu .header-submenu.left{left:auto;right:100%}.header-menu .header-submenu.header-submenu-distinct{width:240px}.header-menu .header-submenu.header-submenu-columns{width:240px;max-height:320px;overflow-y:auto}.header-menu .header-submenu .column-choice input[type=checkbox]{width:14px;margin:0;pointer-events:none}.header-menu .header-submenu .submenu-loading{opacity:.6;cursor:default}.header-menu .header-submenu .view-lock{margin-left:auto;padding-left:8px;opacity:.5;font-size:11px}.header-menu .header-submenu.up{top:auto;bottom:-5px}.header-sort-rank{flex-shrink:0;color:#3c5dc4;font-size:9px}.aggregation-row .agg-label{margin-right:4px;color:#3c5dc4;font-size:10.5px;opacity:.7}.datagrid-custom-container:focus,.datagrid-custom-container:focus-visible{outline:none}.data-grid-datatable td .image ::ng-deep img{display:block}.data-grid-datatable td:has(>.grid-cursor){outline:2px solid #4465C9;outline-offset:-2px}.data-grid-datatable td:has(>.grid-range){background-color:#4465c940!important;box-shadow:inset 0 0 0 1px #4465c980;color:#4d5a81!important}.data-grid-datatable td:has(>.grid-range) ::ng-deep *{color:#4d5a81!important}.grid-checkbox{display:flex;align-items:center;justify-content:center}.grid-checkbox input[type=checkbox]{margin:0;pointer-events:none}.data-grid-datatable td:has(.grid-editor){padding:0!important;background-color:#fff}.grid-editor{display:block;height:23px;overflow:visible;color:#4d5a81}.grid-editor ::ng-deep .field-container,.grid-editor ::ng-deep .form-group,.grid-editor ::ng-deep .form-group>div,.grid-editor ::ng-deep .checkbox-container{margin:0!important;padding:0;min-height:0!important;height:23px}.grid-editor ::ng-deep .validation-message,.grid-editor ::ng-deep .checkbox-label{display:none}.grid-editor ::ng-deep input,.grid-editor ::ng-deep input:focus,.grid-editor ::ng-deep textarea{box-sizing:border-box;width:100%;height:23px!important;min-height:0!important;margin:0!important;padding:0 4px;border:1px solid #4465C9;border-radius:0;box-shadow:none;font-size:inherit;line-height:normal;resize:none}.grid-editor ::ng-deep input.ng-invalid.ng-touched,.grid-editor ::ng-deep input.ng-invalid.ng-dirty{border-color:#f78383}.grid-editor ::ng-deep input[type=checkbox]{width:auto}.grid-editor ::ng-deep .checkbox-container{display:flex;align-items:center;justify-content:center}.grid-editor ::ng-deep .switch{display:flex;align-items:center;width:auto;height:auto}.grid-editor ::ng-deep .switch .slider{display:none}.grid-editor ::ng-deep .switch input[type=checkbox]{opacity:1;width:14px;height:14px!important;margin:0!important;padding:0;border:none;cursor:pointer}.grid-editor ::ng-deep .ng-select .ng-select-container{color:#4d5a81;min-height:0!important;height:23px!important;border-radius:0;border-color:#4465c9}.grid-editor ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:0}.grid-editor ::ng-deep .ng-select .ng-select-container .ng-value-container{padding-top:0}.grid-editor ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%!important;border:none}.grid-editor ::ng-deep .form-group>div{flex:1;min-width:0;width:100%}.grid-editor ::ng-deep .ng-select{width:100%}.grid-editor ::ng-deep alg-selector{display:flex;width:100%;height:23px}.grid-editor ::ng-deep .input-select-default,.grid-editor ::ng-deep .input-select-default.with-button{flex:1;min-width:0;padding-right:0;margin-right:0}.grid-editor ::ng-deep .input-group-btn{float:none}.grid-editor ::ng-deep .btn,.grid-editor ::ng-deep .btn-32,.grid-editor ::ng-deep .btn-input-select{height:23px;width:23px;padding:0;line-height:1;border-radius:0}.grid-editor ::ng-deep .input-with-button{display:flex;height:23px}.grid-editor ::ng-deep .switch{margin:2px 0 0 4px;transform:scale(.7);transform-origin:left top}::ng-deep body.dg-column-dragging,::ng-deep body.dg-column-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}\n"]
|
|
19454
19460
|
}]
|
|
19455
19461
|
}],
|
|
19456
19462
|
ctorParameters: () => [
|
|
@@ -20132,6 +20138,11 @@ const FilterOperators = {
|
|
|
20132
20138
|
label: "n'est aucune de"
|
|
20133
20139
|
}]
|
|
20134
20140
|
};
|
|
20141
|
+
const EditorOperators = {
|
|
20142
|
+
...FilterOperators,
|
|
20143
|
+
text: [...FilterOperators.text, ...FilterOperators.list],
|
|
20144
|
+
number: [...FilterOperators.number, ...FilterOperators.list]
|
|
20145
|
+
};
|
|
20135
20146
|
var FilterEditorComponent = class FilterEditorComponent {
|
|
20136
20147
|
constructor() {
|
|
20137
20148
|
this.columns = [];
|
|
@@ -20207,7 +20218,18 @@ var FilterEditorComponent = class FilterEditorComponent {
|
|
|
20207
20218
|
return this.columns.find((c) => c.key === key);
|
|
20208
20219
|
}
|
|
20209
20220
|
operatorsOf(condition) {
|
|
20210
|
-
return
|
|
20221
|
+
return EditorOperators[this.columnOf(condition.Property)?.type ?? "text"];
|
|
20222
|
+
}
|
|
20223
|
+
hasKnownValues(condition) {
|
|
20224
|
+
return !!this.columnOf(condition.Property)?.values?.length;
|
|
20225
|
+
}
|
|
20226
|
+
addValue(condition, input) {
|
|
20227
|
+
const value = (input.value ?? "").trim();
|
|
20228
|
+
input.value = "";
|
|
20229
|
+
if (value && !(condition.Values ?? []).includes(value)) condition.Values = [...condition.Values ?? [], value];
|
|
20230
|
+
}
|
|
20231
|
+
removeValue(condition, value) {
|
|
20232
|
+
condition.Values = (condition.Values ?? []).filter((v) => v !== value);
|
|
20211
20233
|
}
|
|
20212
20234
|
hasValue(condition) {
|
|
20213
20235
|
return !ViewFilterNoValueOperators.includes(condition.Operator);
|
|
@@ -20292,7 +20314,7 @@ var FilterEditorComponent = class FilterEditorComponent {
|
|
|
20292
20314
|
summary(group = this.filter) {
|
|
20293
20315
|
return [...group.Conditions.map((c) => {
|
|
20294
20316
|
const column = this.columnOf(c.Property);
|
|
20295
|
-
const operator =
|
|
20317
|
+
const operator = this.operatorsOf(c).find((o) => o.value === c.Operator)?.label ?? c.Operator;
|
|
20296
20318
|
const values = this.isList(c) ? (c.Values ?? []).map((v) => column?.values?.find((x) => x.value === v)?.label ?? v).join(", ") : !this.hasValue(c) ? "" : this.hasSecondValue(c) ? `${c.Value ?? "…"} et ${c.Value2 ?? "…"}` : c.Value ?? "…";
|
|
20297
20319
|
return `${column?.label ?? c.Property} ${operator}${values ? " « " + values + " »" : ""}`;
|
|
20298
20320
|
}), ...(group.Groups ?? []).map((g) => `(${this.summary(g)})`)].join(group.Logic === "or" ? " OU " : " ET ") || "Aucun filtre";
|
|
@@ -20323,8 +20345,8 @@ var FilterEditorComponent = class FilterEditorComponent {
|
|
|
20323
20345
|
panelFields: "panelFields"
|
|
20324
20346
|
},
|
|
20325
20347
|
ngImport: i0,
|
|
20326
|
-
template: "<div class=\"fe\">\r\n <div class=\"fe-tabs\" role=\"tablist\" *ngIf=\"!section\">\r\n <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'filters'\" (click)=\"tab = 'filters'\">Filtres</button>\r\n <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'sort'\" (click)=\"tab = 'sort'\">Tri</button>\r\n </div>\r\n\r\n <div class=\"fe-body\" *ngIf=\"shownTab === 'filters'\">\r\n <!-- Filtres de l'écran (FilterPanel) : valeurs enregistrées avec la vue, appliquées au FilterPanel. -->\r\n <div class=\"fe-panel\" *ngIf=\"panelFields.length || shownPanelFields().length\">\r\n <div class=\"fe-panel-title\">Filtres de l'écran</div>\r\n <div class=\"fe-panel-field\" *ngFor=\"let field of shownPanelFields(); trackBy: trackKey\">\r\n <span [title]=\"field.label\">{{ field.label }}</span>\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <select *ngSwitchCase=\"'list'\" class=\"form-control\" [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\">\r\n <option value=\"\">Choisir…</option>\r\n <option *ngFor=\"let option of field.values\" [value]=\"option.value\">{{ option.label }}</option>\r\n </select>\r\n <select *ngSwitchCase=\"'bool'\" class=\"form-control\" [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\">\r\n <option value=\"\">Choisir…</option>\r\n <option value=\"true\">Oui</option>\r\n <option value=\"false\">Non</option>\r\n </select>\r\n <input *ngSwitchDefault class=\"form-control\" [type]=\"field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'\"\r\n [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\" />\r\n </ng-container>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Retirer le filtre de l'écran\" (click)=\"removePanelField(field)\"><i class=\"fa fa-times\"></i></button>\r\n </div>\r\n <!-- Ajout d'un filtre de l'écran : les champs du FilterPanel pas encore utilisés. -->\r\n <div class=\"fe-adds\" *ngIf=\"availablePanelFields().length\">\r\n <select class=\"form-control fe-add-panel\" [ngModel]=\"''\" (ngModelChange)=\"addPanelField($event)\">\r\n <option value=\"\">+ Filtre de l'écran</option>\r\n <option *ngFor=\"let field of availablePanelFields(); trackBy: trackKey\" [value]=\"field.key\">{{ field.label }}</option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"fe-panel-title\" *ngIf=\"panelFields.length || shownPanelFields().length\">Filtre additionnel</div>\r\n <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: filter, parent: null, index: 0, depth: 0 }\"></ng-container>\r\n <div class=\"fe-summary\">{{ summary() }}</div>\r\n </div>\r\n\r\n <div class=\"fe-body\" *ngIf=\"shownTab === 'sort'\">\r\n <div class=\"fe-sort\" *ngFor=\"let level of sort; let i = index; trackBy: trackIndex\">\r\n <span class=\"fe-sort-label\">{{ i === 0 ? 'Trier par' : 'Puis par' }}</span>\r\n <select class=\"form-control\" [(ngModel)]=\"level.property\">\r\n <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n </select>\r\n <select class=\"form-control fe-sort-direction\" [(ngModel)]=\"level.direction\">\r\n <option value=\"asc\">Croissant</option>\r\n <option value=\"desc\">Décroissant</option>\r\n </select>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Monter\" [disabled]=\"i === 0\" (click)=\"moveSort(i, -1)\"><i class=\"fa fa-arrow-up\"></i></button>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Descendre\" [disabled]=\"i === sort.length - 1\" (click)=\"moveSort(i, 1)\"><i class=\"fa fa-arrow-down\"></i></button>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Retirer\" (click)=\"removeSort(i)\"><i class=\"fa fa-times\"></i></button>\r\n </div>\r\n <div class=\"fe-adds\"><button type=\"button\" class=\"fe-add\" (click)=\"addSort()\">+ Niveau</button></div>\r\n </div>\r\n\r\n <div class=\"fe-foot\">\r\n <label class=\"fe-save\" *ngIf=\"!embedded\" [class.disabled]=\"!canSaveInView\"\r\n [title]=\"canSaveInView ? '' : 'La vue par défaut est en lecture seule : dupliquez-la pour y enregistrer un filtre'\">\r\n <input type=\"checkbox\" [(ngModel)]=\"saveInView\" [disabled]=\"!canSaveInView\" />\r\n <span>Enregistrer dans la vue{{ viewLabel ? ' « ' + viewLabel + ' »' : '' }}</span>\r\n </label>\r\n <button type=\"button\" class=\"fe-clear\" (click)=\"clear()\">Tout effacer</button>\r\n </div>\r\n</div>\r\n\r\n<!-- Groupe : relation ET / OU, conditions, groupes imbriqués. -->\r\n<ng-template #groupTpl let-group=\"group\" let-parent=\"parent\" let-index=\"index\" let-depth=\"depth\">\r\n <div class=\"fe-group\" [class.or]=\"group.Logic === 'or'\" [class.nested]=\"depth > 0\">\r\n <div class=\"fe-group-head\">\r\n <span class=\"fe-logic\">\r\n <button type=\"button\" [class.on]=\"group.Logic === 'and'\" class=\"and\" (click)=\"setLogic(group, 'and')\">ET</button>\r\n <button type=\"button\" [class.on]=\"group.Logic === 'or'\" class=\"or\" (click)=\"setLogic(group, 'or')\">OU</button>\r\n </span>\r\n <span class=\"fe-group-hint\">{{ group.Logic === 'and' ? 'Toutes les conditions' : 'Au moins une condition' }}</span>\r\n <button type=\"button\" *ngIf=\"parent\" class=\"fe-icon fe-group-remove\" title=\"Retirer le groupe\" (click)=\"removeGroup(parent, index)\">\r\n <i class=\"fa fa-times\"></i>\r\n </button>\r\n </div>\r\n\r\n <div class=\"fe-cond\" *ngFor=\"let condition of group.Conditions; let i = index; trackBy: trackIndex\">\r\n <select class=\"form-control\" [(ngModel)]=\"condition.Property\" (ngModelChange)=\"onColumnChange(condition)\">\r\n <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n </select>\r\n <select class=\"form-control\" [(ngModel)]=\"condition.Operator\" (ngModelChange)=\"onOperatorChange(condition)\">\r\n <option *ngFor=\"let op of operatorsOf(condition)\" [value]=\"op.value\">{{ op.label }}</option>\r\n </select>\r\n <span class=\"fe-value\">\r\n <ng-container *ngIf=\"isList(condition); else valueTpl\">\r\n <span class=\"fe-chips\">\r\n <button type=\"button\" *ngFor=\"let option of columnOf(condition.Property)?.values\" class=\"fe-chip\"\r\n [class.on]=\"condition.Values?.includes(option.value)\" (click)=\"toggleValue(condition, option.value)\">{{ option.label }}</button>\r\n </span>\r\n </ng-container>\r\n <ng-template #valueTpl>\r\n <ng-container *ngIf=\"hasValue(condition)\">\r\n <input class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value\" />\r\n <input *ngIf=\"hasSecondValue(condition)\" class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value2\" />\r\n </ng-container>\r\n </ng-template>\r\n </span>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Retirer la condition\" (click)=\"removeCondition(group, i)\"><i class=\"fa fa-times\"></i></button>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let sub of group.Groups; let gi = index; trackBy: trackIndex\">\r\n <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: sub, parent: group, index: gi, depth: depth + 1 }\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"fe-adds\">\r\n <button type=\"button\" class=\"fe-add\" (click)=\"addCondition(group)\">+ Condition</button>\r\n <button type=\"button\" class=\"fe-add\" *ngIf=\"depth < maxDepth - 1\" (click)=\"addGroup(group)\">+ Groupe</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n",
|
|
20327
|
-
styles: [".home-page{font-family:Open sans,sans-serif;background:#fff;-webkit-font-smoothing:antialiased;height:100%;width:100%;padding:16px}.main-container{margin:0 50px}.main-container-modal{width:calc(100% - 50px);margin:10px 25px 0}.moyen-titre{font-weight:700;font-size:24px;color:#4d5a81;margin:8px 0;border-bottom:solid 1px #DBE4FF}.grand-titre{font-weight:700;font-size:28px;color:#4d5a81;margin:0 0 8px}.petit-titre{font-weight:700;font-size:16px;color:#4d5a81;margin:0 0 8px}.petit-titre.underlined{border-bottom:solid 1px #4D5A81}.paragraph{padding:0 15px}.paragraph-highlight{padding:5px 15px 0 12px;border-left:5px solid #8EA7F8;border-bottom:1px solid #DBE4FF;border-top:1px solid #DBE4FF;border-right:1px solid #DBE4FF;background-color:#f7faff}.highlight{background-color:#f7faff;border:1px solid #DBE4FF;border-radius:5px;padding:15px;color:#3c5dc4;margin:0 0 16px}.highlight p{margin-bottom:0}.highlight:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"53.294\" height=\"50.629\" viewBox=\"0 0 53.294 50.629\">%0D%0A <path id=\"allerg\\e8ne\" d=\"M830.494,25.793l-5.814,6.783.727,8.963-8.721,1.938-4.6,7.752L803.847,47.6l-8.236,3.634-4.6-7.51-8.721-1.938.727-8.963L777.2,26.035l5.814-6.783-.727-8.963,8.721-1.938L795.61.6l8.236,3.634L812.083.6l4.6,7.752,8.721,1.938-.727,8.963Zm-24.467,2.422V13.681h-4.845V28.216Zm0,9.69V33.06h-4.845v4.845Z\" transform=\"translate(-777.2 -0.6)\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 8px 24px 0;filter:invert(31%) sepia(51%) saturate(1323%) hue-rotate(199deg) brightness(99%) contrast(94%)}.notification{background-color:#dbe4ff;border:1px solid #C4D0F9;border-radius:5px;color:#4d5a81;margin:16px;padding:5px 15px;text-align:justify}.notification:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info-circle\" class=\"svg-inline--fa fa-info-circle fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\"></path></svg>');background-repeat:no-repeat;margin:0 8px 0 0;filter:invert(31%) sepia(8%) saturate(2329%) hue-rotate(188deg) brightness(103%) contrast(85%)}.notification-text{padding:0 15px 0 30px;font-size:16px}.fe-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:6px 12px;margin-bottom:12px}.fe-panel .fe-adds{grid-column:1/-1}.fe-add-panel{width:auto;border-style:dashed;color:#4465c9}.fe-panel-title{grid-column:1/-1;margin:4px 0 2px;font-weight:600}.fe-panel-field{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:8px;margin:0;font-weight:400}.fe-panel-field>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fe{display:flex;flex-direction:column;color:#4d5a81;font-size:13px}.fe-tabs{display:flex;gap:4px;padding:8px 14px 0;border-bottom:1px solid #DBE4FF}.fe-tab{padding:6px 12px;border:none;border-bottom:2px solid transparent;background:none;color:#9fa9c7;font:inherit;font-weight:700;cursor:pointer}.fe-tab.active{color:#4465c9;border-bottom-color:#5272d3}.fe-body{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;padding:12px 14px}.fe-group{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #DBE4FF;border-left:4px solid #3b57b8;border-radius:0 4px 4px 0;background:#fff}.fe-group.or{border-left-color:#e07b12}.fe-group.nested{background:#f6f8fd}.fe-group-head{display:flex;align-items:center;gap:8px;font-size:12px;color:#9fa9c7}.fe-group-remove{margin-left:auto}.fe-logic{display:inline-flex;border:1px solid #DBE4FF;border-radius:999px;overflow:hidden}.fe-logic button{padding:2px 10px;border:none;background:none;color:#9fa9c7;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.fe-logic button.on.and{background:#3b57b8;color:#fff}.fe-logic button.on.or{background:#e07b12;color:#fff}.fe-cond{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr) 28px;gap:6px;align-items:center;padding:4px 6px;border:1px solid #DBE4FF;border-left:3px solid #3b57b8;border-radius:0 4px 4px 0;background:#fff}.fe-group.or>.fe-cond{border-left-color:#e07b12}@media(max-width:600px){.fe-cond{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px}.fe-cond .fe-value{grid-column:1/3}}select.form-control,input.form-control{height:30px;min-width:0;padding:2px 6px;font-size:13px}.fe-value{display:flex;gap:6px;min-width:0}.fe-value input{flex:1}.fe-chips{display:flex;flex-wrap:wrap;gap:4px}.fe-chip{padding:2px 8px;border:1px solid #C1D0FD;border-radius:999px;background:#fff;color:#4d5a81;font:inherit;font-size:12px;cursor:pointer}.fe-chip.on{background:#5272d3;border-color:#5272d3;color:#fff}.fe-icon{width:28px;height:28px;padding:0;border:none;border-radius:6px;background:none;color:#9fa9c7;cursor:pointer}.fe-icon:hover:not(:disabled){background:#ebf0ff;color:#4d5a81}.fe-icon:disabled{opacity:.3;cursor:default}.fe-adds{display:flex;gap:8px;flex-wrap:wrap}.fe-add{padding:3px 10px;border:1px dashed #C1D0FD;border-radius:6px;background:none;color:#4465c9;font:inherit;font-size:12px;cursor:pointer}.fe-summary{padding:8px 10px;border-radius:6px;background:#ebf0ff;font-size:12px;word-break:break-word}.fe-sort{display:grid;grid-template-columns:64px minmax(0,1fr) 120px 28px 28px 28px;gap:6px;align-items:center}.fe-sort-label{font-size:12px;color:#9fa9c7}.fe-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid #DBE4FF}.fe-save{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;cursor:pointer}.fe-save.disabled{opacity:.55;cursor:default}.fe-save input{margin:0}.fe-clear{border:none;background:none;color:#4465c9;font:inherit;cursor:pointer}\n"],
|
|
20348
|
+
template: "<div class=\"fe\">\r\n <div class=\"fe-tabs\" role=\"tablist\" *ngIf=\"!section\">\r\n <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'filters'\" (click)=\"tab = 'filters'\">Filtres</button>\r\n <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'sort'\" (click)=\"tab = 'sort'\">Tri</button>\r\n </div>\r\n\r\n <div class=\"fe-body\" *ngIf=\"shownTab === 'filters'\">\r\n <!-- Filtres de l'écran (FilterPanel) : valeurs enregistrées avec la vue, appliquées au FilterPanel. -->\r\n <div class=\"fe-panel\" *ngIf=\"panelFields.length || shownPanelFields().length\">\r\n <div class=\"fe-panel-title\">Filtres de l'écran</div>\r\n <div class=\"fe-panel-field\" *ngFor=\"let field of shownPanelFields(); trackBy: trackKey\">\r\n <span [title]=\"field.label\">{{ field.label }}</span>\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <select *ngSwitchCase=\"'list'\" class=\"form-control\" [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\">\r\n <option value=\"\">Choisir…</option>\r\n <option *ngFor=\"let option of field.values\" [value]=\"option.value\">{{ option.label }}</option>\r\n </select>\r\n <select *ngSwitchCase=\"'bool'\" class=\"form-control\" [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\">\r\n <option value=\"\">Choisir…</option>\r\n <option value=\"true\">Oui</option>\r\n <option value=\"false\">Non</option>\r\n </select>\r\n <input *ngSwitchDefault class=\"form-control\" [type]=\"field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'\"\r\n [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\" />\r\n </ng-container>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Retirer le filtre de l'écran\" (click)=\"removePanelField(field)\"><i class=\"fa fa-times\"></i></button>\r\n </div>\r\n <!-- Ajout d'un filtre de l'écran : les champs du FilterPanel pas encore utilisés. -->\r\n <div class=\"fe-adds\" *ngIf=\"availablePanelFields().length\">\r\n <select class=\"form-control fe-add-panel\" [ngModel]=\"''\" (ngModelChange)=\"addPanelField($event)\">\r\n <option value=\"\">+ Filtre de l'écran</option>\r\n <option *ngFor=\"let field of availablePanelFields(); trackBy: trackKey\" [value]=\"field.key\">{{ field.label }}</option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"fe-panel-title\" *ngIf=\"panelFields.length || shownPanelFields().length\">Filtre additionnel</div>\r\n <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: filter, parent: null, index: 0, depth: 0 }\"></ng-container>\r\n <div class=\"fe-summary\">{{ summary() }}</div>\r\n </div>\r\n\r\n <div class=\"fe-body\" *ngIf=\"shownTab === 'sort'\">\r\n <div class=\"fe-sort\" *ngFor=\"let level of sort; let i = index; trackBy: trackIndex\">\r\n <span class=\"fe-sort-label\">{{ i === 0 ? 'Trier par' : 'Puis par' }}</span>\r\n <select class=\"form-control\" [(ngModel)]=\"level.property\">\r\n <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n </select>\r\n <select class=\"form-control fe-sort-direction\" [(ngModel)]=\"level.direction\">\r\n <option value=\"asc\">Croissant</option>\r\n <option value=\"desc\">Décroissant</option>\r\n </select>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Monter\" [disabled]=\"i === 0\" (click)=\"moveSort(i, -1)\"><i class=\"fa fa-arrow-up\"></i></button>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Descendre\" [disabled]=\"i === sort.length - 1\" (click)=\"moveSort(i, 1)\"><i class=\"fa fa-arrow-down\"></i></button>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Retirer\" (click)=\"removeSort(i)\"><i class=\"fa fa-times\"></i></button>\r\n </div>\r\n <div class=\"fe-adds\"><button type=\"button\" class=\"fe-add\" (click)=\"addSort()\">+ Niveau</button></div>\r\n </div>\r\n\r\n <div class=\"fe-foot\">\r\n <label class=\"fe-save\" *ngIf=\"!embedded\" [class.disabled]=\"!canSaveInView\"\r\n [title]=\"canSaveInView ? '' : 'La vue par défaut est en lecture seule : dupliquez-la pour y enregistrer un filtre'\">\r\n <input type=\"checkbox\" [(ngModel)]=\"saveInView\" [disabled]=\"!canSaveInView\" />\r\n <span>Enregistrer dans la vue{{ viewLabel ? ' « ' + viewLabel + ' »' : '' }}</span>\r\n </label>\r\n <button type=\"button\" class=\"fe-clear\" (click)=\"clear()\">Tout effacer</button>\r\n </div>\r\n</div>\r\n\r\n<!-- Groupe : relation ET / OU, conditions, groupes imbriqués. -->\r\n<ng-template #groupTpl let-group=\"group\" let-parent=\"parent\" let-index=\"index\" let-depth=\"depth\">\r\n <div class=\"fe-group\" [class.or]=\"group.Logic === 'or'\" [class.nested]=\"depth > 0\">\r\n <div class=\"fe-group-head\">\r\n <span class=\"fe-logic\">\r\n <button type=\"button\" [class.on]=\"group.Logic === 'and'\" class=\"and\" (click)=\"setLogic(group, 'and')\">ET</button>\r\n <button type=\"button\" [class.on]=\"group.Logic === 'or'\" class=\"or\" (click)=\"setLogic(group, 'or')\">OU</button>\r\n </span>\r\n <span class=\"fe-group-hint\">{{ group.Logic === 'and' ? 'Toutes les conditions' : 'Au moins une condition' }}</span>\r\n <button type=\"button\" *ngIf=\"parent\" class=\"fe-icon fe-group-remove\" title=\"Retirer le groupe\" (click)=\"removeGroup(parent, index)\">\r\n <i class=\"fa fa-times\"></i>\r\n </button>\r\n </div>\r\n\r\n <div class=\"fe-cond\" *ngFor=\"let condition of group.Conditions; let i = index; trackBy: trackIndex\">\r\n <select class=\"form-control\" [(ngModel)]=\"condition.Property\" (ngModelChange)=\"onColumnChange(condition)\">\r\n <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n </select>\r\n <select class=\"form-control\" [(ngModel)]=\"condition.Operator\" (ngModelChange)=\"onOperatorChange(condition)\">\r\n <option *ngFor=\"let op of operatorsOf(condition)\" [value]=\"op.value\">{{ op.label }}</option>\r\n </select>\r\n <span class=\"fe-value\">\r\n <ng-container *ngIf=\"isList(condition); else valueTpl\">\r\n <span class=\"fe-chips\" *ngIf=\"hasKnownValues(condition); else typedValuesTpl\">\r\n <button type=\"button\" *ngFor=\"let option of columnOf(condition.Property)?.values\" class=\"fe-chip\"\r\n [class.on]=\"condition.Values?.includes(option.value)\" (click)=\"toggleValue(condition, option.value)\">{{ option.label }}</button>\r\n </span>\r\n <!-- Texte, nombre : valeurs saisies une à une (ou cochées par le « Filtre avancé » de la grille). -->\r\n <ng-template #typedValuesTpl>\r\n <span class=\"fe-chips\">\r\n <button type=\"button\" *ngFor=\"let value of condition.Values\" class=\"fe-chip on\" title=\"Retirer cette valeur\"\r\n (click)=\"removeValue(condition, value)\">{{ value }} <i class=\"fa fa-times\"></i></button>\r\n <input #valueInput class=\"form-control fe-chip-input\" [type]=\"inputType(condition)\" placeholder=\"Ajouter une valeur\"\r\n (keydown.enter)=\"addValue(condition, valueInput); $event.preventDefault()\" (blur)=\"addValue(condition, valueInput)\" />\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #valueTpl>\r\n <ng-container *ngIf=\"hasValue(condition)\">\r\n <input class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value\" />\r\n <input *ngIf=\"hasSecondValue(condition)\" class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value2\" />\r\n </ng-container>\r\n </ng-template>\r\n </span>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Retirer la condition\" (click)=\"removeCondition(group, i)\"><i class=\"fa fa-times\"></i></button>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let sub of group.Groups; let gi = index; trackBy: trackIndex\">\r\n <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: sub, parent: group, index: gi, depth: depth + 1 }\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"fe-adds\">\r\n <button type=\"button\" class=\"fe-add\" (click)=\"addCondition(group)\">+ Condition</button>\r\n <button type=\"button\" class=\"fe-add\" *ngIf=\"depth < maxDepth - 1\" (click)=\"addGroup(group)\">+ Groupe</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n",
|
|
20349
|
+
styles: [".home-page{font-family:Open sans,sans-serif;background:#fff;-webkit-font-smoothing:antialiased;height:100%;width:100%;padding:16px}.main-container{margin:0 50px}.main-container-modal{width:calc(100% - 50px);margin:10px 25px 0}.moyen-titre{font-weight:700;font-size:24px;color:#4d5a81;margin:8px 0;border-bottom:solid 1px #DBE4FF}.grand-titre{font-weight:700;font-size:28px;color:#4d5a81;margin:0 0 8px}.petit-titre{font-weight:700;font-size:16px;color:#4d5a81;margin:0 0 8px}.petit-titre.underlined{border-bottom:solid 1px #4D5A81}.paragraph{padding:0 15px}.paragraph-highlight{padding:5px 15px 0 12px;border-left:5px solid #8EA7F8;border-bottom:1px solid #DBE4FF;border-top:1px solid #DBE4FF;border-right:1px solid #DBE4FF;background-color:#f7faff}.highlight{background-color:#f7faff;border:1px solid #DBE4FF;border-radius:5px;padding:15px;color:#3c5dc4;margin:0 0 16px}.highlight p{margin-bottom:0}.highlight:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"53.294\" height=\"50.629\" viewBox=\"0 0 53.294 50.629\">%0D%0A <path id=\"allerg\\e8ne\" d=\"M830.494,25.793l-5.814,6.783.727,8.963-8.721,1.938-4.6,7.752L803.847,47.6l-8.236,3.634-4.6-7.51-8.721-1.938.727-8.963L777.2,26.035l5.814-6.783-.727-8.963,8.721-1.938L795.61.6l8.236,3.634L812.083.6l4.6,7.752,8.721,1.938-.727,8.963Zm-24.467,2.422V13.681h-4.845V28.216Zm0,9.69V33.06h-4.845v4.845Z\" transform=\"translate(-777.2 -0.6)\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 8px 24px 0;filter:invert(31%) sepia(51%) saturate(1323%) hue-rotate(199deg) brightness(99%) contrast(94%)}.notification{background-color:#dbe4ff;border:1px solid #C4D0F9;border-radius:5px;color:#4d5a81;margin:16px;padding:5px 15px;text-align:justify}.notification:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info-circle\" class=\"svg-inline--fa fa-info-circle fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\"></path></svg>');background-repeat:no-repeat;margin:0 8px 0 0;filter:invert(31%) sepia(8%) saturate(2329%) hue-rotate(188deg) brightness(103%) contrast(85%)}.notification-text{padding:0 15px 0 30px;font-size:16px}.fe-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:6px 12px;margin-bottom:12px}.fe-panel .fe-adds{grid-column:1/-1}.fe-add-panel{width:auto;border-style:dashed;color:#4465c9}.fe-panel-title{grid-column:1/-1;margin:4px 0 2px;font-weight:600}.fe-panel-field{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:8px;margin:0;font-weight:400}.fe-panel-field>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fe{display:flex;flex-direction:column;color:#4d5a81;font-size:13px}.fe-tabs{display:flex;gap:4px;padding:8px 14px 0;border-bottom:1px solid #DBE4FF}.fe-tab{padding:6px 12px;border:none;border-bottom:2px solid transparent;background:none;color:#9fa9c7;font:inherit;font-weight:700;cursor:pointer}.fe-tab.active{color:#4465c9;border-bottom-color:#5272d3}.fe-body{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;padding:12px 14px}.fe-group{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #DBE4FF;border-left:4px solid #3b57b8;border-radius:0 4px 4px 0;background:#fff}.fe-group.or{border-left-color:#e07b12}.fe-group.nested{background:#f6f8fd}.fe-group-head{display:flex;align-items:center;gap:8px;font-size:12px;color:#9fa9c7}.fe-group-remove{margin-left:auto}.fe-logic{display:inline-flex;border:1px solid #DBE4FF;border-radius:999px;overflow:hidden}.fe-logic button{padding:2px 10px;border:none;background:none;color:#9fa9c7;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.fe-logic button.on.and{background:#3b57b8;color:#fff}.fe-logic button.on.or{background:#e07b12;color:#fff}.fe-cond{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr) 28px;gap:6px;align-items:center;padding:4px 6px;border:1px solid #DBE4FF;border-left:3px solid #3b57b8;border-radius:0 4px 4px 0;background:#fff}.fe-group.or>.fe-cond{border-left-color:#e07b12}@media(max-width:600px){.fe-cond{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px}.fe-cond .fe-value{grid-column:1/3}}select.form-control,input.form-control{height:30px;min-width:0;padding:2px 6px;font-size:13px}.fe-value{display:flex;gap:6px;min-width:0}.fe-value input{flex:1}.fe-chips{display:flex;flex-wrap:wrap;gap:4px}.fe-chip{padding:2px 8px;border:1px solid #C1D0FD;border-radius:999px;background:#fff;color:#4d5a81;font:inherit;font-size:12px;cursor:pointer}.fe-chip.on{background:#5272d3;border-color:#5272d3;color:#fff}.fe-chip i{margin-left:2px;font-size:10px}.fe-chip-input{flex:1;min-width:120px}.fe-icon{width:28px;height:28px;padding:0;border:none;border-radius:6px;background:none;color:#9fa9c7;cursor:pointer}.fe-icon:hover:not(:disabled){background:#ebf0ff;color:#4d5a81}.fe-icon:disabled{opacity:.3;cursor:default}.fe-adds{display:flex;gap:8px;flex-wrap:wrap}.fe-add{padding:3px 10px;border:1px dashed #C1D0FD;border-radius:6px;background:none;color:#4465c9;font:inherit;font-size:12px;cursor:pointer}.fe-summary{padding:8px 10px;border-radius:6px;background:#ebf0ff;font-size:12px;word-break:break-word}.fe-sort{display:grid;grid-template-columns:64px minmax(0,1fr) 120px 28px 28px 28px;gap:6px;align-items:center}.fe-sort-label{font-size:12px;color:#9fa9c7}.fe-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid #DBE4FF}.fe-save{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;cursor:pointer}.fe-save.disabled{opacity:.55;cursor:default}.fe-save input{margin:0}.fe-clear{border:none;background:none;color:#4465c9;font:inherit;cursor:pointer}\n"],
|
|
20328
20350
|
dependencies: [
|
|
20329
20351
|
{
|
|
20330
20352
|
kind: "ngmodule",
|
|
@@ -20444,8 +20466,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
20444
20466
|
standalone: true,
|
|
20445
20467
|
imports: [CommonModule, FormsModule],
|
|
20446
20468
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
20447
|
-
template: "<div class=\"fe\">\r\n <div class=\"fe-tabs\" role=\"tablist\" *ngIf=\"!section\">\r\n <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'filters'\" (click)=\"tab = 'filters'\">Filtres</button>\r\n <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'sort'\" (click)=\"tab = 'sort'\">Tri</button>\r\n </div>\r\n\r\n <div class=\"fe-body\" *ngIf=\"shownTab === 'filters'\">\r\n <!-- Filtres de l'écran (FilterPanel) : valeurs enregistrées avec la vue, appliquées au FilterPanel. -->\r\n <div class=\"fe-panel\" *ngIf=\"panelFields.length || shownPanelFields().length\">\r\n <div class=\"fe-panel-title\">Filtres de l'écran</div>\r\n <div class=\"fe-panel-field\" *ngFor=\"let field of shownPanelFields(); trackBy: trackKey\">\r\n <span [title]=\"field.label\">{{ field.label }}</span>\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <select *ngSwitchCase=\"'list'\" class=\"form-control\" [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\">\r\n <option value=\"\">Choisir…</option>\r\n <option *ngFor=\"let option of field.values\" [value]=\"option.value\">{{ option.label }}</option>\r\n </select>\r\n <select *ngSwitchCase=\"'bool'\" class=\"form-control\" [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\">\r\n <option value=\"\">Choisir…</option>\r\n <option value=\"true\">Oui</option>\r\n <option value=\"false\">Non</option>\r\n </select>\r\n <input *ngSwitchDefault class=\"form-control\" [type]=\"field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'\"\r\n [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\" />\r\n </ng-container>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Retirer le filtre de l'écran\" (click)=\"removePanelField(field)\"><i class=\"fa fa-times\"></i></button>\r\n </div>\r\n <!-- Ajout d'un filtre de l'écran : les champs du FilterPanel pas encore utilisés. -->\r\n <div class=\"fe-adds\" *ngIf=\"availablePanelFields().length\">\r\n <select class=\"form-control fe-add-panel\" [ngModel]=\"''\" (ngModelChange)=\"addPanelField($event)\">\r\n <option value=\"\">+ Filtre de l'écran</option>\r\n <option *ngFor=\"let field of availablePanelFields(); trackBy: trackKey\" [value]=\"field.key\">{{ field.label }}</option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"fe-panel-title\" *ngIf=\"panelFields.length || shownPanelFields().length\">Filtre additionnel</div>\r\n <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: filter, parent: null, index: 0, depth: 0 }\"></ng-container>\r\n <div class=\"fe-summary\">{{ summary() }}</div>\r\n </div>\r\n\r\n <div class=\"fe-body\" *ngIf=\"shownTab === 'sort'\">\r\n <div class=\"fe-sort\" *ngFor=\"let level of sort; let i = index; trackBy: trackIndex\">\r\n <span class=\"fe-sort-label\">{{ i === 0 ? 'Trier par' : 'Puis par' }}</span>\r\n <select class=\"form-control\" [(ngModel)]=\"level.property\">\r\n <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n </select>\r\n <select class=\"form-control fe-sort-direction\" [(ngModel)]=\"level.direction\">\r\n <option value=\"asc\">Croissant</option>\r\n <option value=\"desc\">Décroissant</option>\r\n </select>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Monter\" [disabled]=\"i === 0\" (click)=\"moveSort(i, -1)\"><i class=\"fa fa-arrow-up\"></i></button>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Descendre\" [disabled]=\"i === sort.length - 1\" (click)=\"moveSort(i, 1)\"><i class=\"fa fa-arrow-down\"></i></button>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Retirer\" (click)=\"removeSort(i)\"><i class=\"fa fa-times\"></i></button>\r\n </div>\r\n <div class=\"fe-adds\"><button type=\"button\" class=\"fe-add\" (click)=\"addSort()\">+ Niveau</button></div>\r\n </div>\r\n\r\n <div class=\"fe-foot\">\r\n <label class=\"fe-save\" *ngIf=\"!embedded\" [class.disabled]=\"!canSaveInView\"\r\n [title]=\"canSaveInView ? '' : 'La vue par défaut est en lecture seule : dupliquez-la pour y enregistrer un filtre'\">\r\n <input type=\"checkbox\" [(ngModel)]=\"saveInView\" [disabled]=\"!canSaveInView\" />\r\n <span>Enregistrer dans la vue{{ viewLabel ? ' « ' + viewLabel + ' »' : '' }}</span>\r\n </label>\r\n <button type=\"button\" class=\"fe-clear\" (click)=\"clear()\">Tout effacer</button>\r\n </div>\r\n</div>\r\n\r\n<!-- Groupe : relation ET / OU, conditions, groupes imbriqués. -->\r\n<ng-template #groupTpl let-group=\"group\" let-parent=\"parent\" let-index=\"index\" let-depth=\"depth\">\r\n <div class=\"fe-group\" [class.or]=\"group.Logic === 'or'\" [class.nested]=\"depth > 0\">\r\n <div class=\"fe-group-head\">\r\n <span class=\"fe-logic\">\r\n <button type=\"button\" [class.on]=\"group.Logic === 'and'\" class=\"and\" (click)=\"setLogic(group, 'and')\">ET</button>\r\n <button type=\"button\" [class.on]=\"group.Logic === 'or'\" class=\"or\" (click)=\"setLogic(group, 'or')\">OU</button>\r\n </span>\r\n <span class=\"fe-group-hint\">{{ group.Logic === 'and' ? 'Toutes les conditions' : 'Au moins une condition' }}</span>\r\n <button type=\"button\" *ngIf=\"parent\" class=\"fe-icon fe-group-remove\" title=\"Retirer le groupe\" (click)=\"removeGroup(parent, index)\">\r\n <i class=\"fa fa-times\"></i>\r\n </button>\r\n </div>\r\n\r\n <div class=\"fe-cond\" *ngFor=\"let condition of group.Conditions; let i = index; trackBy: trackIndex\">\r\n <select class=\"form-control\" [(ngModel)]=\"condition.Property\" (ngModelChange)=\"onColumnChange(condition)\">\r\n <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n </select>\r\n <select class=\"form-control\" [(ngModel)]=\"condition.Operator\" (ngModelChange)=\"onOperatorChange(condition)\">\r\n <option *ngFor=\"let op of operatorsOf(condition)\" [value]=\"op.value\">{{ op.label }}</option>\r\n </select>\r\n <span class=\"fe-value\">\r\n <ng-container *ngIf=\"isList(condition); else valueTpl\">\r\n <span class=\"fe-chips\">\r\n <button type=\"button\" *ngFor=\"let option of columnOf(condition.Property)?.values\" class=\"fe-chip\"\r\n [class.on]=\"condition.Values?.includes(option.value)\" (click)=\"toggleValue(condition, option.value)\">{{ option.label }}</button>\r\n </span>\r\n </ng-container>\r\n <ng-template #valueTpl>\r\n <ng-container *ngIf=\"hasValue(condition)\">\r\n <input class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value\" />\r\n <input *ngIf=\"hasSecondValue(condition)\" class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value2\" />\r\n </ng-container>\r\n </ng-template>\r\n </span>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Retirer la condition\" (click)=\"removeCondition(group, i)\"><i class=\"fa fa-times\"></i></button>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let sub of group.Groups; let gi = index; trackBy: trackIndex\">\r\n <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: sub, parent: group, index: gi, depth: depth + 1 }\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"fe-adds\">\r\n <button type=\"button\" class=\"fe-add\" (click)=\"addCondition(group)\">+ Condition</button>\r\n <button type=\"button\" class=\"fe-add\" *ngIf=\"depth < maxDepth - 1\" (click)=\"addGroup(group)\">+ Groupe</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n",
|
|
20448
|
-
styles: [".home-page{font-family:Open sans,sans-serif;background:#fff;-webkit-font-smoothing:antialiased;height:100%;width:100%;padding:16px}.main-container{margin:0 50px}.main-container-modal{width:calc(100% - 50px);margin:10px 25px 0}.moyen-titre{font-weight:700;font-size:24px;color:#4d5a81;margin:8px 0;border-bottom:solid 1px #DBE4FF}.grand-titre{font-weight:700;font-size:28px;color:#4d5a81;margin:0 0 8px}.petit-titre{font-weight:700;font-size:16px;color:#4d5a81;margin:0 0 8px}.petit-titre.underlined{border-bottom:solid 1px #4D5A81}.paragraph{padding:0 15px}.paragraph-highlight{padding:5px 15px 0 12px;border-left:5px solid #8EA7F8;border-bottom:1px solid #DBE4FF;border-top:1px solid #DBE4FF;border-right:1px solid #DBE4FF;background-color:#f7faff}.highlight{background-color:#f7faff;border:1px solid #DBE4FF;border-radius:5px;padding:15px;color:#3c5dc4;margin:0 0 16px}.highlight p{margin-bottom:0}.highlight:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"53.294\" height=\"50.629\" viewBox=\"0 0 53.294 50.629\">%0D%0A <path id=\"allerg\\e8ne\" d=\"M830.494,25.793l-5.814,6.783.727,8.963-8.721,1.938-4.6,7.752L803.847,47.6l-8.236,3.634-4.6-7.51-8.721-1.938.727-8.963L777.2,26.035l5.814-6.783-.727-8.963,8.721-1.938L795.61.6l8.236,3.634L812.083.6l4.6,7.752,8.721,1.938-.727,8.963Zm-24.467,2.422V13.681h-4.845V28.216Zm0,9.69V33.06h-4.845v4.845Z\" transform=\"translate(-777.2 -0.6)\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 8px 24px 0;filter:invert(31%) sepia(51%) saturate(1323%) hue-rotate(199deg) brightness(99%) contrast(94%)}.notification{background-color:#dbe4ff;border:1px solid #C4D0F9;border-radius:5px;color:#4d5a81;margin:16px;padding:5px 15px;text-align:justify}.notification:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info-circle\" class=\"svg-inline--fa fa-info-circle fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\"></path></svg>');background-repeat:no-repeat;margin:0 8px 0 0;filter:invert(31%) sepia(8%) saturate(2329%) hue-rotate(188deg) brightness(103%) contrast(85%)}.notification-text{padding:0 15px 0 30px;font-size:16px}.fe-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:6px 12px;margin-bottom:12px}.fe-panel .fe-adds{grid-column:1/-1}.fe-add-panel{width:auto;border-style:dashed;color:#4465c9}.fe-panel-title{grid-column:1/-1;margin:4px 0 2px;font-weight:600}.fe-panel-field{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:8px;margin:0;font-weight:400}.fe-panel-field>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fe{display:flex;flex-direction:column;color:#4d5a81;font-size:13px}.fe-tabs{display:flex;gap:4px;padding:8px 14px 0;border-bottom:1px solid #DBE4FF}.fe-tab{padding:6px 12px;border:none;border-bottom:2px solid transparent;background:none;color:#9fa9c7;font:inherit;font-weight:700;cursor:pointer}.fe-tab.active{color:#4465c9;border-bottom-color:#5272d3}.fe-body{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;padding:12px 14px}.fe-group{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #DBE4FF;border-left:4px solid #3b57b8;border-radius:0 4px 4px 0;background:#fff}.fe-group.or{border-left-color:#e07b12}.fe-group.nested{background:#f6f8fd}.fe-group-head{display:flex;align-items:center;gap:8px;font-size:12px;color:#9fa9c7}.fe-group-remove{margin-left:auto}.fe-logic{display:inline-flex;border:1px solid #DBE4FF;border-radius:999px;overflow:hidden}.fe-logic button{padding:2px 10px;border:none;background:none;color:#9fa9c7;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.fe-logic button.on.and{background:#3b57b8;color:#fff}.fe-logic button.on.or{background:#e07b12;color:#fff}.fe-cond{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr) 28px;gap:6px;align-items:center;padding:4px 6px;border:1px solid #DBE4FF;border-left:3px solid #3b57b8;border-radius:0 4px 4px 0;background:#fff}.fe-group.or>.fe-cond{border-left-color:#e07b12}@media(max-width:600px){.fe-cond{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px}.fe-cond .fe-value{grid-column:1/3}}select.form-control,input.form-control{height:30px;min-width:0;padding:2px 6px;font-size:13px}.fe-value{display:flex;gap:6px;min-width:0}.fe-value input{flex:1}.fe-chips{display:flex;flex-wrap:wrap;gap:4px}.fe-chip{padding:2px 8px;border:1px solid #C1D0FD;border-radius:999px;background:#fff;color:#4d5a81;font:inherit;font-size:12px;cursor:pointer}.fe-chip.on{background:#5272d3;border-color:#5272d3;color:#fff}.fe-icon{width:28px;height:28px;padding:0;border:none;border-radius:6px;background:none;color:#9fa9c7;cursor:pointer}.fe-icon:hover:not(:disabled){background:#ebf0ff;color:#4d5a81}.fe-icon:disabled{opacity:.3;cursor:default}.fe-adds{display:flex;gap:8px;flex-wrap:wrap}.fe-add{padding:3px 10px;border:1px dashed #C1D0FD;border-radius:6px;background:none;color:#4465c9;font:inherit;font-size:12px;cursor:pointer}.fe-summary{padding:8px 10px;border-radius:6px;background:#ebf0ff;font-size:12px;word-break:break-word}.fe-sort{display:grid;grid-template-columns:64px minmax(0,1fr) 120px 28px 28px 28px;gap:6px;align-items:center}.fe-sort-label{font-size:12px;color:#9fa9c7}.fe-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid #DBE4FF}.fe-save{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;cursor:pointer}.fe-save.disabled{opacity:.55;cursor:default}.fe-save input{margin:0}.fe-clear{border:none;background:none;color:#4465c9;font:inherit;cursor:pointer}\n"]
|
|
20469
|
+
template: "<div class=\"fe\">\r\n <div class=\"fe-tabs\" role=\"tablist\" *ngIf=\"!section\">\r\n <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'filters'\" (click)=\"tab = 'filters'\">Filtres</button>\r\n <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'sort'\" (click)=\"tab = 'sort'\">Tri</button>\r\n </div>\r\n\r\n <div class=\"fe-body\" *ngIf=\"shownTab === 'filters'\">\r\n <!-- Filtres de l'écran (FilterPanel) : valeurs enregistrées avec la vue, appliquées au FilterPanel. -->\r\n <div class=\"fe-panel\" *ngIf=\"panelFields.length || shownPanelFields().length\">\r\n <div class=\"fe-panel-title\">Filtres de l'écran</div>\r\n <div class=\"fe-panel-field\" *ngFor=\"let field of shownPanelFields(); trackBy: trackKey\">\r\n <span [title]=\"field.label\">{{ field.label }}</span>\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <select *ngSwitchCase=\"'list'\" class=\"form-control\" [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\">\r\n <option value=\"\">Choisir…</option>\r\n <option *ngFor=\"let option of field.values\" [value]=\"option.value\">{{ option.label }}</option>\r\n </select>\r\n <select *ngSwitchCase=\"'bool'\" class=\"form-control\" [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\">\r\n <option value=\"\">Choisir…</option>\r\n <option value=\"true\">Oui</option>\r\n <option value=\"false\">Non</option>\r\n </select>\r\n <input *ngSwitchDefault class=\"form-control\" [type]=\"field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'\"\r\n [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\" />\r\n </ng-container>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Retirer le filtre de l'écran\" (click)=\"removePanelField(field)\"><i class=\"fa fa-times\"></i></button>\r\n </div>\r\n <!-- Ajout d'un filtre de l'écran : les champs du FilterPanel pas encore utilisés. -->\r\n <div class=\"fe-adds\" *ngIf=\"availablePanelFields().length\">\r\n <select class=\"form-control fe-add-panel\" [ngModel]=\"''\" (ngModelChange)=\"addPanelField($event)\">\r\n <option value=\"\">+ Filtre de l'écran</option>\r\n <option *ngFor=\"let field of availablePanelFields(); trackBy: trackKey\" [value]=\"field.key\">{{ field.label }}</option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"fe-panel-title\" *ngIf=\"panelFields.length || shownPanelFields().length\">Filtre additionnel</div>\r\n <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: filter, parent: null, index: 0, depth: 0 }\"></ng-container>\r\n <div class=\"fe-summary\">{{ summary() }}</div>\r\n </div>\r\n\r\n <div class=\"fe-body\" *ngIf=\"shownTab === 'sort'\">\r\n <div class=\"fe-sort\" *ngFor=\"let level of sort; let i = index; trackBy: trackIndex\">\r\n <span class=\"fe-sort-label\">{{ i === 0 ? 'Trier par' : 'Puis par' }}</span>\r\n <select class=\"form-control\" [(ngModel)]=\"level.property\">\r\n <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n </select>\r\n <select class=\"form-control fe-sort-direction\" [(ngModel)]=\"level.direction\">\r\n <option value=\"asc\">Croissant</option>\r\n <option value=\"desc\">Décroissant</option>\r\n </select>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Monter\" [disabled]=\"i === 0\" (click)=\"moveSort(i, -1)\"><i class=\"fa fa-arrow-up\"></i></button>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Descendre\" [disabled]=\"i === sort.length - 1\" (click)=\"moveSort(i, 1)\"><i class=\"fa fa-arrow-down\"></i></button>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Retirer\" (click)=\"removeSort(i)\"><i class=\"fa fa-times\"></i></button>\r\n </div>\r\n <div class=\"fe-adds\"><button type=\"button\" class=\"fe-add\" (click)=\"addSort()\">+ Niveau</button></div>\r\n </div>\r\n\r\n <div class=\"fe-foot\">\r\n <label class=\"fe-save\" *ngIf=\"!embedded\" [class.disabled]=\"!canSaveInView\"\r\n [title]=\"canSaveInView ? '' : 'La vue par défaut est en lecture seule : dupliquez-la pour y enregistrer un filtre'\">\r\n <input type=\"checkbox\" [(ngModel)]=\"saveInView\" [disabled]=\"!canSaveInView\" />\r\n <span>Enregistrer dans la vue{{ viewLabel ? ' « ' + viewLabel + ' »' : '' }}</span>\r\n </label>\r\n <button type=\"button\" class=\"fe-clear\" (click)=\"clear()\">Tout effacer</button>\r\n </div>\r\n</div>\r\n\r\n<!-- Groupe : relation ET / OU, conditions, groupes imbriqués. -->\r\n<ng-template #groupTpl let-group=\"group\" let-parent=\"parent\" let-index=\"index\" let-depth=\"depth\">\r\n <div class=\"fe-group\" [class.or]=\"group.Logic === 'or'\" [class.nested]=\"depth > 0\">\r\n <div class=\"fe-group-head\">\r\n <span class=\"fe-logic\">\r\n <button type=\"button\" [class.on]=\"group.Logic === 'and'\" class=\"and\" (click)=\"setLogic(group, 'and')\">ET</button>\r\n <button type=\"button\" [class.on]=\"group.Logic === 'or'\" class=\"or\" (click)=\"setLogic(group, 'or')\">OU</button>\r\n </span>\r\n <span class=\"fe-group-hint\">{{ group.Logic === 'and' ? 'Toutes les conditions' : 'Au moins une condition' }}</span>\r\n <button type=\"button\" *ngIf=\"parent\" class=\"fe-icon fe-group-remove\" title=\"Retirer le groupe\" (click)=\"removeGroup(parent, index)\">\r\n <i class=\"fa fa-times\"></i>\r\n </button>\r\n </div>\r\n\r\n <div class=\"fe-cond\" *ngFor=\"let condition of group.Conditions; let i = index; trackBy: trackIndex\">\r\n <select class=\"form-control\" [(ngModel)]=\"condition.Property\" (ngModelChange)=\"onColumnChange(condition)\">\r\n <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n </select>\r\n <select class=\"form-control\" [(ngModel)]=\"condition.Operator\" (ngModelChange)=\"onOperatorChange(condition)\">\r\n <option *ngFor=\"let op of operatorsOf(condition)\" [value]=\"op.value\">{{ op.label }}</option>\r\n </select>\r\n <span class=\"fe-value\">\r\n <ng-container *ngIf=\"isList(condition); else valueTpl\">\r\n <span class=\"fe-chips\" *ngIf=\"hasKnownValues(condition); else typedValuesTpl\">\r\n <button type=\"button\" *ngFor=\"let option of columnOf(condition.Property)?.values\" class=\"fe-chip\"\r\n [class.on]=\"condition.Values?.includes(option.value)\" (click)=\"toggleValue(condition, option.value)\">{{ option.label }}</button>\r\n </span>\r\n <!-- Texte, nombre : valeurs saisies une à une (ou cochées par le « Filtre avancé » de la grille). -->\r\n <ng-template #typedValuesTpl>\r\n <span class=\"fe-chips\">\r\n <button type=\"button\" *ngFor=\"let value of condition.Values\" class=\"fe-chip on\" title=\"Retirer cette valeur\"\r\n (click)=\"removeValue(condition, value)\">{{ value }} <i class=\"fa fa-times\"></i></button>\r\n <input #valueInput class=\"form-control fe-chip-input\" [type]=\"inputType(condition)\" placeholder=\"Ajouter une valeur\"\r\n (keydown.enter)=\"addValue(condition, valueInput); $event.preventDefault()\" (blur)=\"addValue(condition, valueInput)\" />\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #valueTpl>\r\n <ng-container *ngIf=\"hasValue(condition)\">\r\n <input class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value\" />\r\n <input *ngIf=\"hasSecondValue(condition)\" class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value2\" />\r\n </ng-container>\r\n </ng-template>\r\n </span>\r\n <button type=\"button\" class=\"fe-icon\" title=\"Retirer la condition\" (click)=\"removeCondition(group, i)\"><i class=\"fa fa-times\"></i></button>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let sub of group.Groups; let gi = index; trackBy: trackIndex\">\r\n <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: sub, parent: group, index: gi, depth: depth + 1 }\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"fe-adds\">\r\n <button type=\"button\" class=\"fe-add\" (click)=\"addCondition(group)\">+ Condition</button>\r\n <button type=\"button\" class=\"fe-add\" *ngIf=\"depth < maxDepth - 1\" (click)=\"addGroup(group)\">+ Groupe</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n",
|
|
20470
|
+
styles: [".home-page{font-family:Open sans,sans-serif;background:#fff;-webkit-font-smoothing:antialiased;height:100%;width:100%;padding:16px}.main-container{margin:0 50px}.main-container-modal{width:calc(100% - 50px);margin:10px 25px 0}.moyen-titre{font-weight:700;font-size:24px;color:#4d5a81;margin:8px 0;border-bottom:solid 1px #DBE4FF}.grand-titre{font-weight:700;font-size:28px;color:#4d5a81;margin:0 0 8px}.petit-titre{font-weight:700;font-size:16px;color:#4d5a81;margin:0 0 8px}.petit-titre.underlined{border-bottom:solid 1px #4D5A81}.paragraph{padding:0 15px}.paragraph-highlight{padding:5px 15px 0 12px;border-left:5px solid #8EA7F8;border-bottom:1px solid #DBE4FF;border-top:1px solid #DBE4FF;border-right:1px solid #DBE4FF;background-color:#f7faff}.highlight{background-color:#f7faff;border:1px solid #DBE4FF;border-radius:5px;padding:15px;color:#3c5dc4;margin:0 0 16px}.highlight p{margin-bottom:0}.highlight:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"53.294\" height=\"50.629\" viewBox=\"0 0 53.294 50.629\">%0D%0A <path id=\"allerg\\e8ne\" d=\"M830.494,25.793l-5.814,6.783.727,8.963-8.721,1.938-4.6,7.752L803.847,47.6l-8.236,3.634-4.6-7.51-8.721-1.938.727-8.963L777.2,26.035l5.814-6.783-.727-8.963,8.721-1.938L795.61.6l8.236,3.634L812.083.6l4.6,7.752,8.721,1.938-.727,8.963Zm-24.467,2.422V13.681h-4.845V28.216Zm0,9.69V33.06h-4.845v4.845Z\" transform=\"translate(-777.2 -0.6)\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 8px 24px 0;filter:invert(31%) sepia(51%) saturate(1323%) hue-rotate(199deg) brightness(99%) contrast(94%)}.notification{background-color:#dbe4ff;border:1px solid #C4D0F9;border-radius:5px;color:#4d5a81;margin:16px;padding:5px 15px;text-align:justify}.notification:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info-circle\" class=\"svg-inline--fa fa-info-circle fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\"></path></svg>');background-repeat:no-repeat;margin:0 8px 0 0;filter:invert(31%) sepia(8%) saturate(2329%) hue-rotate(188deg) brightness(103%) contrast(85%)}.notification-text{padding:0 15px 0 30px;font-size:16px}.fe-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:6px 12px;margin-bottom:12px}.fe-panel .fe-adds{grid-column:1/-1}.fe-add-panel{width:auto;border-style:dashed;color:#4465c9}.fe-panel-title{grid-column:1/-1;margin:4px 0 2px;font-weight:600}.fe-panel-field{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:8px;margin:0;font-weight:400}.fe-panel-field>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fe{display:flex;flex-direction:column;color:#4d5a81;font-size:13px}.fe-tabs{display:flex;gap:4px;padding:8px 14px 0;border-bottom:1px solid #DBE4FF}.fe-tab{padding:6px 12px;border:none;border-bottom:2px solid transparent;background:none;color:#9fa9c7;font:inherit;font-weight:700;cursor:pointer}.fe-tab.active{color:#4465c9;border-bottom-color:#5272d3}.fe-body{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;padding:12px 14px}.fe-group{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #DBE4FF;border-left:4px solid #3b57b8;border-radius:0 4px 4px 0;background:#fff}.fe-group.or{border-left-color:#e07b12}.fe-group.nested{background:#f6f8fd}.fe-group-head{display:flex;align-items:center;gap:8px;font-size:12px;color:#9fa9c7}.fe-group-remove{margin-left:auto}.fe-logic{display:inline-flex;border:1px solid #DBE4FF;border-radius:999px;overflow:hidden}.fe-logic button{padding:2px 10px;border:none;background:none;color:#9fa9c7;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.fe-logic button.on.and{background:#3b57b8;color:#fff}.fe-logic button.on.or{background:#e07b12;color:#fff}.fe-cond{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr) 28px;gap:6px;align-items:center;padding:4px 6px;border:1px solid #DBE4FF;border-left:3px solid #3b57b8;border-radius:0 4px 4px 0;background:#fff}.fe-group.or>.fe-cond{border-left-color:#e07b12}@media(max-width:600px){.fe-cond{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px}.fe-cond .fe-value{grid-column:1/3}}select.form-control,input.form-control{height:30px;min-width:0;padding:2px 6px;font-size:13px}.fe-value{display:flex;gap:6px;min-width:0}.fe-value input{flex:1}.fe-chips{display:flex;flex-wrap:wrap;gap:4px}.fe-chip{padding:2px 8px;border:1px solid #C1D0FD;border-radius:999px;background:#fff;color:#4d5a81;font:inherit;font-size:12px;cursor:pointer}.fe-chip.on{background:#5272d3;border-color:#5272d3;color:#fff}.fe-chip i{margin-left:2px;font-size:10px}.fe-chip-input{flex:1;min-width:120px}.fe-icon{width:28px;height:28px;padding:0;border:none;border-radius:6px;background:none;color:#9fa9c7;cursor:pointer}.fe-icon:hover:not(:disabled){background:#ebf0ff;color:#4d5a81}.fe-icon:disabled{opacity:.3;cursor:default}.fe-adds{display:flex;gap:8px;flex-wrap:wrap}.fe-add{padding:3px 10px;border:1px dashed #C1D0FD;border-radius:6px;background:none;color:#4465c9;font:inherit;font-size:12px;cursor:pointer}.fe-summary{padding:8px 10px;border-radius:6px;background:#ebf0ff;font-size:12px;word-break:break-word}.fe-sort{display:grid;grid-template-columns:64px minmax(0,1fr) 120px 28px 28px 28px;gap:6px;align-items:center}.fe-sort-label{font-size:12px;color:#9fa9c7}.fe-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid #DBE4FF}.fe-save{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;cursor:pointer}.fe-save.disabled{opacity:.55;cursor:default}.fe-save input{margin:0}.fe-clear{border:none;background:none;color:#4465c9;font:inherit;cursor:pointer}\n"]
|
|
20449
20471
|
}]
|
|
20450
20472
|
}],
|
|
20451
20473
|
propDecorators: {
|