@datorama/core 22.2.4 → 22.5.1

package/bundle.scss

@@ -11199,8 +11199,30 @@ dato-date-picker .icon-text-border {
     border-radius: 2px;
 }
 
+.dato-date-picker-trigger {
+    font-weight: 600;
+    color: themify(primary-300);
+}
+
 .dato-date-picker-trigger dato-icon {
     margin-right: 7px;
+    color: themify(primary-300);
+}
+
+.dato-date-picker-trigger:hover {
+    color: themify(primary-400);
+}
+
+.dato-date-picker-trigger:hover dato-icon {
+    color: themify(primary-400);
+}
+
+.dato-date-picker-trigger.open {
+    color: themify(accent-400);
+}
+
+.dato-date-picker-trigger.open dato-icon {
+    color: themify(accent-400);
 }
 
 .date-picker-months-0 [datoicon="up"] {

package/bundles/datorama-core.umd.js

@@ -8748,8 +8748,8 @@
                 }
             }
             this.onChange(this._model);
-            this.datoOverlay.scheduleUpdate();
             this.cdr.markForCheck();
+            this.asyncUpdateDropdownPosition();
         };
         DatoSelectComponent.prototype.reorderOptions = function (newOrder) {
             this._model = newOrder;
@@ -8770,9 +8770,7 @@
             updateDisabled && this.updateDisabledState();
             this.onChange(this._model);
             this.cdr.markForCheck();
-            if (this.datoOverlay.attached) {
-                this.datoOverlay.scheduleUpdate();
-            }
+            this.asyncUpdateDropdownPosition();
         };
         DatoSelectComponent.prototype.preventBodyScroll = function (event) {
             if (isArrowUpDown(event)) {
@@ -9027,7 +9025,7 @@
                         _this.searchTerm = value;
                         _this.keyManager.setActiveItem(-1);
                         _this.cdr.markForCheck();
-                        _this.datoOverlay && _this.datoOverlay.scheduleUpdate();
+                        _this.asyncUpdateDropdownPosition();
                     });
         };
         /**
@@ -9131,7 +9129,7 @@
             updateDisabled && this.updateDisabledState();
             this.onChange(this._model);
             this.cdr.markForCheck();
-            this.datoOverlay.scheduleUpdate();
+            this.asyncUpdateDropdownPosition();
         };
         DatoSelectComponent.prototype.activateInfiniteScroll = function () {
             var _this = this;
@@ -9184,6 +9182,14 @@
                 finally { if (e_9) throw e_9.error; }
             }
         };
+        // Make sure the overlay will be update AFTER Change Detection was done
+        // So the items in the input (and its height) is update
+        DatoSelectComponent.prototype.asyncUpdateDropdownPosition = function () {
+            var _this = this;
+            if (this.datoOverlay && this.datoOverlay.attached) {
+                setTimeout(function () { return _this.datoOverlay.scheduleUpdate(); }, 0);
+            }
+        };
         DatoSelectComponent.ctorParameters = function () { return [
             { type: core.ChangeDetectorRef },
             { type: DatoTranslateService },
@@ -11623,16 +11629,18 @@
         GridQuery.prototype.selectFilter = function () {
             return this.select(function (state) { return state.settings.filter; });
         };
-        GridQuery.prototype.filterChanged = function () {
-            return this.selectFilter().pipe(operators.map(function (filter) {
-                return Object.keys(filter).reduce(function (filters, field) {
-                    var datoFilter = filter[field];
-                    if (datoFilter) {
-                        filters.push({ field: field, filter: datoFilter });
+        GridQuery.prototype.getExternalFilter = function () {
+            var gridFilters = this.getFilter();
+            if (gridFilters) {
+                return Object.keys(gridFilters).reduce(function (filters, field) {
+                    var filter = gridFilters[field];
+                    if (filter) {
+                        filters.push({ field: field, filter: filter });
                     }
                     return filters;
                 }, []);
-            }));
+            }
+            return [];
         };
         GridQuery.prototype.getSearchTerm = function () {
             return this.getValue().settings.searchTerm;
@@ -14404,13 +14412,13 @@
             }
         };
         GridService.prototype.setGridFilters = function (filters) {
-            var e_2, _a, _b;
+            var e_2, _a;
             if (this.api && filters) {
                 var appliedFilter = {};
                 try {
                     for (var filters_1 = __values(filters), filters_1_1 = filters_1.next(); !filters_1_1.done; filters_1_1 = filters_1.next()) {
-                        var _c = filters_1_1.value, filter = _c.filter, field = _c.field;
-                        appliedFilter = __assign(__assign({}, appliedFilter), (_b = {}, _b[field] = filter, _b));
+                        var _b = filters_1_1.value, filter = _b.filter, field = _b.field;
+                        appliedFilter[field] = filter;
                     }
                 }
                 catch (e_2_1) { e_2 = { error: e_2_1 }; }
@@ -15616,8 +15624,12 @@
                 var settingsDiff = _this.gridService.getSettingsDiff();
                 _this.gridService.updateSettings(settingsDiff);
                 var data = _this.getGridData();
-                _this.onGridChange.emit(__assign(__assign({}, settingsDiff), { type: type,
-                    data: data }));
+                _this.onGridChange.emit({
+                    filter: _this.gridQuery.getExternalFilter(),
+                    sort: _this.gridQuery.getSort(),
+                    type: type,
+                    data: data
+                });
             });
         };
         DatoGridControllerComponent.prototype.listenToStoreSettingsChanges = function () {
@@ -18464,9 +18476,11 @@
                     .subscribe(function (event) {
                     _this.toggle.emit(event);
                     _this.open = false;
+                    _this.cdr.detectChanges();
                     _this.input && _this.setInputValue();
                 });
                 this.open = true;
+                this.cdr.detectChanges();
                 this.input && this.handleEnter();
             }
         };
@@ -18520,9 +18534,7 @@
         };
         DatoDatePickerContainerComponent.prototype.handleEnter = function () {
             var _this = this;
-            this.input.keydown$
-                .pipe(operators.filter(isEnter), operators.takeUntil(this.toggle))
-                .subscribe(function () {
+            this.input.keydown$.pipe(operators.filter(isEnter), operators.takeUntil(this.toggle)).subscribe(function () {
                 _this.setInputValue();
                 _this.popover.closeById(DATE_PICKER_POPOVER_ID);
                 _this.input.blur();
@@ -18587,7 +18599,7 @@
         DatoDatePickerContainerComponent = __decorate([
             core.Component({
                 selector: 'dato-date-picker',
-                template: "<div class=\"d-flex {{ triggerStyle }} items-center dato-date-picker-trigger\" (click)=\"openDatepicker(origin)\" #origin\n     [class.pointer]=\"!viewMode\">\n    <ng-template #defaultView>\n      <dato-icon datoIcon=\"calendarcore\" width=\"16px\" class=\"primary-400-color\"></dato-icon>\n      <div class=\"ellipsis\"\n           [datoTooltip]=\"dateLabel + ' ' + dateRange\"\n           [datoTooltipPosition]=\"labelTooltipPosition\"\n           [datoTooltipOnTextOverflow]=\"true\">\n        <span class=\"dato-note date-label\" *ngIf=\"dateLabel\">{{dateLabel | translate}}&nbsp;</span>\n        <span class=\"dato-note date-range\">{{dateRange}}</span>\n      </div>\n    </ng-template>\n\n    <ng-template [ngTemplateOutlet]=\"triggerTpl ? triggerTpl : defaultView\"\n                 [ngTemplateOutletContext]=\"{label: dateLabel, range: dateRange, icon: 'calendar'}\"></ng-template>\n  </div>\n",
+                template: "<div class=\"d-flex {{ triggerStyle }} items-center dato-date-picker-trigger\" [class.open]=\"open\" (click)=\"openDatepicker(origin)\" #origin\n     [class.pointer]=\"!viewMode\">\n    <ng-template #defaultView>\n      <dato-icon datoIcon=\"calendarcore\" width=\"16px\" class=\"primary-400-color\"></dato-icon>\n      <div class=\"ellipsis\"\n           [datoTooltip]=\"dateLabel + ' ' + dateRange\"\n           [datoTooltipPosition]=\"labelTooltipPosition\"\n           [datoTooltipOnTextOverflow]=\"true\">\n        <span class=\"dato-note date-label\" *ngIf=\"dateLabel\">{{dateLabel | translate}}&nbsp;</span>\n        <span class=\"dato-note date-range\">{{dateRange}}</span>\n      </div>\n    </ng-template>\n\n    <ng-template [ngTemplateOutlet]=\"triggerTpl ? triggerTpl : defaultView\"\n                 [ngTemplateOutletContext]=\"{label: dateLabel, range: dateRange, icon: 'calendar'}\"></ng-template>\n  </div>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush
             }),
             __param(0, core.Self()), __param(0, core.Optional()),
@@ -25380,7 +25392,7 @@
         };
     }
 
-    window.coreVersion = '22.2.4';
+    window.coreVersion = '22.5.1';
 
     exports.APP_TRANSLATE = APP_TRANSLATE;
     exports.AceService = AceService;