@datorama/core 22.0.2 → 22.1.1-rc.2

package/bundles/datorama-core.umd.js

@@ -8629,9 +8629,8 @@
         DatoSelectComponent.prototype.writeValue = function (activeOptions) {
             this._model = activeOptions ? akita.coerceArray(activeOptions) : [];
             if (this.options) {
-                var overTheLimit = this.limitSelectedTo && this.isMulti && this._model.length >= this.limitSelectedTo;
                 this.markAsActive(this._model, { deselectAll: true });
-                overTheLimit && this.updateDisabledState();
+                this.limitSelectedTo && this.updateDisabledState();
             }
             /** For later updates */
             this.cdr.markForCheck();
@@ -8668,7 +8667,7 @@
              */
             if (this.hasValue && this._initialOpen) {
                 this.markAsActive(this._model);
-                if (this.limitSelectedTo && this._model.length === this.limitSelectedTo) {
+                if (this.limitSelectedTo) {
                     this.updateDisabledState();
                 }
                 this._initialOpen = false;
@@ -8757,7 +8756,6 @@
         };
         DatoSelectComponent.prototype.removeOption = function (option) {
             var _this = this;
-            var updateDisabled = this.limitSelectedTo && this._model.length === this.limitSelectedTo;
             this._model = this._model.filter(function (current) { return current[_this.idKey] !== option[_this.idKey]; });
             var optionToRemove = this.options.find(function (datoOption) { return datoOption.option && datoOption.option[_this.idKey] === option[_this.idKey]; });
             /**
@@ -8767,7 +8765,7 @@
             if (optionToRemove) {
                 optionToRemove.active = false;
             }
-            updateDisabled && this.updateDisabledState();
+            this.limitSelectedTo && this.updateDisabledState();
             this.onChange(this._model);
             this.cdr.markForCheck();
             if (this.datoOverlay.attached) {
@@ -9117,9 +9115,6 @@
             if (!datoOption) {
                 return;
             }
-            var modelLength = this._model.length;
-            var updateDisabled = this.limitSelectedTo &&
-                (modelLength === this.limitSelectedTo || (modelLength === this.limitSelectedTo - 1 && !datoOption.active));
             datoOption.active = !datoOption.active;
             var rawOption = datoOption.option;
             if (datoOption.active) {
@@ -9128,7 +9123,7 @@
             else {
                 this._model = this._model.filter(function (current) { return current[_this.idKey] !== rawOption[_this.idKey]; });
             }
-            updateDisabled && this.updateDisabledState();
+            this.limitSelectedTo && this.updateDisabledState();
             this.onChange(this._model);
             this.cdr.markForCheck();
             this.datoOverlay.scheduleUpdate();
@@ -12015,7 +12010,7 @@
         return contextActions;
     }
 
-    var DATO_GRID_STORAGE_API = new core.InjectionToken('DATO_GRID_STORAGE_API');
+    var DATO_GRID_STORAGE_API = new core.InjectionToken('DATO_GRID_STORAGE_AP');
 
     var defaultEditableColumnRenderer = function (params) {
         return params && params.value ? "<div class=\"value-wrapper ellipsis\">" + params.value + "</div>" : null;
@@ -14466,7 +14461,8 @@
             this.updateSettings({ gridAlignment: gridAlignment, columnsSizes: null });
         };
         GridService.prototype.saveSettingsToServer = function (settings) {
-            this.storageAPI.set(this.gridName, settings);
+            var isGlobal = this.gridQuery.getGridOptions().isGlobalSettings;
+            this.storageAPI.set(this.gridName, settings, isGlobal);
         };
         /**
          * @internal used to log grid events to the platform's logging service
@@ -14936,12 +14932,13 @@
                 if (userProvidedColDef) {
                     colDef.filter = userProvidedColDef.filter;
                 }
-                if (colDef.pivotKeys) {
-                    colDef.pivotKeys = colDef.pivotKeys.map(function (key) {
-                        var 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 = function (colGroupDef) {
                 if (colGroupDef.headerName) {
@@ -14966,12 +14963,13 @@
                 else {
                     colGroupDef.headerClass = ['empty-pivot-header'];
                 }
-                if (colGroupDef.pivotKeys) {
-                    colGroupDef.pivotKeys = colGroupDef.pivotKeys.map(function (key) {
-                        var parsedKey = tryParsePivotValue(key);
-                        return (parsedKey && parsedKey.value) || '';
-                    });
-                }
+                // if (colGroupDef.pivotKeys) {
+                //   colGroupDef.pivotKeys = colGroupDef.pivotKeys.map(key => {
+                //     const parsedKey = tryParsePivotValue(key);
+                //
+                //     return (parsedKey && parsedKey.value) || '';
+                //   });
+                // }
             };
         };
         GridService.prototype.setPivotModeRows = function (data) {
@@ -15464,7 +15462,10 @@
                 .pipe(operators.switchMap(function () {
                 _this.gridOptions = _this.normalizeOptions();
                 agGrid.gridOptions = _this.gridOptions;
-                var settingsLoader = _this.gridOptions.saveSettings === false ? rxjs.of(null) : _this.storageAPI.get(_this.gridOptions.gridName);
+                var isGlobal = _this.gridOptions.isGlobalSettings;
+                var settingsLoader = _this.gridOptions.saveSettings === false
+                    ? rxjs.of(null)
+                    : _this.storageAPI.get(_this.gridOptions.gridName, isGlobal);
                 return rxjs.combineLatest([agGrid.gridReady, settingsLoader]);
             }), ngxTakeUntilDestroy.untilDestroyed(this))
                 .subscribe(function (_a) {
@@ -16424,6 +16425,9 @@
         DatoGridPaginationV2Component.prototype.toggleGroupsState = function () {
             this.isExpanded ? this.gridApi.collapseAll() : this.gridApi.expandAll();
             this.isExpanded = !this.isExpanded;
+            // this.gridApi.forEachNode((node: RowNode) => {
+            //   node.setExpanded(this.isExpanded);
+            // });
         };
         DatoGridPaginationV2Component.prototype.autoFitGrid = function (type) {
             this.gridService.fitGrid(type);
@@ -16630,6 +16634,7 @@
             this.gridActions = { mainList: [], moreMenu: [] };
             this.searchPlaceholder = this.translate.transform('core.search');
             this.rowActionsShortLabelThreshold = 1539;
+            this.displayCustomGridActionsSeparator = true;
             this.openMenus = {
                 group: false,
                 settings: false
@@ -16738,6 +16743,18 @@
             this.registerGroupListeners();
             this.subscribeRowsSelectionData();
         };
+        DatoGridV2ToolbarComponent.prototype.getCellValueChangeEvent = function () {
+            var _this = this;
+            return this.gridController.gridQuery.waitForGrid(function () {
+                return _this.gridQuery.gridRef.cellValueChanged.pipe(operators.debounceTime(100), ngxTakeUntilDestroy.untilDestroyed(_this));
+            });
+        };
+        DatoGridV2ToolbarComponent.prototype.getRowDataUpdatedEvent = function () {
+            var _this = this;
+            return this.gridController.gridQuery.waitForGrid(function () {
+                return _this.gridQuery.gridRef.rowDataUpdated.pipe(operators.debounceTime(100), ngxTakeUntilDestroy.untilDestroyed(_this));
+            });
+        };
         DatoGridV2ToolbarComponent.prototype.onActionClick = function (action) {
             if (isFunction(action.onClick)) {
                 var selectedRowsCount = this.gridController.gridQuery.getSelectedRowsCount();
@@ -17037,10 +17054,14 @@
             core.Input(),
             __metadata("design:type", Number)
         ], DatoGridV2ToolbarComponent.prototype, "rowActionsShortLabelThreshold", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], DatoGridV2ToolbarComponent.prototype, "displayCustomGridActionsSeparator", void 0);
         DatoGridV2ToolbarComponent = __decorate([
             core.Component({
                 selector: 'dato-grid-toolbar-v2',
-                template: "<section *ngIf=\"gridController.gridQuery.gridReady$ | async\" class=\"d-flex mb-20 justify-between items-center main-container\" [class.mx-30]=\"enableBackground\">\n\n    <section [ngClass]=\"{ 'd-flex items-center right-section': enableV2_1 }\">\n        <!--  Dynamic content for the left area -->\n        <div data-auto-id=\"grid-toolbar-dynamic-left\">\n            <ng-content select=\"[toolbarLeftArea]\"></ng-content>\n        </div>\n\n        <div class=\"d-flex items-center\">\n            <dato-grid-search-bar *ngIf=\"enableSearch\" [searchPlaceholder]=\"searchPlaceholder\"></dato-grid-search-bar>\n            <ng-container *ngIf=\"enableV2_1 && selectedRowsCount > 0\">\n                <div class=\"d-flex items-center\">\n                    <div class=\"chip align-center d-flex dato-note px-9 nowrap ml-16\">\n                        <span data-auto-id=\"grid-selected-items-text\">{{ (allPageRowsSelected ? 'core.all-items-in-page-selected' : 'core.selected-items') | translate:{ itemsCount: selectedRowsCount } }}</span>\n                        <dato-icon datoType=\"primary\" datoIcon=\"close\" datoSize=\"md\" class=\"ml-6 pointer\" (click)=\"clearSelectedRows()\"\n                                   data-auto-id=\"grid-clear-selected-rows\"></dato-icon>\n                    </div>\n                    <dato-link *ngIf=\"allPageRowsSelected\" (click)=\"selectAllPages()\" datoSize=\"sm\" class=\"ml-10\"\n                               data-auto-id=\"grid-select-all-pages\">\n                        <span>{{'core.select-all-items' | translate:{ itemsCount: totalRowsCount } }}</span>\n                    </dato-link>\n                </div>\n                <div *ngIf=\"hasRowActions\" class=\"separator\"></div>\n            </ng-container>\n        </div>\n\n        <!--  Row Actions-->\n        <div class=\"d-flex items-center\" *ngIf=\"isRowActionsVisible\">\n\n            <ng-container *ngFor=\"let rowAction of rowActions.mainList; index as i; last as isLast\">\n\n                <div *ngIf=\"!isRowActionHidden(rowAction)\"\n                    [attr.data-auto-id]=\"'grid-toolbar-action-' + rowAction.key\"\n                    [attr.data-action-index]=\"'grid-toolbar-action-' + i\"\n                    [class.disabled-action]=\"isActionDisabled(rowAction)\">\n                    <ng-container [ngTemplateOutlet]=\"rowAction.template || defaultButton\"\n                                  [ngTemplateOutletContext]=\"{disabled: isActionDisabled(rowAction)}\"></ng-container>\n                </div>\n\n                <ng-template #defaultButton>\n                    <div (click)=\"onActionClick(rowAction)\">\n                        <dato-grid-toolbar-button [icon]=\"rowAction.icon\"\n                                                  [disabled]=\"isActionDisabled(rowAction)\"\n                                                  [label]=\"rowAction.label\"\n                                                  [shortLabel]=\"rowAction.shortLabel\"\n                                                  [tooltip]=\"rowAction.tooltip\"\n                                                  [getMenu]=\"rowAction.getMenu\"\n                                                  [enableV2_1]=\"enableV2_1\"\n                                                  [isLast]=\"isLast\"\n                                                  [widthToHideLabel]=\"widthToHideActionsLabels\">\n                        </dato-grid-toolbar-button>\n                    </div>\n                </ng-template>\n            </ng-container>\n\n            <div *ngIf=\"rowActions.moreMenu.length > 0\" class=\"separator\"></div>\n            <dato-grid-toolbar-more-menu [actions]=\"rowActions.moreMenu\" (actionClick)=\"onActionClick($event)\" [isRowActions]=\"true\">\n            </dato-grid-toolbar-more-menu>\n        </div>\n\n    </section>\n\n\n    <!--  General Actions -->\n    <div class=\"d-flex items-center\">\n        <!--  Dynamic content for the right area -->\n        <div #customActions data-auto-id=\"grid-toolbar-dynamic-right\">\n            <ng-content select=\"[toolbarRightArea]\"></ng-content>\n        </div>\n        <div *ngIf=\"customActions.childNodes.length\" class=\"separator\"></div>\n        <!--  Group buttons  -->\n        <div *ngIf=\"groupsAllowed\" class=\"d-flex grouping-section opacity-0 invisible\" [class.open]=\"openMenus.group || hasGroups\">\n            <dato-icon-button [class.active]=\"openMenus.group\" (click)=\"executeTableAction('Group from Toolbar')\"\n                              data-auto-id=\"grid-toolbar-open-groups\"\n                              removeIconPadding datoSize=\"md\" datoType=\"none\" icon=\"group\" iconWidth=\"17px\"\n                              datoTooltip=\"core.row-grouping\" #groupTrigger\n                              class=\"mr-10 pointer\"></dato-icon-button>\n            <dato-icon-button data-auto-id=\"grid-toolbar-toggle-expand\" datoSize=\"md\" datoType=\"none\"\n                              (click)=\"executeTableAction('Collapse Expand')\"\n                              [icon]=\"rowGroupsCollapsed ? 'expand' : 'collapse'\"\n                              [disabled]=\"!hasGroups\"\n                              [datoTooltip]=\"'core.' + (rowGroupsCollapsed ? 'expand' : 'collapse') + '-rows'\"\n                              class=\"pointer\"></dato-icon-button>\n            <div class=\"separator\"></div>\n        </div>\n\n        <!--  Settings and export  -->\n        <ng-container *ngIf=\"createAction\">\n            <dato-button datoSize=\"sm\" class=\"pointer primary-300-color\" (click)=\"onActionClick(createAction)\"\n                         [datoTooltip]=\"createAction.tooltip\" [attr.data-auto-id]=\"'grid-toolbar-action-' + createAction.key\">\n                <dato-icon *ngIf=\"createAction.icon\" [icon]=\"createAction.icon\" class=\"mr-5\"></dato-icon>\n                {{ createAction.label | translate }}\n            </dato-button>\n            <div class=\"separator\"></div>\n        </ng-container>\n        <ng-container *ngFor=\"let gridAction of gridActions.mainList; index as i\">\n            <div *ngIf=\"gridAction.getMenu else button\" [datoMenuTriggerFor]=\"gridAction.getMenu()\">\n                <ng-container [ngTemplateOutlet]=\"button\"></ng-container>\n            </div>\n            <ng-template #button>\n                <dato-icon datoSize=\"sm\" (click)=\"onActionClick(gridAction)\"\n                           [attr.data-auto-id]=\"'grid-toolbar-action-' + gridAction.key\"\n                           [attr.data-action-index]=\"'grid-toolbar-general-action-' + i\"\n                           [icon]=\"gridAction.icon\" class=\"pointer primary-300-color\"\n                           [class.mr-16]=\"!gridAction.separator\"\n                           [datoTooltip]=\"gridAction.tooltip || gridAction.label\">\n                </dato-icon>\n            </ng-template>\n            <div *ngIf=\"gridAction.separator\" class=\"separator\"></div>\n        </ng-container>\n\n        <dato-icon data-auto-id=\"grid-toolbar-export\" datoSize=\"sm\"\n                          (click)=\"executeTableAction('Export')\" *ngIf=\"displayExport && !isTreeMode\"\n                          icon=\"export\" class=\"pointer mr-16 primary-300-color\" datoTooltip=\"core.export-table\"></dato-icon>\n        <dato-icon [class.active]=\"openMenus.settings\" (click)=\"openMenus.settings = true\"\n                          data-auto-id=\"grid-toolbar-settings\" datoSize=\"sm\"\n                          icon=\"account\" class=\"pointer primary-300-color\" datoTooltip=\"core.table-settings\"\n                          #settingsTrigger\n                          [datoMenuTriggerFor]=\"settingsMenu\"></dato-icon>\n\n        <ng-container *ngIf=\"gridActions.moreMenu.length > 0\">\n            <div class=\"separator\"></div>\n            <dato-grid-toolbar-more-menu [actions]=\"gridActions.moreMenu\" (actionClick)=\"onActionClick($event)\" [isRowActions]=\"false\">\n            </dato-grid-toolbar-more-menu>\n        </ng-container>\n\n\n        <dato-menu #settingsMenu=\"datoMenu\" menuClass=\"grid-settings-menu\" placement=\"bottom-end\"\n                   (menuClosed)=\"openMenus.settings = false\">\n            <ng-template datoMenuContent>\n                <button data-auto-id=\"grid-toolbar-settings-autofit-page\" datoMenuItem\n                        (click)=\"executeTableAction('Autofit to Page')\">\n                    <dato-icon datoSize=\"sm\" icon=\"maximize-horizontal\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.autofitPage' | translate }}</button>\n                <button data-auto-id=\"grid-toolbar-settings-autofit-content\" datoMenuItem\n                        (click)=\"executeTableAction('Autofit to Content')\">\n                    <dato-icon datoSize=\"sm\" icon=\"minimize-horizontal\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.autofitContent' | translate }}</button>\n                <ng-container *ngIf=\"groupsAllowed\">\n                    <button data-auto-id=\"grid-toolbar-settings-group\" datoMenuItem (click)=\"executeTableAction('Group from Settings')\">\n                        <dato-icon datoSize=\"sm\" icon=\"group\" class=\"mr-4 primary-300-color\"></dato-icon>\n                        {{ 'core.group' | translate }}\n                    </button>\n                </ng-container>\n                <button data-auto-id=\"grid-toolbar-settings-toggle-columns\" datoMenuItem (click)=\"executeTableAction('Show Hide Column')\">\n                    <dato-icon datoSize=\"sm\" icon=\"hide\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    <span>{{ 'core.hideShowColumns' | translate }}<span\n                            class=\"dato-simple-italic ml-5 primary-200-color\">{{hiddenColumns}}</span></span>\n                </button>\n                <button data-auto-id=\"grid-toolbar-settings-reset-settings\" datoMenuItem\n                        (click)=\"executeTableAction('Reset Settings')\">\n                    <dato-icon datoSize=\"sm\" icon=\"reset-table\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.resetTableSettings' | translate }}\n                </button>\n                <button data-auto-id=\"grid-toolbar-settings-reset-filters\" datoMenuItem\n                        (click)=\"executeTableAction('Reset Filters')\">\n                    <dato-icon datoSize=\"sm\" icon=\"reset-filters\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.resetAllFilters' | translate }}\n                </button>\n                <button data-auto-id=\"grid-toolbar-export\" datoMenuItem\n                        (click)=\"executeTableAction('Export')\" *ngIf=\"this.displayExport && isTreeMode\">\n                <dato-icon datoSize=\"sm\"\n                           icon=\"export\" class=\"pointer mr-5 primary-300-color\" datoTooltip=\"core.export-table\"></dato-icon>\n                    {{ 'core.export-table' | translate }}\n                </button>\n            </ng-template>\n        </dato-menu>\n    </div>\n</section>\n\n\n",
+                template: "<section *ngIf=\"gridController.gridQuery.gridReady$ | async\" class=\"d-flex mb-20 justify-between items-center main-container\" [class.mx-30]=\"enableBackground\">\n\n    <section [ngClass]=\"{ 'd-flex items-center right-section': enableV2_1 }\">\n        <!--  Dynamic content for the left area -->\n        <div data-auto-id=\"grid-toolbar-dynamic-left\">\n            <ng-content select=\"[toolbarLeftArea]\"></ng-content>\n        </div>\n\n        <div class=\"d-flex items-center\">\n            <dato-grid-search-bar *ngIf=\"enableSearch\" [searchPlaceholder]=\"searchPlaceholder\"></dato-grid-search-bar>\n            <ng-container *ngIf=\"enableV2_1 && selectedRowsCount > 0\">\n                <div class=\"d-flex items-center\">\n                    <div class=\"chip align-center d-flex dato-note px-9 nowrap ml-16\">\n                        <span data-auto-id=\"grid-selected-items-text\">{{ (allPageRowsSelected ? 'core.all-items-in-page-selected' : 'core.selected-items') | translate:{ itemsCount: selectedRowsCount } }}</span>\n                        <dato-icon datoType=\"primary\" datoIcon=\"close\" datoSize=\"md\" class=\"ml-6 pointer\" (click)=\"clearSelectedRows()\"\n                                   data-auto-id=\"grid-clear-selected-rows\"></dato-icon>\n                    </div>\n                    <dato-link *ngIf=\"allPageRowsSelected\" (click)=\"selectAllPages()\" datoSize=\"sm\" class=\"ml-10\"\n                               data-auto-id=\"grid-select-all-pages\">\n                        <span>{{'core.select-all-items' | translate:{ itemsCount: totalRowsCount } }}</span>\n                    </dato-link>\n                </div>\n                <div *ngIf=\"hasRowActions\" class=\"separator\"></div>\n            </ng-container>\n        </div>\n\n        <!--  Row Actions-->\n        <div class=\"d-flex items-center\" *ngIf=\"isRowActionsVisible\">\n\n            <ng-container *ngFor=\"let rowAction of rowActions.mainList; index as i; last as isLast\">\n\n                <div *ngIf=\"!isRowActionHidden(rowAction)\"\n                    [attr.data-auto-id]=\"'grid-toolbar-action-' + rowAction.key\"\n                    [attr.data-action-index]=\"'grid-toolbar-action-' + i\"\n                    [class.disabled-action]=\"isActionDisabled(rowAction)\">\n                    <ng-container [ngTemplateOutlet]=\"rowAction.template || defaultButton\"\n                                  [ngTemplateOutletContext]=\"{disabled: isActionDisabled(rowAction)}\"></ng-container>\n                </div>\n\n                <ng-template #defaultButton>\n                    <div (click)=\"onActionClick(rowAction)\">\n                        <dato-grid-toolbar-button [icon]=\"rowAction.icon\"\n                                                  [disabled]=\"isActionDisabled(rowAction)\"\n                                                  [label]=\"rowAction.label\"\n                                                  [shortLabel]=\"rowAction.shortLabel\"\n                                                  [tooltip]=\"rowAction.tooltip\"\n                                                  [getMenu]=\"rowAction.getMenu\"\n                                                  [enableV2_1]=\"enableV2_1\"\n                                                  [isLast]=\"isLast\"\n                                                  [widthToHideLabel]=\"widthToHideActionsLabels\">\n                        </dato-grid-toolbar-button>\n                    </div>\n                </ng-template>\n            </ng-container>\n\n            <div *ngIf=\"rowActions.moreMenu.length > 0\" class=\"separator\"></div>\n            <dato-grid-toolbar-more-menu [actions]=\"rowActions.moreMenu\" (actionClick)=\"onActionClick($event)\" [isRowActions]=\"true\">\n            </dato-grid-toolbar-more-menu>\n        </div>\n\n    </section>\n\n\n    <!--  General Actions -->\n    <div class=\"d-flex items-center\">\n        <!--  Create action  -->\n        <ng-container *ngIf=\"createAction\">\n            <dato-button datoSize=\"sm\" class=\"pointer primary-300-color\" (click)=\"onActionClick(createAction)\"\n                         [datoTooltip]=\"createAction.tooltip\" [attr.data-auto-id]=\"'grid-toolbar-action-' + createAction.key\">\n                <dato-icon *ngIf=\"createAction.icon\" [icon]=\"createAction.icon\" class=\"mr-5\"></dato-icon>\n                {{ createAction.label | translate }}\n            </dato-button>\n            <div class=\"separator\"></div>\n        </ng-container>\n\n        <!--  Dynamic content for the right area -->\n        <div #customActions data-auto-id=\"grid-toolbar-dynamic-right\">\n            <ng-content select=\"[toolbarRightArea]\"></ng-content>\n        </div>\n        <div *ngIf=\"customActions.childNodes.length && displayCustomGridActionsSeparator\" class=\"separator\"></div>\n\n        <!--  Group buttons  -->\n        <div *ngIf=\"groupsAllowed\" class=\"d-flex grouping-section opacity-0 invisible\" [class.open]=\"openMenus.group || hasGroups\">\n            <dato-icon-button [class.active]=\"openMenus.group\" (click)=\"executeTableAction('Group from Toolbar')\"\n                              data-auto-id=\"grid-toolbar-open-groups\"\n                              removeIconPadding datoSize=\"md\" datoType=\"none\" icon=\"group\" iconWidth=\"17px\"\n                              datoTooltip=\"core.row-grouping\" #groupTrigger\n                              class=\"mr-10 pointer\"></dato-icon-button>\n            <dato-icon-button data-auto-id=\"grid-toolbar-toggle-expand\" datoSize=\"md\" datoType=\"none\"\n                              (click)=\"executeTableAction('Collapse Expand')\"\n                              [icon]=\"rowGroupsCollapsed ? 'expand' : 'collapse'\"\n                              [disabled]=\"!hasGroups\"\n                              [datoTooltip]=\"'core.' + (rowGroupsCollapsed ? 'expand' : 'collapse') + '-rows'\"\n                              class=\"pointer\"></dato-icon-button>\n            <div class=\"separator\"></div>\n        </div>\n\n        <!-- Grid Actions -->\n        <ng-container *ngFor=\"let gridAction of gridActions.mainList; index as i\">\n            <div *ngIf=\"gridAction.getMenu else button\" [datoMenuTriggerFor]=\"gridAction.getMenu()\">\n                <ng-container [ngTemplateOutlet]=\"button\"></ng-container>\n            </div>\n            <ng-template #button>\n                <dato-icon datoSize=\"sm\" (click)=\"onActionClick(gridAction)\"\n                           [attr.data-auto-id]=\"'grid-toolbar-action-' + gridAction.key\"\n                           [attr.data-action-index]=\"'grid-toolbar-general-action-' + i\"\n                           [icon]=\"gridAction.icon\" class=\"pointer primary-300-color\"\n                           [class.mr-16]=\"!gridAction.separator\"\n                           [datoTooltip]=\"gridAction.tooltip || gridAction.label\">\n                </dato-icon>\n            </ng-template>\n            <div *ngIf=\"gridAction.separator\" class=\"separator\"></div>\n        </ng-container>\n\n        <!-- Export -->\n        <dato-icon data-auto-id=\"grid-toolbar-export\" datoSize=\"sm\"\n                          (click)=\"executeTableAction('Export')\" *ngIf=\"displayExport && !isTreeMode\"\n                          icon=\"export\" class=\"pointer mr-16 primary-300-color\" datoTooltip=\"core.export-table\"></dato-icon>\n\n        <!-- Settings -->\n        <dato-icon [class.active]=\"openMenus.settings\" (click)=\"openMenus.settings = true\"\n                          data-auto-id=\"grid-toolbar-settings\" datoSize=\"sm\"\n                          icon=\"account\" class=\"pointer primary-300-color\" datoTooltip=\"core.table-settings\"\n                          #settingsTrigger\n                          [datoMenuTriggerFor]=\"settingsMenu\"></dato-icon>\n\n        <!-- More actions menu -->\n        <ng-container *ngIf=\"gridActions.moreMenu.length > 0\">\n            <div class=\"separator\"></div>\n            <dato-grid-toolbar-more-menu [actions]=\"gridActions.moreMenu\" (actionClick)=\"onActionClick($event)\" [isRowActions]=\"false\">\n            </dato-grid-toolbar-more-menu>\n        </ng-container>\n\n        <dato-menu #settingsMenu=\"datoMenu\" menuClass=\"grid-settings-menu\" placement=\"bottom-end\"\n                   (menuClosed)=\"openMenus.settings = false\">\n            <ng-template datoMenuContent>\n                <button data-auto-id=\"grid-toolbar-settings-autofit-page\" datoMenuItem\n                        (click)=\"executeTableAction('Autofit to Page')\">\n                    <dato-icon datoSize=\"sm\" icon=\"maximize-horizontal\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.autofitPage' | translate }}</button>\n                <button data-auto-id=\"grid-toolbar-settings-autofit-content\" datoMenuItem\n                        (click)=\"executeTableAction('Autofit to Content')\">\n                    <dato-icon datoSize=\"sm\" icon=\"minimize-horizontal\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.autofitContent' | translate }}</button>\n                <ng-container *ngIf=\"groupsAllowed\">\n                    <button data-auto-id=\"grid-toolbar-settings-group\" datoMenuItem (click)=\"executeTableAction('Group from Settings')\">\n                        <dato-icon datoSize=\"sm\" icon=\"group\" class=\"mr-4 primary-300-color\"></dato-icon>\n                        {{ 'core.group' | translate }}\n                    </button>\n                </ng-container>\n                <button data-auto-id=\"grid-toolbar-settings-toggle-columns\" datoMenuItem (click)=\"executeTableAction('Show Hide Column')\">\n                    <dato-icon datoSize=\"sm\" icon=\"hide\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    <span>{{ 'core.hideShowColumns' | translate }}<span\n                            class=\"dato-simple-italic ml-5 primary-200-color\">{{hiddenColumns}}</span></span>\n                </button>\n                <button data-auto-id=\"grid-toolbar-settings-reset-settings\" datoMenuItem\n                        (click)=\"executeTableAction('Reset Settings')\">\n                    <dato-icon datoSize=\"sm\" icon=\"reset-table\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.resetTableSettings' | translate }}\n                </button>\n                <button data-auto-id=\"grid-toolbar-settings-reset-filters\" datoMenuItem\n                        (click)=\"executeTableAction('Reset Filters')\">\n                    <dato-icon datoSize=\"sm\" icon=\"reset-filters\" class=\"mr-8 primary-300-color\"></dato-icon>\n                    {{ 'core.resetAllFilters' | translate }}\n                </button>\n                <button data-auto-id=\"grid-toolbar-export\" datoMenuItem\n                        (click)=\"executeTableAction('Export')\" *ngIf=\"this.displayExport && isTreeMode\">\n                <dato-icon datoSize=\"sm\"\n                           icon=\"export\" class=\"pointer mr-5 primary-300-color\" datoTooltip=\"core.export-table\"></dato-icon>\n                    {{ 'core.export-table' | translate }}\n                </button>\n            </ng-template>\n        </dato-menu>\n    </div>\n</section>\n\n\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 styles: [".grouping-section{transition:visibility .2s ease-in-out,width .2s ease-in-out,opacity .2s ease-in-out;width:0}.grouping-section.open{width:75px;visibility:visible;opacity:1}:host .main-container{min-height:24px}:host .right-section{margin-right:50px}:host .separator{width:1px;height:24px;margin:0 16px}.disabled-action{pointer-events:none}"]
             }),
@@ -21209,6 +21230,40 @@
      * found in the LICENSE file at https://github.com/datorama/client-core/blob/master/LICENSE
      */
 
+    var RichTextService = /** @class */ (function () {
+        function RichTextService(http, config) {
+            this.http = http;
+            this.config = config;
+        }
+        RichTextService.prototype.getLib = function (appendScriptFunc, appendStyleFunc) {
+            if (!this.richTextScript$) {
+                this.initLib(appendScriptFunc, appendStyleFunc);
+            }
+            return this.richTextScript$;
+        };
+        RichTextService.prototype.initLib = function (appendScriptFunc, appendStyleFunc) {
+            this.richTextScript$ = rxjs.combineLatest([
+                this.http
+                    .get(this.config.paths.richText + "/index.js", { responseType: 'text' })
+                    .pipe(operators.tap(function (lib) { return appendScriptFunc(lib, 'rich-text-editor'); })),
+                this.http
+                    .get(this.config.paths.richText + "/plugins/autocomplete/plugin.css", { responseType: 'text' })
+                    .pipe(operators.tap(function (style) { return appendStyleFunc(style, 'tinymce-autocomplete'); }))
+            ]).pipe(operators.shareReplay(1));
+        };
+        RichTextService.ctorParameters = function () { return [
+            { type: http.HttpClient },
+            { type: undefined, decorators: [{ type: core.Inject, args: [DATO_CORE_CONFIG,] }] }
+        ]; };
+        RichTextService.ɵprov = core.ɵɵdefineInjectable({ factory: function RichTextService_Factory() { return new RichTextService(core.ɵɵinject(http.HttpClient), core.ɵɵinject(DATO_CORE_CONFIG)); }, token: RichTextService, providedIn: "root" });
+        RichTextService = __decorate([
+            core.Injectable({ providedIn: 'root' }),
+            __param(1, core.Inject(DATO_CORE_CONFIG)),
+            __metadata("design:paramtypes", [http.HttpClient, Object])
+        ], RichTextService);
+        return RichTextService;
+    }());
+
     /**
      * @license
      * Copyright Datorama. All Rights Reserved.
@@ -21222,12 +21277,12 @@
     var ɵ0$3 = getTinymce;
     var DatoRichTextDirective = /** @class */ (function (_super) {
         __extends(DatoRichTextDirective, _super);
-        function DatoRichTextDirective(ngZone, http, host, config) {
+        function DatoRichTextDirective(ngZone, richTextService, config, host) {
             var _this = _super.call(this) || this;
             _this.ngZone = ngZone;
-            _this.http = http;
-            _this.host = host;
+            _this.richTextService = richTextService;
             _this.config = config;
+            _this.host = host;
             _this.autocompleteOptions = {};
             _this.forcePlainTextPasting = false;
             _this.format = 'html';
@@ -21261,28 +21316,11 @@
                 base: this.config.paths.richText,
                 query: ''
             };
-            /**
-             * We support only one instance in load time
-             */
-            if (window.tinymce) {
-                this.init.call(this);
-            }
-            else {
-                this.loadLib().subscribe(function (lib) {
-                    appendScript(lib, 'rich-text-editor');
-                    _this.init.call(_this);
-                    _this.loadAutoCompleteStyle();
-                });
-            }
-        };
-        DatoRichTextDirective.prototype.loadLib = function () {
-            return this.http.get(this.config.paths.richText + "/index.js", { responseType: 'text' });
-        };
-        DatoRichTextDirective.prototype.loadAutoCompleteStyle = function () {
-            this.http
-                .get(this.config.paths.richText + "/plugins/autocomplete/plugin.css", { responseType: 'text' })
-                .subscribe(function (style) {
-                appendStyle(style, 'tinymce-autocomplete');
+            this.richTextService
+                .getLib(appendScript, appendStyle)
+                .pipe(ngxTakeUntilDestroy.untilDestroyed(this))
+                .subscribe(function () {
+                _this.init.call(_this);
             });
         };
         DatoRichTextDirective.prototype.initEditor = function (_, editor) {
@@ -21375,9 +21413,9 @@
         var DatoRichTextDirective_1;
         DatoRichTextDirective.ctorParameters = function () { return [
             { type: core.NgZone },
-            { type: http.HttpClient },
-            { type: core.ElementRef },
-            { type: undefined, decorators: [{ type: core.Inject, args: [DATO_CORE_CONFIG,] }] }
+            { type: RichTextService },
+            { type: undefined, decorators: [{ type: core.Inject, args: [DATO_CORE_CONFIG,] }] },
+            { type: core.ElementRef }
         ]; };
         __decorate([
             core.Input(),
@@ -21443,10 +21481,9 @@
                     }
                 ]
             }),
-            __param(3, core.Inject(DATO_CORE_CONFIG)),
+            __param(2, core.Inject(DATO_CORE_CONFIG)),
             __metadata("design:paramtypes", [core.NgZone,
-                http.HttpClient,
-                core.ElementRef, Object])
+                RichTextService, Object, core.ElementRef])
         ], DatoRichTextDirective);
         return DatoRichTextDirective;
     }(BaseCustomControl));
@@ -23969,7 +24006,9 @@
         };
         DatoBreadcrumbsComponent.prototype.initEditableHeader = function () {
             var _this = this;
-            this.headerControl.valueChanges.pipe(operators.debounceTime(300), ngxTakeUntilDestroy.untilDestroyed(this)).subscribe(function (res) {
+            this.headerControl.valueChanges
+                .pipe(operators.debounceTime(300), ngxTakeUntilDestroy.untilDestroyed(this))
+                .subscribe(function (res) {
                 _this.updateEditableText.emit(res);
                 _this.cdr.detectChanges();
             });
@@ -25312,7 +25351,7 @@
         };
     }
 
-    window.coreVersion = '22.0.2';
+    window.coreVersion = '22.1.1-rc.';
 
     exports.APP_TRANSLATE = APP_TRANSLATE;
     exports.AceService = AceService;
@@ -25754,6 +25793,7 @@
     exports.ɵl = DatoGridItemsCountCellComponent;
     exports.ɵm = DatoGridV2ToolbarMoreMenuComponent;
     exports.ɵn = DatoGridSearchBarComponent;
+    exports.ɵo = RichTextService;
 
     Object.defineProperty(exports, '__esModule', { value: true });