ontimize-web-ngx 15.4.1 → 15.4.2

package/esm2020/lib/types/error-form-validation.type.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXJyb3ItZm9ybS12YWxpZGF0aW9uLnR5cGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9vbnRpbWl6ZS13ZWItbmd4L3NyYy9saWIvdHlwZXMvZXJyb3ItZm9ybS12YWxpZGF0aW9uLnR5cGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB0eXBlIE9Gb3JtVmFsaWRhdGlvbiA9IHtcbiAgdmFsaWQ6IGJvb2xlYW47XG4gIHRpdGxlPzogc3RyaW5nO1xuICBtZXNzYWdlcz86IEFycmF5PHN0cmluZz47XG59O1xuIl19

package/esm2020/lib/types/index.mjs

@@ -39,4 +39,5 @@ export * from './o-grouped-column-types.type';
 export * from './o-filter-definition.type';
 export * from './form/index';
 export * from './o-global-config.type';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9vbnRpbWl6ZS13ZWItbmd4L3NyYy9saWIvdHlwZXMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsdUNBQXVDLENBQUE7QUFDckQsY0FBYywrQkFBK0IsQ0FBQTtBQUM3QyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYywwQ0FBMEMsQ0FBQztBQUN6RCxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsZ0NBQWdDLENBQUM7QUFDL0MsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGdDQUFnQyxDQUFBO0FBQzlDLGNBQWMsc0NBQXNDLENBQUM7QUFDckQsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsc0NBQXNDLENBQUM7QUFDckQsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLGlDQUFpQyxDQUFDO0FBQ2hELGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLHVDQUF1QyxDQUFDO0FBQ3RELGNBQWMsb0NBQW9DLENBQUM7QUFDbkQsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGtCQUFrQixDQUFDO0FBQ2pDLGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLGNBQWMsQ0FBQztBQUM3QixjQUFjLHdCQUF3QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi90YWJsZS9pbmRleCc7XG5leHBvcnQgKiBmcm9tICcuL2FnZ3JlZ2F0ZS1mdW5jdGlvbi50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vYmFzaWMtZXhwcmVzc2lvbi50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vY29uZmlnLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9jb25maWd1cmUtbWVzc2FnZS1zZXJ2aWNlLWFyZ3MudHlwZSdcbmV4cG9ydCAqIGZyb20gJy4vY29uZmlndXJlLXNlcnZpY2UtYXJncy50eXBlJ1xuZXhwb3J0ICogZnJvbSAnLi9kYXRlLWN1c3RvbS1jbGFzcy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vZGF0ZS1maWx0ZXItZnVuY3Rpb24udHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2Vycm9yLWRhdGEudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2V4cHJlc3Npb24udHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2ZpbHRlci1leHByZXNzaW9uLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9mb3JtLWxheW91dC1kZXRhaWwtY29tcG9uZW50LWRhdGEudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2Zvcm0tdmFsdWUtb3B0aW9ucy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vaHR0cC1yZXF1ZXN0LW9wdGlvbnMudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL21lbnUtcm9vdC1pdGVtLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9vLWJyZWFkY3J1bWItaXRlbS50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vby1jb21wb25lbnQtcGVybWlzc2lvbnMudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL28tZGF0ZS12YWx1ZS50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vby1maWx0ZXItYnVpbGRlci12YWx1ZXMudHlwZSdcbmV4cG9ydCAqIGZyb20gJy4vby1mb3JtLWluaXRpYWxpemF0aW9uLW9wdGlvbnMudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL28tZm9ybS1wZXJtaXNzaW9ucy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vby1pbnB1dHMtb3B0aW9ucy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vby1saXN0LWluaXRpYWxpemF0aW9uLW9wdGlvbnMudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL28tbWF0LWVycm9yLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9vLXBlcm1pc3Npb25zLWRlZmluaXRpb24udHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL28tcGVybWlzc2lvbnMudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL28tcm91dGUtcGVybWlzc2lvbnMudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL29udGltaXplLWVlLXBlcm1pc3Npb25zLWNvbmZpZy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vb250aW1pemUtcGVybWlzc2lvbnMtY29uZmlnLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9vbnRpbWl6ZS1zZXJ2aWNlLWNvbmZpZy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vb3BlcmF0aW9uLWZ1bmN0aW9uLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9xdWVyeS1kYXRhLWFyZ3MudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL3F1aWNrLWZpbHRlci1mdW5jdGlvbi50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vcmVtb3RlLWNvbmZpZ3VyYXRpb24udHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL3NlcnZpY2UtcmVxdWVzdC1wYXJhbS50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vc2Vzc2lvbi1pbmZvLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9zcWwtb3JkZXIudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL28tZ3JvdXBlZC1jb2x1bW4tdHlwZXMudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL28tZmlsdGVyLWRlZmluaXRpb24udHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2Zvcm0vaW5kZXgnO1xuZXhwb3J0ICogZnJvbSAnLi9vLWdsb2JhbC1jb25maWcudHlwZSc7XG4iXX0=
+export * from './error-form-validation.type';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9vbnRpbWl6ZS13ZWItbmd4L3NyYy9saWIvdHlwZXMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsdUNBQXVDLENBQUE7QUFDckQsY0FBYywrQkFBK0IsQ0FBQTtBQUM3QyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYywwQ0FBMEMsQ0FBQztBQUN6RCxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsZ0NBQWdDLENBQUM7QUFDL0MsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGdDQUFnQyxDQUFBO0FBQzlDLGNBQWMsc0NBQXNDLENBQUM7QUFDckQsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsc0NBQXNDLENBQUM7QUFDckQsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLGlDQUFpQyxDQUFDO0FBQ2hELGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLHVDQUF1QyxDQUFDO0FBQ3RELGNBQWMsb0NBQW9DLENBQUM7QUFDbkQsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGtCQUFrQixDQUFDO0FBQ2pDLGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLGNBQWMsQ0FBQztBQUM3QixjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsOEJBQThCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3RhYmxlL2luZGV4JztcbmV4cG9ydCAqIGZyb20gJy4vYWdncmVnYXRlLWZ1bmN0aW9uLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9iYXNpYy1leHByZXNzaW9uLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9jb25maWcudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2NvbmZpZ3VyZS1tZXNzYWdlLXNlcnZpY2UtYXJncy50eXBlJ1xuZXhwb3J0ICogZnJvbSAnLi9jb25maWd1cmUtc2VydmljZS1hcmdzLnR5cGUnXG5leHBvcnQgKiBmcm9tICcuL2RhdGUtY3VzdG9tLWNsYXNzLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9kYXRlLWZpbHRlci1mdW5jdGlvbi50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vZXJyb3ItZGF0YS50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vZXhwcmVzc2lvbi50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vZmlsdGVyLWV4cHJlc3Npb24udHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2Zvcm0tbGF5b3V0LWRldGFpbC1jb21wb25lbnQtZGF0YS50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vZm9ybS12YWx1ZS1vcHRpb25zLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9odHRwLXJlcXVlc3Qtb3B0aW9ucy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vbWVudS1yb290LWl0ZW0udHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL28tYnJlYWRjcnVtYi1pdGVtLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9vLWNvbXBvbmVudC1wZXJtaXNzaW9ucy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vby1kYXRlLXZhbHVlLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9vLWZpbHRlci1idWlsZGVyLXZhbHVlcy50eXBlJ1xuZXhwb3J0ICogZnJvbSAnLi9vLWZvcm0taW5pdGlhbGl6YXRpb24tb3B0aW9ucy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vby1mb3JtLXBlcm1pc3Npb25zLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9vLWlucHV0cy1vcHRpb25zLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9vLWxpc3QtaW5pdGlhbGl6YXRpb24tb3B0aW9ucy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vby1tYXQtZXJyb3IudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL28tcGVybWlzc2lvbnMtZGVmaW5pdGlvbi50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vby1wZXJtaXNzaW9ucy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vby1yb3V0ZS1wZXJtaXNzaW9ucy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vb250aW1pemUtZWUtcGVybWlzc2lvbnMtY29uZmlnLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9vbnRpbWl6ZS1wZXJtaXNzaW9ucy1jb25maWcudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL29udGltaXplLXNlcnZpY2UtY29uZmlnLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9vcGVyYXRpb24tZnVuY3Rpb24udHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL3F1ZXJ5LWRhdGEtYXJncy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vcXVpY2stZmlsdGVyLWZ1bmN0aW9uLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9yZW1vdGUtY29uZmlndXJhdGlvbi50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZS1yZXF1ZXN0LXBhcmFtLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9zZXNzaW9uLWluZm8udHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL3NxbC1vcmRlci50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vby1ncm91cGVkLWNvbHVtbi10eXBlcy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vby1maWx0ZXItZGVmaW5pdGlvbi50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vZm9ybS9pbmRleCc7XG5leHBvcnQgKiBmcm9tICcuL28tZ2xvYmFsLWNvbmZpZy50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vZXJyb3ItZm9ybS12YWxpZGF0aW9uLnR5cGUnO1xuIl19

package/fesm2015/ontimize-web-ngx.mjs

@@ -8429,7 +8429,8 @@ const DEFAULT_INPUTS_O_FORM = [
     'queryFallbackFunction: query-fallback-function',
     'ignoreDefaultNavigation: ignore-default-navigation',
     'messageServiceType : message-service-type',
-    'setValueOrder: set-value-order'
+    'setValueOrder: set-value-order',
+    'formDataValidationFunction: form-data-validation-function'
 ];
 const DEFAULT_OUTPUTS_O_FORM = [
     'onDataLoaded',
@@ -9039,6 +9040,9 @@ class OFormComponent {
         const self = this;
         const values = this.getAttributesValuesToInsert();
         const sqlTypes = this.getAttributesSQLTypes();
+        if (!(this.validateBeforeAction(values))) {
+            return;
+        }
         this.onBeforeInsert.emit(values);
         this.insertData(values, sqlTypes).subscribe(resp => {
             self.postCorrectInsert(resp);
@@ -9060,6 +9064,17 @@ class OFormComponent {
             self.postIncorrectInsert(error);
         });
     }
+    validateBeforeAction(values) {
+        var _a;
+        if (this.formDataValidationFunction) {
+            const result = this.formDataValidationFunction(values);
+            if (!result.valid) {
+                this.dialogService.alert((_a = result.title) !== null && _a !== void 0 ? _a : this._messageService.getValidationErrorDialogTitle(), result.messages ? result.messages.join('</br>') : this._messageService.getValidationError());
+                return false;
+            }
+        }
+        return true;
+    }
     _goEditMode() {
         console.warn('Method `OFormComponent._goEditMode` is deprecated and will be removed in the furute. Use `goEditMode` instead');
         this.goEditMode();
@@ -9087,6 +9102,9 @@ class OFormComponent {
             this.dialogService.alert('INFO', this._messageService.getNothingToUpdateMessage());
             return;
         }
+        if (!(this.validateBeforeAction(values))) {
+            return;
+        }
         this.onBeforeUpdate.emit(values);
         this.updateData(filter, values, sqlTypes).subscribe(resp => {
             self.postCorrectUpdate(resp);
@@ -9697,7 +9715,7 @@ class OFormComponent {
 OFormComponent.DEFAULT_LAYOUT_DIRECTION = 'column';
 OFormComponent.guardClassName = 'CanDeactivateFormGuard';
 OFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFormComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-OFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OFormComponent, selector: "o-form", inputs: { showHeader: ["show-header", "showHeader"], headerMode: ["header-mode", "headerMode"], headerPosition: ["header-position", "headerPosition"], labelheader: ["label-header", "labelheader"], labelHeaderAlign: ["label-header-align", "labelHeaderAlign"], headeractions: ["header-actions", "headeractions"], showHeaderActionsText: ["show-header-actions-text", "showHeaderActionsText"], entity: "entity", keys: "keys", columns: "columns", service: "service", stayInRecordAfterEdit: ["stay-in-record-after-edit", "stayInRecordAfterEdit"], afterInsertMode: ["after-insert-mode", "afterInsertMode"], serviceType: ["service-type", "serviceType"], queryOnInit: ["query-on-init", "queryOnInit"], parentKeys: ["parent-keys", "parentKeys"], queryMethod: ["query-method", "queryMethod"], insertMethod: ["insert-method", "insertMethod"], updateMethod: ["update-method", "updateMethod"], deleteMethod: ["delete-method", "deleteMethod"], layoutDirection: ["layout-direction", "layoutDirection"], layoutAlign: ["layout-align", "layoutAlign"], editableDetail: ["editable-detail", "editableDetail"], keysSqlTypes: ["keys-sql-types", "keysSqlTypes"], undoButton: ["undo-button", "undoButton"], showHeaderNavigation: ["show-header-navigation", "showHeaderNavigation"], oattr: ["attr", "oattr"], includeBreadcrumb: ["include-breadcrumb", "includeBreadcrumb"], detectChangesOnBlur: ["detect-changes-on-blur", "detectChangesOnBlur"], confirmExit: ["confirm-exit", "confirmExit"], ignoreOnExit: ["ignore-on-exit", "ignoreOnExit"], queryFallbackFunction: ["query-fallback-function", "queryFallbackFunction"], ignoreDefaultNavigation: ["ignore-default-navigation", "ignoreDefaultNavigation"], messageServiceType: ["message-service-type", "messageServiceType"], setValueOrder: ["set-value-order", "setValueOrder"] }, outputs: { onDataLoaded: "onDataLoaded", beforeCloseDetail: "beforeCloseDetail", beforeGoEditMode: "beforeGoEditMode", onFormModeChange: "onFormModeChange", onBeforeInsert: "onBeforeInsert", onBeforeUpdate: "onBeforeUpdate", onBeforeDelete: "onBeforeDelete", onInsert: "onInsert", onUpdate: "onUpdate", onDelete: "onDelete", beforeInsertMode: "beforeInsertMode", beforeUpdateMode: "beforeUpdateMode", beforeInitialMode: "beforeInitialMode", onInsertMode: "onInsertMode", onUpdateMode: "onUpdateMode", onInitialMode: "onInitialMode", onCancel: "onCancel" }, host: { properties: { "class.o-form": "true" } }, providers: [
+OFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OFormComponent, selector: "o-form", inputs: { showHeader: ["show-header", "showHeader"], headerMode: ["header-mode", "headerMode"], headerPosition: ["header-position", "headerPosition"], labelheader: ["label-header", "labelheader"], labelHeaderAlign: ["label-header-align", "labelHeaderAlign"], headeractions: ["header-actions", "headeractions"], showHeaderActionsText: ["show-header-actions-text", "showHeaderActionsText"], entity: "entity", keys: "keys", columns: "columns", service: "service", stayInRecordAfterEdit: ["stay-in-record-after-edit", "stayInRecordAfterEdit"], afterInsertMode: ["after-insert-mode", "afterInsertMode"], serviceType: ["service-type", "serviceType"], queryOnInit: ["query-on-init", "queryOnInit"], parentKeys: ["parent-keys", "parentKeys"], queryMethod: ["query-method", "queryMethod"], insertMethod: ["insert-method", "insertMethod"], updateMethod: ["update-method", "updateMethod"], deleteMethod: ["delete-method", "deleteMethod"], layoutDirection: ["layout-direction", "layoutDirection"], layoutAlign: ["layout-align", "layoutAlign"], editableDetail: ["editable-detail", "editableDetail"], keysSqlTypes: ["keys-sql-types", "keysSqlTypes"], undoButton: ["undo-button", "undoButton"], showHeaderNavigation: ["show-header-navigation", "showHeaderNavigation"], oattr: ["attr", "oattr"], includeBreadcrumb: ["include-breadcrumb", "includeBreadcrumb"], detectChangesOnBlur: ["detect-changes-on-blur", "detectChangesOnBlur"], confirmExit: ["confirm-exit", "confirmExit"], ignoreOnExit: ["ignore-on-exit", "ignoreOnExit"], queryFallbackFunction: ["query-fallback-function", "queryFallbackFunction"], ignoreDefaultNavigation: ["ignore-default-navigation", "ignoreDefaultNavigation"], messageServiceType: ["message-service-type", "messageServiceType"], setValueOrder: ["set-value-order", "setValueOrder"], formDataValidationFunction: ["form-data-validation-function", "formDataValidationFunction"] }, outputs: { onDataLoaded: "onDataLoaded", beforeCloseDetail: "beforeCloseDetail", beforeGoEditMode: "beforeGoEditMode", onFormModeChange: "onFormModeChange", onBeforeInsert: "onBeforeInsert", onBeforeUpdate: "onBeforeUpdate", onBeforeDelete: "onBeforeDelete", onInsert: "onInsert", onUpdate: "onUpdate", onDelete: "onDelete", beforeInsertMode: "beforeInsertMode", beforeUpdateMode: "beforeUpdateMode", beforeInitialMode: "beforeInitialMode", onInsertMode: "onInsertMode", onUpdateMode: "onUpdateMode", onInitialMode: "onInitialMode", onCancel: "onCancel" }, host: { properties: { "class.o-form": "true" } }, providers: [
         { provide: OFormBase, useExisting: forwardRef(() => OFormComponent) },
         OntimizeServiceProvider,
         OFormMessageService
@@ -29022,7 +29040,19 @@ class OTableExportDialogComponent {
         return co1.id === co2.id;
     }
     export() {
+        var _a, _b, _c;
         this.dialogRef.close(true);
+        const exportFunction = (_a = this.getCustomExportButton(this.selectedExportFormat)) === null || _a === void 0 ? void 0 : _a.exportFunction;
+        if (exportFunction) {
+            exportFunction(this.columns, !this.vertical, this.filename);
+            return;
+        }
+        const onClickEvent = (_b = this.getCustomExportButton(this.selectedExportFormat)) === null || _b === void 0 ? void 0 : _b.onClick;
+        if (onClickEvent.observers.length > 0) {
+            console.warn('⚠️ [DEPRECATED] The onClick event is deprecated. Use the input export-function instead.');
+            (_c = this.getCustomExportButton(this.selectedExportFormat)) === null || _c === void 0 ? void 0 : _c.onClick.emit();
+            return;
+        }
         this.exportService.exportData(this.selectedExportFormat, this.columns, !this.vertical, this.filename).subscribe({
             next: () => {
                 this.snackBarService.open('MESSAGES.SUCCESS_EXPORT_TABLE_DATA', { icon: 'check_circle' });
@@ -29069,6 +29099,9 @@ class OTableExportDialogComponent {
         event.source.buttonToggleGroup.value = event.value;
         this.selectedExportFormat = event.value;
     }
+    getCustomExportButton(type) {
+        return this.config.options.find(x => x.exportType === type);
+    }
 }
 OTableExportDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableExportDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i0.Injector }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
 OTableExportDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableExportDialogComponent, selector: "o-table-export-dialog", host: { classAttribute: "o-table-export-dialog" }, providers: [
@@ -29681,7 +29714,8 @@ const DEFAULT_INPUTS_O_TABLE_EXPORT_BUTTON = [
     'icon',
     'svgIcon : svg-icon',
     'olabel: label',
-    'exportType: export-type'
+    'exportType: export-type',
+    'exportFunction: export-function'
 ];
 const DEFAULT_OUTPUTS_O_TABLE_EXPORT_BUTTON = [
     'onClick'
@@ -29692,13 +29726,9 @@ class OTableExportButtonComponent {
         this.onClick = new EventEmitter();
         this.oTableExportButtonService = this.injector.get(OTableExportButtonService);
     }
-    click() {
-        this.onClick.emit(this.exportType);
-        this.oTableExportButtonService.export$.next(this.exportType);
-    }
 }
 OTableExportButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableExportButtonComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-OTableExportButtonComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: OTableExportButtonComponent, selector: "o-table-export-button", inputs: { icon: "icon", svgIcon: ["svg-icon", "svgIcon"], olabel: ["label", "olabel"], exportType: ["export-type", "exportType"] }, outputs: { onClick: "onClick" }, ngImport: i0 });
+OTableExportButtonComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: OTableExportButtonComponent, selector: "o-table-export-button", inputs: { icon: "icon", svgIcon: ["svg-icon", "svgIcon"], olabel: ["label", "olabel"], exportType: ["export-type", "exportType"], exportFunction: ["export-function", "exportFunction"] }, outputs: { onClick: "onClick" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableExportButtonComponent, decorators: [{
             type: Directive,
             args: [{
@@ -34871,7 +34901,7 @@ OTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         { provide: O_COMPONENT_STATE_SERVICE, useClass: OTableComponentStateService },
         { provide: VIRTUAL_SCROLL_STRATEGY, useClass: OTableVirtualScrollStrategy },
         { provide: OTableBase, useExisting: forwardRef(() => OTableComponent) }
-    ], queries: [{ propertyName: "tableRowExpandable", first: true, predicate: OTableRowExpandableComponent, descendants: true }, { propertyName: "quickfilterContentChild", first: true, predicate: ["o-table-quickfilter"], descendants: true, static: true }, { propertyName: "tableColumnSelectAllContentChild", first: true, predicate: OTableColumnSelectAllDirective, descendants: true }, { propertyName: "contextMenuContentChild", first: true, predicate: OTableContextMenuComponent, descendants: true, static: true }, { propertyName: "tableOptions", predicate: OTableOptionComponent }, { propertyName: "tableButtons", predicate: OTableButtonComponent }, { propertyName: "exportOptsTemplate", predicate: OTableExportButtonComponent }], viewQueries: [{ propertyName: "oMatSort", first: true, predicate: OMatSort, descendants: true }, { propertyName: "cdkVirtualScrollViewport", first: true, predicate: ["virtualScrollViewPort"], descendants: true }, { propertyName: "spinnerContainer", first: true, predicate: ["spinnerContainer"], descendants: true, read: ElementRef }, { propertyName: "tableBodyEl", first: true, predicate: ["tableBody"], descendants: true }, { propertyName: "tableHeaderEl", first: true, predicate: ["tableHeader"], descendants: true, read: ElementRef }, { propertyName: "tableToolbarEl", first: true, predicate: ["tableToolbar"], descendants: true, read: ElementRef }, { propertyName: "oTableMenu", first: true, predicate: ["tableMenu"], descendants: true }, { propertyName: "tooltip", predicate: MatTooltip, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"o-table-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" [style.display]=\"isVisible()? '' : 'none'\"\n  [class.block-events]=\"showLoading | async\">\n\n  <o-data-toolbar #tableToolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"showTitle\" class=\"o-table-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <o-table-buttons #tableButtons [insert-button]=\"insertButton\" [refresh-button]=\"refreshButton\" [delete-button]=\"showDeleteButton\">\n        <ng-content select=\"o-table-button\"></ng-content>\n      </o-table-buttons>\n    </ng-container>\n    <ng-content select=\"[o-table-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <ng-container *ngIf=\"quickfilterContentChild; else defaultQuickFilter\">\n        <ng-content select=\"o-table-quickfilter\"></ng-content>\n      </ng-container>\n      <ng-template #defaultQuickFilter>\n        <ng-container *ngIf=\"quickFilter\">\n          <o-table-quickfilter (onChange)=\"tableQuickFilterChanged($event)\">\n          </o-table-quickfilter>\n        </ng-container>\n      </ng-template>\n      <button type=\"button\" *ngIf=\"showTableMenuButton\" mat-icon-button class=\"o-table-menu-button\" [matMenuTriggerFor]=\"tableMenu.matMenu\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n      </button>\n      <o-table-menu #tableMenu [select-all-checkbox]=\"selectAllCheckbox\" [export-button]=\"exportButton\"\n        [columns-visibility-button]=\"columnsVisibilityButton\" [show-configuration-option]=\"showConfigurationOption\"\n        [show-filter-option]=\"showFilterOption\" [show-report-on-demand-option]=\"showReportOnDemandOption\"\n        [show-charts-on-demand-option]=\"showChartsOnDemandOption\" [show-reset-width-option]=\"showResetWidthOption\" [show-group-by-option]=\"groupable\">\n        <ng-content select=\"o-table-option\"></ng-content>\n      </o-table-menu>\n    </ng-container>\n  </o-data-toolbar>\n\n  <div #tableBody class=\"o-table-body o-scroll\" [class.horizontal-scroll]=\"horizontalScroll\" [class.scrolled]=\"horizontalScrolled\"\n        [ngStyle]=\"{'visibility': spinnerContainer ? 'hidden' : 'visible'}\">\n    <ng-container *ngIf=\"!enabledVirtualScroll; else tableWithVirtualScroll\">\n      <div class=\"o-table-overflow o-scroll\">\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-template #tableWithVirtualScroll>\n      <cdk-virtual-scroll-viewport #virtualScrollViewPort fxFlex>\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </cdk-virtual-scroll-viewport>\n    </ng-template>\n  </div>\n  <!--TABLE PAGINATOR-->\n  <mat-paginator *ngIf=\"paginator && !(showLoading | async)\" #matpaginator [length]=\"dataSource?.resultsLength\" [pageIndex]=\"paginator.pageIndex\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"paginator.pageSizeOptions\" (page)=\"onChangePage($event)\" [showFirstLastButtons]=\"paginator.showFirstLastButtons\">\n  </mat-paginator>\n\n  <!--LOADING-->\n  <div #spinnerContainer *ngIf=\"showLoading | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" [ngStyle]=\"{'top.px': toolBarHeight}\"\n    class=\"spinner-container\" [class.spinner-container-scrollable]=\"loadingScroll | async\">\n    <o-table-skeleton></o-table-skeleton>\n  </div>\n\n  <!-- Disable blocker -->\n  <div *ngIf=\"!enabled\" class=\"o-table-disabled-blocker\"></div>\n</div>\n\n<ng-template #table>\n\n  <table mat-table #table [class.autoadjusted]=\"autoAdjust\" [trackBy]=\"getTrackByFunction()\" [dataSource]=\"dataSource\" oMatSort\n    [oMatSortColumns]=\"sortColArray\" [ngClass]=\"rowHeightObservable | async\" (cdkObserveContent)=\"projectContentChanged()\"\n    [oTableExpandedFooter]=\"!(showLoading | async)\" [oTableExpandedFooterColspan]=\"visibleColArray.length\" [multiTemplateDataRows]=\"showExpandableRow()\"\n    aria-describedby=\"ontimize-web table\">\n\n    <!--Checkbox Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name\" *ngIf=\"oTableOptions.selectColumn.visible\">\n      <ng-container *ngIf=\"!tableColumnSelectAllContentChild; else customHeaderSelectAllTemplate\">\n        <th mat-header-cell *matHeaderCellDef>\n          <div class=\"content\" *ngIf=\"isSelectionModeMultiple()\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n      <ng-template #customHeaderSelectAllTemplate>\n        <th mat-header-cell *matHeaderCellDef [class.resizable]=\"resizable\" class=\"mat-header-select-all-with-title o-center\"\n          [style.width]=\"oTableOptions.selectColumn.width\" [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\"\n          [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <div class=\"content\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"o-center\" [style.width]=\"oTableOptions.selectColumn.width\"\n          [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\" [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-template>\n\n\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n\n    <!--Expandable Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.expandableColumn.name\" *ngIf=\"isColumnExpandable()\">\n      <th mat-header-cell *matHeaderCellDef>\n        {{ oTableOptions.expandableColumn.title }}\n      </th>\n      <td mat-cell *matCellDef=\"let row;let rowIndex = dataIndex\">\n        <mat-icon *ngIf=\"showExpandableIcon(row, rowIndex) | async\" (click)=\"toogleRowExpandable(row, rowIndex, $event)\">\n          <ng-container *ngIf=\"isExpanded(row)\">{{ tableRowExpandable.iconCollapse }}</ng-container>\n          <ng-container *ngIf=\"!isExpanded(row)\">{{ tableRowExpandable.iconExpand }}</ng-container>\n        </mat-icon>\n      </td>\n    </ng-container>\n\n    <!-- Generic column definition -->\n    <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name\">\n      <!--Define header-cell-->\n\n      <th mat-header-cell *matHeaderCellDef [ngClass]=\"getTitleAlignClass(column)\" [class.resizable]=\"resizable\" [style.width]=\"column.width\"\n        [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\">\n\n        <div class=\"content\">\n          <o-table-header [column]=\"column\"></o-table-header>\n        </div>\n      </th>\n\n\n      <!--Define mat-cell-->\n      <ng-container *ngIf=\"!table.multiTemplateDataRows; else cellTemplateMultiTemplateDataRows\">\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = index \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n        </td>\n      </ng-container>\n      <ng-template #cellTemplateMultiTemplateDataRows>\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = dataIndex \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n\n        </td>\n      </ng-template>\n      <!--Define mat-footer-cell-->\n      <ng-container *ngIf=\"showTotals | async\">\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <div class=\"title\" *ngIf=\"column.aggregate && column.aggregate.title\">\n            {{ column.aggregate.title | oTranslate }}\n          </div>\n          <ng-container *ngIf=\"!column.renderer\">\n            {{ dataSource.getAggregateData(column) }}\n          </ng-container>\n          <ng-template *ngIf=\"column.renderer && column.aggregate\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n            [ngTemplateOutletContext]=\"{cellvalue: dataSource.getAggregateData(column)}\"></ng-template>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td mat-cell *matCellDef=\"let row;let rowIndex= dataIndex\" [attr.colspan]=\"oTableOptions.visibleColumns.length\">\n          <div [ngClass]=\"getExpandedRowContainerClass(rowIndex)\" [@detailExpand]=\"getStateExpand(row)\">\n          </div>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <!--FOOTER-INSERTABLE-->\n    <ng-container *ngIf=\"showLastInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name + getSuffixColumnInsertable()\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-footer-cell *matFooterCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name+ getSuffixColumnInsertable()\">\n\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field o-table-cell-editor-text o-table-cell-editor\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"showFirstInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"getColumnInsertable(oTableOptions.selectColumn.name)\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-header-cell *matHeaderCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"getColumnInsertable(column.name)\">\n\n        <td mat-header-cell *matHeaderCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Definition column group header -->\n    <ng-container *ngFor=\"let column of groupingHeadersRows; let i = index\" [matColumnDef]=\"column\">\n      <td mat-cell *matCellDef=\"let group\" class=\"grouping-row\" [oContextMenu]=\"tableContextMenu\"\n        [oContextMenuData]=\"{ cellName:column, rowValue:group, rowIndex:i}\" [ngClass]=\"getGroupHeaderCellAlignClass(column)\">\n        <div *ngIf=\"i===0\" class=\"grouping-title-wrapper\" [ngStyle]=\"{'padding-left': 20*(group.level-1)+'px'}\">\n          <mat-icon>{{ group.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          {{ group.title }}\n        </div>\n        <div class=\"grouping-aggregate\" *ngIf=\"group.hasActiveAggregate(visibleColArray[i])\">\n          {{ group.getColumnActiveAggregateTitle(visibleColArray[i]) | oTranslate }} :\n          <ng-container *ngIf=\"!getOColumnFromGroupHeaderColumn(column).renderer\">\n            {{ group.getColumnAggregateValue(visibleColArray[i])}}\n          </ng-container>\n          <ng-container *ngIf=\"getOColumnFromGroupHeaderColumn(column).renderer\">\n            <ng-template\n              *ngTemplateOutlet=\"getOColumnFromGroupHeaderColumn(column).renderer?.templateref; context:{ cellvalue:  group.getColumnAggregateValue(visibleColArray[i]) }\">\n            </ng-template>\n          </ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"position\">\n      <td mat-cell *matCellDef=\"let row\"> {{row}} </td>\n    </ng-container>\n\n    <tr #tableHeader mat-header-row *matHeaderRowDef=\"oTableOptions.visibleColumns; sticky: fixedHeader\"></tr>\n\n    <ng-container *ngIf=\"!table.multiTemplateDataRows; else rowTemplateMultiTemplateDataRows\">\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = index\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-container>\n    <ng-template #rowTemplateMultiTemplateDataRows>\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = dataIndex\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-template>\n\n    <!-- Row Group header -->\n    <tr mat-row *matRowDef=\"let row; columns: groupingHeadersRows; when:isGroup\" (click)=\"groupHeaderClick(row)\"\n      [ngClass]=\"getClassNameGroupHeader(row)\">\n    </tr>\n\n    <!-- Expanded detail row-->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"o-table-row-expanded\"></tr>\n    </ng-container>\n\n    <ng-container *ngIf=\"showLastInsertableRow\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"></tr>\n    </ng-container>\n    <ng-container *ngIf=\"showFirstInsertableRow\">\n      <tr mat-header-row *matHeaderRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"> </tr>\n    </ng-container>\n    <ng-container *ngIf=\"showTotals | async\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.visibleColumns; sticky: true\" class=\"o-table-aggregate\">\n      </tr>\n    </ng-container>\n  </table>\n\n</ng-template>\n\n<ng-container *ngIf=\"!contextMenuContentChild && contextMenu\">\n  <o-table-context-menu [insert]=\"insertButton\" [edit]=\"editionMode !== EDIT_MODE_NONE\" [view-detail]=\"detailMode !== DETAIL_MODE_NONE\"\n    [refresh]=\"refreshButton\" [delete]=\"deleteButton\" [filter]=\"showFilterOption\" [group-by-row]=\"groupable\">\n  </o-table-context-menu>\n</ng-container>\n\n<ng-template #cellRenderer let-row=\"row\" let-column=\"column\">\n  <div class=\"content\">\n\n    <ng-container [ngSwitch]=\"true\">\n      <ng-container *ngSwitchCase=\"column.renderer != null && (!column.editing || column.editing && !isRowSelected(row))\">\n        <ng-template *ngTemplateOutlet=\"column.renderer?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"isRowSelected(row) && column.editing\">\n        <ng-template *ngTemplateOutlet=\"column.editor?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"column.type === 'editButtonInRow' || column.type === 'detailButtonInRow'\">\n        <div fxLayoutAlign=\"center center\" class=\"o-action-cell-renderer\" (click)=\"onDetailButtonClick(column, row, $event)\">\n          <mat-icon>{{ getDetailButtonIcon(column) }}</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>{{ row[column.name] }}</ng-container>\n    </ng-container>\n\n  </div>\n</ng-template>\n", styles: [".o-table{height:100%;max-height:100%;width:100%}.o-table.o-table-disabled{opacity:.4}.o-table .o-table-container{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;align-content:stretch;min-width:100%;min-height:400px;position:relative;padding:0 .5%}.o-table .o-table-container .o-table-body{display:flex;flex:1 1 auto}.o-table .o-table-container .o-table-body .o-table-overflow{overflow-y:auto;overflow-x:hidden;min-width:100%}.o-table .o-table-container .o-table-body.horizontal-scroll .o-table-overflow{overflow-x:auto}.o-table .o-table-container .o-table-body thead .mat-mdc-header-row th:last-child .o-table-column-resizer{display:none}.o-table .o-table-container.block-events{pointer-events:none}.o-table .o-table-container.block-events>.o-table-toolbar,.o-table .o-table-container.block-events>.o-table-body .mat-mdc-header-row{opacity:.75}.o-table .o-table-container .o-table-toolbar{height:40px}.o-table .o-table-container .o-table-toolbar>div{max-height:100%}.o-table .o-table-container .o-table-toolbar .buttons{margin:0 10px 0 4px}.o-table .o-table-container .o-table-body{max-width:100%;height:100%;overflow:hidden;position:relative}.o-table .o-table-container .o-table-body .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .o-table-container .o-table-body.horizontal-scroll{overflow-x:auto;padding-bottom:16px}.o-table .o-table-container .o-table-body.horizontal-scroll .mat-mdc-header-cell{width:150px}.o-table .o-table-container .o-table-body .o-table-no-results{cursor:default;text-align:center}.o-table .o-table-container .o-table-body .o-table-no-results td{text-align:center}.o-table .o-table-container .mat-mdc-table{table-layout:fixed;width:100%}.o-table .o-table-container .mat-mdc-table.autoadjusted{table-layout:auto}.o-table .o-table-container .mat-mdc-table td .content,.o-table .o-table-container .mat-mdc-table th .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-header-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:24px;height:24px}.o-table .o-table-container .mat-mdc-table.large .column-filter-icon{margin-top:4px}.o-table .o-table-container .mat-mdc-table.large .mat-sort-header-arrow{margin-top:7px}.o-table .o-table-container .mat-mdc-table tr.mat-mdc-row.o-table-row-expanded{height:0}.o-table .o-table-container .mat-mdc-table tr.o-table-insertable td{height:1px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row{box-sizing:border-box;transition:background-color .2s;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell{padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row{padding-top:30px;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-title-wrapper,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-title-wrapper{position:absolute;width:100%;left:0;top:0;text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-aggregate,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-aggregate{font-weight:700;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-bottom:8px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.empty-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.empty-cell{min-height:16px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .action-cell-renderer,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .action-cell-renderer{cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-start,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-center,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-end,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell *,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell *{vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell),.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell){padding:6px 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline .content,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline .content{overflow:initial;white-space:normal;text-overflow:unset}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:32px;height:32px;margin:1px auto;overflow:hidden;border-radius:50%;position:relative;z-index:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar img,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:inherit;max-height:inherit}.o-table .o-table-container .mat-mdc-table .o-action-cell-renderer{display:inline-block;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell{overflow:hidden;position:relative;box-sizing:border-box;padding:0 12px;vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select.mat-header-select-all-with-title{padding-right:12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:not(.o-column-image){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-header-indicator-numbered{font-size:8px;position:absolute;text-align:center;display:inline-block;width:18px;height:18px;line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;bottom:-10px;right:-9px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .column-filter-icon{cursor:pointer;font-size:18px;width:18px;height:18px;line-height:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{flex:1;display:block;place-content:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container{cursor:default;min-height:20px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start .mat-sort-header-button{text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center .mat-sort-header-button{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end .mat-sort-header-button{text-align:right}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select{box-sizing:content-box;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select:not(.mat-header-select-all-with-title),.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select:not(.mat-header-select-all-with-title){width:30px}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select .mat-checkbox-layout,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select .mat-checkbox-layout{text-overflow:ellipsis;overflow:hidden;display:inline}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-expandable,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-expandable{width:40px;box-sizing:content-box;padding:0 0 0 24px;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell .row-container-expanded{overflow:hidden;display:flex}.o-table .o-table-container .o-table-disabled-blocker{bottom:0;left:0;position:absolute;right:0;top:0;z-index:100}.o-table .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .spinner-container-scrollable{position:relative}.o-table.o-table-fixed{display:flex}.o-table.o-table-fixed .o-table-container{display:flex;flex-direction:column}.o-table.o-table-fixed .o-table-body{display:flex;flex:1}.o-table.o-table-fixed .o-table-body .o-table-overflow{flex:1;overflow-y:auto}.mat-mdc-tooltip.o-table-cell-tooltip{word-wrap:break-word;overflow:hidden;min-width:140px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OMatErrorDirective, selector: "[oMatError]", inputs: ["oMatError"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i14.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i14.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i14.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i16.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: OContextMenuDirective, selector: "[oContextMenu]", inputs: ["oContextMenu", "oContextMenuData"] }, { kind: "directive", type: i18.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: OMatSort, selector: "[oMatSort]", inputs: ["oMatSortDisabled", "oMatSortColumns"], outputs: ["matSortChange"], exportAs: ["oMatSort"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "component", type: OTableContextMenuComponent, selector: "o-table-context-menu", inputs: ["context-menu", "insert", "edit", "view-detail", "copy", "select-all", "refresh", "delete", "filter", "group-by-row"] }, { kind: "directive", type: OTableRowDirective, selector: "[oTableRow]" }, { kind: "directive", type: OTableExpandedFooterDirective, selector: "[oTableExpandedFooter]", inputs: ["oTableExpandedFooter", "oTableExpandedFooterColspan"] }, { kind: "component", type: OTableButtonsComponent, selector: "o-table-buttons", inputs: ["insert-button", "refresh-button", "delete-button"] }, { kind: "component", type: OTableMenuComponent, selector: "o-table-menu", inputs: ["select-all-checkbox", "export-button", "columns-visibility-button", "show-configuration-option", "show-filter-option", "show-group-by-option", "show-reset-width-option", "show-report-on-demand-option", "show-charts-on-demand-option"] }, { kind: "component", type: OTableQuickfilterComponent, selector: "o-table-quickfilter", inputs: ["placeholder"], outputs: ["onChange"] }, { kind: "component", type: OTableHeaderComponent, selector: "o-table-header", inputs: ["column"] }, { kind: "component", type: OTableHeaderSelectAllComponent, selector: "o-table-header-select-all", inputs: ["column"] }, { kind: "component", type: OTableSkeletonComponent, selector: "o-table-skeleton" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }, { kind: "pipe", type: OTableRowClassPipe, name: "oTableRowClass" }], animations: [
+    ], queries: [{ propertyName: "tableRowExpandable", first: true, predicate: OTableRowExpandableComponent, descendants: true }, { propertyName: "quickfilterContentChild", first: true, predicate: ["o-table-quickfilter"], descendants: true, static: true }, { propertyName: "tableColumnSelectAllContentChild", first: true, predicate: OTableColumnSelectAllDirective, descendants: true }, { propertyName: "contextMenuContentChild", first: true, predicate: OTableContextMenuComponent, descendants: true, static: true }, { propertyName: "tableOptions", predicate: OTableOptionComponent }, { propertyName: "tableButtons", predicate: OTableButtonComponent }, { propertyName: "exportOptsTemplate", predicate: OTableExportButtonComponent }], viewQueries: [{ propertyName: "oMatSort", first: true, predicate: OMatSort, descendants: true }, { propertyName: "cdkVirtualScrollViewport", first: true, predicate: ["virtualScrollViewPort"], descendants: true }, { propertyName: "spinnerContainer", first: true, predicate: ["spinnerContainer"], descendants: true, read: ElementRef }, { propertyName: "tableBodyEl", first: true, predicate: ["tableBody"], descendants: true }, { propertyName: "tableHeaderEl", first: true, predicate: ["tableHeader"], descendants: true, read: ElementRef }, { propertyName: "tableToolbarEl", first: true, predicate: ["tableToolbar"], descendants: true, read: ElementRef }, { propertyName: "oTableMenu", first: true, predicate: ["tableMenu"], descendants: true }, { propertyName: "tooltip", predicate: MatTooltip, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"o-table-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" [style.display]=\"isVisible()? '' : 'none'\"\n  [class.block-events]=\"showLoading | async\">\n\n  <o-data-toolbar #tableToolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"showTitle\" class=\"o-table-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <o-table-buttons #tableButtons [insert-button]=\"insertButton\" [refresh-button]=\"refreshButton\" [delete-button]=\"showDeleteButton\">\n        <ng-content select=\"o-table-button\"></ng-content>\n      </o-table-buttons>\n    </ng-container>\n    <ng-content select=\"[o-table-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <ng-container *ngIf=\"quickfilterContentChild; else defaultQuickFilter\">\n        <ng-content select=\"o-table-quickfilter\"></ng-content>\n      </ng-container>\n      <ng-template #defaultQuickFilter>\n        <ng-container *ngIf=\"quickFilter\">\n          <o-table-quickfilter (onChange)=\"tableQuickFilterChanged($event)\">\n          </o-table-quickfilter>\n        </ng-container>\n      </ng-template>\n      <button type=\"button\" *ngIf=\"showTableMenuButton\" mat-icon-button class=\"o-table-menu-button\" [matMenuTriggerFor]=\"tableMenu.matMenu\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n      </button>\n      <o-table-menu #tableMenu [select-all-checkbox]=\"selectAllCheckbox\" [export-button]=\"exportButton\"\n        [columns-visibility-button]=\"columnsVisibilityButton\" [show-configuration-option]=\"showConfigurationOption\"\n        [show-filter-option]=\"showFilterOption\" [show-report-on-demand-option]=\"showReportOnDemandOption\"\n        [show-charts-on-demand-option]=\"showChartsOnDemandOption\" [show-reset-width-option]=\"showResetWidthOption\" [show-group-by-option]=\"groupable\">\n        <ng-content select=\"o-table-option\"></ng-content>\n      </o-table-menu>\n    </ng-container>\n  </o-data-toolbar>\n\n  <div #tableBody class=\"o-table-body o-scroll\" [class.horizontal-scroll]=\"horizontalScroll\" [class.scrolled]=\"horizontalScrolled\"\n        [ngStyle]=\"{'visibility': spinnerContainer ? 'hidden' : 'visible'}\">\n    <ng-container *ngIf=\"!enabledVirtualScroll; else tableWithVirtualScroll\">\n      <div class=\"o-table-overflow o-scroll\">\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-template #tableWithVirtualScroll>\n      <cdk-virtual-scroll-viewport #virtualScrollViewPort fxFlex>\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </cdk-virtual-scroll-viewport>\n    </ng-template>\n  </div>\n  <!--TABLE PAGINATOR-->\n  <mat-paginator *ngIf=\"paginator\" #matpaginator [length]=\"dataSource?.resultsLength\" [pageIndex]=\"paginator.pageIndex\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"paginator.pageSizeOptions\" (page)=\"onChangePage($event)\" [showFirstLastButtons]=\"paginator.showFirstLastButtons\"\n     [ngStyle]=\"{'visibility': spinnerContainer ? 'hidden' : 'visible'}\">\n  </mat-paginator>\n\n  <!--LOADING-->\n  <div #spinnerContainer *ngIf=\"showLoading | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" [ngStyle]=\"{'top.px': toolBarHeight}\"\n    class=\"spinner-container\" [class.spinner-container-scrollable]=\"loadingScroll | async\">\n    <o-table-skeleton></o-table-skeleton>\n  </div>\n\n  <!-- Disable blocker -->\n  <div *ngIf=\"!enabled\" class=\"o-table-disabled-blocker\"></div>\n</div>\n\n<ng-template #table>\n\n  <table mat-table #table [class.autoadjusted]=\"autoAdjust\" [trackBy]=\"getTrackByFunction()\" [dataSource]=\"dataSource\" oMatSort\n    [oMatSortColumns]=\"sortColArray\" [ngClass]=\"rowHeightObservable | async\" (cdkObserveContent)=\"projectContentChanged()\"\n    [oTableExpandedFooter]=\"!(showLoading | async)\" [oTableExpandedFooterColspan]=\"visibleColArray.length\" [multiTemplateDataRows]=\"showExpandableRow()\"\n    aria-describedby=\"ontimize-web table\">\n\n    <!--Checkbox Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name\" *ngIf=\"oTableOptions.selectColumn.visible\">\n      <ng-container *ngIf=\"!tableColumnSelectAllContentChild; else customHeaderSelectAllTemplate\">\n        <th mat-header-cell *matHeaderCellDef>\n          <div class=\"content\" *ngIf=\"isSelectionModeMultiple()\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n      <ng-template #customHeaderSelectAllTemplate>\n        <th mat-header-cell *matHeaderCellDef [class.resizable]=\"resizable\" class=\"mat-header-select-all-with-title o-center\"\n          [style.width]=\"oTableOptions.selectColumn.width\" [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\"\n          [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <div class=\"content\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"o-center\" [style.width]=\"oTableOptions.selectColumn.width\"\n          [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\" [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-template>\n\n\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n\n    <!--Expandable Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.expandableColumn.name\" *ngIf=\"isColumnExpandable()\">\n      <th mat-header-cell *matHeaderCellDef>\n        {{ oTableOptions.expandableColumn.title }}\n      </th>\n      <td mat-cell *matCellDef=\"let row;let rowIndex = dataIndex\">\n        <mat-icon *ngIf=\"showExpandableIcon(row, rowIndex) | async\" (click)=\"toogleRowExpandable(row, rowIndex, $event)\">\n          <ng-container *ngIf=\"isExpanded(row)\">{{ tableRowExpandable.iconCollapse }}</ng-container>\n          <ng-container *ngIf=\"!isExpanded(row)\">{{ tableRowExpandable.iconExpand }}</ng-container>\n        </mat-icon>\n      </td>\n    </ng-container>\n\n    <!-- Generic column definition -->\n    <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name\">\n      <!--Define header-cell-->\n\n      <th mat-header-cell *matHeaderCellDef [ngClass]=\"getTitleAlignClass(column)\" [class.resizable]=\"resizable\" [style.width]=\"column.width\"\n        [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\">\n\n        <div class=\"content\">\n          <o-table-header [column]=\"column\"></o-table-header>\n        </div>\n      </th>\n\n\n      <!--Define mat-cell-->\n      <ng-container *ngIf=\"!table.multiTemplateDataRows; else cellTemplateMultiTemplateDataRows\">\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = index \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n        </td>\n      </ng-container>\n      <ng-template #cellTemplateMultiTemplateDataRows>\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = dataIndex \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n\n        </td>\n      </ng-template>\n      <!--Define mat-footer-cell-->\n      <ng-container *ngIf=\"showTotals | async\">\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <div class=\"title\" *ngIf=\"column.aggregate && column.aggregate.title\">\n            {{ column.aggregate.title | oTranslate }}\n          </div>\n          <ng-container *ngIf=\"!column.renderer\">\n            {{ dataSource.getAggregateData(column) }}\n          </ng-container>\n          <ng-template *ngIf=\"column.renderer && column.aggregate\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n            [ngTemplateOutletContext]=\"{cellvalue: dataSource.getAggregateData(column)}\"></ng-template>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td mat-cell *matCellDef=\"let row;let rowIndex= dataIndex\" [attr.colspan]=\"oTableOptions.visibleColumns.length\">\n          <div [ngClass]=\"getExpandedRowContainerClass(rowIndex)\" [@detailExpand]=\"getStateExpand(row)\">\n          </div>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <!--FOOTER-INSERTABLE-->\n    <ng-container *ngIf=\"showLastInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name + getSuffixColumnInsertable()\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-footer-cell *matFooterCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name+ getSuffixColumnInsertable()\">\n\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field o-table-cell-editor-text o-table-cell-editor\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"showFirstInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"getColumnInsertable(oTableOptions.selectColumn.name)\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-header-cell *matHeaderCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"getColumnInsertable(column.name)\">\n\n        <td mat-header-cell *matHeaderCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Definition column group header -->\n    <ng-container *ngFor=\"let column of groupingHeadersRows; let i = index\" [matColumnDef]=\"column\">\n      <td mat-cell *matCellDef=\"let group\" class=\"grouping-row\" [oContextMenu]=\"tableContextMenu\"\n        [oContextMenuData]=\"{ cellName:column, rowValue:group, rowIndex:i}\" [ngClass]=\"getGroupHeaderCellAlignClass(column)\">\n        <div *ngIf=\"i===0\" class=\"grouping-title-wrapper\" [ngStyle]=\"{'padding-left': 20*(group.level-1)+'px'}\">\n          <mat-icon>{{ group.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          {{ group.title }}\n        </div>\n        <div class=\"grouping-aggregate\" *ngIf=\"group.hasActiveAggregate(visibleColArray[i])\">\n          {{ group.getColumnActiveAggregateTitle(visibleColArray[i]) | oTranslate }} :\n          <ng-container *ngIf=\"!getOColumnFromGroupHeaderColumn(column).renderer\">\n            {{ group.getColumnAggregateValue(visibleColArray[i])}}\n          </ng-container>\n          <ng-container *ngIf=\"getOColumnFromGroupHeaderColumn(column).renderer\">\n            <ng-template\n              *ngTemplateOutlet=\"getOColumnFromGroupHeaderColumn(column).renderer?.templateref; context:{ cellvalue:  group.getColumnAggregateValue(visibleColArray[i]) }\">\n            </ng-template>\n          </ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"position\">\n      <td mat-cell *matCellDef=\"let row\"> {{row}} </td>\n    </ng-container>\n\n    <tr #tableHeader mat-header-row *matHeaderRowDef=\"oTableOptions.visibleColumns; sticky: fixedHeader\"></tr>\n\n    <ng-container *ngIf=\"!table.multiTemplateDataRows; else rowTemplateMultiTemplateDataRows\">\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = index\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-container>\n    <ng-template #rowTemplateMultiTemplateDataRows>\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = dataIndex\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-template>\n\n    <!-- Row Group header -->\n    <tr mat-row *matRowDef=\"let row; columns: groupingHeadersRows; when:isGroup\" (click)=\"groupHeaderClick(row)\"\n      [ngClass]=\"getClassNameGroupHeader(row)\">\n    </tr>\n\n    <!-- Expanded detail row-->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"o-table-row-expanded\"></tr>\n    </ng-container>\n\n    <ng-container *ngIf=\"showLastInsertableRow\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"></tr>\n    </ng-container>\n    <ng-container *ngIf=\"showFirstInsertableRow\">\n      <tr mat-header-row *matHeaderRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"> </tr>\n    </ng-container>\n    <ng-container *ngIf=\"showTotals | async\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.visibleColumns; sticky: true\" class=\"o-table-aggregate\">\n      </tr>\n    </ng-container>\n  </table>\n\n</ng-template>\n\n<ng-container *ngIf=\"!contextMenuContentChild && contextMenu\">\n  <o-table-context-menu [insert]=\"insertButton\" [edit]=\"editionMode !== EDIT_MODE_NONE\" [view-detail]=\"detailMode !== DETAIL_MODE_NONE\"\n    [refresh]=\"refreshButton\" [delete]=\"deleteButton\" [filter]=\"showFilterOption\" [group-by-row]=\"groupable\">\n  </o-table-context-menu>\n</ng-container>\n\n<ng-template #cellRenderer let-row=\"row\" let-column=\"column\">\n  <div class=\"content\">\n\n    <ng-container [ngSwitch]=\"true\">\n      <ng-container *ngSwitchCase=\"column.renderer != null && (!column.editing || column.editing && !isRowSelected(row))\">\n        <ng-template *ngTemplateOutlet=\"column.renderer?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"isRowSelected(row) && column.editing\">\n        <ng-template *ngTemplateOutlet=\"column.editor?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"column.type === 'editButtonInRow' || column.type === 'detailButtonInRow'\">\n        <div fxLayoutAlign=\"center center\" class=\"o-action-cell-renderer\" (click)=\"onDetailButtonClick(column, row, $event)\">\n          <mat-icon>{{ getDetailButtonIcon(column) }}</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>{{ row[column.name] }}</ng-container>\n    </ng-container>\n\n  </div>\n</ng-template>\n", styles: [".o-table{height:100%;max-height:100%;width:100%}.o-table.o-table-disabled{opacity:.4}.o-table .o-table-container{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;align-content:stretch;min-width:100%;min-height:400px;position:relative;padding:0 .5%}.o-table .o-table-container .o-table-body{display:flex;flex:1 1 auto}.o-table .o-table-container .o-table-body .o-table-overflow{overflow-y:auto;overflow-x:hidden;min-width:100%}.o-table .o-table-container .o-table-body.horizontal-scroll .o-table-overflow{overflow-x:auto}.o-table .o-table-container .o-table-body thead .mat-mdc-header-row th:last-child .o-table-column-resizer{display:none}.o-table .o-table-container.block-events{pointer-events:none}.o-table .o-table-container.block-events>.o-table-toolbar,.o-table .o-table-container.block-events>.o-table-body .mat-mdc-header-row{opacity:.75}.o-table .o-table-container .o-table-toolbar{height:40px}.o-table .o-table-container .o-table-toolbar>div{max-height:100%}.o-table .o-table-container .o-table-toolbar .buttons{margin:0 10px 0 4px}.o-table .o-table-container .o-table-body{max-width:100%;height:100%;overflow:hidden;position:relative}.o-table .o-table-container .o-table-body .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .o-table-container .o-table-body.horizontal-scroll{overflow-x:auto;padding-bottom:16px}.o-table .o-table-container .o-table-body.horizontal-scroll .mat-mdc-header-cell{width:150px}.o-table .o-table-container .o-table-body .o-table-no-results{cursor:default;text-align:center}.o-table .o-table-container .o-table-body .o-table-no-results td{text-align:center}.o-table .o-table-container .mat-mdc-table{table-layout:fixed;width:100%}.o-table .o-table-container .mat-mdc-table.autoadjusted{table-layout:auto}.o-table .o-table-container .mat-mdc-table td .content,.o-table .o-table-container .mat-mdc-table th .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-header-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:24px;height:24px}.o-table .o-table-container .mat-mdc-table.large .column-filter-icon{margin-top:4px}.o-table .o-table-container .mat-mdc-table.large .mat-sort-header-arrow{margin-top:7px}.o-table .o-table-container .mat-mdc-table tr.mat-mdc-row.o-table-row-expanded{height:0}.o-table .o-table-container .mat-mdc-table tr.o-table-insertable td{height:1px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row{box-sizing:border-box;transition:background-color .2s;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell{padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row{padding-top:30px;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-title-wrapper,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-title-wrapper{position:absolute;width:100%;left:0;top:0;text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-aggregate,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-aggregate{font-weight:700;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-bottom:8px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.empty-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.empty-cell{min-height:16px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .action-cell-renderer,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .action-cell-renderer{cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-start,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-center,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-end,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell *,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell *{vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell),.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell){padding:6px 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline .content,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline .content{overflow:initial;white-space:normal;text-overflow:unset}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:32px;height:32px;margin:1px auto;overflow:hidden;border-radius:50%;position:relative;z-index:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar img,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:inherit;max-height:inherit}.o-table .o-table-container .mat-mdc-table .o-action-cell-renderer{display:inline-block;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell{overflow:hidden;position:relative;box-sizing:border-box;padding:0 12px;vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select.mat-header-select-all-with-title{padding-right:12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:not(.o-column-image){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-header-indicator-numbered{font-size:8px;position:absolute;text-align:center;display:inline-block;width:18px;height:18px;line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;bottom:-10px;right:-9px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .column-filter-icon{cursor:pointer;font-size:18px;width:18px;height:18px;line-height:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{flex:1;display:block;place-content:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container{cursor:default;min-height:20px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start .mat-sort-header-button{text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center .mat-sort-header-button{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end .mat-sort-header-button{text-align:right}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select{box-sizing:content-box;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select:not(.mat-header-select-all-with-title),.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select:not(.mat-header-select-all-with-title){width:30px}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select .mat-checkbox-layout,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select .mat-checkbox-layout{text-overflow:ellipsis;overflow:hidden;display:inline}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-expandable,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-expandable{width:40px;box-sizing:content-box;padding:0 0 0 24px;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell .row-container-expanded{overflow:hidden;display:flex}.o-table .o-table-container .o-table-disabled-blocker{bottom:0;left:0;position:absolute;right:0;top:0;z-index:100}.o-table .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .spinner-container-scrollable{position:relative}.o-table.o-table-fixed{display:flex}.o-table.o-table-fixed .o-table-container{display:flex;flex-direction:column}.o-table.o-table-fixed .o-table-body{display:flex;flex:1}.o-table.o-table-fixed .o-table-body .o-table-overflow{flex:1;overflow-y:auto}.mat-mdc-tooltip.o-table-cell-tooltip{word-wrap:break-word;overflow:hidden;min-width:140px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OMatErrorDirective, selector: "[oMatError]", inputs: ["oMatError"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i14.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i14.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i14.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i16.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: OContextMenuDirective, selector: "[oContextMenu]", inputs: ["oContextMenu", "oContextMenuData"] }, { kind: "directive", type: i18.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: OMatSort, selector: "[oMatSort]", inputs: ["oMatSortDisabled", "oMatSortColumns"], outputs: ["matSortChange"], exportAs: ["oMatSort"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "component", type: OTableContextMenuComponent, selector: "o-table-context-menu", inputs: ["context-menu", "insert", "edit", "view-detail", "copy", "select-all", "refresh", "delete", "filter", "group-by-row"] }, { kind: "directive", type: OTableRowDirective, selector: "[oTableRow]" }, { kind: "directive", type: OTableExpandedFooterDirective, selector: "[oTableExpandedFooter]", inputs: ["oTableExpandedFooter", "oTableExpandedFooterColspan"] }, { kind: "component", type: OTableButtonsComponent, selector: "o-table-buttons", inputs: ["insert-button", "refresh-button", "delete-button"] }, { kind: "component", type: OTableMenuComponent, selector: "o-table-menu", inputs: ["select-all-checkbox", "export-button", "columns-visibility-button", "show-configuration-option", "show-filter-option", "show-group-by-option", "show-reset-width-option", "show-report-on-demand-option", "show-charts-on-demand-option"] }, { kind: "component", type: OTableQuickfilterComponent, selector: "o-table-quickfilter", inputs: ["placeholder"], outputs: ["onChange"] }, { kind: "component", type: OTableHeaderComponent, selector: "o-table-header", inputs: ["column"] }, { kind: "component", type: OTableHeaderSelectAllComponent, selector: "o-table-header-select-all", inputs: ["column"] }, { kind: "component", type: OTableSkeletonComponent, selector: "o-table-skeleton" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }, { kind: "pipe", type: OTableRowClassPipe, name: "oTableRowClass" }], animations: [
         trigger('detailExpand', [
             state('collapsed', style({ height: '0px', minHeight: '0' })),
             state('expanded', style({ height: '*' })),
@@ -35020,7 +35050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         '[class.o-table-fixed]': 'fixedHeader',
                         '[class.o-table-disabled]': '!enabled',
                         '(document:click)': 'handleDOMClick($event)'
-                    }, template: "<div class=\"o-table-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" [style.display]=\"isVisible()? '' : 'none'\"\n  [class.block-events]=\"showLoading | async\">\n\n  <o-data-toolbar #tableToolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"showTitle\" class=\"o-table-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <o-table-buttons #tableButtons [insert-button]=\"insertButton\" [refresh-button]=\"refreshButton\" [delete-button]=\"showDeleteButton\">\n        <ng-content select=\"o-table-button\"></ng-content>\n      </o-table-buttons>\n    </ng-container>\n    <ng-content select=\"[o-table-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <ng-container *ngIf=\"quickfilterContentChild; else defaultQuickFilter\">\n        <ng-content select=\"o-table-quickfilter\"></ng-content>\n      </ng-container>\n      <ng-template #defaultQuickFilter>\n        <ng-container *ngIf=\"quickFilter\">\n          <o-table-quickfilter (onChange)=\"tableQuickFilterChanged($event)\">\n          </o-table-quickfilter>\n        </ng-container>\n      </ng-template>\n      <button type=\"button\" *ngIf=\"showTableMenuButton\" mat-icon-button class=\"o-table-menu-button\" [matMenuTriggerFor]=\"tableMenu.matMenu\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n      </button>\n      <o-table-menu #tableMenu [select-all-checkbox]=\"selectAllCheckbox\" [export-button]=\"exportButton\"\n        [columns-visibility-button]=\"columnsVisibilityButton\" [show-configuration-option]=\"showConfigurationOption\"\n        [show-filter-option]=\"showFilterOption\" [show-report-on-demand-option]=\"showReportOnDemandOption\"\n        [show-charts-on-demand-option]=\"showChartsOnDemandOption\" [show-reset-width-option]=\"showResetWidthOption\" [show-group-by-option]=\"groupable\">\n        <ng-content select=\"o-table-option\"></ng-content>\n      </o-table-menu>\n    </ng-container>\n  </o-data-toolbar>\n\n  <div #tableBody class=\"o-table-body o-scroll\" [class.horizontal-scroll]=\"horizontalScroll\" [class.scrolled]=\"horizontalScrolled\"\n        [ngStyle]=\"{'visibility': spinnerContainer ? 'hidden' : 'visible'}\">\n    <ng-container *ngIf=\"!enabledVirtualScroll; else tableWithVirtualScroll\">\n      <div class=\"o-table-overflow o-scroll\">\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-template #tableWithVirtualScroll>\n      <cdk-virtual-scroll-viewport #virtualScrollViewPort fxFlex>\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </cdk-virtual-scroll-viewport>\n    </ng-template>\n  </div>\n  <!--TABLE PAGINATOR-->\n  <mat-paginator *ngIf=\"paginator && !(showLoading | async)\" #matpaginator [length]=\"dataSource?.resultsLength\" [pageIndex]=\"paginator.pageIndex\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"paginator.pageSizeOptions\" (page)=\"onChangePage($event)\" [showFirstLastButtons]=\"paginator.showFirstLastButtons\">\n  </mat-paginator>\n\n  <!--LOADING-->\n  <div #spinnerContainer *ngIf=\"showLoading | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" [ngStyle]=\"{'top.px': toolBarHeight}\"\n    class=\"spinner-container\" [class.spinner-container-scrollable]=\"loadingScroll | async\">\n    <o-table-skeleton></o-table-skeleton>\n  </div>\n\n  <!-- Disable blocker -->\n  <div *ngIf=\"!enabled\" class=\"o-table-disabled-blocker\"></div>\n</div>\n\n<ng-template #table>\n\n  <table mat-table #table [class.autoadjusted]=\"autoAdjust\" [trackBy]=\"getTrackByFunction()\" [dataSource]=\"dataSource\" oMatSort\n    [oMatSortColumns]=\"sortColArray\" [ngClass]=\"rowHeightObservable | async\" (cdkObserveContent)=\"projectContentChanged()\"\n    [oTableExpandedFooter]=\"!(showLoading | async)\" [oTableExpandedFooterColspan]=\"visibleColArray.length\" [multiTemplateDataRows]=\"showExpandableRow()\"\n    aria-describedby=\"ontimize-web table\">\n\n    <!--Checkbox Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name\" *ngIf=\"oTableOptions.selectColumn.visible\">\n      <ng-container *ngIf=\"!tableColumnSelectAllContentChild; else customHeaderSelectAllTemplate\">\n        <th mat-header-cell *matHeaderCellDef>\n          <div class=\"content\" *ngIf=\"isSelectionModeMultiple()\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n      <ng-template #customHeaderSelectAllTemplate>\n        <th mat-header-cell *matHeaderCellDef [class.resizable]=\"resizable\" class=\"mat-header-select-all-with-title o-center\"\n          [style.width]=\"oTableOptions.selectColumn.width\" [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\"\n          [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <div class=\"content\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"o-center\" [style.width]=\"oTableOptions.selectColumn.width\"\n          [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\" [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-template>\n\n\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n\n    <!--Expandable Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.expandableColumn.name\" *ngIf=\"isColumnExpandable()\">\n      <th mat-header-cell *matHeaderCellDef>\n        {{ oTableOptions.expandableColumn.title }}\n      </th>\n      <td mat-cell *matCellDef=\"let row;let rowIndex = dataIndex\">\n        <mat-icon *ngIf=\"showExpandableIcon(row, rowIndex) | async\" (click)=\"toogleRowExpandable(row, rowIndex, $event)\">\n          <ng-container *ngIf=\"isExpanded(row)\">{{ tableRowExpandable.iconCollapse }}</ng-container>\n          <ng-container *ngIf=\"!isExpanded(row)\">{{ tableRowExpandable.iconExpand }}</ng-container>\n        </mat-icon>\n      </td>\n    </ng-container>\n\n    <!-- Generic column definition -->\n    <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name\">\n      <!--Define header-cell-->\n\n      <th mat-header-cell *matHeaderCellDef [ngClass]=\"getTitleAlignClass(column)\" [class.resizable]=\"resizable\" [style.width]=\"column.width\"\n        [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\">\n\n        <div class=\"content\">\n          <o-table-header [column]=\"column\"></o-table-header>\n        </div>\n      </th>\n\n\n      <!--Define mat-cell-->\n      <ng-container *ngIf=\"!table.multiTemplateDataRows; else cellTemplateMultiTemplateDataRows\">\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = index \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n        </td>\n      </ng-container>\n      <ng-template #cellTemplateMultiTemplateDataRows>\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = dataIndex \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n\n        </td>\n      </ng-template>\n      <!--Define mat-footer-cell-->\n      <ng-container *ngIf=\"showTotals | async\">\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <div class=\"title\" *ngIf=\"column.aggregate && column.aggregate.title\">\n            {{ column.aggregate.title | oTranslate }}\n          </div>\n          <ng-container *ngIf=\"!column.renderer\">\n            {{ dataSource.getAggregateData(column) }}\n          </ng-container>\n          <ng-template *ngIf=\"column.renderer && column.aggregate\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n            [ngTemplateOutletContext]=\"{cellvalue: dataSource.getAggregateData(column)}\"></ng-template>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td mat-cell *matCellDef=\"let row;let rowIndex= dataIndex\" [attr.colspan]=\"oTableOptions.visibleColumns.length\">\n          <div [ngClass]=\"getExpandedRowContainerClass(rowIndex)\" [@detailExpand]=\"getStateExpand(row)\">\n          </div>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <!--FOOTER-INSERTABLE-->\n    <ng-container *ngIf=\"showLastInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name + getSuffixColumnInsertable()\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-footer-cell *matFooterCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name+ getSuffixColumnInsertable()\">\n\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field o-table-cell-editor-text o-table-cell-editor\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"showFirstInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"getColumnInsertable(oTableOptions.selectColumn.name)\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-header-cell *matHeaderCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"getColumnInsertable(column.name)\">\n\n        <td mat-header-cell *matHeaderCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Definition column group header -->\n    <ng-container *ngFor=\"let column of groupingHeadersRows; let i = index\" [matColumnDef]=\"column\">\n      <td mat-cell *matCellDef=\"let group\" class=\"grouping-row\" [oContextMenu]=\"tableContextMenu\"\n        [oContextMenuData]=\"{ cellName:column, rowValue:group, rowIndex:i}\" [ngClass]=\"getGroupHeaderCellAlignClass(column)\">\n        <div *ngIf=\"i===0\" class=\"grouping-title-wrapper\" [ngStyle]=\"{'padding-left': 20*(group.level-1)+'px'}\">\n          <mat-icon>{{ group.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          {{ group.title }}\n        </div>\n        <div class=\"grouping-aggregate\" *ngIf=\"group.hasActiveAggregate(visibleColArray[i])\">\n          {{ group.getColumnActiveAggregateTitle(visibleColArray[i]) | oTranslate }} :\n          <ng-container *ngIf=\"!getOColumnFromGroupHeaderColumn(column).renderer\">\n            {{ group.getColumnAggregateValue(visibleColArray[i])}}\n          </ng-container>\n          <ng-container *ngIf=\"getOColumnFromGroupHeaderColumn(column).renderer\">\n            <ng-template\n              *ngTemplateOutlet=\"getOColumnFromGroupHeaderColumn(column).renderer?.templateref; context:{ cellvalue:  group.getColumnAggregateValue(visibleColArray[i]) }\">\n            </ng-template>\n          </ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"position\">\n      <td mat-cell *matCellDef=\"let row\"> {{row}} </td>\n    </ng-container>\n\n    <tr #tableHeader mat-header-row *matHeaderRowDef=\"oTableOptions.visibleColumns; sticky: fixedHeader\"></tr>\n\n    <ng-container *ngIf=\"!table.multiTemplateDataRows; else rowTemplateMultiTemplateDataRows\">\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = index\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-container>\n    <ng-template #rowTemplateMultiTemplateDataRows>\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = dataIndex\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-template>\n\n    <!-- Row Group header -->\n    <tr mat-row *matRowDef=\"let row; columns: groupingHeadersRows; when:isGroup\" (click)=\"groupHeaderClick(row)\"\n      [ngClass]=\"getClassNameGroupHeader(row)\">\n    </tr>\n\n    <!-- Expanded detail row-->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"o-table-row-expanded\"></tr>\n    </ng-container>\n\n    <ng-container *ngIf=\"showLastInsertableRow\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"></tr>\n    </ng-container>\n    <ng-container *ngIf=\"showFirstInsertableRow\">\n      <tr mat-header-row *matHeaderRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"> </tr>\n    </ng-container>\n    <ng-container *ngIf=\"showTotals | async\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.visibleColumns; sticky: true\" class=\"o-table-aggregate\">\n      </tr>\n    </ng-container>\n  </table>\n\n</ng-template>\n\n<ng-container *ngIf=\"!contextMenuContentChild && contextMenu\">\n  <o-table-context-menu [insert]=\"insertButton\" [edit]=\"editionMode !== EDIT_MODE_NONE\" [view-detail]=\"detailMode !== DETAIL_MODE_NONE\"\n    [refresh]=\"refreshButton\" [delete]=\"deleteButton\" [filter]=\"showFilterOption\" [group-by-row]=\"groupable\">\n  </o-table-context-menu>\n</ng-container>\n\n<ng-template #cellRenderer let-row=\"row\" let-column=\"column\">\n  <div class=\"content\">\n\n    <ng-container [ngSwitch]=\"true\">\n      <ng-container *ngSwitchCase=\"column.renderer != null && (!column.editing || column.editing && !isRowSelected(row))\">\n        <ng-template *ngTemplateOutlet=\"column.renderer?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"isRowSelected(row) && column.editing\">\n        <ng-template *ngTemplateOutlet=\"column.editor?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"column.type === 'editButtonInRow' || column.type === 'detailButtonInRow'\">\n        <div fxLayoutAlign=\"center center\" class=\"o-action-cell-renderer\" (click)=\"onDetailButtonClick(column, row, $event)\">\n          <mat-icon>{{ getDetailButtonIcon(column) }}</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>{{ row[column.name] }}</ng-container>\n    </ng-container>\n\n  </div>\n</ng-template>\n", styles: [".o-table{height:100%;max-height:100%;width:100%}.o-table.o-table-disabled{opacity:.4}.o-table .o-table-container{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;align-content:stretch;min-width:100%;min-height:400px;position:relative;padding:0 .5%}.o-table .o-table-container .o-table-body{display:flex;flex:1 1 auto}.o-table .o-table-container .o-table-body .o-table-overflow{overflow-y:auto;overflow-x:hidden;min-width:100%}.o-table .o-table-container .o-table-body.horizontal-scroll .o-table-overflow{overflow-x:auto}.o-table .o-table-container .o-table-body thead .mat-mdc-header-row th:last-child .o-table-column-resizer{display:none}.o-table .o-table-container.block-events{pointer-events:none}.o-table .o-table-container.block-events>.o-table-toolbar,.o-table .o-table-container.block-events>.o-table-body .mat-mdc-header-row{opacity:.75}.o-table .o-table-container .o-table-toolbar{height:40px}.o-table .o-table-container .o-table-toolbar>div{max-height:100%}.o-table .o-table-container .o-table-toolbar .buttons{margin:0 10px 0 4px}.o-table .o-table-container .o-table-body{max-width:100%;height:100%;overflow:hidden;position:relative}.o-table .o-table-container .o-table-body .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .o-table-container .o-table-body.horizontal-scroll{overflow-x:auto;padding-bottom:16px}.o-table .o-table-container .o-table-body.horizontal-scroll .mat-mdc-header-cell{width:150px}.o-table .o-table-container .o-table-body .o-table-no-results{cursor:default;text-align:center}.o-table .o-table-container .o-table-body .o-table-no-results td{text-align:center}.o-table .o-table-container .mat-mdc-table{table-layout:fixed;width:100%}.o-table .o-table-container .mat-mdc-table.autoadjusted{table-layout:auto}.o-table .o-table-container .mat-mdc-table td .content,.o-table .o-table-container .mat-mdc-table th .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-header-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:24px;height:24px}.o-table .o-table-container .mat-mdc-table.large .column-filter-icon{margin-top:4px}.o-table .o-table-container .mat-mdc-table.large .mat-sort-header-arrow{margin-top:7px}.o-table .o-table-container .mat-mdc-table tr.mat-mdc-row.o-table-row-expanded{height:0}.o-table .o-table-container .mat-mdc-table tr.o-table-insertable td{height:1px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row{box-sizing:border-box;transition:background-color .2s;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell{padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row{padding-top:30px;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-title-wrapper,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-title-wrapper{position:absolute;width:100%;left:0;top:0;text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-aggregate,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-aggregate{font-weight:700;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-bottom:8px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.empty-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.empty-cell{min-height:16px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .action-cell-renderer,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .action-cell-renderer{cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-start,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-center,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-end,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell *,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell *{vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell),.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell){padding:6px 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline .content,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline .content{overflow:initial;white-space:normal;text-overflow:unset}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:32px;height:32px;margin:1px auto;overflow:hidden;border-radius:50%;position:relative;z-index:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar img,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:inherit;max-height:inherit}.o-table .o-table-container .mat-mdc-table .o-action-cell-renderer{display:inline-block;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell{overflow:hidden;position:relative;box-sizing:border-box;padding:0 12px;vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select.mat-header-select-all-with-title{padding-right:12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:not(.o-column-image){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-header-indicator-numbered{font-size:8px;position:absolute;text-align:center;display:inline-block;width:18px;height:18px;line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;bottom:-10px;right:-9px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .column-filter-icon{cursor:pointer;font-size:18px;width:18px;height:18px;line-height:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{flex:1;display:block;place-content:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container{cursor:default;min-height:20px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start .mat-sort-header-button{text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center .mat-sort-header-button{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end .mat-sort-header-button{text-align:right}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select{box-sizing:content-box;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select:not(.mat-header-select-all-with-title),.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select:not(.mat-header-select-all-with-title){width:30px}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select .mat-checkbox-layout,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select .mat-checkbox-layout{text-overflow:ellipsis;overflow:hidden;display:inline}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-expandable,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-expandable{width:40px;box-sizing:content-box;padding:0 0 0 24px;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell .row-container-expanded{overflow:hidden;display:flex}.o-table .o-table-container .o-table-disabled-blocker{bottom:0;left:0;position:absolute;right:0;top:0;z-index:100}.o-table .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .spinner-container-scrollable{position:relative}.o-table.o-table-fixed{display:flex}.o-table.o-table-fixed .o-table-container{display:flex;flex-direction:column}.o-table.o-table-fixed .o-table-body{display:flex;flex:1}.o-table.o-table-fixed .o-table-body .o-table-overflow{flex:1;overflow-y:auto}.mat-mdc-tooltip.o-table-cell-tooltip{word-wrap:break-word;overflow:hidden;min-width:140px}\n"] }]
+                    }, template: "<div class=\"o-table-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" [style.display]=\"isVisible()? '' : 'none'\"\n  [class.block-events]=\"showLoading | async\">\n\n  <o-data-toolbar #tableToolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"showTitle\" class=\"o-table-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <o-table-buttons #tableButtons [insert-button]=\"insertButton\" [refresh-button]=\"refreshButton\" [delete-button]=\"showDeleteButton\">\n        <ng-content select=\"o-table-button\"></ng-content>\n      </o-table-buttons>\n    </ng-container>\n    <ng-content select=\"[o-table-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <ng-container *ngIf=\"quickfilterContentChild; else defaultQuickFilter\">\n        <ng-content select=\"o-table-quickfilter\"></ng-content>\n      </ng-container>\n      <ng-template #defaultQuickFilter>\n        <ng-container *ngIf=\"quickFilter\">\n          <o-table-quickfilter (onChange)=\"tableQuickFilterChanged($event)\">\n          </o-table-quickfilter>\n        </ng-container>\n      </ng-template>\n      <button type=\"button\" *ngIf=\"showTableMenuButton\" mat-icon-button class=\"o-table-menu-button\" [matMenuTriggerFor]=\"tableMenu.matMenu\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n      </button>\n      <o-table-menu #tableMenu [select-all-checkbox]=\"selectAllCheckbox\" [export-button]=\"exportButton\"\n        [columns-visibility-button]=\"columnsVisibilityButton\" [show-configuration-option]=\"showConfigurationOption\"\n        [show-filter-option]=\"showFilterOption\" [show-report-on-demand-option]=\"showReportOnDemandOption\"\n        [show-charts-on-demand-option]=\"showChartsOnDemandOption\" [show-reset-width-option]=\"showResetWidthOption\" [show-group-by-option]=\"groupable\">\n        <ng-content select=\"o-table-option\"></ng-content>\n      </o-table-menu>\n    </ng-container>\n  </o-data-toolbar>\n\n  <div #tableBody class=\"o-table-body o-scroll\" [class.horizontal-scroll]=\"horizontalScroll\" [class.scrolled]=\"horizontalScrolled\"\n        [ngStyle]=\"{'visibility': spinnerContainer ? 'hidden' : 'visible'}\">\n    <ng-container *ngIf=\"!enabledVirtualScroll; else tableWithVirtualScroll\">\n      <div class=\"o-table-overflow o-scroll\">\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-template #tableWithVirtualScroll>\n      <cdk-virtual-scroll-viewport #virtualScrollViewPort fxFlex>\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </cdk-virtual-scroll-viewport>\n    </ng-template>\n  </div>\n  <!--TABLE PAGINATOR-->\n  <mat-paginator *ngIf=\"paginator\" #matpaginator [length]=\"dataSource?.resultsLength\" [pageIndex]=\"paginator.pageIndex\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"paginator.pageSizeOptions\" (page)=\"onChangePage($event)\" [showFirstLastButtons]=\"paginator.showFirstLastButtons\"\n     [ngStyle]=\"{'visibility': spinnerContainer ? 'hidden' : 'visible'}\">\n  </mat-paginator>\n\n  <!--LOADING-->\n  <div #spinnerContainer *ngIf=\"showLoading | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" [ngStyle]=\"{'top.px': toolBarHeight}\"\n    class=\"spinner-container\" [class.spinner-container-scrollable]=\"loadingScroll | async\">\n    <o-table-skeleton></o-table-skeleton>\n  </div>\n\n  <!-- Disable blocker -->\n  <div *ngIf=\"!enabled\" class=\"o-table-disabled-blocker\"></div>\n</div>\n\n<ng-template #table>\n\n  <table mat-table #table [class.autoadjusted]=\"autoAdjust\" [trackBy]=\"getTrackByFunction()\" [dataSource]=\"dataSource\" oMatSort\n    [oMatSortColumns]=\"sortColArray\" [ngClass]=\"rowHeightObservable | async\" (cdkObserveContent)=\"projectContentChanged()\"\n    [oTableExpandedFooter]=\"!(showLoading | async)\" [oTableExpandedFooterColspan]=\"visibleColArray.length\" [multiTemplateDataRows]=\"showExpandableRow()\"\n    aria-describedby=\"ontimize-web table\">\n\n    <!--Checkbox Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name\" *ngIf=\"oTableOptions.selectColumn.visible\">\n      <ng-container *ngIf=\"!tableColumnSelectAllContentChild; else customHeaderSelectAllTemplate\">\n        <th mat-header-cell *matHeaderCellDef>\n          <div class=\"content\" *ngIf=\"isSelectionModeMultiple()\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n      <ng-template #customHeaderSelectAllTemplate>\n        <th mat-header-cell *matHeaderCellDef [class.resizable]=\"resizable\" class=\"mat-header-select-all-with-title o-center\"\n          [style.width]=\"oTableOptions.selectColumn.width\" [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\"\n          [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <div class=\"content\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"o-center\" [style.width]=\"oTableOptions.selectColumn.width\"\n          [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\" [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-template>\n\n\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n\n    <!--Expandable Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.expandableColumn.name\" *ngIf=\"isColumnExpandable()\">\n      <th mat-header-cell *matHeaderCellDef>\n        {{ oTableOptions.expandableColumn.title }}\n      </th>\n      <td mat-cell *matCellDef=\"let row;let rowIndex = dataIndex\">\n        <mat-icon *ngIf=\"showExpandableIcon(row, rowIndex) | async\" (click)=\"toogleRowExpandable(row, rowIndex, $event)\">\n          <ng-container *ngIf=\"isExpanded(row)\">{{ tableRowExpandable.iconCollapse }}</ng-container>\n          <ng-container *ngIf=\"!isExpanded(row)\">{{ tableRowExpandable.iconExpand }}</ng-container>\n        </mat-icon>\n      </td>\n    </ng-container>\n\n    <!-- Generic column definition -->\n    <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name\">\n      <!--Define header-cell-->\n\n      <th mat-header-cell *matHeaderCellDef [ngClass]=\"getTitleAlignClass(column)\" [class.resizable]=\"resizable\" [style.width]=\"column.width\"\n        [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\">\n\n        <div class=\"content\">\n          <o-table-header [column]=\"column\"></o-table-header>\n        </div>\n      </th>\n\n\n      <!--Define mat-cell-->\n      <ng-container *ngIf=\"!table.multiTemplateDataRows; else cellTemplateMultiTemplateDataRows\">\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = index \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n        </td>\n      </ng-container>\n      <ng-template #cellTemplateMultiTemplateDataRows>\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = dataIndex \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n\n        </td>\n      </ng-template>\n      <!--Define mat-footer-cell-->\n      <ng-container *ngIf=\"showTotals | async\">\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <div class=\"title\" *ngIf=\"column.aggregate && column.aggregate.title\">\n            {{ column.aggregate.title | oTranslate }}\n          </div>\n          <ng-container *ngIf=\"!column.renderer\">\n            {{ dataSource.getAggregateData(column) }}\n          </ng-container>\n          <ng-template *ngIf=\"column.renderer && column.aggregate\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n            [ngTemplateOutletContext]=\"{cellvalue: dataSource.getAggregateData(column)}\"></ng-template>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td mat-cell *matCellDef=\"let row;let rowIndex= dataIndex\" [attr.colspan]=\"oTableOptions.visibleColumns.length\">\n          <div [ngClass]=\"getExpandedRowContainerClass(rowIndex)\" [@detailExpand]=\"getStateExpand(row)\">\n          </div>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <!--FOOTER-INSERTABLE-->\n    <ng-container *ngIf=\"showLastInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name + getSuffixColumnInsertable()\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-footer-cell *matFooterCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name+ getSuffixColumnInsertable()\">\n\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field o-table-cell-editor-text o-table-cell-editor\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"showFirstInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"getColumnInsertable(oTableOptions.selectColumn.name)\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-header-cell *matHeaderCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"getColumnInsertable(column.name)\">\n\n        <td mat-header-cell *matHeaderCellDef [ngClass]=\"column.className\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Definition column group header -->\n    <ng-container *ngFor=\"let column of groupingHeadersRows; let i = index\" [matColumnDef]=\"column\">\n      <td mat-cell *matCellDef=\"let group\" class=\"grouping-row\" [oContextMenu]=\"tableContextMenu\"\n        [oContextMenuData]=\"{ cellName:column, rowValue:group, rowIndex:i}\" [ngClass]=\"getGroupHeaderCellAlignClass(column)\">\n        <div *ngIf=\"i===0\" class=\"grouping-title-wrapper\" [ngStyle]=\"{'padding-left': 20*(group.level-1)+'px'}\">\n          <mat-icon>{{ group.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          {{ group.title }}\n        </div>\n        <div class=\"grouping-aggregate\" *ngIf=\"group.hasActiveAggregate(visibleColArray[i])\">\n          {{ group.getColumnActiveAggregateTitle(visibleColArray[i]) | oTranslate }} :\n          <ng-container *ngIf=\"!getOColumnFromGroupHeaderColumn(column).renderer\">\n            {{ group.getColumnAggregateValue(visibleColArray[i])}}\n          </ng-container>\n          <ng-container *ngIf=\"getOColumnFromGroupHeaderColumn(column).renderer\">\n            <ng-template\n              *ngTemplateOutlet=\"getOColumnFromGroupHeaderColumn(column).renderer?.templateref; context:{ cellvalue:  group.getColumnAggregateValue(visibleColArray[i]) }\">\n            </ng-template>\n          </ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"position\">\n      <td mat-cell *matCellDef=\"let row\"> {{row}} </td>\n    </ng-container>\n\n    <tr #tableHeader mat-header-row *matHeaderRowDef=\"oTableOptions.visibleColumns; sticky: fixedHeader\"></tr>\n\n    <ng-container *ngIf=\"!table.multiTemplateDataRows; else rowTemplateMultiTemplateDataRows\">\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = index\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-container>\n    <ng-template #rowTemplateMultiTemplateDataRows>\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = dataIndex\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-template>\n\n    <!-- Row Group header -->\n    <tr mat-row *matRowDef=\"let row; columns: groupingHeadersRows; when:isGroup\" (click)=\"groupHeaderClick(row)\"\n      [ngClass]=\"getClassNameGroupHeader(row)\">\n    </tr>\n\n    <!-- Expanded detail row-->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"o-table-row-expanded\"></tr>\n    </ng-container>\n\n    <ng-container *ngIf=\"showLastInsertableRow\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"></tr>\n    </ng-container>\n    <ng-container *ngIf=\"showFirstInsertableRow\">\n      <tr mat-header-row *matHeaderRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"> </tr>\n    </ng-container>\n    <ng-container *ngIf=\"showTotals | async\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.visibleColumns; sticky: true\" class=\"o-table-aggregate\">\n      </tr>\n    </ng-container>\n  </table>\n\n</ng-template>\n\n<ng-container *ngIf=\"!contextMenuContentChild && contextMenu\">\n  <o-table-context-menu [insert]=\"insertButton\" [edit]=\"editionMode !== EDIT_MODE_NONE\" [view-detail]=\"detailMode !== DETAIL_MODE_NONE\"\n    [refresh]=\"refreshButton\" [delete]=\"deleteButton\" [filter]=\"showFilterOption\" [group-by-row]=\"groupable\">\n  </o-table-context-menu>\n</ng-container>\n\n<ng-template #cellRenderer let-row=\"row\" let-column=\"column\">\n  <div class=\"content\">\n\n    <ng-container [ngSwitch]=\"true\">\n      <ng-container *ngSwitchCase=\"column.renderer != null && (!column.editing || column.editing && !isRowSelected(row))\">\n        <ng-template *ngTemplateOutlet=\"column.renderer?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"isRowSelected(row) && column.editing\">\n        <ng-template *ngTemplateOutlet=\"column.editor?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"column.type === 'editButtonInRow' || column.type === 'detailButtonInRow'\">\n        <div fxLayoutAlign=\"center center\" class=\"o-action-cell-renderer\" (click)=\"onDetailButtonClick(column, row, $event)\">\n          <mat-icon>{{ getDetailButtonIcon(column) }}</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>{{ row[column.name] }}</ng-container>\n    </ng-container>\n\n  </div>\n</ng-template>\n", styles: [".o-table{height:100%;max-height:100%;width:100%}.o-table.o-table-disabled{opacity:.4}.o-table .o-table-container{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;align-content:stretch;min-width:100%;min-height:400px;position:relative;padding:0 .5%}.o-table .o-table-container .o-table-body{display:flex;flex:1 1 auto}.o-table .o-table-container .o-table-body .o-table-overflow{overflow-y:auto;overflow-x:hidden;min-width:100%}.o-table .o-table-container .o-table-body.horizontal-scroll .o-table-overflow{overflow-x:auto}.o-table .o-table-container .o-table-body thead .mat-mdc-header-row th:last-child .o-table-column-resizer{display:none}.o-table .o-table-container.block-events{pointer-events:none}.o-table .o-table-container.block-events>.o-table-toolbar,.o-table .o-table-container.block-events>.o-table-body .mat-mdc-header-row{opacity:.75}.o-table .o-table-container .o-table-toolbar{height:40px}.o-table .o-table-container .o-table-toolbar>div{max-height:100%}.o-table .o-table-container .o-table-toolbar .buttons{margin:0 10px 0 4px}.o-table .o-table-container .o-table-body{max-width:100%;height:100%;overflow:hidden;position:relative}.o-table .o-table-container .o-table-body .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .o-table-container .o-table-body.horizontal-scroll{overflow-x:auto;padding-bottom:16px}.o-table .o-table-container .o-table-body.horizontal-scroll .mat-mdc-header-cell{width:150px}.o-table .o-table-container .o-table-body .o-table-no-results{cursor:default;text-align:center}.o-table .o-table-container .o-table-body .o-table-no-results td{text-align:center}.o-table .o-table-container .mat-mdc-table{table-layout:fixed;width:100%}.o-table .o-table-container .mat-mdc-table.autoadjusted{table-layout:auto}.o-table .o-table-container .mat-mdc-table td .content,.o-table .o-table-container .mat-mdc-table th .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-header-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:24px;height:24px}.o-table .o-table-container .mat-mdc-table.large .column-filter-icon{margin-top:4px}.o-table .o-table-container .mat-mdc-table.large .mat-sort-header-arrow{margin-top:7px}.o-table .o-table-container .mat-mdc-table tr.mat-mdc-row.o-table-row-expanded{height:0}.o-table .o-table-container .mat-mdc-table tr.o-table-insertable td{height:1px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row{box-sizing:border-box;transition:background-color .2s;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell{padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row{padding-top:30px;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-title-wrapper,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-title-wrapper{position:absolute;width:100%;left:0;top:0;text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-aggregate,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-aggregate{font-weight:700;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-bottom:8px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.empty-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.empty-cell{min-height:16px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .action-cell-renderer,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .action-cell-renderer{cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-start,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-center,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-end,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell *,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell *{vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell),.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell){padding:6px 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline .content,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline .content{overflow:initial;white-space:normal;text-overflow:unset}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:32px;height:32px;margin:1px auto;overflow:hidden;border-radius:50%;position:relative;z-index:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar img,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:inherit;max-height:inherit}.o-table .o-table-container .mat-mdc-table .o-action-cell-renderer{display:inline-block;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell{overflow:hidden;position:relative;box-sizing:border-box;padding:0 12px;vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select.mat-header-select-all-with-title{padding-right:12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:not(.o-column-image){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-header-indicator-numbered{font-size:8px;position:absolute;text-align:center;display:inline-block;width:18px;height:18px;line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;bottom:-10px;right:-9px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .column-filter-icon{cursor:pointer;font-size:18px;width:18px;height:18px;line-height:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{flex:1;display:block;place-content:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container{cursor:default;min-height:20px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start .mat-sort-header-button{text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center .mat-sort-header-button{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end .mat-sort-header-button{text-align:right}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select{box-sizing:content-box;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select:not(.mat-header-select-all-with-title),.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select:not(.mat-header-select-all-with-title){width:30px}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select .mat-checkbox-layout,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select .mat-checkbox-layout{text-overflow:ellipsis;overflow:hidden;display:inline}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-expandable,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-expandable{width:40px;box-sizing:content-box;padding:0 0 0 24px;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell .row-container-expanded{overflow:hidden;display:flex}.o-table .o-table-container .o-table-disabled-blocker{bottom:0;left:0;position:absolute;right:0;top:0;z-index:100}.o-table .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .spinner-container-scrollable{position:relative}.o-table.o-table-fixed{display:flex}.o-table.o-table-fixed .o-table-container{display:flex;flex-direction:column}.o-table.o-table-fixed .o-table-body{display:flex;flex:1}.o-table.o-table-fixed .o-table-body .o-table-overflow{flex:1;overflow-y:auto}.mat-mdc-tooltip.o-table-cell-tooltip{word-wrap:break-word;overflow:hidden;min-width:140px}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1$1.MatDialog }, { type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: OFormComponent, decorators: [{
                         type: Optional