@datorama/core 22.10.0 → 22.10.1-rc.1

package/bundles/datorama-core.umd.js

@@ -8430,6 +8430,91 @@
         return !!window.Cypress;
     }
 
+    /**
+     * @license
+     * Copyright Datorama. All Rights Reserved.
+     *
+     * Use of this source code is governed by an Apache License 2.0 license that can be
+     * found in the LICENSE file at https://github.com/datorama/client-core/blob/master/LICENSE
+     */
+    var DatoTriggerSingle = /** @class */ (function () {
+        function DatoTriggerSingle(cdr) {
+            this.cdr = cdr;
+            this._placeholder = '';
+        }
+        Object.defineProperty(DatoTriggerSingle.prototype, "placeholder", {
+            set: function (value) {
+                this._placeholder = value;
+                this.cdr.detectChanges();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(DatoTriggerSingle.prototype, "context", {
+            set: function (value) {
+                this._model = { $implicit: value };
+                this.cdr.detectChanges();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(DatoTriggerSingle.prototype, "hidePlaceholder", {
+            get: function () {
+                return !this._model || !this._model.$implicit;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        DatoTriggerSingle.prototype.ngOnInit = function () {
+            this.cdr.detach();
+        };
+        Object.defineProperty(DatoTriggerSingle.prototype, "getLabel", {
+            get: function () {
+                return this._model && this._model.$implicit && this._model.$implicit[this.labelKey];
+            },
+            enumerable: true,
+            configurable: true
+        });
+        DatoTriggerSingle.prototype.triggerChangeDetection = function () {
+            this.cdr.detectChanges();
+        };
+        DatoTriggerSingle.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", core.TemplateRef)
+        ], DatoTriggerSingle.prototype, "loadingTemplate", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", DatoSelectActiveDirective)
+        ], DatoTriggerSingle.prototype, "active", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], DatoTriggerSingle.prototype, "placeholder", null);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], DatoTriggerSingle.prototype, "labelKey", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], DatoTriggerSingle.prototype, "context", null);
+        DatoTriggerSingle = __decorate([
+            core.Component({
+                selector: 'dato-trigger-single',
+                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: core.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}"]
+            }),
+            __metadata("design:paramtypes", [core.ChangeDetectorRef])
+        ], DatoTriggerSingle);
+        return DatoTriggerSingle;
+    }());
+
     /**
      * @license
      * Copyright Datorama. All Rights Reserved.
@@ -9311,6 +9396,9 @@
                 setTimeout(function () { return _this.datoOverlay.scheduleUpdate(); }, 0);
             }
         };
+        DatoSelectComponent.prototype.triggerChangeDetectionInDatoSingle = function () {
+            this.datoTriggerSingle.triggerChangeDetection();
+        };
         DatoSelectComponent.ctorParameters = function () { return [
             { type: core.ChangeDetectorRef },
             { type: DatoTranslateService },
@@ -9320,6 +9408,10 @@
             { type: undefined, decorators: [{ type: core.Attribute, args: ['datoSize',] }] },
             { type: String, decorators: [{ type: core.Attribute, args: ['width',] }] }
         ]; };
+        __decorate([
+            core.ViewChild('datoTriggerSingle'),
+            __metadata("design:type", DatoTriggerSingle)
+        ], DatoSelectComponent.prototype, "datoTriggerSingle", void 0);
         __decorate([
             core.ViewChild('dropdown'),
             __metadata("design:type", core.TemplateRef)
@@ -9486,7 +9578,7 @@
         DatoSelectComponent = __decorate([
             core.Component({
                 selector: 'dato-select',
-                template: "<section class=\"dato-select__trigger\" [class.dato-select--naked]=\"_naked\" [class.dato-select--disabled]=\"_disabled\">\n\n  <div class=\"dato-select__single\" *ngIf=\"isSingle\" [ngClass]=\"_dropdownClass\">\n    <dato-input [class.force-hide]=\"(!open && isCombo) || !isCombo\" [placeholder]=\"searchPlaceholder | translate\"\n      (keyup)=\"keyup($event)\" [isFocused]=\"_focus\" [isLoading]=\"isLoading\" [formControl]=\"searchControl\" type=\"search\">\n    </dato-input>\n\n    <dato-trigger-single [loadingTemplate]=\"loadingTemplate\" [active]=\"active\" datoErrorValidationBorderAnchor tabindex=\"0\" [labelKey]=\"labelKey\"\n      [context]=\"_model[0]\" [class.force-hide]=\"open && isCombo\" [placeholder]=\"placeholder | translate\"\n      class=\"ontop-overlay\" (keydown)=\"preventBodyScroll($event)\" (keyup)=\"keyup($event)\" (click)=\"openDropdown()\">\n    </dato-trigger-single>\n  </div>\n\n  <dato-trigger-multi [loadingTemplate]=\"loadingTemplate\" [options]=\"_model\" datoErrorValidationBorderAnchor [control]=\"searchControl\"\n    [placeholder]=\"placeholder | translate\" [labelKey]=\"labelKey\" [idKey]=\"idKey\" (keyup)=\"keyup($event)\"\n    [isLoading]=\"isLoading\" [keepFocus]=\"keepFocus\" [limitTo]=\"limitTo\" [clickOutside]=\"_clickOutside\" [isSortable]=\"isSortable\"\n                      [selectAllChipTxt]=\"selectAllChipTxt\"\n                      [showSelectAllChip]=\"selectAllChipTxt && showSelectAllChip\"\n                      (unselectAll)=\"checkAll(false)\"\n    (removeOption)=\"removeOption($event)\" (reorderOptions)=\"reorderOptions($event)\" *ngIf=\"isMulti\"\n    (click)=\"openDropdown($event)\"></dato-trigger-multi>\n\n</section>\n\n<ng-template #dropdown>\n  <section class=\"dato-select__dropdown-container\" tabindex=\"0\" (keyup)=\"keyup($event)\">\n\n    <!-- HEADER -->\n\n    <header class=\"dato-select__header dato-select__option dato-select__option--simple\" data-is-floating\n      *ngIf=\"isMulti && allowSelectAll\" [class.force-hide]=\"_showEmptyResults\" [class.ml-10]=\"containsGroups\">\n      <dato-checkbox [checked]=\"_isAllChecked\" (check)=\"checkAll($event)\"\n        [indeterminatelyChecked]=\"_isIndeterminatelyChecked\">\n        {{'core.select-all' | translate}}<span class=\"primary-300-color note-italic ml-5\">{{_count}}</span>\n      </dato-checkbox>\n    </header>\n\n    <!-- END HEADER -->\n\n    <!-- DROPDOWN -->\n\n    <div class=\"dato-select__dropdown\">\n\n      <ng-content></ng-content>\n\n      <dato-select-empty [show]=\"_showEmptyResults\">{{_noItemsLabel}}</dato-select-empty>\n      <div class=\"dato-select__option dato-select-infinite-spinner\" data-is-floating *ngIf=\"infiniteScrollLoading\">\n        <span class=\"dato-input__spinner\"></span>\n      </div>\n\n    </div>\n\n    <!-- END DROPDOWN -->\n\n\n    <!-- FOOTER -->\n\n    <footer class=\"dato-select__footer d-flex\" [class.with-actions]=\"_withActions\">\n\n      <ng-content select=\"[datoSelectFooter]\"></ng-content>\n\n      <ng-container *ngIf=\"_withActions\">\n        <dato-link class=\"mr-20\" datoType=\"secondary\" (click)=\"close()\">Cancel</dato-link>\n        <dato-button datoSize=\"sm\" (click)=\"save.emit(); close();\">Save</dato-button>\n      </ng-container>\n\n    </footer>\n\n    <!-- END FOOTER -->\n\n  </section>\n\n</ng-template>\n",
+                template: "<section class=\"dato-select__trigger\" [class.dato-select--naked]=\"_naked\" [class.dato-select--disabled]=\"_disabled\">\n\n  <div class=\"dato-select__single\" *ngIf=\"isSingle\" [ngClass]=\"_dropdownClass\">\n    <dato-input [class.force-hide]=\"(!open && isCombo) || !isCombo\" [placeholder]=\"searchPlaceholder | translate\"\n      (keyup)=\"keyup($event)\" [isFocused]=\"_focus\" [isLoading]=\"isLoading\" [formControl]=\"searchControl\" type=\"search\">\n    </dato-input>\n\n    <dato-trigger-single #datoTriggerSingle [loadingTemplate]=\"loadingTemplate\" [active]=\"active\" datoErrorValidationBorderAnchor tabindex=\"0\" [labelKey]=\"labelKey\"\n      [context]=\"_model[0]\" [class.force-hide]=\"open && isCombo\" [placeholder]=\"placeholder | translate\"\n      class=\"ontop-overlay\" (keydown)=\"preventBodyScroll($event)\" (keyup)=\"keyup($event)\" (click)=\"openDropdown()\">\n    </dato-trigger-single>\n  </div>\n\n  <dato-trigger-multi [loadingTemplate]=\"loadingTemplate\" [options]=\"_model\" datoErrorValidationBorderAnchor [control]=\"searchControl\"\n    [placeholder]=\"placeholder | translate\" [labelKey]=\"labelKey\" [idKey]=\"idKey\" (keyup)=\"keyup($event)\"\n    [isLoading]=\"isLoading\" [keepFocus]=\"keepFocus\" [limitTo]=\"limitTo\" [clickOutside]=\"_clickOutside\" [isSortable]=\"isSortable\"\n                      [selectAllChipTxt]=\"selectAllChipTxt\"\n                      [showSelectAllChip]=\"selectAllChipTxt && showSelectAllChip\"\n                      (unselectAll)=\"checkAll(false)\"\n    (removeOption)=\"removeOption($event)\" (reorderOptions)=\"reorderOptions($event)\" *ngIf=\"isMulti\"\n    (click)=\"openDropdown($event)\"></dato-trigger-multi>\n\n</section>\n\n<ng-template #dropdown>\n  <section class=\"dato-select__dropdown-container\" tabindex=\"0\" (keyup)=\"keyup($event)\">\n\n    <!-- HEADER -->\n\n    <header class=\"dato-select__header dato-select__option dato-select__option--simple\" data-is-floating\n      *ngIf=\"isMulti && allowSelectAll\" [class.force-hide]=\"_showEmptyResults\" [class.ml-10]=\"containsGroups\">\n      <dato-checkbox [checked]=\"_isAllChecked\" (check)=\"checkAll($event)\"\n        [indeterminatelyChecked]=\"_isIndeterminatelyChecked\">\n        {{'core.select-all' | translate}}<span class=\"primary-300-color note-italic ml-5\">{{_count}}</span>\n      </dato-checkbox>\n    </header>\n\n    <!-- END HEADER -->\n\n    <!-- DROPDOWN -->\n\n    <div class=\"dato-select__dropdown\">\n\n      <ng-content></ng-content>\n\n      <dato-select-empty [show]=\"_showEmptyResults\">{{_noItemsLabel}}</dato-select-empty>\n      <div class=\"dato-select__option dato-select-infinite-spinner\" data-is-floating *ngIf=\"infiniteScrollLoading\">\n        <span class=\"dato-input__spinner\"></span>\n      </div>\n\n    </div>\n\n    <!-- END DROPDOWN -->\n\n\n    <!-- FOOTER -->\n\n    <footer class=\"dato-select__footer d-flex\" [class.with-actions]=\"_withActions\">\n\n      <ng-content select=\"[datoSelectFooter]\"></ng-content>\n\n      <ng-container *ngIf=\"_withActions\">\n        <dato-link class=\"mr-20\" datoType=\"secondary\" (click)=\"close()\">Cancel</dato-link>\n        <dato-button datoSize=\"sm\" (click)=\"save.emit(); close();\">Save</dato-button>\n      </ng-container>\n\n    </footer>\n\n    <!-- END FOOTER -->\n\n  </section>\n\n</ng-template>\n",
                 preserveWhitespaces: false,
                 providers: [valueAccessor$3, DatoOverlay],
                 encapsulation: core.ViewEncapsulation.None,
@@ -9504,88 +9596,6 @@
         return DatoSelectComponent;
     }(BaseCustomControl));
 
-    /**
-     * @license
-     * Copyright Datorama. All Rights Reserved.
-     *
-     * Use of this source code is governed by an Apache License 2.0 license that can be
-     * found in the LICENSE file at https://github.com/datorama/client-core/blob/master/LICENSE
-     */
-    var DatoTriggerSingle = /** @class */ (function () {
-        function DatoTriggerSingle(cdr) {
-            this.cdr = cdr;
-            this._placeholder = '';
-        }
-        Object.defineProperty(DatoTriggerSingle.prototype, "placeholder", {
-            set: function (value) {
-                this._placeholder = value;
-                this.cdr.detectChanges();
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(DatoTriggerSingle.prototype, "context", {
-            set: function (value) {
-                this._model = { $implicit: value };
-                this.cdr.detectChanges();
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(DatoTriggerSingle.prototype, "hidePlaceholder", {
-            get: function () {
-                return !this._model || !this._model.$implicit;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        DatoTriggerSingle.prototype.ngOnInit = function () {
-            this.cdr.detach();
-        };
-        Object.defineProperty(DatoTriggerSingle.prototype, "getLabel", {
-            get: function () {
-                return this._model && this._model.$implicit && this._model.$implicit[this.labelKey];
-            },
-            enumerable: true,
-            configurable: true
-        });
-        DatoTriggerSingle.ctorParameters = function () { return [
-            { type: core.ChangeDetectorRef }
-        ]; };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", core.TemplateRef)
-        ], DatoTriggerSingle.prototype, "loadingTemplate", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", DatoSelectActiveDirective)
-        ], DatoTriggerSingle.prototype, "active", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], DatoTriggerSingle.prototype, "placeholder", null);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], DatoTriggerSingle.prototype, "labelKey", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], DatoTriggerSingle.prototype, "context", null);
-        DatoTriggerSingle = __decorate([
-            core.Component({
-                selector: 'dato-trigger-single',
-                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: core.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}"]
-            }),
-            __metadata("design:paramtypes", [core.ChangeDetectorRef])
-        ], DatoTriggerSingle);
-        return DatoTriggerSingle;
-    }());
-
     /**
      * @license
      * Copyright Datorama. All Rights Reserved.
@@ -15654,7 +15664,7 @@
         });
         DatoGridControllerComponent.prototype.ngOnDestroy = function () {
             this.contentInit.complete();
-            this.tooltip && this.clearTooltip();
+            this.clearTooltip();
             this.rowHoverComponent && this.rowHoverComponent.destroy();
             this.rowHoverComponent = null;
         };
@@ -15881,40 +15891,51 @@
                 });
                 this.addOnHoverElement();
             }
-            agGrid.cellMouseOver
-                .pipe(operators.filter(function (_a) {
-                var node = _a.node, column = _a.column;
-                return lastHoveredCell !== node.id + "-" + column.getColId();
-            }), ngxTakeUntilDestroy.untilDestroyed(this))
-                .subscribe(function (event) {
-                lastHoveredCell = event.node.id + "-" + event.column.getColId();
+            agGrid.cellMouseOver.pipe(ngxTakeUntilDestroy.untilDestroyed(this)).subscribe(function (event) {
+                var node = event.node, column = event.column;
+                if (lastHoveredCell === node.id + "-" + column.getColId()) {
+                    clearTimeout(_this.cellMouseOutTimer);
+                    return;
+                }
+                lastHoveredCell = node.id + "-" + column.getColId();
                 _this.showTooltip(event);
                 var row = event.event.target.parentElement;
-                if (onHoverEnabled && (event.node.group === false || isNil(event.node.group)) && _this.lastHoveredRow !== row) {
+                if (onHoverEnabled && (node.group === false || isNil(node.group)) && _this.lastHoveredRow !== row) {
                     var previousNode = _this.lastHoveredRow;
                     _this.lastHoveredRow = row;
                     _this.toggleRowHoverClass([previousNode, _this.lastHoveredRow]);
                     _this.setOnHoverState(true, event);
                 }
             });
-            var onTooltipOut = rxjs.merge(rxjs.fromEvent(bodyViewport, 'scroll'), rxjs.fromEvent(this.agGridEl, 'mouseleave'), agGrid.cellMouseOut);
-            onTooltipOut
+            var onTooltipOut = rxjs.merge(rxjs.fromEvent(bodyViewport, 'scroll'), rxjs.fromEvent(this.agGridEl, 'mouseleave'));
+            onTooltipOut.pipe(ngxTakeUntilDestroy.untilDestroyed(this)).subscribe(function () {
+                lastHoveredCell = null;
+                _this.clearTooltip();
+            });
+            agGrid.cellMouseOut
                 .pipe(operators.filter(function () { return !isNil(_this.tooltip); }), ngxTakeUntilDestroy.untilDestroyed(this))
                 .subscribe(function () {
-                _this.clearTooltip();
+                _this.cellMouseOutTimer = window.setTimeout(function () { return _this.clearTooltip(); });
             });
         };
         /**
          * Dispose the tooltip
          */
         DatoGridControllerComponent.prototype.clearTooltip = function () {
-            this.tooltip.dispose();
+            this.tooltip && this.tooltip.dispose();
             this.tooltip = null;
         };
         DatoGridControllerComponent.prototype.showTooltip = function (event) {
             var cell = event.event.target;
+            if (cell.tagName === 'SPAN' && cell.scrollWidth === 0) {
+                cell = cell.parentElement;
+            }
+            if (event.colDef.editable) {
+                cell = cell.querySelector('.value-wrapper') || cell;
+            }
             var textOverflow = cell.offsetWidth < cell.scrollWidth;
             if (textOverflow) {
+                clearTimeout(this.cellMouseOutTimer);
                 var params = { cell: cell, value: cell.innerText };
                 isNil(this.tooltip) ? this.createAndShowTooltip(params) : this.updateTooltip(params);
             }