@datorama/core 22.1.1-rc.2 → 22.2.0

package/fesm2015/datorama-core.js

@@ -7495,8 +7495,9 @@ let DatoSelectComponent = class DatoSelectComponent extends BaseCustomControl {
     writeValue(activeOptions) {
         this._model = activeOptions ? coerceArray$1(activeOptions) : [];
         if (this.options) {
+            const overTheLimit = this.limitSelectedTo && this.isMulti && this._model.length >= this.limitSelectedTo;
             this.markAsActive(this._model, { deselectAll: true });
-            this.limitSelectedTo && this.updateDisabledState();
+            overTheLimit && this.updateDisabledState();
         }
         /** For later updates */
         this.cdr.markForCheck();
@@ -7532,7 +7533,7 @@ let DatoSelectComponent = class DatoSelectComponent extends BaseCustomControl {
          */
         if (this.hasValue && this._initialOpen) {
             this.markAsActive(this._model);
-            if (this.limitSelectedTo) {
+            if (this.limitSelectedTo && this._model.length === this.limitSelectedTo) {
                 this.updateDisabledState();
             }
             this._initialOpen = false;
@@ -7599,6 +7600,7 @@ let DatoSelectComponent = class DatoSelectComponent extends BaseCustomControl {
         this.onChange(this._model);
     }
     removeOption(option) {
+        const updateDisabled = this.limitSelectedTo && this._model.length === this.limitSelectedTo;
         this._model = this._model.filter(current => current[this.idKey] !== option[this.idKey]);
         const optionToRemove = this.options.find(datoOption => datoOption.option && datoOption.option[this.idKey] === option[this.idKey]);
         /**
@@ -7608,7 +7610,7 @@ let DatoSelectComponent = class DatoSelectComponent extends BaseCustomControl {
         if (optionToRemove) {
             optionToRemove.active = false;
         }
-        this.limitSelectedTo && this.updateDisabledState();
+        updateDisabled && this.updateDisabledState();
         this.onChange(this._model);
         this.cdr.markForCheck();
         if (this.datoOverlay.attached) {
@@ -7884,6 +7886,9 @@ let DatoSelectComponent = class DatoSelectComponent extends BaseCustomControl {
         if (!datoOption) {
             return;
         }
+        const modelLength = this._model.length;
+        const updateDisabled = this.limitSelectedTo &&
+            (modelLength === this.limitSelectedTo || (modelLength === this.limitSelectedTo - 1 && !datoOption.active));
         datoOption.active = !datoOption.active;
         const rawOption = datoOption.option;
         if (datoOption.active) {
@@ -7892,7 +7897,7 @@ let DatoSelectComponent = class DatoSelectComponent extends BaseCustomControl {
         else {
             this._model = this._model.filter(current => current[this.idKey] !== rawOption[this.idKey]);
         }
-        this.limitSelectedTo && this.updateDisabledState();
+        updateDisabled && this.updateDisabledState();
         this.onChange(this._model);
         this.cdr.markForCheck();
         this.datoOverlay.scheduleUpdate();
@@ -10094,20 +10099,17 @@ let GridQuery = class GridQuery extends Query {
         if (this.gridRef.gridOptions.pivotMode) {
             const { sort, colId } = this.api.grid.getSortModel().pop() || {};
             const column = this.api.columns.getColumn(colId);
-            const pivotedColumn = this.getSecondaryColumn(colId);
-            if (pivotedColumn) {
-                const uniquePivotParents = uniq(this.api.columns.getSecondaryColumns().map(column => column.getParent()));
-                const secondaryColumn = this.getSecondaryColumn(pivotedColumn.getColId());
-                const pivotColIndex = uniquePivotParents.indexOf(secondaryColumn.getParent());
-                return { colId: getColField(pivotedColumn.getColDef()), sort, pivotColIndex };
+            if (column) {
+                return { colId, sort, colField: getColField(column.getColDef()) };
             }
-            else if (column) {
-                return { colId: getColField(column.getColDef()), sort };
+            else {
+                const secondaryColumn = this.getSecondaryColumn(colId);
+                if (secondaryColumn) {
+                    return { colId, sort, colField: getColField(secondaryColumn.getColDef()) };
+                }
             }
         }
-        else {
-            return this.api.grid.getSortModel().pop();
-        }
+        return this.api.grid.getSortModel().pop();
     }
     selectSort() {
         return this.select(state => state.settings.sort);
@@ -10204,7 +10206,10 @@ let GridQuery = class GridQuery extends Query {
     }
     getSecondaryColumn(colId) {
         const secondaryColumns = this.api.columns.getSecondaryColumns();
-        return secondaryColumns && secondaryColumns.find(col => col.getColId() === colId);
+        if (secondaryColumns) {
+            return secondaryColumns.find(col => col.getColId() === colId);
+        }
+        return null;
     }
     filterCheckboxSelectionColumn(columns) {
         return columns.filter((column) => !column.getUserProvidedColDef() || !column.getUserProvidedColDef().checkboxSelection);
@@ -10254,6 +10259,8 @@ var DatoFilterConditions;
     DatoFilterConditions["NOT_IN_LIST"] = "NOT_IN_LIST";
     DatoFilterConditions["IS_EMPTY"] = "IS_EMPTY";
     DatoFilterConditions["NOT_EMPTY"] = "NOT_EMPTY";
+    DatoFilterConditions["IS_NULL"] = "IS_NULL";
+    DatoFilterConditions["NOT_NULL"] = "NOT_NULL";
 })(DatoFilterConditions || (DatoFilterConditions = {}));
 const DatoGridDateFilterOptions = [
     DatoFilterConditions.IN_RANGE,
@@ -10334,8 +10341,10 @@ function validateNumberCondition(unparsedRowValue, { condition, value, rangeEnd
         case DatoFilterConditions.IN_RANGE:
             return rowValue >= filterValue && rowValue <= parseFloat(rangeEnd);
         case DatoFilterConditions.IS_EMPTY:
+        case DatoFilterConditions.IS_NULL:
             return isNil(rowValue);
         case DatoFilterConditions.NOT_EMPTY:
+        case DatoFilterConditions.NOT_NULL:
             return !isNil(rowValue);
     }
 }
@@ -10482,7 +10491,7 @@ function toolbarActionToContextAction(params) {
     return contextActions;
 }
 
-const DATO_GRID_STORAGE_API = new InjectionToken('DATO_GRID_STORAGE_AP');
+const DATO_GRID_STORAGE_API = new InjectionToken('DATO_GRID_STORAGE_API');
 
 const defaultEditableColumnRenderer = params => params && params.value ? `<div class="value-wrapper ellipsis">${params.value}</div>` : null;
 const editableCellRendererWithSearchHighlight = (params, searchTerm) => {
@@ -11211,10 +11220,11 @@ let DatoGridFilterComponent = class DatoGridFilterComponent {
     }
     ngOnInit() {
         const { gridService, gridQuery } = this.popover.data;
-        const { filter, filtersConfig = {}, pivotValueColumn, pivotKeys } = this.colDef;
+        const { filter, pivotValueColumn, pivotKeys } = this.colDef;
         const colDefs = gridQuery.api.columns.getAllColumns().map(column => column.getColDef());
         this.colField = getColField(this.colDef);
         const colDef = colDefs.find(colDef => colDef.field === this.colField);
+        const filtersConfig = colDef.filtersConfig || this.colDef.filtersConfig || {};
         const colFilter = filter || colDef.filter;
         const filterOptions = DatoGridFilterOptionsMap[colFilter];
         this.pivotColumn = gridQuery.api.columns.getSecondaryPivotColumn(pivotKeys, pivotValueColumn);
@@ -11236,7 +11246,11 @@ let DatoGridFilterComponent = class DatoGridFilterComponent {
         if (this.filterSections.Conditional) {
             let filterConditions = filterOptions || DatoGridStringFilterOptions;
             if (filtersConfig.showEmptyConditions) {
-                filterConditions = [...filterConditions, DatoFilterConditions.IS_EMPTY, DatoFilterConditions.NOT_EMPTY];
+                let emptyConditions = [DatoFilterConditions.IS_EMPTY, DatoFilterConditions.NOT_EMPTY];
+                if (this.filterType === DatoGridFilterTypes.Number) {
+                    emptyConditions = [DatoFilterConditions.IS_NULL, DatoFilterConditions.NOT_NULL];
+                }
+                filterConditions = [...filterConditions, ...emptyConditions];
             }
             this.conditionalFilterOptions = filterConditions.map((operand, id) => ({
                 id,
@@ -11599,7 +11613,10 @@ let DatoGridFilterComponent = class DatoGridFilterComponent {
         valueControl.updateValueAndValidity();
     }
     isEmptyOperand(operand) {
-        return operand === DatoFilterConditions.IS_EMPTY || operand === DatoFilterConditions.NOT_EMPTY;
+        return (operand === DatoFilterConditions.IS_EMPTY ||
+            operand === DatoFilterConditions.NOT_EMPTY ||
+            operand === DatoFilterConditions.IS_NULL ||
+            operand === DatoFilterConditions.NOT_NULL);
     }
     isStringArray(value) {
         return isString(value[0]);
@@ -12661,14 +12678,31 @@ let GridService = class GridService {
             for (const { filter } of filters) {
                 const column = this.api.columns.getColumn(filter.colId);
                 if (column) {
-                    this.setColumnFilter(column, filter);
+                    this.setColumnFilter(column, filter, false);
                 }
                 else {
-                    const pivotColumn = this.gridQuery.getSecondaryColumn(filter.colId);
-                    this.setColumnFilter(pivotColumn, filter);
+                    const secondaryColumn = this.gridQuery.getSecondaryColumn(filter.colId);
+                    if (secondaryColumn) {
+                        this.setColumnFilter(secondaryColumn, filter, false);
+                    }
                 }
             }
-            this.notifyFilterUpdate();
+            this.api.grid.onFilterChanged();
+        }
+    }
+    setGridSort({ colId, sort }) {
+        if (this.api) {
+            const column = this.api.columns.getColumn(colId);
+            if (column) {
+                column.setSort(sort);
+            }
+            else {
+                const secondaryColumn = this.gridQuery.getSecondaryColumn(colId);
+                if (secondaryColumn) {
+                    secondaryColumn.setSort(sort);
+                }
+            }
+            this.api.grid.onSortChanged();
         }
     }
     updateFilter(column, filter) {
@@ -12725,8 +12759,7 @@ let GridService = class GridService {
         this.updateSettings({ gridAlignment, columnsSizes: null });
     }
     saveSettingsToServer(settings) {
-        const isGlobal = this.gridQuery.getGridOptions().isGlobalSettings;
-        this.storageAPI.set(this.gridName, settings, isGlobal);
+        this.storageAPI.set(this.gridName, settings);
     }
     /**
      * @internal used to log grid events to the platform's logging service
@@ -13087,6 +13120,13 @@ let GridService = class GridService {
                         column
                     };
                 }
+                if (condition === DatoFilterConditions.IS_NULL || condition === DatoFilterConditions.NOT_NULL) {
+                    return {
+                        condition: DatoFilterConditions.IS_NULL,
+                        value: condition === DatoFilterConditions.IS_NULL ? 'true' : 'false',
+                        column
+                    };
+                }
                 return Object.assign(Object.assign({}, item), { column });
             })
         };
@@ -13139,13 +13179,12 @@ let GridService = class GridService {
             if (userProvidedColDef) {
                 colDef.filter = userProvidedColDef.filter;
             }
-            // if (colDef.pivotKeys) {
-            //   colDef.pivotKeys = colDef.pivotKeys.map(key => {
-            //     const parsedKey = tryParsePivotValue(key);
-            //
-            //     return (parsedKey && parsedKey.value) || '';
-            //   });
-            // }
+            if (colDef.pivotKeys) {
+                colDef.pivotKeys = colDef.pivotKeys.map(key => {
+                    const parsedKey = tryParsePivotValue(key);
+                    return (parsedKey && parsedKey.value) || '';
+                });
+            }
         };
         gridOptions.processSecondaryColGroupDef = (colGroupDef) => {
             if (colGroupDef.headerName) {
@@ -13170,13 +13209,12 @@ let GridService = class GridService {
             else {
                 colGroupDef.headerClass = ['empty-pivot-header'];
             }
-            // if (colGroupDef.pivotKeys) {
-            //   colGroupDef.pivotKeys = colGroupDef.pivotKeys.map(key => {
-            //     const parsedKey = tryParsePivotValue(key);
-            //
-            //     return (parsedKey && parsedKey.value) || '';
-            //   });
-            // }
+            if (colGroupDef.pivotKeys) {
+                colGroupDef.pivotKeys = colGroupDef.pivotKeys.map(key => {
+                    const parsedKey = tryParsePivotValue(key);
+                    return (parsedKey && parsedKey.value) || '';
+                });
+            }
         };
     }
     setPivotModeRows(data) {
@@ -13630,16 +13668,18 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
             .pipe(switchMap(() => {
             this.gridOptions = this.normalizeOptions();
             agGrid.gridOptions = this.gridOptions;
-            const isGlobal = this.gridOptions.isGlobalSettings;
-            const settingsLoader = this.gridOptions.saveSettings === false
-                ? of(null)
-                : this.storageAPI.get(this.gridOptions.gridName, isGlobal);
+            const settingsLoader = this.gridOptions.saveSettings === false ? of(null) : this.storageAPI.get(this.gridOptions.gridName);
             return combineLatest([agGrid.gridReady, settingsLoader]);
         }), untilDestroyed(this))
             .subscribe(([{ api, columnApi }, savedSettings = {}]) => {
             if (!this.gridOptions.rowData) {
                 api.showLoadingOverlay();
             }
+            if (!this.gridOptions.statusBar) {
+                /** Fix ag-grid bug that doesn't add ag-hidden class to the status bar, which only get fixed in later versions */
+                const el = agGridEl.querySelector('.ag-status-bar');
+                addClass(el, 'ag-hidden');
+            }
             const gridApi = { grid: api, columns: columnApi };
             this.gridService._setApi(gridApi, agGrid);
             this.gridQuery._setApi(gridApi, agGrid);
@@ -13679,6 +13719,9 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
     setGridFilters(filters) {
         this.gridService.setGridFilters(filters);
     }
+    setGridSort(sort) {
+        this.gridService.setGridSort(sort);
+    }
     onFilterChanged() {
         return this.gridQuery.filterChanged();
     }
@@ -14484,9 +14527,6 @@ let DatoGridPaginationV2Component = class DatoGridPaginationV2Component {
     toggleGroupsState() {
         this.isExpanded ? this.gridApi.collapseAll() : this.gridApi.expandAll();
         this.isExpanded = !this.isExpanded;
-        // this.gridApi.forEachNode((node: RowNode) => {
-        //   node.setExpanded(this.isExpanded);
-        // });
     }
     autoFitGrid(type) {
         this.gridService.fitGrid(type);
@@ -14754,12 +14794,6 @@ let DatoGridV2ToolbarComponent = class DatoGridV2ToolbarComponent {
         this.registerGroupListeners();
         this.subscribeRowsSelectionData();
     }
-    getCellValueChangeEvent() {
-        return this.gridController.gridQuery.waitForGrid(() => this.gridQuery.gridRef.cellValueChanged.pipe(debounceTime(100), untilDestroyed(this)));
-    }
-    getRowDataUpdatedEvent() {
-        return this.gridController.gridQuery.waitForGrid(() => this.gridQuery.gridRef.rowDataUpdated.pipe(debounceTime(100), untilDestroyed(this)));
-    }
     onActionClick(action) {
         if (isFunction(action.onClick)) {
             const selectedRowsCount = this.gridController.gridQuery.getSelectedRowsCount();
@@ -18827,39 +18861,6 @@ DatoEditableHeaderModule = __decorate([
  * found in the LICENSE file at https://github.com/datorama/client-core/blob/master/LICENSE
  */
 
-let RichTextService = class RichTextService {
-    constructor(http, config) {
-        this.http = http;
-        this.config = config;
-    }
-    getLib(appendScriptFunc, appendStyleFunc) {
-        if (!this.richTextScript$) {
-            this.initLib(appendScriptFunc, appendStyleFunc);
-        }
-        return this.richTextScript$;
-    }
-    initLib(appendScriptFunc, appendStyleFunc) {
-        this.richTextScript$ = combineLatest([
-            this.http
-                .get(`${this.config.paths.richText}/index.js`, { responseType: 'text' })
-                .pipe(tap(lib => appendScriptFunc(lib, 'rich-text-editor'))),
-            this.http
-                .get(`${this.config.paths.richText}/plugins/autocomplete/plugin.css`, { responseType: 'text' })
-                .pipe(tap(style => appendStyleFunc(style, 'tinymce-autocomplete')))
-        ]).pipe(shareReplay(1));
-    }
-};
-RichTextService.ctorParameters = () => [
-    { type: HttpClient },
-    { type: undefined, decorators: [{ type: Inject, args: [DATO_CORE_CONFIG,] }] }
-];
-RichTextService.ɵprov = ɵɵdefineInjectable({ factory: function RichTextService_Factory() { return new RichTextService(ɵɵinject(HttpClient), ɵɵinject(DATO_CORE_CONFIG)); }, token: RichTextService, providedIn: "root" });
-RichTextService = __decorate([
-    Injectable({ providedIn: 'root' }),
-    __param(1, Inject(DATO_CORE_CONFIG)),
-    __metadata("design:paramtypes", [HttpClient, Object])
-], RichTextService);
-
 /**
  * @license
  * Copyright Datorama. All Rights Reserved.
@@ -18873,12 +18874,12 @@ const getTinymce = () => {
 };
 const ɵ0$3 = getTinymce;
 let DatoRichTextDirective = DatoRichTextDirective_1 = class DatoRichTextDirective extends BaseCustomControl {
-    constructor(ngZone, richTextService, config, host) {
+    constructor(ngZone, http, host, config) {
         super();
         this.ngZone = ngZone;
-        this.richTextService = richTextService;
-        this.config = config;
+        this.http = http;
         this.host = host;
+        this.config = config;
         this.autocompleteOptions = {};
         this.forcePlainTextPasting = false;
         this.format = 'html';
@@ -18905,11 +18906,28 @@ let DatoRichTextDirective = DatoRichTextDirective_1 = class DatoRichTextDirectiv
             base: this.config.paths.richText,
             query: ''
         };
-        this.richTextService
-            .getLib(appendScript, appendStyle)
-            .pipe(untilDestroyed(this))
-            .subscribe(() => {
+        /**
+         * We support only one instance in load time
+         */
+        if (window.tinymce) {
             this.init.call(this);
+        }
+        else {
+            this.loadLib().subscribe(lib => {
+                appendScript(lib, 'rich-text-editor');
+                this.init.call(this);
+                this.loadAutoCompleteStyle();
+            });
+        }
+    }
+    loadLib() {
+        return this.http.get(`${this.config.paths.richText}/index.js`, { responseType: 'text' });
+    }
+    loadAutoCompleteStyle() {
+        this.http
+            .get(`${this.config.paths.richText}/plugins/autocomplete/plugin.css`, { responseType: 'text' })
+            .subscribe(style => {
+            appendStyle(style, 'tinymce-autocomplete');
         });
     }
     initEditor(_, editor) {
@@ -19010,9 +19028,9 @@ let DatoRichTextDirective = DatoRichTextDirective_1 = class DatoRichTextDirectiv
 };
 DatoRichTextDirective.ctorParameters = () => [
     { type: NgZone },
-    { type: RichTextService },
-    { type: undefined, decorators: [{ type: Inject, args: [DATO_CORE_CONFIG,] }] },
-    { type: ElementRef }
+    { type: HttpClient },
+    { type: ElementRef },
+    { type: undefined, decorators: [{ type: Inject, args: [DATO_CORE_CONFIG,] }] }
 ];
 __decorate([
     Input(),
@@ -19078,9 +19096,10 @@ DatoRichTextDirective = DatoRichTextDirective_1 = __decorate([
             }
         ]
     }),
-    __param(2, Inject(DATO_CORE_CONFIG)),
+    __param(3, Inject(DATO_CORE_CONFIG)),
     __metadata("design:paramtypes", [NgZone,
-        RichTextService, Object, ElementRef])
+        HttpClient,
+        ElementRef, Object])
 ], DatoRichTextDirective);
 
 /**
@@ -21361,9 +21380,7 @@ let DatoBreadcrumbsComponent = class DatoBreadcrumbsComponent {
         this._breadcrumbs = [...start, ...dots, ...end];
     }
     initEditableHeader() {
-        this.headerControl.valueChanges
-            .pipe(debounceTime(300), untilDestroyed(this))
-            .subscribe((res) => {
+        this.headerControl.valueChanges.pipe(debounceTime(300), untilDestroyed(this)).subscribe((res) => {
             this.updateEditableText.emit(res);
             this.cdr.detectChanges();
         });
@@ -21986,22 +22003,17 @@ DatoPillsModule = __decorate([
 ], DatoPillsModule);
 
 let DatoProgressBarComponent = class DatoProgressBarComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.barColor = 'primary-100';
         this.thresholds = [33, 66];
     }
     ngOnInit() {
-        if (!this.parts && this.percent) {
-            if (!this.color) {
-                this.initColor();
-            }
-            this.parts = [
-                {
-                    percent: this.percent,
-                    color: this.color,
-                    tooltip: this.tooltip
-                }
-            ];
+        if (!this.parts) {
+            this.percent = this.percent || 0;
+            this.isByPercent = true;
+            this.hasInitialColor = !!this.color;
+            this.initSinglePart();
         }
         else if (this.parts &&
             this.parts.every((part) => part.weight >= 0) &&
@@ -22009,6 +22021,27 @@ let DatoProgressBarComponent = class DatoProgressBarComponent {
             this.initPartsPercent();
         }
     }
+    ngOnChanges(changes) {
+        if (this.isByPercent &&
+            ((changes.percent && !changes.percent.firstChange) ||
+                (changes.color && !changes.color.firstChange) ||
+                (changes.tooltip && !changes.tooltip.firstChange))) {
+            this.initSinglePart();
+            this.cdr.detectChanges();
+        }
+    }
+    initSinglePart() {
+        if (!this.color || !this.hasInitialColor) {
+            this.initColor();
+        }
+        this.parts = [
+            {
+                percent: this.percent,
+                color: this.color,
+                tooltip: this.tooltip
+            }
+        ];
+    }
     initColor() {
         if (isEmpty(this.thresholds)) {
             this.color = 'accent-400';
@@ -22050,6 +22083,9 @@ let DatoProgressBarComponent = class DatoProgressBarComponent {
         }
     }
 };
+DatoProgressBarComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -22085,11 +22121,12 @@ __decorate([
 DatoProgressBarComponent = __decorate([
     Component({
         selector: 'dato-progress-bar',
-        template: "<div class=\"bar d-flex width-100 overflow-hidden\"\n     [style.width]=\"width\"\n     [class]=\"barColor + '-background-color'\">\n    <div *ngFor=\"let part of parts; index as i\"\n         class=\"part height-100\"\n         [ngClass]=\"part.color ? part.color + '-background-color' : ''\"\n         [style.width]=\"i > 0 ? 'calc(' + part.percent + '% + 8px)' : part.percent + '%'\"\n         [style.z-index]=\"100 - i\"\n         [datoTooltipV2]=\"part.tooltip\">\n    </div>\n</div>\n\n<div *ngIf=\"showLegend\" class=\"d-flex mt-12\">\n    <div *ngFor=\"let part of parts; index as i\" class=\"d-flex mr-16\">\n        <div class=\"d-flex dato-note primary-400-color\">\n            <div class=\"legend-color mr-6\" [ngClass]=\"part.color ? part.color + '-background-color' : ''\"></div>\n            <div>{{ part.legendLabel || part.tooltip }}</div>\n        </div>\n    </div>\n</div>\n",
+        template: "<div class=\"bar d-flex width-100 overflow-hidden\"\n     [style.width]=\"width\"\n     [class]=\"barColor + '-background-color'\">\n    <div *ngFor=\"let part of parts; index as i\"\n         class=\"part height-100\"\n         [ngClass]=\"part.color ? part.color + '-background-color' : ''\"\n         [style.width]=\"i > 0 ? 'calc(' + part.percent + '% + 8px)' : part.percent + '%'\"\n         [style.z-index]=\"100 - i\"\n         [datoTooltipV2]=\"part.tooltip\">\n    </div>\n</div>\n\n<ng-content></ng-content>\n\n<div *ngIf=\"showLegend\" class=\"d-flex mt-12\">\n    <div *ngFor=\"let part of parts; index as i\" class=\"d-flex mr-16\">\n        <div class=\"d-flex dato-note primary-400-color\">\n            <div class=\"legend-color mr-6\" [ngClass]=\"part.color ? part.color + '-background-color' : ''\"></div>\n            <div>{{ part.legendLabel || part.tooltip }}</div>\n        </div>\n    </div>\n</div>\n",
         changeDetection: ChangeDetectionStrategy.OnPush,
         encapsulation: ViewEncapsulation.None,
         styles: ["dato-progress-bar .bar{height:8px;border-radius:4px}dato-progress-bar .part{border-radius:0 4px 4px 0}dato-progress-bar .part:not(:first-child){margin-left:-8px}dato-progress-bar .legend-color{width:16px;height:16px;min-width:16px;border-radius:50%}"]
-    })
+    }),
+    __metadata("design:paramtypes", [ChangeDetectorRef])
 ], DatoProgressBarComponent);
 
 const declarations$4 = [DatoProgressBarComponent];
@@ -22608,7 +22645,7 @@ function fixNgLeaks() {
     };
 }
 
-window.coreVersion = '22.1.1-rc.';
+window.coreVersion = '22.2.0';
 
 /**
  * @license
@@ -22622,5 +22659,5 @@ window.coreVersion = '22.1.1-rc.';
  * Generated bundle index. Do not edit.
  */
 
-export { APP_TRANSLATE, AceService, BaseCustomControl, COMPARE_RESULT, CUSTOM_RANGE_ID, ColorPalette, ConfirmationType, ContentRef, ContentType, CustomHeaderControllerService, DATE_PICKER_CONFIG, DATE_PICKER_POPOVER_ID, DATO_CORE_LOGGER, DATO_FORM_ERRORS, DATO_GRID_STORAGE_API, DEFAULT_FORMAT, DEFAULT_GRID_SEARCH_DEBOUNCE_TIME, DatePickerConfig, DatePickerMonthComponent, DateType, DatoAccordionComponent, DatoAccordionContentComponent, DatoAccordionGroupComponent, DatoAccordionHeaderComponent, DatoAccordionModule, DatoAceDirective, DatoAceDraggableDirective, DatoAceModule, DatoActionType, DatoAutoCompleteContentDirective, DatoAutoFocusDirective, DatoAutocompleteComponent, DatoAutocompleteDirective, DatoAutocompleteModule, DatoBreadcrumbsComponent, DatoBreadcrumbsModule, DatoButtonComponent, DatoButtonGroupComponent, DatoButtonGroupModule, DatoButtonModule, DatoCamelCasePipe, DatoCarouselComponent, DatoCarouselItemDirective, DatoCarouselItemElement, DatoCarouselModule, DatoCheckboxComponent, DatoCheckboxModule, DatoClipboardDirective, DatoColorDirective, DatoConfirmationDialogComponent, DatoControlErrorComponent, DatoControlErrorContainerDirective, DatoControlErrorsDirective, DatoCoreError, DatoCoreModule, DatoCustomHeaderTemplateComponent, DatoCustomHeaderTemplateDirective, DatoCustomMoreMenuTemplateDirective, DatoDatePickerContainerComponent, DatoDatePickerModule, DatoDatePickerRangeComponent, DatoDatePickerSingleComponent, DatoDialog, DatoDialogCloseDirective, DatoDialogComponent, DatoDialogContentComponent, DatoDialogDismissDirective, DatoDialogFooterComponent, DatoDialogHeaderComponent, DatoDialogModule, DatoDialogRef, DatoDirectivesModule, DatoDisableControlDirective, DatoDraggableDirective, DatoDynamicContentComponent, DatoDynamicContentModule, DatoEditableHeaderComponent, DatoEditableHeaderModule, DatoFileInputComponent, DatoFileInputDefaultComponent, DatoFileInputModule, DatoFilterConditions, DatoFontDirective, DatoFontIconComponent, DatoFontIconModule, DatoFormSubmitDirective, DatoFormValidationModule, DatoGrid, DatoGridAPI, DatoGridAvatarCellComponent, DatoGridColumnDisplayMenuComponent, DatoGridColumnHeaderComponent, DatoGridColumnHeaderMoreMenuComponent, DatoGridColumnTypes, DatoGridComponent, DatoGridControllerComponent, DatoGridDateFilterOptions, DatoGridFilterComponent, DatoGridFilterOptionsMap, DatoGridFilterSections, DatoGridFilterTypes, DatoGridGroupsMenuComponent, DatoGridHeaderComponent, DatoGridHeaderV2Component, DatoGridInitialsCellComponent, DatoGridItemsCellComponent, DatoGridModule, DatoGridMoreMenuActions, DatoGridNumberFilterOptions, DatoGridOnHoverComponent, DatoGridPaginationComponent, DatoGridPaginationV2Component, DatoGridStatusCellComponent, DatoGridStringFilterOptions, DatoGridToolbarComponent, DatoGridToolbarItemDirective, DatoGridToolbarItemElementDirective, DatoGridV2Component, DatoGridV2LoaderComponent, DatoGridV2Module, DatoGridV2NoDataOverlayComponent, DatoGridV2ToolbarButtonComponent, DatoGridV2ToolbarComponent, DatoGroupComponent, DatoHighlightPipe, DatoHotkeys, DatoHotkeysDirective, DatoHotkeysHelpComponent, DatoHotkeysModule, DatoIconButtonComponent, DatoIconButtonModule, DatoIconComponent, DatoIconModule, DatoInfiniteScrollComponent, DatoInfiniteScrollModule, DatoInputComponent, DatoInputModule, DatoInputNumberComponent, DatoInputNumberDirective, DatoInputNumberModule, DatoKebabCasePipe, DatoLinkButtonComponent, DatoLinkButtonModule, DatoListComponent, DatoListModule, DatoListNoDataComponent, DatoListNoResultComponent, DatoListV2Component, DatoListV2Module, DatoLoaderComponent, DatoLoadersModule, DatoMenuComponent, DatoMenuContentDirective, DatoMenuItemDirective, DatoMenuModule, DatoMenuTriggerForDirective, DatoMultiOptionComponent, DatoMultiOptionV2Component, DatoOperatorTogglerComponent, DatoOperatorTogglerModule, DatoOptionComponent, DatoOptionV2Component, DatoOptionsModule, DatoOriginDirective, DatoOverlay, DatoPageLoaderComponent, DatoPanel, DatoPanelComponent, DatoPanelContentComponent, DatoPanelFooterComponent, DatoPanelHeaderComponent, DatoPanelInternalConfig, DatoPanelModule, DatoPanelRef, DatoPillsComponent, DatoPillsModule, DatoPipesModule, DatoPopover, DatoPopoverComponent, DatoPopoverModule, DatoProgressBarComponent, DatoProgressBarModule, DatoRadioComponent, DatoRadioModule, DatoRichTextDirective, DatoRichTextModule, DatoSearchResultsGroupSortPipe, DatoSearchResultsSortPipe, DatoSearchableContainerComponent, DatoSearchableDirective, DatoSearchableHighlightDirective, DatoSearchableModule, DatoSelectActiveDirective, DatoSelectComponent, DatoSelectEmptyComponent, DatoSelectModule, DatoSliderComponent, DatoSliderModule, DatoSnackbar, DatoSnackbarComponent, DatoSnackbarModule, DatoSortableComponent, DatoSortableHandleDirective, DatoSortableModule, DatoStaticImageSrcDirective, DatoStaticImagesSrcModule, DatoSubscribeContext, DatoSubscribeDirective, DatoTab, DatoTabContent, DatoTabTitle, DatoTabsModule, DatoTabset, DatoTemplatePortal, DatoTextModule, DatoThemesModule, DatoToast, DatoToastComponent, DatoToastModule, DatoTogglerComponent, DatoTogglerModule, DatoTooltipDirective, DatoTooltipV2Directive, DatoTrackByPropPipe, DatoTranslateService, DatoTreePipe, DatoTriggerMulti, DatoTriggerSingle, DialogConfig, DialogResultStatus, Dimensions, EventModifiersPlugin, GridActionType, GridMinWidths, GridRowSelectionType, GridToolbarService, ISO_FORMAT, IconRegistry, KeyCodes, KeyboardEventKeys, ListValueTypes, MockService, OperatorTypes, POPPER_BOUNDARY, PaletteDirective, PanelResultCloseTrigger, PillType, PopoverCloseDirective, PopoverContentDirective, PopoverRef, PopoverTrigger, ROOT_NODE_ID, RelativeDateType, RenderMethod, RowSelectionType, RowSelectionTypeV2, SELECT_MAX_HEIGHT, SUPPORTED_LOCALES, SelectType, SnackbarRef, SnackbarType, Store, SvgRegistry, ToolbarActionType, ToolbarArea, ToolbarConfirmation, ToolbarDeleteConfirmation, ToolbarHandler, TranslatePipe, Types, _valueChanges, a, addClass, addJSObjectCompletor, allowedFileTypes, alphabeticalGroupSort, alphabeticalSort, appendChild, appendScript, appendStyle, appendToBody, assertString, camelCase, capitalize, cloneDeep, closest, coerceArray, coerceElement, compareWith, compose, convertFromTreeData, convertToTreeData, copyToClipboard, createComponent, createElement, createGUID, createHTMLCompletor, curry, dateCompare, daysOfTheMonth, debounce, declarations$2 as declarations, deepEqual, deepmerge, defaultActions$1 as defaultActions, defaultConfig, defaultEditableColumnRenderer, defaultGridOptions, defaultGridTreeLabel, defaultOptionsDisplayLimit, defaultTreeOptions, dialogSizePreset, diff, difference, differenceBy, dimensionsChanges, directives, drop, editableCellRendererWithSearchHighlight, escape, escapeRegExp, filter, filterByControlValue, filterByTerm, filterDialogDismissed, filterDialogSuccess, filterGroupByControlValue, filterGroupByTerm, filterKey, find, findIndex, findKey, fixNgLeaks, forEach, formatKeys, generateMonths, get, getAttr, getCustomRange, getDateISOString, getDefaultConfirmationOptions, getDefaultOptions, getDefaultsToastOptions, getElementCoords, getFunctionName, getGridConfiguration, getGridModel, getInitials, getLocalizedFormat, getMultiTemplate, getOptionTemplate, getPopperDefaults, getUTCDate, getVisibleActions, gridTreeFilePathKey, groupBy, groupSortOrder, has, inView, intersection, invert, isArrayValuesEqual, isArrowUpDown, isBoolean, isEmpty, isEmptyString, isEnter, isEqual, isEscape, isFraction, isFunction, isMacintosh, isNil, isNumber, isObject, isRangeCondition, isRangeCustom, isString, isTestEnv, isValidMediaLink, kebabCase, keyBy, keysSymbols, last, map, mapKeys, mapValues, maxFileSize, merge, minBy, mockInDev, mocks, ngContentResolver, noop, normalizeData, omit, omitBy, optionalDebounce, pallete, parseDateString, partial, polling, prependChild, publicApi$1 as publicApi, query, queryAll, random, rawDiff, reject, relativeDateTypes, removeClass, resolveRange, round, searchHighlightCellRenderer, searchResultsGroupSort, searchResultsSort, setAttr, setAttribute, setDimensions, setEmptyFolderClass, setGridConfiguration, setGridModel, setMaxDimensions, setMinDimensions, setStyle, setStyles, size, sortBy, stubs, supportedLocales, tapLog, tapOnce, throttle, toBoolean, toFormData, toNumber, toResponseBody, toString, toggleClass, toolbarActionToContextAction, tryParsePivotValue, unescape, union, uniq, uniqBy, uploadProgress, validBase64Image, validUrl, validateCondition, validateDate, validateDateCondition, validateFilter, validateNumberCondition, validateRange, validateStringCondition, values, workerMap, zoneStable, ɵ0$2 as ɵ0, ɵ1$2 as ɵ1, ɵ2, DATO_CORE_CONFIG as ɵb, DatoGridHelper as ɵc, Popper as ɵd, GridQuery as ɵe, GridStore as ɵf, GridService as ɵg, DatoDateRangesFilterPipe as ɵh, ListStore as ɵi, DatoListSelectAllComponent as ɵj, DatoGridMultiSelectColumnHeaderComponent as ɵk, DatoGridItemsCountCellComponent as ɵl, DatoGridV2ToolbarMoreMenuComponent as ɵm, DatoGridSearchBarComponent as ɵn, RichTextService as ɵo };
+export { APP_TRANSLATE, AceService, BaseCustomControl, COMPARE_RESULT, CUSTOM_RANGE_ID, ColorPalette, ConfirmationType, ContentRef, ContentType, CustomHeaderControllerService, DATE_PICKER_CONFIG, DATE_PICKER_POPOVER_ID, DATO_CORE_LOGGER, DATO_FORM_ERRORS, DATO_GRID_STORAGE_API, DEFAULT_FORMAT, DEFAULT_GRID_SEARCH_DEBOUNCE_TIME, DatePickerConfig, DatePickerMonthComponent, DateType, DatoAccordionComponent, DatoAccordionContentComponent, DatoAccordionGroupComponent, DatoAccordionHeaderComponent, DatoAccordionModule, DatoAceDirective, DatoAceDraggableDirective, DatoAceModule, DatoActionType, DatoAutoCompleteContentDirective, DatoAutoFocusDirective, DatoAutocompleteComponent, DatoAutocompleteDirective, DatoAutocompleteModule, DatoBreadcrumbsComponent, DatoBreadcrumbsModule, DatoButtonComponent, DatoButtonGroupComponent, DatoButtonGroupModule, DatoButtonModule, DatoCamelCasePipe, DatoCarouselComponent, DatoCarouselItemDirective, DatoCarouselItemElement, DatoCarouselModule, DatoCheckboxComponent, DatoCheckboxModule, DatoClipboardDirective, DatoColorDirective, DatoConfirmationDialogComponent, DatoControlErrorComponent, DatoControlErrorContainerDirective, DatoControlErrorsDirective, DatoCoreError, DatoCoreModule, DatoCustomHeaderTemplateComponent, DatoCustomHeaderTemplateDirective, DatoCustomMoreMenuTemplateDirective, DatoDatePickerContainerComponent, DatoDatePickerModule, DatoDatePickerRangeComponent, DatoDatePickerSingleComponent, DatoDialog, DatoDialogCloseDirective, DatoDialogComponent, DatoDialogContentComponent, DatoDialogDismissDirective, DatoDialogFooterComponent, DatoDialogHeaderComponent, DatoDialogModule, DatoDialogRef, DatoDirectivesModule, DatoDisableControlDirective, DatoDraggableDirective, DatoDynamicContentComponent, DatoDynamicContentModule, DatoEditableHeaderComponent, DatoEditableHeaderModule, DatoFileInputComponent, DatoFileInputDefaultComponent, DatoFileInputModule, DatoFilterConditions, DatoFontDirective, DatoFontIconComponent, DatoFontIconModule, DatoFormSubmitDirective, DatoFormValidationModule, DatoGrid, DatoGridAPI, DatoGridAvatarCellComponent, DatoGridColumnDisplayMenuComponent, DatoGridColumnHeaderComponent, DatoGridColumnHeaderMoreMenuComponent, DatoGridColumnTypes, DatoGridComponent, DatoGridControllerComponent, DatoGridDateFilterOptions, DatoGridFilterComponent, DatoGridFilterOptionsMap, DatoGridFilterSections, DatoGridFilterTypes, DatoGridGroupsMenuComponent, DatoGridHeaderComponent, DatoGridHeaderV2Component, DatoGridInitialsCellComponent, DatoGridItemsCellComponent, DatoGridModule, DatoGridMoreMenuActions, DatoGridNumberFilterOptions, DatoGridOnHoverComponent, DatoGridPaginationComponent, DatoGridPaginationV2Component, DatoGridStatusCellComponent, DatoGridStringFilterOptions, DatoGridToolbarComponent, DatoGridToolbarItemDirective, DatoGridToolbarItemElementDirective, DatoGridV2Component, DatoGridV2LoaderComponent, DatoGridV2Module, DatoGridV2NoDataOverlayComponent, DatoGridV2ToolbarButtonComponent, DatoGridV2ToolbarComponent, DatoGroupComponent, DatoHighlightPipe, DatoHotkeys, DatoHotkeysDirective, DatoHotkeysHelpComponent, DatoHotkeysModule, DatoIconButtonComponent, DatoIconButtonModule, DatoIconComponent, DatoIconModule, DatoInfiniteScrollComponent, DatoInfiniteScrollModule, DatoInputComponent, DatoInputModule, DatoInputNumberComponent, DatoInputNumberDirective, DatoInputNumberModule, DatoKebabCasePipe, DatoLinkButtonComponent, DatoLinkButtonModule, DatoListComponent, DatoListModule, DatoListNoDataComponent, DatoListNoResultComponent, DatoListV2Component, DatoListV2Module, DatoLoaderComponent, DatoLoadersModule, DatoMenuComponent, DatoMenuContentDirective, DatoMenuItemDirective, DatoMenuModule, DatoMenuTriggerForDirective, DatoMultiOptionComponent, DatoMultiOptionV2Component, DatoOperatorTogglerComponent, DatoOperatorTogglerModule, DatoOptionComponent, DatoOptionV2Component, DatoOptionsModule, DatoOriginDirective, DatoOverlay, DatoPageLoaderComponent, DatoPanel, DatoPanelComponent, DatoPanelContentComponent, DatoPanelFooterComponent, DatoPanelHeaderComponent, DatoPanelInternalConfig, DatoPanelModule, DatoPanelRef, DatoPillsComponent, DatoPillsModule, DatoPipesModule, DatoPopover, DatoPopoverComponent, DatoPopoverModule, DatoProgressBarComponent, DatoProgressBarModule, DatoRadioComponent, DatoRadioModule, DatoRichTextDirective, DatoRichTextModule, DatoSearchResultsGroupSortPipe, DatoSearchResultsSortPipe, DatoSearchableContainerComponent, DatoSearchableDirective, DatoSearchableHighlightDirective, DatoSearchableModule, DatoSelectActiveDirective, DatoSelectComponent, DatoSelectEmptyComponent, DatoSelectModule, DatoSliderComponent, DatoSliderModule, DatoSnackbar, DatoSnackbarComponent, DatoSnackbarModule, DatoSortableComponent, DatoSortableHandleDirective, DatoSortableModule, DatoStaticImageSrcDirective, DatoStaticImagesSrcModule, DatoSubscribeContext, DatoSubscribeDirective, DatoTab, DatoTabContent, DatoTabTitle, DatoTabsModule, DatoTabset, DatoTemplatePortal, DatoTextModule, DatoThemesModule, DatoToast, DatoToastComponent, DatoToastModule, DatoTogglerComponent, DatoTogglerModule, DatoTooltipDirective, DatoTooltipV2Directive, DatoTrackByPropPipe, DatoTranslateService, DatoTreePipe, DatoTriggerMulti, DatoTriggerSingle, DialogConfig, DialogResultStatus, Dimensions, EventModifiersPlugin, GridActionType, GridMinWidths, GridRowSelectionType, GridToolbarService, ISO_FORMAT, IconRegistry, KeyCodes, KeyboardEventKeys, ListValueTypes, MockService, OperatorTypes, POPPER_BOUNDARY, PaletteDirective, PanelResultCloseTrigger, PillType, PopoverCloseDirective, PopoverContentDirective, PopoverRef, PopoverTrigger, ROOT_NODE_ID, RelativeDateType, RenderMethod, RowSelectionType, RowSelectionTypeV2, SELECT_MAX_HEIGHT, SUPPORTED_LOCALES, SelectType, SnackbarRef, SnackbarType, Store, SvgRegistry, ToolbarActionType, ToolbarArea, ToolbarConfirmation, ToolbarDeleteConfirmation, ToolbarHandler, TranslatePipe, Types, _valueChanges, a, addClass, addJSObjectCompletor, allowedFileTypes, alphabeticalGroupSort, alphabeticalSort, appendChild, appendScript, appendStyle, appendToBody, assertString, camelCase, capitalize, cloneDeep, closest, coerceArray, coerceElement, compareWith, compose, convertFromTreeData, convertToTreeData, copyToClipboard, createComponent, createElement, createGUID, createHTMLCompletor, curry, dateCompare, daysOfTheMonth, debounce, declarations$2 as declarations, deepEqual, deepmerge, defaultActions$1 as defaultActions, defaultConfig, defaultEditableColumnRenderer, defaultGridOptions, defaultGridTreeLabel, defaultOptionsDisplayLimit, defaultTreeOptions, dialogSizePreset, diff, difference, differenceBy, dimensionsChanges, directives, drop, editableCellRendererWithSearchHighlight, escape, escapeRegExp, filter, filterByControlValue, filterByTerm, filterDialogDismissed, filterDialogSuccess, filterGroupByControlValue, filterGroupByTerm, filterKey, find, findIndex, findKey, fixNgLeaks, forEach, formatKeys, generateMonths, get, getAttr, getCustomRange, getDateISOString, getDefaultConfirmationOptions, getDefaultOptions, getDefaultsToastOptions, getElementCoords, getFunctionName, getGridConfiguration, getGridModel, getInitials, getLocalizedFormat, getMultiTemplate, getOptionTemplate, getPopperDefaults, getUTCDate, getVisibleActions, gridTreeFilePathKey, groupBy, groupSortOrder, has, inView, intersection, invert, isArrayValuesEqual, isArrowUpDown, isBoolean, isEmpty, isEmptyString, isEnter, isEqual, isEscape, isFraction, isFunction, isMacintosh, isNil, isNumber, isObject, isRangeCondition, isRangeCustom, isString, isTestEnv, isValidMediaLink, kebabCase, keyBy, keysSymbols, last, map, mapKeys, mapValues, maxFileSize, merge, minBy, mockInDev, mocks, ngContentResolver, noop, normalizeData, omit, omitBy, optionalDebounce, pallete, parseDateString, partial, polling, prependChild, publicApi$1 as publicApi, query, queryAll, random, rawDiff, reject, relativeDateTypes, removeClass, resolveRange, round, searchHighlightCellRenderer, searchResultsGroupSort, searchResultsSort, setAttr, setAttribute, setDimensions, setEmptyFolderClass, setGridConfiguration, setGridModel, setMaxDimensions, setMinDimensions, setStyle, setStyles, size, sortBy, stubs, supportedLocales, tapLog, tapOnce, throttle, toBoolean, toFormData, toNumber, toResponseBody, toString, toggleClass, toolbarActionToContextAction, tryParsePivotValue, unescape, union, uniq, uniqBy, uploadProgress, validBase64Image, validUrl, validateCondition, validateDate, validateDateCondition, validateFilter, validateNumberCondition, validateRange, validateStringCondition, values, workerMap, zoneStable, ɵ0$2 as ɵ0, ɵ1$2 as ɵ1, ɵ2, DATO_CORE_CONFIG as ɵb, DatoGridHelper as ɵc, Popper as ɵd, GridQuery as ɵe, GridStore as ɵf, GridService as ɵg, DatoDateRangesFilterPipe as ɵh, ListStore as ɵi, DatoListSelectAllComponent as ɵj, DatoGridMultiSelectColumnHeaderComponent as ɵk, DatoGridItemsCountCellComponent as ɵl, DatoGridV2ToolbarMoreMenuComponent as ɵm, DatoGridSearchBarComponent as ɵn };
 //# sourceMappingURL=datorama-core.js.map