@datorama/core 22.9.6-rc → 22.9.7

package/fesm2015/datorama-core.js

@@ -8307,7 +8307,7 @@ __decorate([
 DatoTriggerSingle = __decorate([
     Component({
         selector: 'dato-trigger-single',
-        template: "<ng-template [ngClass]=\"{'hidden' : true}\" *ngIf=\"!loadingTemplate\" [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n<ng-container\n        *ngIf=\"active && !hidePlaceholder\"\n        [ngTemplateOutlet]=\"active.tpl\"\n        [ngTemplateOutletContext]=\"_model\">\n</ng-container>\n<ng-container *ngIf=\"!active\">{{getLabel | translate}}</ng-container>\n<span class=\"dato-select__placeholder\" *ngIf=\"hidePlaceholder\">{{_placeholder}}</span>\n<dato-icon datoIcon=\"arrow-down\" datoSize=\"sm\" class=\"dato-select__single__arrow\"></dato-icon>\n",
+        template: "<ng-template *ngIf=\"loadingTemplate\" [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n<ng-container\n        *ngIf=\"active && !hidePlaceholder\"\n        [ngTemplateOutlet]=\"active.tpl\"\n        [ngTemplateOutletContext]=\"_model\">\n</ng-container>\n<ng-container *ngIf=\"!active\">{{getLabel | translate}}</ng-container>\n<span class=\"dato-select__placeholder\" *ngIf=\"hidePlaceholder\">{{_placeholder}}</span>\n<dato-icon datoIcon=\"arrow-down\" datoSize=\"sm\" class=\"dato-select__single__arrow\"></dato-icon>\n",
         changeDetection: ChangeDetectionStrategy.OnPush,
         styles: [":host{display:block;position:relative;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host dato-icon{position:absolute;top:50%;transform:translateY(-50%);right:10px}"]
     }),
@@ -10640,22 +10640,35 @@ function deepmerge(target, source, optionsArgument = { arrayMerge: useDestinatio
  * found in the LICENSE file at https://github.com/datorama/client-core/blob/master/LICENSE
  */
 let DatoGridV2NoDataOverlayComponent = class DatoGridV2NoDataOverlayComponent {
-    constructor(gridQuery, gridService, element) {
+    constructor(gridQuery, gridService, element, cdr) {
         this.gridQuery = gridQuery;
         this.gridService = gridService;
         this.element = element;
+        this.cdr = cdr;
         this.config = {};
     }
-    get showImage() {
-        const elParent = this.element.nativeElement.parentElement;
-        if (elParent.classList.contains('ag-overlay-wrapper')) {
-            return elParent.offsetHeight >= 390;
+    /** Adjust the overlay to the grid body viewport height */
+    get overlayStyles() {
+        if (this.gridBody) {
+            const { offsetHeight, offsetTop } = this.gridBody;
+            return {
+                height: `${offsetHeight}px`,
+                marginTop: `${offsetTop}px`
+            };
         }
-        return true;
+        return null;
     }
     ngOnInit() {
+        const grid = this.element.nativeElement.closest('dato-grid-v2');
+        this.gridBody = grid && grid.querySelector('.ag-body-viewport');
         this.filterActive$ = this.gridQuery.filterActive$;
-        this.hasError$ = this.gridQuery.isServerSide ? this.gridQuery.serverSideError$ : of(false);
+        this.hasError$ = this.gridQuery.isServerSide
+            ? this.gridQuery.serverSideError$.pipe(tap(() => {
+                setTimeout(() => {
+                    this.cdr.detectChanges();
+                });
+            }))
+            : of(false);
         this.initDefaultConfig();
         const gridConfig = this.gridQuery.getGridOptions().overlaysConfig || {};
         const userConfig = deepmerge(gridConfig, this.config);
@@ -10665,6 +10678,27 @@ let DatoGridV2NoDataOverlayComponent = class DatoGridV2NoDataOverlayComponent {
         this.gridService.clearAllFilters();
     }
     agInit(params) { }
+    isIconHidden() {
+        if (this.gridBody) {
+            const el = this.element.nativeElement;
+            if (el) {
+                const container = el.querySelector('.container');
+                const icon = container.querySelector('img');
+                let heightOfElements = 0;
+                /** hide the icon until next change detection cycle */
+                if (icon.height === 0) {
+                    return true;
+                }
+                for (const child of container.children) {
+                    const childHeight = child.offsetHeight || child.height || 0;
+                    const childMarginBottom = toNumber(child.style.marginBottom.replace('px', ''));
+                    heightOfElements += childHeight + childMarginBottom;
+                }
+                return heightOfElements > this.gridBody.offsetHeight;
+            }
+        }
+        return true;
+    }
     initDefaultConfig() {
         const { enableSearch } = this.gridQuery.getGridOptions();
         this.defaultConfig = {
@@ -10686,20 +10720,29 @@ let DatoGridV2NoDataOverlayComponent = class DatoGridV2NoDataOverlayComponent {
 DatoGridV2NoDataOverlayComponent.ctorParameters = () => [
     { type: GridQuery },
     { type: GridService },
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
 ];
 __decorate([
     Input(),
     __metadata("design:type", Object)
 ], DatoGridV2NoDataOverlayComponent.prototype, "config", void 0);
+__decorate([
+    HostBinding('style'),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], DatoGridV2NoDataOverlayComponent.prototype, "overlayStyles", null);
 DatoGridV2NoDataOverlayComponent = __decorate([
     Component({
         selector: 'dato-grid-v2-no-data-overlay',
-        template: "<div class=\"container d-flex-column align-center\">\n    <ng-container *ngIf=\"(hasError$ | async) === false; else error\">\n          <ng-container *ngIf=\"(filterActive$ | async) === true; else noData\">\n              <ng-container *ngTemplateOutlet=\"imgNText; context: {$implicit: mergedConfig.noResult }\"></ng-container>\n              <div class=\"d-flex items-center\">\n                  <div class=\"dato-simple primary-400-color\">{{'core.try-to-adjust-or' | translate}}&nbsp;</div>\n                  <dato-link (click)=\"clearFilters()\">{{ 'core.clear-filters' | translate }}</dato-link>\n              </div>\n          </ng-container>\n          <ng-template #noData>\n              <ng-container *ngTemplateOutlet=\"imgNText; context: {$implicit: mergedConfig.noData}\"></ng-container>\n              <ng-content select=\"[no-data-content]\"></ng-content>\n          </ng-template>\n\n    </ng-container>\n    <ng-template #error>\n        <ng-container *ngTemplateOutlet=\"imgNText; context: {$implicit: mergedConfig.serverSideError}\"></ng-container>\n        <div #errorContent><ng-content select=\"[server-error-content]\"></ng-content></div>\n        <div class=\"dato-simple primary-400-color\" *ngIf=\"errorContent.children.length === 0\">{{'core.try-to-refresh-or-contact' | translate}}&nbsp;</div>\n    </ng-template>\n</div>\n\n<ng-template #imgNText let-view>\n    <img class=\"mb-30\" [datoStaticSrc]=\"view.icon\" *ngIf=\"showImage && view.icon\">\n    <div class=\"dato-simple-bold primary-500-color mb-3\">{{ view.text | translate }}</div>\n</ng-template>\n",
+        template: "<div class=\"container d-flex-column align-center height-100 p-4\">\n    <ng-container *ngIf=\"(hasError$ | async) === false; else error\">\n          <ng-container *ngIf=\"(filterActive$ | async) === true; else noData\">\n              <ng-container *ngTemplateOutlet=\"imgNText; context: {$implicit: mergedConfig.noResult }\"></ng-container>\n              <div class=\"d-flex items-center\">\n                  <div class=\"dato-simple primary-400-color\">{{'core.try-to-adjust-or' | translate}}&nbsp;</div>\n                  <dato-link (click)=\"clearFilters()\">{{ 'core.clear-filters' | translate }}</dato-link>\n              </div>\n          </ng-container>\n          <ng-template #noData>\n              <ng-container *ngTemplateOutlet=\"imgNText; context: {$implicit: mergedConfig.noData}\"></ng-container>\n              <ng-content select=\"[no-data-content]\"></ng-content>\n          </ng-template>\n\n    </ng-container>\n    <ng-template #error>\n        <ng-container *ngTemplateOutlet=\"imgNText; context: {$implicit: mergedConfig.serverSideError}\"></ng-container>\n        <div #errorContent><ng-content select=\"[server-error-content]\"></ng-content></div>\n        <div class=\"dato-simple primary-400-color\" *ngIf=\"errorContent.children.length === 0\">{{'core.try-to-refresh-or-contact' | translate}}&nbsp;</div>\n    </ng-template>\n</div>\n\n<ng-template #imgNText let-view>\n    <img [datoStaticSrc]=\"view.icon\" *ngIf=\"view.icon\" [hidden]=\"isIconHidden()\" [style.marginBottom]=\"'30px'\">\n    <div class=\"dato-simple-bold primary-500-color\" [style.marginBottom]=\"'3px'\">{{ view.text | translate }}</div>\n</ng-template>\n",
         changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host{pointer-events:all}"]
+        styles: [":host{pointer-events:all;overflow:auto}"]
     }),
-    __metadata("design:paramtypes", [GridQuery, GridService, ElementRef])
+    __metadata("design:paramtypes", [GridQuery,
+        GridService,
+        ElementRef,
+        ChangeDetectorRef])
 ], DatoGridV2NoDataOverlayComponent);
 
 /**
@@ -14168,7 +14211,7 @@ DatoGridV2Component = __decorate([
         template: "<ag-grid-angular data-auto-id=\"grid\" class=\"dato-grid ag-theme-material\" [class.has-background]=\"enableBackground\" [class.enable-v2_1]=\"enableV2_1\"\n                 [class.with-multi-selection-col]=\"gridOptions?.showMultiSelectionCheckboxes\" [class.pivot-mode]=\"isPivotMode\">\n</ag-grid-angular>\n<dato-grid-pagination-v2 [class.has-background]=\"enableBackground\"></dato-grid-pagination-v2>\n",
         changeDetection: ChangeDetectionStrategy.OnPush,
         encapsulation: ViewEncapsulation.None,
-        styles: ["dato-grid-v2{flex-grow:1;display:flex;flex-direction:column;position:relative}dato-grid-v2 .dato-grid,dato-grid-v2 dato-grid-pagination-v2{position:absolute;left:0;right:0;bottom:0}dato-grid-v2 .dato-grid{top:0;bottom:50px}dato-grid-v2 .grid-hover-actions{position:absolute;z-index:2;transition:opacity .2s ease-in-out}dato-grid-v2 .ag-row-drag{width:initial!important}dato-grid-v2 .da-grid-icon{display:inline-block;line-height:31px;vertical-align:middle;width:initial;height:initial}dato-grid-v2 .da-grid-icon.drag{width:14px;height:14px;margin-right:6px;opacity:0;transition:opacity .3s;transform:translateY(-50%)}dato-grid-v2 .da-grid-icon.folder{width:18px;height:35px;margin:0 8px}dato-grid-v2 .ag-row.ag-row-hover .da-grid-icon.drag{opacity:1}dato-grid-v2 ag-grid-angular.tree .ag-group-contracted,dato-grid-v2 ag-grid-angular.tree .ag-group-expanded{display:inline-block;width:18px;text-align:center}dato-grid-v2 ag-grid-angular.tree .ag-group-checkbox{display:none}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-empty-folder .folder{margin-left:26px}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-1 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 1)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-1{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-2 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 2)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-2{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-3 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 3)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-3{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-4 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 4)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-4{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row div[col-id=ag-Grid-AutoColumn]{padding-left:0}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell{display:flex;align-items:center}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell .ag-group-value>span{display:inline-block;vertical-align:middle}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell .initials{border-radius:50%;padding:4px;margin-right:8px;margin-left:20px;width:28px;height:28px;display:inline-block;text-align:center}dato-grid-v2 ag-grid-angular.tree .ag-row-group-leaf-indent{margin-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-selection-checkbox .ag-icon-checkbox-indeterminate:before{text-align:center;content:'-';display:inline-block;position:absolute;top:0;left:0;right:0;bottom:0;line-height:.5;color:#fff}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell{line-height:33px}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell.dato-editable-cell{line-height:29px}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell.ag-cell-inline-editing{height:35px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell{line-height:42px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell.dato-editable-cell{line-height:38px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell.ag-cell-inline-editing{height:44px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell{line-height:48px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell.dato-editable-cell{line-height:44px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell.ag-cell-inline-editing{height:50px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell{line-height:57px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell.dato-editable-cell{line-height:53px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell.ag-cell-inline-editing{height:59px}dato-grid-v2 ag-grid-angular .ag-cell.checkbox-selection-cell{display:flex}dato-grid-v2 .ag-menu .da-grid-icon svg{vertical-align:middle}dato-grid-v2 .ag-header-cell-sortable .ag-sort-none-icon{opacity:0;transition:opacity .2s}dato-grid-v2 .ag-header-cell-sortable:hover .ag-sort-none-icon{opacity:1}dato-grid-v2 .group-contracted-icon,dato-grid-v2 .group-expanded-icon{width:7px}dato-grid-v2 .group-expanded-icon{transform:rotate(90deg)}dato-grid-v2 .dato-grid .ag-cell{border-top:0;border-bottom:0}.ag-dnd-ghost{min-width:100px;border:none;display:flex;justify-content:flex-start;align-content:center;align-items:center;cursor:-webkit-grabbing;cursor:grabbing;z-index:10000000}.ag-dnd-ghost .da-grid-icon.column-move-hide svg{height:18px;width:18px}.ag-dnd-ghost .da-grid-icon.column-move svg,.ag-dnd-ghost .da-grid-icon.column-move-pin svg{height:16px;width:16px}"]
+        styles: ["dato-grid-v2{flex-grow:1;display:flex;flex-direction:column;position:relative}dato-grid-v2 .dato-grid,dato-grid-v2 dato-grid-pagination-v2{position:absolute;left:0;right:0;bottom:0}dato-grid-v2 .dato-grid{top:0;bottom:50px}dato-grid-v2 .grid-hover-actions{position:absolute;z-index:2;transition:opacity .2s ease-in-out}dato-grid-v2 .ag-row-drag{width:initial!important}dato-grid-v2 .da-grid-icon{display:inline-block;line-height:31px;vertical-align:middle;width:initial;height:initial}dato-grid-v2 .da-grid-icon.drag{width:14px;height:14px;margin-right:6px;opacity:0;transition:opacity .3s;transform:translateY(-50%)}dato-grid-v2 .da-grid-icon.folder{width:18px;height:35px;margin:0 8px}dato-grid-v2 .ag-row.ag-row-hover .da-grid-icon.drag{opacity:1}dato-grid-v2 ag-grid-angular.tree .ag-group-contracted,dato-grid-v2 ag-grid-angular.tree .ag-group-expanded{display:inline-block;width:18px;text-align:center}dato-grid-v2 ag-grid-angular.tree .ag-group-checkbox{display:none}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-empty-folder .folder{margin-left:26px}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-1 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 1)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-1{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-2 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 2)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-2{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-3 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 3)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-3{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row.ag-row-level-4 .ag-cell-wrapper .ag-row-drag{padding-right:calc(55px * 4)}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-row-group-indent-4{margin-left:0!important;padding-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-row div[col-id=ag-Grid-AutoColumn]{padding-left:0}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell{display:flex;align-items:center}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell .ag-group-value>span{display:inline-block;vertical-align:middle}dato-grid-v2 ag-grid-angular.tree .ag-row .ag-cell .initials{border-radius:50%;padding:4px;margin-right:8px;margin-left:20px;width:28px;height:28px;display:inline-block;text-align:center}dato-grid-v2 ag-grid-angular.tree .ag-row-group-leaf-indent{margin-left:0!important}dato-grid-v2 ag-grid-angular.tree .ag-selection-checkbox .ag-icon-checkbox-indeterminate:before{text-align:center;content:'-';display:inline-block;position:absolute;top:0;left:0;right:0;bottom:0;line-height:.5;color:#fff}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell{line-height:33px}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell.dato-editable-cell{line-height:29px}dato-grid-v2 ag-grid-angular.row-height-35 .ag-cell.ag-cell-inline-editing{height:35px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell{line-height:42px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell.dato-editable-cell{line-height:38px}dato-grid-v2 ag-grid-angular.row-height-44 .ag-cell.ag-cell-inline-editing{height:44px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell{line-height:48px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell.dato-editable-cell{line-height:44px}dato-grid-v2 ag-grid-angular.row-height-50 .ag-cell.ag-cell-inline-editing{height:50px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell{line-height:57px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell.dato-editable-cell{line-height:53px}dato-grid-v2 ag-grid-angular.row-height-59 .ag-cell.ag-cell-inline-editing{height:59px}dato-grid-v2 ag-grid-angular .ag-cell.checkbox-selection-cell{display:flex}dato-grid-v2 .ag-menu .da-grid-icon svg{vertical-align:middle}dato-grid-v2 .ag-header-cell-sortable .ag-sort-none-icon{opacity:0;transition:opacity .2s}dato-grid-v2 .ag-header-cell-sortable:hover .ag-sort-none-icon{opacity:1}dato-grid-v2 .group-contracted-icon,dato-grid-v2 .group-expanded-icon{width:7px}dato-grid-v2 .group-expanded-icon{transform:rotate(90deg)}dato-grid-v2 .dato-grid .ag-cell{border-top:0;border-bottom:0}dato-grid-v2 .ag-overlay-wrapper ng-component{display:flex}.ag-dnd-ghost{min-width:100px;border:none;display:flex;justify-content:flex-start;align-content:center;align-items:center;cursor:-webkit-grabbing;cursor:grabbing;z-index:10000000}.ag-dnd-ghost .da-grid-icon.column-move-hide svg{height:18px;width:18px}.ag-dnd-ghost .da-grid-icon.column-move svg,.ag-dnd-ghost .da-grid-icon.column-move-pin svg{height:16px;width:16px}"]
     }),
     __metadata("design:paramtypes", [DatoGridControllerComponent, ElementRef])
 ], DatoGridV2Component);
@@ -22716,7 +22759,7 @@ function fixNgLeaks() {
     };
 }
 
-window.coreVersion = '22.9.5';
+window.coreVersion = '22.9.7';
 
 /**
  * @license