@datorama/core 22.9.10 → 22.10.0

package/fesm2015/datorama-core.js

@@ -7604,8 +7604,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();
@@ -7710,6 +7711,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]);
         /**
@@ -7719,7 +7721,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();
         this.asyncUpdateDropdownPosition();
@@ -7993,6 +7995,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) {
@@ -8001,7 +8006,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.asyncUpdateDropdownPosition();
@@ -10513,7 +10518,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) => {
@@ -10550,14 +10555,6 @@ var GridRowSelectionType;
     GridRowSelectionType["SINGLE"] = "single";
     GridRowSelectionType["MULTIPLE"] = "multiple";
 })(GridRowSelectionType || (GridRowSelectionType = {}));
-var GridStatusColumnTypes;
-(function (GridStatusColumnTypes) {
-    GridStatusColumnTypes["SUCCESS"] = "SUCCESS";
-    GridStatusColumnTypes["FAILURE"] = "FAILURE";
-    GridStatusColumnTypes["IN_PROGRESS"] = "IN_PROGRESS";
-    GridStatusColumnTypes["PENDING"] = "PENDING";
-    GridStatusColumnTypes["WAITING"] = "WAITING";
-})(GridStatusColumnTypes || (GridStatusColumnTypes = {}));
 
 /**
  * @license
@@ -12608,9 +12605,36 @@ let GridService = class GridService {
             this.initPivotSecondaryColsProcess(params);
             params.gridOptions.enableV2_1 = true;
             params.gridOptions.saveSettings = false;
+            params.gridOptions.defaultColDef.cellClass = this.getPivotCellClass.bind(this);
+            params.gridOptions.autoGroupColumnDef.cellClass = this.getPivotCellClass.bind(this);
         }
         return params.gridOptions;
     }
+    getPivotCellClass(params) {
+        const { leafGroup, childIndex, rowGroupIndex } = params.node;
+        const gridQuery = params.colDef.headerComponentParams.gridQuery;
+        let cellClass = ``;
+        if (gridQuery && gridQuery.api) {
+            const { columns } = gridQuery.api;
+            const allDisplayedColumns = columns.getAllDisplayedColumns();
+            const col = allDisplayedColumns.find(column => {
+                return column.getColId() === params.colDef.colId;
+            });
+            const colIndex = allDisplayedColumns.indexOf(col);
+            if (rowGroupIndex <= colIndex) {
+                if (leafGroup) {
+                    if (childIndex % 2 === 0) {
+                        /** If row is even */
+                        cellClass += ' primary-100-background-color';
+                    }
+                }
+                else {
+                    cellClass += 'primary-0-background-color pointer dato-simple-bold';
+                }
+            }
+        }
+        return cellClass;
+    }
     normalizeColumns(colDefs, gridOptions = null) {
         if (!gridOptions) {
             gridOptions = this.gridQuery.getGridOptions();
@@ -12877,8 +12901,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
@@ -13771,7 +13794,7 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
     }
     ngOnDestroy() {
         this.contentInit.complete();
-        this.clearTooltip();
+        this.tooltip && this.clearTooltip();
         this.rowHoverComponent && this.rowHoverComponent.destroy();
         this.rowHoverComponent = null;
     }
@@ -13787,10 +13810,7 @@ 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 = {}]) => {
@@ -13975,51 +13995,37 @@ let DatoGridControllerComponent = class DatoGridControllerComponent {
             });
             this.addOnHoverElement();
         }
-        agGrid.cellMouseOver.pipe(untilDestroyed(this)).subscribe((event) => {
-            const { node, column } = event;
-            if (lastHoveredCell === `${node.id}-${column.getColId()}`) {
-                clearTimeout(this.cellMouseOutTimer);
-                return;
-            }
-            lastHoveredCell = `${node.id}-${column.getColId()}`;
+        agGrid.cellMouseOver
+            .pipe(filter$1(({ node, column }) => lastHoveredCell !== `${node.id}-${column.getColId()}`), untilDestroyed(this))
+            .subscribe((event) => {
+            lastHoveredCell = `${event.node.id}-${event.column.getColId()}`;
             this.showTooltip(event);
             const row = event.event.target.parentElement;
-            if (onHoverEnabled && (node.group === false || isNil(node.group)) && this.lastHoveredRow !== row) {
+            if (onHoverEnabled && (event.node.group === false || isNil(event.node.group)) && this.lastHoveredRow !== row) {
                 const previousNode = this.lastHoveredRow;
                 this.lastHoveredRow = row;
                 this.toggleRowHoverClass([previousNode, this.lastHoveredRow]);
                 this.setOnHoverState(true, event);
             }
         });
-        const onTooltipOut = merge$1(fromEvent(bodyViewport, 'scroll'), fromEvent(this.agGridEl, 'mouseleave'));
-        onTooltipOut.pipe(untilDestroyed(this)).subscribe(() => {
-            lastHoveredCell = null;
-            this.clearTooltip();
-        });
-        agGrid.cellMouseOut
+        const onTooltipOut = merge$1(fromEvent(bodyViewport, 'scroll'), fromEvent(this.agGridEl, 'mouseleave'), agGrid.cellMouseOut);
+        onTooltipOut
             .pipe(filter$1(() => !isNil(this.tooltip)), untilDestroyed(this))
             .subscribe(() => {
-            this.cellMouseOutTimer = window.setTimeout(() => this.clearTooltip());
+            this.clearTooltip();
         });
     }
     /**
      * Dispose the tooltip
      */
     clearTooltip() {
-        this.tooltip && this.tooltip.dispose();
+        this.tooltip.dispose();
         this.tooltip = null;
     }
     showTooltip(event) {
-        let cell = event.event.target;
-        if (cell.tagName === 'SPAN' && cell.scrollWidth === 0) {
-            cell = cell.parentElement;
-        }
-        if (event.colDef.editable) {
-            cell = cell.querySelector('.value-wrapper') || cell;
-        }
+        const cell = event.event.target;
         const textOverflow = cell.offsetWidth < cell.scrollWidth;
         if (textOverflow) {
-            clearTimeout(this.cellMouseOutTimer);
             const params = { cell, value: cell.innerText };
             isNil(this.tooltip) ? this.createAndShowTooltip(params) : this.updateTooltip(params);
         }
@@ -14531,7 +14537,7 @@ let DatoGridPaginationV2Component = class DatoGridPaginationV2Component {
     }
     ngOnInit() {
         this.gridQuery
-            .waitForGrid(() => this.gridQuery.gridRef.filterChanged)
+            .waitForGrid(() => merge$1(this.gridQuery.gridRef.filterChanged, this.gridQuery.gridRef.rowGroupOpened, this.gridQuery.gridRef.expandOrCollapseAll))
             .pipe(untilDestroyed(this))
             .subscribe(() => {
             this.gridApi.paginationGoToPage(0);
@@ -14929,12 +14935,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();
@@ -17305,7 +17305,6 @@ let DatoPageLoaderComponent = class DatoPageLoaderComponent {
     constructor() {
         this.msg = '';
         this.salesforce = false;
-        this.size = 'medium';
         this.circleIds = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'];
     }
 };
@@ -17317,14 +17316,10 @@ __decorate([
     Input(),
     __metadata("design:type", Object)
 ], DatoPageLoaderComponent.prototype, "salesforce", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], DatoPageLoaderComponent.prototype, "size", void 0);
 DatoPageLoaderComponent = __decorate([
     Component({
         selector: 'dato-page-loader',
-        template: "<div class=\"d-flex-column align-center\">\n    <ng-container *ngIf=\"salesforce; else datoramaPageLoader\">\n        <div class=\"slds-spinner_container\">\n            <div role=\"status\" class=\"slds-spinner slds-spinner_brand\" [ngClass]=\"'slds-spinner_' + size\">\n                <div class=\"slds-spinner__dot-a\"></div>\n                <div class=\"slds-spinner__dot-b\"></div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-template #datoramaPageLoader>\n        <div class=\"animation-container d-flex align-center d-flex-wrap\">\n            <div class=\"circle d-flex align-center\" *ngFor=\"let id of circleIds\" [ngClass]=\"'circle-' + id\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n                    <circle cx=\"6\" cy=\"6\" r=\"5\" />\n                </svg>\n            </div>\n        </div>\n    </ng-template>\n    <span class=\"loading-message simple-bold\">{{msg | translate}}</span>\n</div>\n",
+        template: "<div class=\"d-flex-column align-center\">\n    <ng-container *ngIf=\"salesforce; else datoramaPageLoader\">\n        <div class=\"slds-spinner_container\">\n            <div role=\"status\" class=\"slds-spinner slds-spinner_medium slds-spinner_brand\">\n                <div class=\"slds-spinner__dot-a\"></div>\n                <div class=\"slds-spinner__dot-b\"></div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-template #datoramaPageLoader>\n        <div class=\"animation-container d-flex align-center d-flex-wrap\">\n            <div class=\"circle d-flex align-center\" *ngFor=\"let id of circleIds\" [ngClass]=\"'circle-' + id\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n                    <circle cx=\"6\" cy=\"6\" r=\"5\" />\n                </svg>\n            </div>\n        </div>\n    </ng-template>\n    <span class=\"loading-message simple-bold\">{{msg | translate}}</span>\n</div>",
         changeDetection: ChangeDetectionStrategy.OnPush
     })
 ], DatoPageLoaderComponent);
@@ -18212,13 +18207,7 @@ DatoGridV2ToolbarMoreMenuComponent = __decorate([
 let DatoGridStatusCellComponent = class DatoGridStatusCellComponent {
     constructor(cdr) {
         this.cdr = cdr;
-        this.defaultConfigByStatus = {
-            [GridStatusColumnTypes.SUCCESS]: { icon: 'success-line', iconCssClass: 'green-400-color' },
-            [GridStatusColumnTypes.FAILURE]: { icon: 'failed-line', iconCssClass: 'red-400-color' },
-            [GridStatusColumnTypes.PENDING]: { icon: 'time', iconCssClass: 'yellow-400-color' },
-            [GridStatusColumnTypes.WAITING]: { icon: 'info-line', iconCssClass: 'orange-400-color' },
-            [GridStatusColumnTypes.IN_PROGRESS]: { showSpinner: true }
-        };
+        this.DEFAULT_MIN_WIDTH = 100;
     }
     agInit(params) {
         const { value, valueFormatted, node } = params;
@@ -18233,14 +18222,15 @@ let DatoGridStatusCellComponent = class DatoGridStatusCellComponent {
         const mainCustomCellConfig = customCellConfig || {};
         const valueCustomCellConfig = valueToCustomCellConfig ? valueToCustomCellConfig[params.value] || {} : {};
         const config = Object.assign(Object.assign({}, mainCustomCellConfig), valueCustomCellConfig);
-        const { textCssClass, icon, iconCssClass, showSpinner, getAdditionalText, additionalTextCssClass, getIsVisible, status } = config;
-        const defaultConfig = this.defaultConfigByStatus[status] || {};
+        const { color, icon, cssClass, iconCssClass, minWidth, showSpinner, getAdditionalText, getIsVisible } = config;
         this.isVisible = !getIsVisible || getIsVisible(params.data);
-        this.icon = icon || defaultConfig.icon;
-        this.iconCssClass = iconCssClass || defaultConfig.iconCssClass || '';
-        this.textCssClass = textCssClass || '';
-        this.additionalTextCssClass = additionalTextCssClass || '';
-        this.showSpinner = !!showSpinner || !!defaultConfig.showSpinner;
+        this.color = color || 'primary';
+        this.backgroundClass = `${this.color}-${this.color === 'accent' ? '100' : '200'}-background-color`;
+        this.icon = icon;
+        this.minWidth = minWidth || this.DEFAULT_MIN_WIDTH;
+        this.cssClass = cssClass || '';
+        this.iconCssClass = iconCssClass || '';
+        this.showSpinner = showSpinner;
         this.additionalText = getAdditionalText ? getAdditionalText(params.data) : null;
     }
     refresh(params) {
@@ -18255,9 +18245,8 @@ DatoGridStatusCellComponent.ctorParameters = () => [
 DatoGridStatusCellComponent = __decorate([
     Component({
         selector: 'dato-grid-status-cell',
-        template: "<div *ngIf=\"!isGroup && isVisible\" class=\"height-100 d-flex items-center\">\n    <dato-icon *ngIf=\"icon\" class=\"mr-6 {{iconCssClass}}\" [icon]=\"icon\" datoSize=\"sm\"></dato-icon>\n    <dato-page-loader *ngIf=\"showSpinner\" [salesforce]=\"true\" size=\"x-small\" class=\"mr-10 mt-15\"></dato-page-loader>\n    <div class=\"dato-simple status line-height-18 {{textCssClass}}\" [class.ellipsis]=\"!additionalText\"\n         [datoTooltipV2]=\"status\" [showOnlyOnTextOverflow]=\"true\" [tooltipCheckInView]=\"false\">\n        {{status}}\n    </div>\n    <div *ngIf=\"additionalText\" class=\"dato-simple ml-3 ellipsis line-height-18 {{additionalTextCssClass}}\"\n         [datoTooltipV2]=\"status + ' ' + additionalText\" [showOnlyOnTextOverflow]=\"true\" [tooltipCheckInView]=\"false\">\n        {{additionalText}}\n    </div>\n</div>\n<span *ngIf=\"isGroup\">{{status}}</span>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".line-height-18{line-height:18px}"]
+        template: "<div *ngIf=\"!isGroup && isVisible\" class=\"height-100 d-flex items-center\">\n    <div *ngIf=\"status\" class=\"d-flex justify-center items-center px-15 py-5 {{backgroundClass}} {{cssClass}}\" [style.min-width.px]=\"minWidth\">\n        <dato-icon *ngIf=\"icon\" class=\"mr-5 {{iconCssClass}}\" [icon]=\"icon\" datoSize=\"sm\"></dato-icon>\n        <div class=\"dato-note {{color}}-800-color\" [class.ellipsis]=\"!additionalText\"\n             [datoTooltipV2]=\"status\" [showOnlyOnTextOverflow]=\"true\" [tooltipCheckInView]=\"false\" [datoTooltipDisabled]=\"!!additionalText\">\n            {{status}}\n        </div>\n        <div *ngIf=\"additionalText\" class=\"dato-note {{color}}-800-color ml-3 ellipsis\"\n             [datoTooltipV2]=\"status + ' ' + additionalText\" [showOnlyOnTextOverflow]=\"true\" [tooltipCheckInView]=\"false\">\n            {{additionalText}}\n        </div>\n        <span *ngIf=\"showSpinner\" class=\"dato-spinner-loader ml-5\"></span>\n    </div>\n</div>\n<span *ngIf=\"isGroup\">{{status}}</span>\n",
+        changeDetection: ChangeDetectionStrategy.OnPush
     }),
     __metadata("design:paramtypes", [ChangeDetectorRef])
 ], DatoGridStatusCellComponent);
@@ -19013,39 +19002,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.
@@ -19059,20 +19015,20 @@ 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';
         this.isOneLine = false;
         this.initialValue = '';
-        this.defaultPlugins = 'link fullscreen image lists table autocomplete';
+        this.defaultPlugins = 'link fullscreen textcolor colorpicker image lists table textpattern autocomplete';
         this.defaultToolbar = [
-            'fontfamily fontsize forecolor backcolor bold italic underline link',
+            'fontselect fontsizeselect forecolor backcolor bold italic underline link',
             'alignleft aligncenter alignright alignjustify outdent indent | table numlist bullist  | image fullscreen'
         ];
     }
@@ -19091,11 +19047,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) {
@@ -19116,6 +19089,8 @@ let DatoRichTextDirective = DatoRichTextDirective_1 = class DatoRichTextDirectiv
             target: this.host.nativeElement,
             width: this.width || 600,
             height: this.height || 300,
+            force_br_newlines: true,
+            force_p_newlines: false,
             resize: 'both',
             branding: false,
             inline: this.inline,
@@ -19123,12 +19098,10 @@ let DatoRichTextDirective = DatoRichTextDirective_1 = class DatoRichTextDirectiv
             readonly: this.disabled,
             plugins: this.plugins || this.defaultPlugins,
             toolbar: isNil(this.toolbar) ? this.defaultToolbar : this.toolbar,
-            font_size_formats: '8px 10px 12px 14px 18px 24px 36px',
+            fontsize_formats: '8px 10px 12px 14px 18px 24px 36px',
             min_width: 480,
             menubar: false,
             autocomplete: this.autocompleteOptions,
-            suffix: '.min',
-            skin: 'tinymce-5',
             setup: editor => {
                 this.editor = editor;
                 editor.on('init', (e) => {
@@ -19196,9 +19169,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(),
@@ -19264,9 +19237,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);
 
 /**
@@ -21547,9 +21521,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();
         });
@@ -22814,7 +22786,7 @@ function fixNgLeaks() {
     };
 }
 
-window.coreVersion = '22.10.7-rc.';
+window.coreVersion = '22.10.0';
 
 /**
  * @license
@@ -22828,5 +22800,5 @@ window.coreVersion = '22.10.7-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, GridStatusColumnTypes, 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