@datorama/core 22.2.6 → 22.5.3

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

@@ -7609,6 +7609,114 @@
         return false;
     };
 
+    /**
+     * @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 DatoSortableComponent = /** @class */ (function () {
+        function DatoSortableComponent() {
+            this.list = [];
+            this.noop = noop;
+            /**
+             * Sortablejs options
+             */
+            this.datoOptions = {};
+            /**
+             * Fired once items order has changed
+             */
+            this.orderUpdated = new core.EventEmitter();
+            this.defaultOptions = {
+                handle: '.dato-sortable-handler',
+                ghostClass: 'dato-sortable-ghost',
+                chosenClass: 'dato-sortable-chosen',
+                dragClass: 'dato-sortable-drag'
+            };
+        }
+        Object.defineProperty(DatoSortableComponent.prototype, "datoList", {
+            set: function (list) {
+                var isArr = Array.isArray(list);
+                var validInput = isArr || (list instanceof forms.FormControl && Array.isArray(list.value));
+                if (!validInput) {
+                    throw new Error("DatoSortable - datoList expected array or form control but got " + typeof list);
+                }
+                if (!isArr) {
+                    this.formControl = list;
+                    this.list = __spread(this.formControl.value);
+                }
+                else {
+                    this.list = list;
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        DatoSortableComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a = this.datoOptions, dynamicGhostHeight = _a.dynamicGhostHeight, hasStaticItems = _a.hasStaticItems, sortableOptions = __rest(_a, ["dynamicGhostHeight", "hasStaticItems"]);
+            var mergedOptions = __assign(__assign(__assign({}, this.defaultOptions), sortableOptions), { onUpdate: function (event) { return (sortableOptions.onUpdate ? sortableOptions.onUpdate(event) : _this.emitUpdate(event)); } });
+            if (dynamicGhostHeight) {
+                mergedOptions.onStart = function (event) { return _this.setGhostHeight(event); };
+            }
+            if (hasStaticItems) {
+                mergedOptions.onMove = function (event) {
+                    if (event.related.classList.contains('dato-sortable-static-item')) {
+                        return false;
+                    }
+                    return sortableOptions.onMove ? sortableOptions.onMove(event) : true;
+                };
+            }
+            this.mergedOptions = mergedOptions;
+        };
+        DatoSortableComponent.prototype.emitUpdate = function (event) {
+            if (this.formControl) {
+                this.formControl.setValue(this.list);
+            }
+            this.orderUpdated.emit(event);
+        };
+        DatoSortableComponent.prototype.setGhostHeight = function (event) {
+            var originalEl = event.from.children[event.oldIndex];
+            setStyle(originalEl, 'display', 'block');
+            var height = originalEl.getBoundingClientRect().height;
+            setStyle(originalEl, 'display', 'none');
+            var ghostEl = query('.dato-sortable-ghost');
+            setStyle(ghostEl, 'height', height + "px");
+        };
+        __decorate([
+            core.ContentChildren(DatoAccordionGroupComponent),
+            __metadata("design:type", core.QueryList)
+        ], DatoSortableComponent.prototype, "accordionGroups", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], DatoSortableComponent.prototype, "datoList", null);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], DatoSortableComponent.prototype, "datoOptions", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], DatoSortableComponent.prototype, "containerClass", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], DatoSortableComponent.prototype, "orderUpdated", void 0);
+        DatoSortableComponent = __decorate([
+            core.Component({
+                selector: 'dato-sortable',
+                template: "<section [sortablejs]=\"list\" [sortablejsOptions]=\"mergedOptions\" [ngClass]=\"containerClass\"\n         (update.stop)=\"noop()\" (add.stop)=\"noop()\" (sort.stop)=\"noop()\" (remove.stop)=\"noop()\"\n         (filter.stop)=\"noop()\" (change.stop)=\"noop()\" (drag.stop)=\"noop()\">\n  <ng-content></ng-content>\n</section>",
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                encapsulation: core.ViewEncapsulation.None,
+                styles: ["dato-sortable{display:inline-block}dato-sortable .dato-sortable-handler{cursor:move;cursor:-webkit-grabbing}.dato-sortable-ghost>*{display:none!important}.dato-sortable-drag{box-shadow:0 2px 14px 0 rgba(0,0,0,.2)}"]
+            })
+        ], DatoSortableComponent);
+        return DatoSortableComponent;
+    }());
+
     /**
      * @license
      * Copyright Datorama. All Rights Reserved.
@@ -7654,6 +7762,13 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(DatoAccordionComponent.prototype, "groups", {
+            get: function () {
+                return this.sortable && this.sortable.accordionGroups.length > 0 ? this.sortable.accordionGroups : this.childGroups;
+            },
+            enumerable: true,
+            configurable: true
+        });
         DatoAccordionComponent.prototype.ngOnChanges = function (changes) {
             var _this = this;
             if (changes.expandAll && !changes.expandAll.firstChange) {
@@ -7871,11 +7986,15 @@
         __decorate([
             core.ContentChildren(DatoAccordionGroupComponent),
             __metadata("design:type", core.QueryList)
-        ], DatoAccordionComponent.prototype, "groups", void 0);
+        ], DatoAccordionComponent.prototype, "childGroups", void 0);
         __decorate([
             core.ContentChildren(DatoAccordionComponent_1, { descendants: true }),
             __metadata("design:type", core.QueryList)
         ], DatoAccordionComponent.prototype, "childAccordion", void 0);
+        __decorate([
+            core.ContentChild(DatoSortableComponent, { static: true }),
+            __metadata("design:type", DatoSortableComponent)
+        ], DatoAccordionComponent.prototype, "sortable", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
@@ -8748,8 +8867,8 @@
                 }
             }
             this.onChange(this._model);
-            this.datoOverlay.scheduleUpdate();
             this.cdr.markForCheck();
+            this.asyncUpdateDropdownPosition();
         };
         DatoSelectComponent.prototype.reorderOptions = function (newOrder) {
             this._model = newOrder;
@@ -8770,9 +8889,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 +9144,7 @@
                         _this.searchTerm = value;
                         _this.keyManager.setActiveItem(-1);
                         _this.cdr.markForCheck();
-                        _this.datoOverlay && _this.datoOverlay.scheduleUpdate();
+                        _this.asyncUpdateDropdownPosition();
                     });
         };
         /**
@@ -9131,7 +9248,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 +9301,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 },
@@ -10176,110 +10301,6 @@
         return DatoOptionsModule;
     }());
 
-    /**
-     * @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 DatoSortableComponent = /** @class */ (function () {
-        function DatoSortableComponent() {
-            this.list = [];
-            this.noop = noop;
-            /**
-             * Sortablejs options
-             */
-            this.datoOptions = {};
-            /**
-             * Fired once items order has changed
-             */
-            this.orderUpdated = new core.EventEmitter();
-            this.defaultOptions = {
-                handle: '.dato-sortable-handler',
-                ghostClass: 'dato-sortable-ghost',
-                chosenClass: 'dato-sortable-chosen',
-                dragClass: 'dato-sortable-drag'
-            };
-        }
-        Object.defineProperty(DatoSortableComponent.prototype, "datoList", {
-            set: function (list) {
-                var isArr = Array.isArray(list);
-                var validInput = isArr || (list instanceof forms.FormControl && Array.isArray(list.value));
-                if (!validInput) {
-                    throw new Error("DatoSortable - datoList expected array or form control but got " + typeof list);
-                }
-                if (!isArr) {
-                    this.formControl = list;
-                    this.list = __spread(this.formControl.value);
-                }
-                else {
-                    this.list = list;
-                }
-            },
-            enumerable: true,
-            configurable: true
-        });
-        DatoSortableComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            var _a = this.datoOptions, dynamicGhostHeight = _a.dynamicGhostHeight, hasStaticItems = _a.hasStaticItems, sortableOptions = __rest(_a, ["dynamicGhostHeight", "hasStaticItems"]);
-            var mergedOptions = __assign(__assign(__assign({}, this.defaultOptions), sortableOptions), { onUpdate: function (event) { return (sortableOptions.onUpdate ? sortableOptions.onUpdate(event) : _this.emitUpdate(event)); } });
-            if (dynamicGhostHeight) {
-                mergedOptions.onStart = function (event) { return _this.setGhostHeight(event); };
-            }
-            if (hasStaticItems) {
-                mergedOptions.onMove = function (event) {
-                    if (event.related.classList.contains('dato-sortable-static-item')) {
-                        return false;
-                    }
-                    return sortableOptions.onMove ? sortableOptions.onMove(event) : true;
-                };
-            }
-            this.mergedOptions = mergedOptions;
-        };
-        DatoSortableComponent.prototype.emitUpdate = function (event) {
-            if (this.formControl) {
-                this.formControl.setValue(this.list);
-            }
-            this.orderUpdated.emit(event);
-        };
-        DatoSortableComponent.prototype.setGhostHeight = function (event) {
-            var originalEl = event.from.children[event.oldIndex];
-            setStyle(originalEl, 'display', 'block');
-            var height = originalEl.getBoundingClientRect().height;
-            setStyle(originalEl, 'display', 'none');
-            var ghostEl = query('.dato-sortable-ghost');
-            setStyle(ghostEl, 'height', height + "px");
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], DatoSortableComponent.prototype, "datoList", null);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], DatoSortableComponent.prototype, "datoOptions", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], DatoSortableComponent.prototype, "containerClass", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object)
-        ], DatoSortableComponent.prototype, "orderUpdated", void 0);
-        DatoSortableComponent = __decorate([
-            core.Component({
-                selector: 'dato-sortable',
-                template: "<section [sortablejs]=\"list\" [sortablejsOptions]=\"mergedOptions\" [ngClass]=\"containerClass\"\n         (update.stop)=\"noop()\" (add.stop)=\"noop()\" (sort.stop)=\"noop()\" (remove.stop)=\"noop()\"\n         (filter.stop)=\"noop()\" (change.stop)=\"noop()\" (drag.stop)=\"noop()\">\n  <ng-content></ng-content>\n</section>",
-                changeDetection: core.ChangeDetectionStrategy.OnPush,
-                encapsulation: core.ViewEncapsulation.None,
-                styles: ["dato-sortable{display:inline-block}dato-sortable .dato-sortable-handler{cursor:move;cursor:-webkit-grabbing}.dato-sortable-ghost>*{display:none!important}.dato-sortable-drag{box-shadow:0 2px 14px 0 rgba(0,0,0,.2)}"]
-            })
-        ], DatoSortableComponent);
-        return DatoSortableComponent;
-    }());
-
     /**
      * @license
      * Copyright Datorama. All Rights Reserved.
@@ -14423,7 +14444,7 @@
                     finally { if (e_2) throw e_2.error; }
                 }
                 this.updateSettings({ filter: appliedFilter });
-                this.api.grid.onFilterChanged();
+                this.notifyFilterUpdate();
             }
         };
         GridService.prototype.setGridSort = function (gridSort) {
@@ -16565,7 +16586,7 @@
             core.Component({
                 selector: 'dato-grid-pagination-v2',
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
-                template: "<div class=\"d-flex-row d-flex-auto d-flex-wrap container\" [class.small]=\"smallVersion\"\n     [attr.data-pages-count]=\"totalPages\"\n     [attr.data-current-page]=\"pageNumbersDisplay.currentPage\"\n     [attr.data-page-size]=\"rowsPerPage\"\n     [attr.data-rows-count]=\"rowCount\">\n  <div *ngIf=\"totalPages > 1\" #navigation\n       class=\"navigation d-flex-row d-flex-0-0-auto align-center\">\n\n    <!-- First Page -->\n    <dato-icon-button *ngIf=\"!disableButtons\"\n                      class=\"mr-4\" data-auto-id=\"pagiantion-first-page\"\n                      icon=\"chevron-left-double\"\n                      datoType=\"secondary\"\n                      datoSize=\"md\"\n                      [disabled]=\"prevPageDisabled\"\n                      (click)=\"navigateFirstPage()\">\n    </dato-icon-button>\n\n    <!-- Previous Page -->\n    <dato-icon-button icon=\"arrow-left\" datoType=\"secondary\" datoSize=\"md\"\n                      [disabled]=\"prevPageDisabled\" data-auto-id=\"pagiantion-previous-page\"\n                      (click)=\"navigatePrevPage()\">\n    </dato-icon-button>\n\n\n    <div class=\"d-flex mx-5 align-center number-container\">\n      <dato-link class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\" data-auto-id=\"pagiantion-previous-batch\"\n                        *ngIf=\"pageNumbersDisplay.showFirstEllipsis && !smallVersion\"\n                        (click)=\"showPreviousBatch()\">...\n      </dato-link>\n      <dato-link class=\"page-number mx-5\" [datoType]=\"page === pageNumbersDisplay.currentPage ? 'primary' : 'secondary'\" datoSize=\"sm\"\n                 *ngFor=\"let page of pageNumbersDisplay.pages; index as i; trackBy: trackByPage;\" [attr.data-auto-id]=\"'pagiantion-page-' + i\"\n                 (click)=\"navigatePage(page - 1)\">\n        {{page}}\n      </dato-link>\n\n      <div class=\"d-flex\" *ngIf=\"pageNumbersDisplay.showLastPage && !smallVersion\">\n        <dato-link class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\" data-auto-id=\"pagiantion-next-batch\"\n                          (click)=\"showNextBatch()\">...</dato-link>\n        <dato-link  class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\"\n                          [attr.data-auto-id]=\"'pagiantion-page-' + totalPages\"\n                          (click)=\"navigatePage(totalPages - 1)\">\n          {{totalPages}}\n        </dato-link>\n      </div>\n\n    </div>\n\n    <!-- Next Page -->\n    <dato-icon-button icon=\"arrow-right\" datoType=\"secondary\" datoSize=\"md\"\n                      (click)=\"navigateNextPage()\" data-auto-id=\"pagiantion-next-page\"\n                      [disabled]=\"nextPageDisabled\">\n    </dato-icon-button>\n\n    <!-- Last Page -->\n    <dato-icon-button *ngIf=\"!disableButtons\"\n                      class=\"ml-4\" icon=\"chevron-right-double\"\n                      datoType=\"secondary\" datoSize=\"md\" data-auto-id=\"pagiantion-last-page\"\n                      [disabled]=\"nextPageDisabled\"\n                      (click)=\"navigatePage(totalPages - 1)\">\n    </dato-icon-button>\n\n  </div>\n\n  <div *ngIf=\"totalPages > 1 && !smallVersion\"\n       class=\"separator mx-10 my-auto primary-100-background-color\">\n  </div>\n\n  <div class=\"total d-flex-0-0-auto d-flex-row align-center\">\n    <span class=\"dato-note primary-300-color\">{{rowsRange}}</span>\n  </div>\n\n  <div *ngIf=\"showBottomControls\" class=\"grid-controls d-flex d-flex-1 justify-end\">\n    <dato-icon-button *ngIf=\"hasRowGroupColumns\" [icon]=\"isExpanded ? 'collapse' : 'expand'\" datoType=\"secondary\"\n                      datoSize=\"md\" (click)=\"toggleGroupsState()\" data-auto-id=\"pagination-expand-collapse\"\n                      [datoTooltipV2]=\"isExpanded ? 'core.collapse-rows' : 'core.expand-rows'\">\n    </dato-icon-button>\n\n    <dato-icon-button class=\"mx-4\" icon=\"maximize-horizontal\" datoType=\"secondary\" datoSize=\"md\"\n                      (click)=\"autoFitGrid('content')\" [datoTooltipV2]=\"'core.fit-to-content'\"\n                      data-auto-id=\"pagination-fit-to-content\">\n    </dato-icon-button>\n\n    <dato-icon-button icon=\"minimize-horizontal\" datoType=\"secondary\" datoSize=\"md\"\n                      (click)=\"autoFitGrid('container')\" [datoTooltipV2]=\"'core.fit-to-container'\"\n                      data-auto-id=\"pagination-fit-to-container\">\n    </dato-icon-button>\n  </div>\n</div>\n",
+                template: "<div class=\"d-flex-row d-flex-auto d-flex-wrap container\" [class.small]=\"smallVersion\"\n     [attr.data-pages-count]=\"totalPages\"\n     [attr.data-current-page]=\"pageNumbersDisplay.currentPage\"\n     [attr.data-page-size]=\"rowsPerPage\"\n     [attr.data-rows-count]=\"rowCount\">\n  <div *ngIf=\"totalPages > 1\" #navigation\n       class=\"navigation d-flex-row d-flex-0-0-auto align-center\">\n\n    <!-- First Page -->\n    <dato-icon-button *ngIf=\"!disableButtons\"\n                      class=\"mr-4\" data-auto-id=\"pagiantion-first-page\"\n                      icon=\"chevron-left-double\"\n                      datoType=\"secondary\"\n                      datoSize=\"md\"\n                      [disabled]=\"prevPageDisabled\"\n                      (click)=\"navigateFirstPage()\">\n    </dato-icon-button>\n\n    <!-- Previous Page -->\n    <dato-icon-button icon=\"arrow-left\" datoType=\"secondary\" datoSize=\"md\"\n                      [disabled]=\"prevPageDisabled\" data-auto-id=\"pagiantion-previous-page\"\n                      (click)=\"navigatePrevPage()\">\n    </dato-icon-button>\n\n\n    <div class=\"d-flex mx-5 align-center number-container\">\n      <dato-link class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\" data-auto-id=\"pagiantion-previous-batch\"\n                        *ngIf=\"pageNumbersDisplay.showFirstEllipsis && !smallVersion\"\n                        (click)=\"showPreviousBatch()\">...\n      </dato-link>\n      <dato-link class=\"page-number mx-5\" [datoType]=\"page === pageNumbersDisplay.currentPage ? 'primary' : 'secondary'\" datoSize=\"sm\"\n                 *ngFor=\"let page of pageNumbersDisplay.pages; index as i; trackBy: trackByPage;\" [attr.data-auto-id]=\"'pagiantion-page-' + i\"\n                 (click)=\"navigatePage(page - 1)\">\n        {{page}}\n      </dato-link>\n\n      <div class=\"d-flex\" *ngIf=\"pageNumbersDisplay.showLastPage && !smallVersion\">\n        <dato-link class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\" data-auto-id=\"pagiantion-next-batch\"\n                          (click)=\"showNextBatch()\">...</dato-link>\n        <dato-link  class=\"page-number mx-5\" datoType=\"secondary\" datoSize=\"sm\"\n                          [attr.data-auto-id]=\"'pagiantion-page-' + totalPages\"\n                          (click)=\"navigatePage(totalPages - 1)\">\n          {{totalPages}}\n        </dato-link>\n      </div>\n\n    </div>\n\n    <!-- Next Page -->\n    <dato-icon-button icon=\"arrow-right\" datoType=\"secondary\" datoSize=\"md\"\n                      (click)=\"navigateNextPage()\" data-auto-id=\"pagiantion-next-page\"\n                      [disabled]=\"nextPageDisabled\">\n    </dato-icon-button>\n\n    <!-- Last Page -->\n    <dato-icon-button *ngIf=\"!disableButtons\"\n                      class=\"ml-4\" icon=\"chevron-right-double\"\n                      datoType=\"secondary\" datoSize=\"md\" data-auto-id=\"pagiantion-last-page\"\n                      [disabled]=\"nextPageDisabled\"\n                      (click)=\"navigatePage(totalPages - 1)\">\n    </dato-icon-button>\n\n  </div>\n\n  <div *ngIf=\"totalPages > 1 && !smallVersion\"\n       class=\"separator mx-10 my-auto primary-100-background-color\">\n  </div>\n\n  <div class=\"total d-flex-0-0-auto d-flex-row align-center\">\n    <span class=\"dato-note primary-300-color\">{{rowsRange}}</span>\n  </div>\n\n  <div *ngIf=\"showBottomControls\" class=\"grid-controls d-flex d-flex-1 justify-end\">\n    <dato-icon-button *ngIf=\"hasRowGroupColumns\" [icon]=\"isExpanded ? 'collapse' : 'expand'\" datoType=\"secondary\"\n                      datoSize=\"md\" (click)=\"toggleGroupsState()\" data-auto-id=\"pagination-expand-collapse\"\n                      [datoTooltipV2]=\"isExpanded ? 'core.collapse-rows' : 'core.expand-rows'\">\n    </dato-icon-button>\n\n    <dato-icon-button class=\"mx-4\" icon=\"maximize-horizontal\" datoType=\"secondary\" datoSize=\"md\"\n                      (click)=\"autoFitGrid('content')\" [datoTooltipV2]=\"'core.fit-to-text'\"\n                      data-auto-id=\"pagination-fit-to-content\">\n    </dato-icon-button>\n\n    <dato-icon-button icon=\"minimize-horizontal\" datoType=\"secondary\" datoSize=\"md\"\n                      (click)=\"autoFitGrid('container')\" [datoTooltipV2]=\"'core.revert-to-default-size'\"\n                      data-auto-id=\"pagination-fit-to-container\">\n    </dato-icon-button>\n  </div>\n</div>\n",
                 providers: [common.DecimalPipe],
                 styles: [":host{padding:12px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:25px}:host .container{height:25px}:host .navigation .page-number{transition:color .3s ease-in-out}:host .navigation .page-number:first-of-type{margin-left:7px}:host .navigation .page-number:last-of-type{margin-right:7px}:host .separator{width:1px;height:25px}:host .container.small .navigation,:host .container.small .total{margin-top:8px;margin-left:auto;margin-right:auto}"]
             }),
@@ -18470,9 +18491,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();
             }
         };
@@ -18526,9 +18549,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();
@@ -18593,7 +18614,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()),
@@ -25386,7 +25407,7 @@
         };
     }
 
-    window.coreVersion = '22.2.6';
+    window.coreVersion = '22.5.3';
 
     exports.APP_TRANSLATE = APP_TRANSLATE;
     exports.AceService = AceService;