@datorama/core 22.5.1 → 22.5.5

package/fesm2015/datorama-core.js

@@ -6633,6 +6633,108 @@ const defaultClientSearchStrategy = (searchIn, searchValue, labelKey) => {
     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
+ */
+let DatoSortableComponent = class DatoSortableComponent {
+    constructor() {
+        this.list = [];
+        this.noop = noop;
+        /**
+         * Sortablejs options
+         */
+        this.datoOptions = {};
+        /**
+         * Fired once items order has changed
+         */
+        this.orderUpdated = new EventEmitter();
+        this.defaultOptions = {
+            handle: '.dato-sortable-handler',
+            ghostClass: 'dato-sortable-ghost',
+            chosenClass: 'dato-sortable-chosen',
+            dragClass: 'dato-sortable-drag'
+        };
+    }
+    set datoList(list) {
+        const isArr = Array.isArray(list);
+        const validInput = isArr || (list instanceof 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 = [...this.formControl.value];
+        }
+        else {
+            this.list = list;
+        }
+    }
+    ngOnInit() {
+        const _a = this.datoOptions, { dynamicGhostHeight, hasStaticItems } = _a, sortableOptions = __rest(_a, ["dynamicGhostHeight", "hasStaticItems"]);
+        const mergedOptions = Object.assign(Object.assign(Object.assign({}, this.defaultOptions), sortableOptions), { onUpdate: event => (sortableOptions.onUpdate ? sortableOptions.onUpdate(event) : this.emitUpdate(event)) });
+        if (dynamicGhostHeight) {
+            mergedOptions.onStart = event => this.setGhostHeight(event);
+        }
+        if (hasStaticItems) {
+            mergedOptions.onMove = event => {
+                if (event.related.classList.contains('dato-sortable-static-item')) {
+                    return false;
+                }
+                return sortableOptions.onMove ? sortableOptions.onMove(event) : true;
+            };
+        }
+        this.mergedOptions = mergedOptions;
+    }
+    emitUpdate(event) {
+        if (this.formControl) {
+            this.formControl.setValue(this.list);
+        }
+        this.orderUpdated.emit(event);
+    }
+    setGhostHeight(event) {
+        const originalEl = event.from.children[event.oldIndex];
+        setStyle(originalEl, 'display', 'block');
+        const { height } = originalEl.getBoundingClientRect();
+        setStyle(originalEl, 'display', 'none');
+        const ghostEl = query('.dato-sortable-ghost');
+        setStyle(ghostEl, 'height', `${height}px`);
+    }
+};
+__decorate([
+    ContentChildren(DatoAccordionGroupComponent),
+    __metadata("design:type", QueryList)
+], DatoSortableComponent.prototype, "accordionGroups", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], DatoSortableComponent.prototype, "datoList", null);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], DatoSortableComponent.prototype, "datoOptions", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], DatoSortableComponent.prototype, "containerClass", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], DatoSortableComponent.prototype, "orderUpdated", void 0);
+DatoSortableComponent = __decorate([
+    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: ChangeDetectionStrategy.OnPush,
+        encapsulation: 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);
+
 /**
  * @license
  * Copyright Datorama. All Rights Reserved.
@@ -6674,6 +6776,9 @@ let DatoAccordionComponent = DatoAccordionComponent_1 = class DatoAccordionCompo
             }
         }
     }
+    get groups() {
+        return this.sortable && this.sortable.accordionGroups.length > 0 ? this.sortable.accordionGroups : this.childGroups;
+    }
     ngOnChanges(changes) {
         if (changes.expandAll && !changes.expandAll.firstChange) {
             this.setExpandAll();
@@ -6845,11 +6950,15 @@ DatoAccordionComponent.ctorParameters = () => [
 __decorate([
     ContentChildren(DatoAccordionGroupComponent),
     __metadata("design:type", QueryList)
-], DatoAccordionComponent.prototype, "groups", void 0);
+], DatoAccordionComponent.prototype, "childGroups", void 0);
 __decorate([
     ContentChildren(DatoAccordionComponent_1, { descendants: true }),
     __metadata("design:type", QueryList)
 ], DatoAccordionComponent.prototype, "childAccordion", void 0);
+__decorate([
+    ContentChild(DatoSortableComponent, { static: true }),
+    __metadata("design:type", DatoSortableComponent)
+], DatoAccordionComponent.prototype, "sortable", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Object)
@@ -8855,104 +8964,6 @@ DatoOptionsModule = __decorate([
     })
 ], 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
- */
-let DatoSortableComponent = class DatoSortableComponent {
-    constructor() {
-        this.list = [];
-        this.noop = noop;
-        /**
-         * Sortablejs options
-         */
-        this.datoOptions = {};
-        /**
-         * Fired once items order has changed
-         */
-        this.orderUpdated = new EventEmitter();
-        this.defaultOptions = {
-            handle: '.dato-sortable-handler',
-            ghostClass: 'dato-sortable-ghost',
-            chosenClass: 'dato-sortable-chosen',
-            dragClass: 'dato-sortable-drag'
-        };
-    }
-    set datoList(list) {
-        const isArr = Array.isArray(list);
-        const validInput = isArr || (list instanceof 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 = [...this.formControl.value];
-        }
-        else {
-            this.list = list;
-        }
-    }
-    ngOnInit() {
-        const _a = this.datoOptions, { dynamicGhostHeight, hasStaticItems } = _a, sortableOptions = __rest(_a, ["dynamicGhostHeight", "hasStaticItems"]);
-        const mergedOptions = Object.assign(Object.assign(Object.assign({}, this.defaultOptions), sortableOptions), { onUpdate: event => (sortableOptions.onUpdate ? sortableOptions.onUpdate(event) : this.emitUpdate(event)) });
-        if (dynamicGhostHeight) {
-            mergedOptions.onStart = event => this.setGhostHeight(event);
-        }
-        if (hasStaticItems) {
-            mergedOptions.onMove = event => {
-                if (event.related.classList.contains('dato-sortable-static-item')) {
-                    return false;
-                }
-                return sortableOptions.onMove ? sortableOptions.onMove(event) : true;
-            };
-        }
-        this.mergedOptions = mergedOptions;
-    }
-    emitUpdate(event) {
-        if (this.formControl) {
-            this.formControl.setValue(this.list);
-        }
-        this.orderUpdated.emit(event);
-    }
-    setGhostHeight(event) {
-        const originalEl = event.from.children[event.oldIndex];
-        setStyle(originalEl, 'display', 'block');
-        const { height } = originalEl.getBoundingClientRect();
-        setStyle(originalEl, 'display', 'none');
-        const ghostEl = query('.dato-sortable-ghost');
-        setStyle(ghostEl, 'height', `${height}px`);
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], DatoSortableComponent.prototype, "datoList", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], DatoSortableComponent.prototype, "datoOptions", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], DatoSortableComponent.prototype, "containerClass", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], DatoSortableComponent.prototype, "orderUpdated", void 0);
-DatoSortableComponent = __decorate([
-    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: ChangeDetectionStrategy.OnPush,
-        encapsulation: 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);
-
 /**
  * @license
  * Copyright Datorama. All Rights Reserved.
@@ -11177,6 +11188,7 @@ let DatoGridFilterComponent = class DatoGridFilterComponent {
         };
         this.hotKeyTooltip = formatKeys(this.applyHotKeyConfig.keys);
         this.activeAccordionId = 0;
+        this.showClearFiltersButton = true;
         this.excludedValues = new Set();
     }
     get byValueControl() {
@@ -11241,6 +11253,9 @@ let DatoGridFilterComponent = class DatoGridFilterComponent {
         const colFilter = filter || colDef.filter;
         const filterOptions = DatoGridFilterOptionsMap[colFilter];
         this.pivotColumn = gridQuery.api.columns.getSecondaryPivotColumn(pivotKeys, pivotValueColumn);
+        if (!isNil(filtersConfig.showClearFiltersButton)) {
+            this.showClearFiltersButton = filtersConfig.showClearFiltersButton;
+        }
         if (filtersConfig.sections) {
             this.filterSections = { [filtersConfig.sections]: true };
         }
@@ -11715,7 +11730,7 @@ DatoGridFilterComponent.ctorParameters = () => [
 DatoGridFilterComponent = __decorate([
     Component({
         selector: 'dato-grid-filter',
-        template: "<form class=\"container primary-0-background-color\" [formGroup]=\"filterForm\" datoForm\n      *datoSubscribe=\"hasFilter$ as hasFilter\">\n    <ng-container>\n        <dato-accordion closeOthers=\"true\" class=\"filter-options\" [activeIds]=\"activeAccordionId\">\n            <ng-container *ngIf=\"filterSections.Conditional\">\n\n                <dato-accordion-group>\n                    <dato-accordion-header class=\"dato-note-bold primary-600-color\" data-auto-id=\"conditional-filters\"\n                                           [class.primary-100-background-color]=\"header_1.isOpen\" #header_1>\n                        <div class=\"px-10 d-flex align-start-center\">\n                            <div class=\"filter-title d-flex-grow d-flex align-start-center\">{{'core.filterByCondition' | translate}}</div>\n                            <dato-icon class=\"primary-200-color\" height=\"18px\"\n                                       [icon]=\"header_1.isOpen ? 'collapse' : 'expand'\"></dato-icon>\n                        </div>\n                    </dato-accordion-header>\n                    <dato-accordion-content #conditionalContent>\n                        <div class=\"conditional-content-container d-flex-column\" formGroupName=\"conditional\"\n                             [class.multi-conditions]=\"conditionsControls.length > 1\">\n                            <div class=\"operand d-flex-column mb-10\"\n                                 [attr.data-auto-id]=\"'condition-' + i\"\n                                 *ngFor=\"let operand of conditionsControls; index as i; last as last\">\n                                <div class=\"d-flex\">\n                                    <div class=\"d-flex-column d-flex-grow min-width-0\">\n                                        <ng-container formArrayName=\"conditions\">\n\n                                            <ng-container [formGroupName]=\"i\">\n                                                <dato-select datoSize=\"sm\" class=\"mb-10\" [attr.data-auto-id]=\"'condition-' + i + '-operand'\" formControlName=\"type\"\n                                                             datoSelectClass=\"operand-select\"\n                                                             [dataSet]=\"conditionalFilterOptions\"\n                                                             [isCombo]=\"false\" #select>\n                                                    <dato-option *ngFor=\"let option of select.data; index as index\"\n                                                                 [option]=\"option\">\n                                                        {{ option.label }}\n                                                    </dato-option>\n                                                </dato-select>\n                                                <ng-container [ngSwitch]=\"filterType\">\n                                                        <div class=\"d-flex\" *ngSwitchCase=\"gridFilterTypes.Date\">\n                                                            <dato-date-picker [attr.data-auto-id]=\"'condition-date-' + i + '-value'\"\n                                                                              formControlName=\"value\" class=\"d-flex-grow range-calendar\">\n                                                                <ng-template>\n                                                                    <dato-date-picker-range *ngIf=\"getOperandType(i) === rangeOperand; else singleDate\"></dato-date-picker-range>\n                                                                    <ng-template #singleDate>\n                                                                        <dato-date-picker-single></dato-date-picker-single>\n                                                                    </ng-template>\n                                                                </ng-template>\n                                                            </dato-date-picker>\n                                                        </div>\n                                                    <ng-container *ngIf=\"!isConditionalEmpty(operand)\">\n                                                        <dato-input *ngSwitchCase=\"gridFilterTypes.String\" datoSize=\"sm\"\n                                                                    (keydown.enter.stop.prevent)=\"closePopUp()\"\n                                                                    datoControlErrors [attr.data-auto-id]=\"'condition-string-' + i + '-value'\"\n                                                                    [datoControlErrorsOnBlur]=\"false\"\n                                                                    class=\"condition-value\"\n                                                                    placeholder=\"core.filter\" formControlName=\"value\"\n                                                                    [isFocused]=\"conditionalContent._expanded\"\n                                                                    ></dato-input>\n                                                        <div class=\"d-flex\" *ngSwitchCase=\"gridFilterTypes.Number\">\n                                                            <dato-input-number (keydown.enter.stop.prevent)=\"closePopUp()\" [showControls]=\"false\"\n                                                                               class=\"width-100 condition-value\" allowNegative=\"true\">\n                                                                <input type=\"number\" formControlName=\"value\" [attr.data-auto-id]=\"'condition-number-' + i + '-value'\"\n                                                                       datoInputNumber datoSize=\"sm\" datoControlErrors [datoAutoFocus]=\"conditionalContent._expanded\"\n                                                                       [datoControlErrorsOnBlur]=\"false\"/>\n                                                            </dato-input-number>\n                                                            <ng-container *ngIf=\"getOperandType(i) === rangeOperand\">\n                                                                <div class=\"mx-5\">-</div>\n                                                                <dato-input-number (keydown.enter.stop.prevent)=\"closePopUp()\"\n                                                                        class=\"width-100 condition-value\" allowNegative=\"true\">\n                                                                    <input type=\"number\" formControlName=\"rangeEnd\" [attr.data-auto-id]=\"'condition-number-' + i + '-range-end'\"\n                                                                           datoInputNumber datoSize=\"sm\" datoControlErrors\n                                                                           [datoControlErrorsOnBlur]=\"false\"/>\n                                                                </dato-input-number>\n                                                            </ng-container>\n                                                        </div>\n                                                    </ng-container>\n                                                </ng-container>\n                                            </ng-container>\n                                        </ng-container>\n                                    </div>\n                                    <div>\n\n                                        <dato-icon-button datoSize=\"md\"\n                                                          datoType=\"none\" icon=\"trash\"\n                                                          class=\"overflow-hidden delete\"\n                                                          datoTooltip=\"core.deleteFilterCondition\"\n                                                          [attr.data-auto-id]=\"'condition-' + i + '-remove'\"\n                                                          (click)=\"removeCondition(i)\"\n                                                          datoTooltipPosition=\"right-start\"></dato-icon-button>\n                                    </div>\n                                </div>\n                                <dato-operator-toggler class=\"mt-10 justify-center width-100 d-flex\" data-auto-id=\"operator-toggler\"\n                                                       expanded=\"true\" [datoTogglerValue]=\"conditionsOperator\"\n                                                       *ngIf=\"conditionsControls.length > 1 && !last\"\n                                                       formControlName=\"operator\"></dato-operator-toggler>\n                            </div>\n                            <div class=\"d-flex align-center\">\n                                <dato-link *ngIf=\"conditionsControls.length < 3\" class=\"no-select\" datoSize=\"sm\" data-auto-id=\"add-condition\"\n                                           datoType=\"secondary\" (click)=\"addCondition()\">\n                                    <dato-icon height=\"10px\" width=\"10px\" icon=\"plus-simple\"></dato-icon>\n                                    {{ 'core.condition' | translate }}\n                                </dato-link>\n                            </div>\n                        </div>\n                    </dato-accordion-content>\n                </dato-accordion-group>\n                <div class=\"separator\"></div>\n            </ng-container>\n            <ng-container *ngIf=\"filterSections.By_Value\">\n                <dato-accordion-group class=\"list-content\">\n                    <dato-accordion-header class=\"dato-note-bold primary-600-color\" data-auto-id=\"by-value-filters\"\n                                           [class.primary-100-background-color]=\"header_2.isOpen\" #header_2>\n                        <div class=\"px-10 d-flex align-start-center\">\n                            <div class=\"filter-title d-flex d-flex-grow align-start-center\">{{'core.filterByValue' | translate}}</div>\n                            <dato-icon class=\"primary-200-color\" height=\"18px\"\n                                       [icon]=\"header_2.isOpen ? 'collapse' : 'expand'\"></dato-icon>\n                        </div>\n                    </dato-accordion-header>\n                    <dato-accordion-content #byValueContent>\n                        <div class=\"value-content-container d-flex-column\">\n                            <dato-input datoSize=\"sm\" placeholder=\"core.search-all-values\" [debounceTime]=\"300\" #search [formControl]=\"listSearchControl\" [isFocused]=\"byValueContent._expanded\"></dato-input>\n                            <dato-list-v2 class=\"primary-0-background-color\"\n                                          containerHeight=\"195px\"\n                                          [withSelectAll]=\"true\"\n                                          [clientSearch]=\"isClientSideGrid\"\n                                          [sortByKey]=\"listSortByKey\"\n                                          [labelType]=\"listLabelType\"\n                                          [searchController]=\"search\"\n                                          [options]=\"listOptions\"\n                                          [isSortList]=\"!keepPredefinedListOriginalOrder\"\n                                          [loading]=\"loadingList\"\n                                          [noDataTpl]=\"isClientSideGrid ? null : noData\"\n                                          formControlName=\"byValue\"\n                                          data-auto-id=\"by-value-filters-list\">\n                            </dato-list-v2>\n                            <ng-template #noData>\n                                <div *ngIf=\"serverSearchErrored; else noResults\" class=\"mb-10 d-flex-1 d-flex-column align-center\" data-auto-id=\"by-value-server-error\">\n                                    <img class=\"mt-20\" datoStaticSrc=\"core/grid/filter-server-error.svg\"/>\n                                    <p class=\"dato-note-bold mt-10 mb-10 primary-300-color\">{{ 'core.something-went-wrong' | translate }}</p>\n                                    <p class=\"dato-note-italic primary-300-color\">{{ 'core.try-again-later' | translate }}</p>\n                                </div>\n                                <ng-template #noResults>\n                                    <dato-list-no-result class=\"mb-10 block\" data-auto-id=\"by-value-no-results\"></dato-list-no-result>\n                                </ng-template>\n                            </ng-template>\n                        </div>\n                    </dato-accordion-content>\n                </dato-accordion-group>\n                <div class=\"separator\"></div>\n            </ng-container>\n        </dato-accordion>\n    </ng-container>\n    <div class=\"actions no-select px-10 py-12 d-flex align-end-center\">\n        <dato-link class=\"mr-30\" datoType=\"secondary\" datoSize=\"sm\" (click)=\"clearFilters()\" data-auto-id=\"clear-filters\"\n                     [disabled]=\"!hasFilter\">{{ 'core.clearFilters' | translate }}</dato-link>\n        <dato-button datoSize=\"sm\" [datoTooltip]=\"hotKeyTooltip\" [datoHotkeys]=\"applyHotKeyConfig\" (click)=\"closePopUp()\" data-auto-id=\"apply-filters\">{{'core.apply' | translate}}</dato-button>\n    </div>\n</form>\n",
+        template: "<form class=\"container primary-0-background-color\" [formGroup]=\"filterForm\" datoForm\n      *datoSubscribe=\"hasFilter$ as hasFilter\">\n    <ng-container>\n        <dato-accordion closeOthers=\"true\" class=\"filter-options\" [activeIds]=\"activeAccordionId\">\n            <ng-container *ngIf=\"filterSections.Conditional\">\n\n                <dato-accordion-group>\n                    <dato-accordion-header class=\"dato-note-bold primary-600-color\" data-auto-id=\"conditional-filters\"\n                                           [class.primary-100-background-color]=\"header_1.isOpen\" #header_1>\n                        <div class=\"px-10 d-flex align-start-center\">\n                            <div class=\"filter-title d-flex-grow d-flex align-start-center\">{{'core.filterByCondition' | translate}}</div>\n                            <dato-icon class=\"primary-200-color\" height=\"18px\"\n                                       [icon]=\"header_1.isOpen ? 'collapse' : 'expand'\"></dato-icon>\n                        </div>\n                    </dato-accordion-header>\n                    <dato-accordion-content #conditionalContent>\n                        <div class=\"conditional-content-container d-flex-column\" formGroupName=\"conditional\"\n                             [class.multi-conditions]=\"conditionsControls.length > 1\">\n                            <div class=\"operand d-flex-column mb-10\"\n                                 [attr.data-auto-id]=\"'condition-' + i\"\n                                 *ngFor=\"let operand of conditionsControls; index as i; last as last\">\n                                <div class=\"d-flex\">\n                                    <div class=\"d-flex-column d-flex-grow min-width-0\">\n                                        <ng-container formArrayName=\"conditions\">\n\n                                            <ng-container [formGroupName]=\"i\">\n                                                <dato-select datoSize=\"sm\" class=\"mb-10\" [attr.data-auto-id]=\"'condition-' + i + '-operand'\" formControlName=\"type\"\n                                                             datoSelectClass=\"operand-select\"\n                                                             [dataSet]=\"conditionalFilterOptions\"\n                                                             [isCombo]=\"false\" #select>\n                                                    <dato-option *ngFor=\"let option of select.data; index as index\"\n                                                                 [option]=\"option\">\n                                                        {{ option.label }}\n                                                    </dato-option>\n                                                </dato-select>\n                                                <ng-container [ngSwitch]=\"filterType\">\n                                                        <div class=\"d-flex\" *ngSwitchCase=\"gridFilterTypes.Date\">\n                                                            <dato-date-picker [attr.data-auto-id]=\"'condition-date-' + i + '-value'\"\n                                                                              formControlName=\"value\" class=\"d-flex-grow range-calendar\">\n                                                                <ng-template>\n                                                                    <dato-date-picker-range *ngIf=\"getOperandType(i) === rangeOperand; else singleDate\"></dato-date-picker-range>\n                                                                    <ng-template #singleDate>\n                                                                        <dato-date-picker-single></dato-date-picker-single>\n                                                                    </ng-template>\n                                                                </ng-template>\n                                                            </dato-date-picker>\n                                                        </div>\n                                                    <ng-container *ngIf=\"!isConditionalEmpty(operand)\">\n                                                        <dato-input *ngSwitchCase=\"gridFilterTypes.String\" datoSize=\"sm\"\n                                                                    (keydown.enter.stop.prevent)=\"closePopUp()\"\n                                                                    datoControlErrors [attr.data-auto-id]=\"'condition-string-' + i + '-value'\"\n                                                                    [datoControlErrorsOnBlur]=\"false\"\n                                                                    class=\"condition-value\"\n                                                                    placeholder=\"core.filter\" formControlName=\"value\"\n                                                                    [isFocused]=\"conditionalContent._expanded\"\n                                                                    ></dato-input>\n                                                        <div class=\"d-flex\" *ngSwitchCase=\"gridFilterTypes.Number\">\n                                                            <dato-input-number (keydown.enter.stop.prevent)=\"closePopUp()\" [showControls]=\"false\"\n                                                                               class=\"width-100 condition-value\" allowNegative=\"true\">\n                                                                <input type=\"number\" formControlName=\"value\" [attr.data-auto-id]=\"'condition-number-' + i + '-value'\"\n                                                                       datoInputNumber datoSize=\"sm\" datoControlErrors [datoAutoFocus]=\"conditionalContent._expanded\"\n                                                                       [datoControlErrorsOnBlur]=\"false\"/>\n                                                            </dato-input-number>\n                                                            <ng-container *ngIf=\"getOperandType(i) === rangeOperand\">\n                                                                <div class=\"mx-5\">-</div>\n                                                                <dato-input-number (keydown.enter.stop.prevent)=\"closePopUp()\"\n                                                                        class=\"width-100 condition-value\" allowNegative=\"true\">\n                                                                    <input type=\"number\" formControlName=\"rangeEnd\" [attr.data-auto-id]=\"'condition-number-' + i + '-range-end'\"\n                                                                           datoInputNumber datoSize=\"sm\" datoControlErrors\n                                                                           [datoControlErrorsOnBlur]=\"false\"/>\n                                                                </dato-input-number>\n                                                            </ng-container>\n                                                        </div>\n                                                    </ng-container>\n                                                </ng-container>\n                                            </ng-container>\n                                        </ng-container>\n                                    </div>\n                                    <div>\n\n                                        <dato-icon-button datoSize=\"md\"\n                                                          datoType=\"none\" icon=\"trash\"\n                                                          class=\"overflow-hidden delete\"\n                                                          datoTooltip=\"core.deleteFilterCondition\"\n                                                          [attr.data-auto-id]=\"'condition-' + i + '-remove'\"\n                                                          (click)=\"removeCondition(i)\"\n                                                          datoTooltipPosition=\"right-start\"></dato-icon-button>\n                                    </div>\n                                </div>\n                                <dato-operator-toggler class=\"mt-10 justify-center width-100 d-flex\" data-auto-id=\"operator-toggler\"\n                                                       expanded=\"true\" [datoTogglerValue]=\"conditionsOperator\"\n                                                       *ngIf=\"conditionsControls.length > 1 && !last\"\n                                                       formControlName=\"operator\"></dato-operator-toggler>\n                            </div>\n                            <div class=\"d-flex align-center\">\n                                <dato-link *ngIf=\"conditionsControls.length < 3\" class=\"no-select\" datoSize=\"sm\" data-auto-id=\"add-condition\"\n                                           datoType=\"secondary\" (click)=\"addCondition()\">\n                                    <dato-icon height=\"10px\" width=\"10px\" icon=\"plus-simple\"></dato-icon>\n                                    {{ 'core.condition' | translate }}\n                                </dato-link>\n                            </div>\n                        </div>\n                    </dato-accordion-content>\n                </dato-accordion-group>\n                <div class=\"separator\"></div>\n            </ng-container>\n            <ng-container *ngIf=\"filterSections.By_Value\">\n                <dato-accordion-group class=\"list-content\">\n                    <dato-accordion-header class=\"dato-note-bold primary-600-color\" data-auto-id=\"by-value-filters\"\n                                           [class.primary-100-background-color]=\"header_2.isOpen\" #header_2>\n                        <div class=\"px-10 d-flex align-start-center\">\n                            <div class=\"filter-title d-flex d-flex-grow align-start-center\">{{'core.filterByValue' | translate}}</div>\n                            <dato-icon class=\"primary-200-color\" height=\"18px\"\n                                       [icon]=\"header_2.isOpen ? 'collapse' : 'expand'\"></dato-icon>\n                        </div>\n                    </dato-accordion-header>\n                    <dato-accordion-content #byValueContent>\n                        <div class=\"value-content-container d-flex-column\">\n                            <dato-input datoSize=\"sm\" placeholder=\"core.search-all-values\" [debounceTime]=\"300\" #search [formControl]=\"listSearchControl\" [isFocused]=\"byValueContent._expanded\"></dato-input>\n                            <dato-list-v2 class=\"primary-0-background-color\"\n                                          containerHeight=\"195px\"\n                                          [withSelectAll]=\"true\"\n                                          [clientSearch]=\"isClientSideGrid\"\n                                          [sortByKey]=\"listSortByKey\"\n                                          [labelType]=\"listLabelType\"\n                                          [searchController]=\"search\"\n                                          [options]=\"listOptions\"\n                                          [isSortList]=\"!keepPredefinedListOriginalOrder\"\n                                          [loading]=\"loadingList\"\n                                          [noDataTpl]=\"isClientSideGrid ? null : noData\"\n                                          formControlName=\"byValue\"\n                                          data-auto-id=\"by-value-filters-list\">\n                            </dato-list-v2>\n                            <ng-template #noData>\n                                <div *ngIf=\"serverSearchErrored; else noResults\" class=\"mb-10 d-flex-1 d-flex-column align-center\" data-auto-id=\"by-value-server-error\">\n                                    <img class=\"mt-20\" datoStaticSrc=\"core/grid/filter-server-error.svg\"/>\n                                    <p class=\"dato-note-bold mt-10 mb-10 primary-300-color\">{{ 'core.something-went-wrong' | translate }}</p>\n                                    <p class=\"dato-note-italic primary-300-color\">{{ 'core.try-again-later' | translate }}</p>\n                                </div>\n                                <ng-template #noResults>\n                                    <dato-list-no-result class=\"mb-10 block\" data-auto-id=\"by-value-no-results\"></dato-list-no-result>\n                                </ng-template>\n                            </ng-template>\n                        </div>\n                    </dato-accordion-content>\n                </dato-accordion-group>\n                <div class=\"separator\"></div>\n            </ng-container>\n        </dato-accordion>\n    </ng-container>\n    <div class=\"actions no-select px-10 py-12 d-flex align-end-center\">\n        <dato-link *ngIf=\"showClearFiltersButton\" class=\"mr-30\" datoType=\"secondary\" datoSize=\"sm\"\n                   (click)=\"clearFilters()\" data-auto-id=\"clear-filters\" [disabled]=\"!hasFilter\">\n            {{ 'core.clearFilters' | translate }}\n        </dato-link>\n        <dato-button datoSize=\"sm\" [datoTooltip]=\"hotKeyTooltip\" [datoHotkeys]=\"applyHotKeyConfig\" (click)=\"closePopUp()\" data-auto-id=\"apply-filters\">{{'core.apply' | translate}}</dato-button>\n    </div>\n</form>\n",
         changeDetection: ChangeDetectionStrategy.OnPush,
         styles: [":host dato-accordion-header{transition:background-color .2s ease-in-out}:host>.container{width:242px}:host .value-content-container dato-input{padding:10px}:host .conditional-content-container{padding:10px;transition:padding-right .2s ease-in-out}:host .conditional-content-container.multi-conditions{padding-right:0}:host .conditional-content-container.multi-conditions .delete{width:24px}:host .filter-title{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:40px;transition:color .2s ease-in-out}:host .separator{height:1px;width:100%}:host .delete{transition:width .2s ease-in-out;width:0}"]
     }),
@@ -12693,7 +12708,7 @@ let GridService = class GridService {
                 appliedFilter[field] = filter;
             }
             this.updateSettings({ filter: appliedFilter });
-            this.api.grid.onFilterChanged();
+            this.notifyFilterUpdate();
         }
     }
     setGridSort(gridSort) {
@@ -14630,7 +14645,7 @@ DatoGridPaginationV2Component = __decorate([
     Component({
         selector: 'dato-grid-pagination-v2',
         changeDetection: 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: [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}"]
     }),
@@ -22655,7 +22670,7 @@ function fixNgLeaks() {
     };
 }
 
-window.coreVersion = '22.5.1';
+window.coreVersion = '22.5.5';
 
 /**
  * @license