@datorama/core 22.8.2-rc.1 → 22.9.0

package/bundles/datorama-core.umd.js

@@ -8748,8 +8748,9 @@
         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 });
-                this.limitSelectedTo && this.updateDisabledState();
+                overTheLimit && this.updateDisabledState();
             }
             /** For later updates */
             this.cdr.markForCheck();
@@ -8786,7 +8787,7 @@
              */
             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;
@@ -8875,6 +8876,7 @@
         };
         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]; });
             /**
@@ -8884,7 +8886,7 @@
             if (optionToRemove) {
                 optionToRemove.active = false;
             }
-            this.limitSelectedTo && this.updateDisabledState();
+            updateDisabled && this.updateDisabledState();
             this.onChange(this._model);
             this.cdr.markForCheck();
             this.asyncUpdateDropdownPosition();
@@ -9232,6 +9234,9 @@
             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) {
@@ -9240,7 +9245,7 @@
             else {
                 this._model = this._model.filter(function (current) { return current[_this.idKey] !== rawOption[_this.idKey]; });
             }
-            this.limitSelectedTo && this.updateDisabledState();
+            updateDisabled && this.updateDisabledState();
             this.onChange(this._model);
             this.cdr.markForCheck();
             this.asyncUpdateDropdownPosition();
@@ -11581,7 +11586,7 @@
             var storeSettings = this.getValue().settings;
             var settings = {
                 gridAlignment: storeSettings.gridAlignment,
-                sort: this.getGridOptions().sortByStore ? this.getSort() : this.getSortModel(),
+                sort: this.getGridOptions().sortByStore ? this.getSavedSort() : this.getSortModel(),
                 hiddenColumns: hiddenColumns,
                 groupedColumns: groupedColumns.map(toColId),
                 filter: this.getFilter(),
@@ -11598,25 +11603,29 @@
         GridQuery.prototype.getSortModel = function () {
             return this.api.grid.getSortModel().pop();
         };
-        GridQuery.prototype.getSort = function () {
+        GridQuery.prototype.getSavedSort = function () {
             return this.getValue().settings.sort || this.getSortModel();
         };
-        GridQuery.prototype.getExternalSort = function () {
-            var _a = this.getSort() || {}, sort = _a.sort, colId = _a.colId, savedSortIndex = _a.sortIndex;
-            var column = this.api.columns.getColumn(colId);
-            var allColumns = this.api.columns.getAllGridColumns();
-            if (column) {
-                var field = getColField(column.getColDef());
-                return { colId: colId, sort: sort, field: field };
-            }
-            else {
-                var secondaryColumn = this.getSecondaryColumn(colId);
-                if (secondaryColumn) {
-                    var sortIndex = savedSortIndex || allColumns.indexOf(secondaryColumn);
-                    var field = getColField(secondaryColumn.getColDef());
-                    return { colId: colId, sort: sort, field: field, sortIndex: sortIndex };
+        GridQuery.prototype.getSort = function (savedSort) {
+            if (savedSort === void 0) { savedSort = this.getSavedSort(); }
+            if (savedSort) {
+                var colId = savedSort.colId, sort = savedSort.sort, sortIndex = savedSort.sortIndex;
+                var column = this.api.columns.getColumn(colId);
+                var allColumns = this.api.columns.getAllGridColumns();
+                if (column) {
+                    var field = getColField(column.getColDef());
+                    return { colId: colId, sort: sort, field: field };
+                }
+                else {
+                    var secondaryColumn = this.getSecondaryColumn(colId);
+                    if (secondaryColumn) {
+                        var columnIndex = sortIndex || allColumns.indexOf(secondaryColumn);
+                        var field = getColField(secondaryColumn.getColDef());
+                        return { colId: colId, sort: sort, field: field, sortIndex: columnIndex };
+                    }
                 }
             }
+            return { colId: null, sort: null };
         };
         /* @internal */
         GridQuery.prototype._setApi = function (api, gridRef) {
@@ -12041,7 +12050,7 @@
         return contextActions;
     }
 
-    var DATO_GRID_STORAGE_API = new core.InjectionToken('DATO_GRID_STORAGE_AP');
+    var DATO_GRID_STORAGE_API = new core.InjectionToken('DATO_GRID_STORAGE_API');
 
     var defaultEditableColumnRenderer = function (params) {
         return params && params.value ? "<div class=\"value-wrapper ellipsis\">" + params.value + "</div>" : null;
@@ -12766,6 +12775,20 @@
             this.showClearFiltersButton = true;
             this.excludedValues = new Set();
         }
+        Object.defineProperty(DatoGridFilterComponent.prototype, "operatorToggler", {
+            set: function (togglers) {
+                if (togglers && this.inputConditionsOperator) {
+                    togglers.forEach(function (toggler) {
+                        if (!toggler.isDisabled) {
+                            toggler.setDisabledState(true);
+                        }
+                    });
+                    this.cdr.detectChanges();
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(DatoGridFilterComponent.prototype, "byValueControl", {
             get: function () {
                 return this.filterForm.get('byValue');
@@ -12878,6 +12901,7 @@
             var colFilter = filter || colDef.filter;
             var filterOptions = DatoGridFilterOptionsMap[colFilter];
             this.pivotColumn = gridQuery.api.columns.getSecondaryPivotColumn(pivotKeys, pivotValueColumn);
+            this.inputConditionsOperator = filtersConfig.inputConditionsOperator;
             if (!isNil(filtersConfig.showClearFiltersButton)) {
                 this.showClearFiltersButton = filtersConfig.showClearFiltersButton;
             }
@@ -13215,7 +13239,7 @@
                 return this.defaultConditional;
             }
             return this.fb.group({
-                operator: [conditional.operator],
+                operator: [this.inputConditionsOperator || conditional.operator],
                 conditions: this.fb.array(this.buildConditions(conditional.conditions))
             });
         };
@@ -13385,10 +13409,15 @@
             { type: DatoTranslateService },
             { type: core.ChangeDetectorRef }
         ]; };
+        __decorate([
+            core.ViewChildren('operatorToggler'),
+            __metadata("design:type", core.QueryList),
+            __metadata("design:paramtypes", [core.QueryList])
+        ], DatoGridFilterComponent.prototype, "operatorToggler", null);
         DatoGridFilterComponent = __decorate([
             core.Component({
                 selector: 'dato-grid-filter',
-                template: "<form class=\"container primary-0-background-color\" [formGroup]=\"filterForm\" datoForm\n      *datoSubscribe=\"hasFilter$ as hasFilter\">\n    <ng-container>\n        <dato-accordion closeOthers=\"true\" class=\"filter-options\" [activeIds]=\"activeAccordionId\">\n            <ng-container *ngIf=\"filterSections.Conditional\">\n\n                <dato-accordion-group>\n                    <dato-accordion-header class=\"dato-note-bold primary-600-color\" data-auto-id=\"conditional-filters\"\n                                           [class.primary-100-background-color]=\"header_1.isOpen\" #header_1>\n                        <div class=\"px-10 d-flex align-start-center\">\n                            <div class=\"filter-title d-flex-grow d-flex align-start-center\">{{'core.filterByCondition' | translate}}</div>\n                            <dato-icon class=\"primary-200-color\" height=\"18px\"\n                                       [icon]=\"header_1.isOpen ? 'collapse' : 'expand'\"></dato-icon>\n                        </div>\n                    </dato-accordion-header>\n                    <dato-accordion-content #conditionalContent>\n                        <div class=\"conditional-content-container d-flex-column\" formGroupName=\"conditional\"\n                             [class.multi-conditions]=\"conditionsControls.length > 1\">\n                            <div class=\"operand d-flex-column mb-10\"\n                                 [attr.data-auto-id]=\"'condition-' + i\"\n                                 *ngFor=\"let operand of conditionsControls; index as i; last as last\">\n                                <div class=\"d-flex\">\n                                    <div class=\"d-flex-column d-flex-grow min-width-0\">\n                                        <ng-container formArrayName=\"conditions\">\n\n                                            <ng-container [formGroupName]=\"i\">\n                                                <dato-select datoSize=\"sm\" class=\"mb-10\" [attr.data-auto-id]=\"'condition-' + i + '-operand'\" formControlName=\"type\"\n                                                             datoSelectClass=\"operand-select\"\n                                                             [dataSet]=\"conditionalFilterOptions\"\n                                                             [isCombo]=\"false\" #select>\n                                                    <dato-option *ngFor=\"let option of select.data; index as index\"\n                                                                 [option]=\"option\">\n                                                        {{ option.label }}\n                                                    </dato-option>\n                                                </dato-select>\n                                                <ng-container [ngSwitch]=\"filterType\">\n                                                        <div class=\"d-flex\" *ngSwitchCase=\"gridFilterTypes.Date\">\n                                                            <dato-date-picker [attr.data-auto-id]=\"'condition-date-' + i + '-value'\"\n                                                                              formControlName=\"value\" class=\"d-flex-grow range-calendar\">\n                                                                <ng-template>\n                                                                    <dato-date-picker-range *ngIf=\"getOperandType(i) === rangeOperand; else singleDate\"></dato-date-picker-range>\n                                                                    <ng-template #singleDate>\n                                                                        <dato-date-picker-single></dato-date-picker-single>\n                                                                    </ng-template>\n                                                                </ng-template>\n                                                            </dato-date-picker>\n                                                        </div>\n                                                    <ng-container *ngIf=\"!isConditionalEmpty(operand)\">\n                                                        <dato-input *ngSwitchCase=\"gridFilterTypes.String\" datoSize=\"sm\"\n                                                                    (keydown.enter.stop.prevent)=\"closePopUp()\"\n                                                                    datoControlErrors [attr.data-auto-id]=\"'condition-string-' + i + '-value'\"\n                                                                    [datoControlErrorsOnBlur]=\"false\"\n                                                                    class=\"condition-value\"\n                                                                    placeholder=\"core.filter\" formControlName=\"value\"\n                                                                    [isFocused]=\"conditionalContent._expanded\"\n                                                                    ></dato-input>\n                                                        <div class=\"d-flex\" *ngSwitchCase=\"gridFilterTypes.Number\">\n                                                            <dato-input-number (keydown.enter.stop.prevent)=\"closePopUp()\" [showControls]=\"false\"\n                                                                               class=\"width-100 condition-value\" allowNegative=\"true\">\n                                                                <input type=\"number\" formControlName=\"value\" [attr.data-auto-id]=\"'condition-number-' + i + '-value'\"\n                                                                       datoInputNumber datoSize=\"sm\" datoControlErrors [datoAutoFocus]=\"conditionalContent._expanded\"\n                                                                       [datoControlErrorsOnBlur]=\"false\"/>\n                                                            </dato-input-number>\n                                                            <ng-container *ngIf=\"getOperandType(i) === rangeOperand\">\n                                                                <div class=\"mx-5\">-</div>\n                                                                <dato-input-number (keydown.enter.stop.prevent)=\"closePopUp()\"\n                                                                        class=\"width-100 condition-value\" allowNegative=\"true\">\n                                                                    <input type=\"number\" formControlName=\"rangeEnd\" [attr.data-auto-id]=\"'condition-number-' + i + '-range-end'\"\n                                                                           datoInputNumber datoSize=\"sm\" datoControlErrors\n                                                                           [datoControlErrorsOnBlur]=\"false\"/>\n                                                                </dato-input-number>\n                                                            </ng-container>\n                                                        </div>\n                                                    </ng-container>\n                                                </ng-container>\n                                            </ng-container>\n                                        </ng-container>\n                                    </div>\n                                    <div>\n\n                                        <dato-icon-button datoSize=\"md\"\n                                                          datoType=\"none\" icon=\"trash\"\n                                                          class=\"overflow-hidden delete\"\n                                                          datoTooltip=\"core.deleteFilterCondition\"\n                                                          [attr.data-auto-id]=\"'condition-' + i + '-remove'\"\n                                                          (click)=\"removeCondition(i)\"\n                                                          datoTooltipPosition=\"right-start\"></dato-icon-button>\n                                    </div>\n                                </div>\n                                <dato-operator-toggler class=\"mt-10 justify-center width-100 d-flex\" data-auto-id=\"operator-toggler\"\n                                                       expanded=\"true\" [datoTogglerValue]=\"conditionsOperator\"\n                                                       *ngIf=\"conditionsControls.length > 1 && !last\"\n                                                       formControlName=\"operator\"></dato-operator-toggler>\n                            </div>\n                            <div class=\"d-flex align-center\">\n                                <dato-link *ngIf=\"conditionsControls.length < 3\" class=\"no-select\" datoSize=\"sm\" data-auto-id=\"add-condition\"\n                                           datoType=\"secondary\" (click)=\"addCondition()\">\n                                    <dato-icon height=\"10px\" width=\"10px\" icon=\"plus-simple\"></dato-icon>\n                                    {{ 'core.condition' | translate }}\n                                </dato-link>\n                            </div>\n                        </div>\n                    </dato-accordion-content>\n                </dato-accordion-group>\n                <div class=\"separator\"></div>\n            </ng-container>\n            <ng-container *ngIf=\"filterSections.By_Value\">\n                <dato-accordion-group class=\"list-content\">\n                    <dato-accordion-header class=\"dato-note-bold primary-600-color\" data-auto-id=\"by-value-filters\"\n                                           [class.primary-100-background-color]=\"header_2.isOpen\" #header_2>\n                        <div class=\"px-10 d-flex align-start-center\">\n                            <div class=\"filter-title d-flex d-flex-grow align-start-center\">{{'core.filterByValue' | translate}}</div>\n                            <dato-icon class=\"primary-200-color\" height=\"18px\"\n                                       [icon]=\"header_2.isOpen ? 'collapse' : 'expand'\"></dato-icon>\n                        </div>\n                    </dato-accordion-header>\n                    <dato-accordion-content #byValueContent>\n                        <div class=\"value-content-container d-flex-column\">\n                            <dato-input datoSize=\"sm\" placeholder=\"core.search-all-values\" [debounceTime]=\"300\" #search [formControl]=\"listSearchControl\" [isFocused]=\"byValueContent._expanded\"></dato-input>\n                            <dato-list-v2 class=\"primary-0-background-color\"\n                                          containerHeight=\"195px\"\n                                          [withSelectAll]=\"true\"\n                                          [clientSearch]=\"isClientSideGrid\"\n                                          [sortByKey]=\"listSortByKey\"\n                                          [labelType]=\"listLabelType\"\n                                          [searchController]=\"search\"\n                                          [options]=\"listOptions\"\n                                          [isSortList]=\"!keepPredefinedListOriginalOrder\"\n                                          [loading]=\"loadingList\"\n                                          [noDataTpl]=\"isClientSideGrid ? null : noData\"\n                                          formControlName=\"byValue\"\n                                          data-auto-id=\"by-value-filters-list\">\n                            </dato-list-v2>\n                            <ng-template #noData>\n                                <div *ngIf=\"serverSearchErrored; else noResults\" class=\"mb-10 d-flex-1 d-flex-column align-center\" data-auto-id=\"by-value-server-error\">\n                                    <img class=\"mt-20\" datoStaticSrc=\"core/grid/filter-server-error.svg\"/>\n                                    <p class=\"dato-note-bold mt-10 mb-10 primary-300-color\">{{ 'core.something-went-wrong' | translate }}</p>\n                                    <p class=\"dato-note-italic primary-300-color\">{{ 'core.try-again-later' | translate }}</p>\n                                </div>\n                                <ng-template #noResults>\n                                    <dato-list-no-result class=\"mb-10 block\" data-auto-id=\"by-value-no-results\"></dato-list-no-result>\n                                </ng-template>\n                            </ng-template>\n                        </div>\n                    </dato-accordion-content>\n                </dato-accordion-group>\n                <div class=\"separator\"></div>\n            </ng-container>\n        </dato-accordion>\n    </ng-container>\n    <div class=\"actions no-select px-10 py-12 d-flex align-end-center\">\n        <dato-link *ngIf=\"showClearFiltersButton\" class=\"mr-30\" datoType=\"secondary\" datoSize=\"sm\"\n                   (click)=\"clearFilters()\" data-auto-id=\"clear-filters\" [disabled]=\"!hasFilter\">\n            {{ 'core.clearFilters' | translate }}\n        </dato-link>\n        <dato-button datoSize=\"sm\" [datoTooltip]=\"hotKeyTooltip\" [datoHotkeys]=\"applyHotKeyConfig\" (click)=\"closePopUp()\" data-auto-id=\"apply-filters\">{{'core.apply' | translate}}</dato-button>\n    </div>\n</form>\n",
+                template: "<form class=\"container primary-0-background-color\" [formGroup]=\"filterForm\" datoForm\n      *datoSubscribe=\"hasFilter$ as hasFilter\">\n    <ng-container>\n        <dato-accordion closeOthers=\"true\" class=\"filter-options\" [activeIds]=\"activeAccordionId\">\n            <ng-container *ngIf=\"filterSections.Conditional\">\n\n                <dato-accordion-group>\n                    <dato-accordion-header class=\"dato-note-bold primary-600-color\" data-auto-id=\"conditional-filters\"\n                                           [class.primary-100-background-color]=\"header_1.isOpen\" #header_1>\n                        <div class=\"px-10 d-flex align-start-center\">\n                            <div class=\"filter-title d-flex-grow d-flex align-start-center\">{{'core.filterByCondition' | translate}}</div>\n                            <dato-icon class=\"primary-200-color\" height=\"18px\"\n                                       [icon]=\"header_1.isOpen ? 'collapse' : 'expand'\"></dato-icon>\n                        </div>\n                    </dato-accordion-header>\n                    <dato-accordion-content #conditionalContent>\n                        <div class=\"conditional-content-container d-flex-column\" formGroupName=\"conditional\"\n                             [class.multi-conditions]=\"conditionsControls.length > 1\">\n                            <div class=\"operand d-flex-column mb-10\"\n                                 [attr.data-auto-id]=\"'condition-' + i\"\n                                 *ngFor=\"let operand of conditionsControls; index as i; last as last\">\n                                <div class=\"d-flex\">\n                                    <div class=\"d-flex-column d-flex-grow min-width-0\">\n                                        <ng-container formArrayName=\"conditions\">\n\n                                            <ng-container [formGroupName]=\"i\">\n                                                <dato-select datoSize=\"sm\" class=\"mb-10\" [attr.data-auto-id]=\"'condition-' + i + '-operand'\" formControlName=\"type\"\n                                                             datoSelectClass=\"operand-select\"\n                                                             [dataSet]=\"conditionalFilterOptions\"\n                                                             [isCombo]=\"false\" #select>\n                                                    <dato-option *ngFor=\"let option of select.data; index as index\"\n                                                                 [option]=\"option\">\n                                                        {{ option.label }}\n                                                    </dato-option>\n                                                </dato-select>\n                                                <ng-container [ngSwitch]=\"filterType\">\n                                                        <div class=\"d-flex\" *ngSwitchCase=\"gridFilterTypes.Date\">\n                                                            <dato-date-picker [attr.data-auto-id]=\"'condition-date-' + i + '-value'\"\n                                                                              formControlName=\"value\" class=\"d-flex-grow range-calendar\">\n                                                                <ng-template>\n                                                                    <dato-date-picker-range *ngIf=\"getOperandType(i) === rangeOperand; else singleDate\"></dato-date-picker-range>\n                                                                    <ng-template #singleDate>\n                                                                        <dato-date-picker-single></dato-date-picker-single>\n                                                                    </ng-template>\n                                                                </ng-template>\n                                                            </dato-date-picker>\n                                                        </div>\n                                                    <ng-container *ngIf=\"!isConditionalEmpty(operand)\">\n                                                        <dato-input *ngSwitchCase=\"gridFilterTypes.String\" datoSize=\"sm\"\n                                                                    (keydown.enter.stop.prevent)=\"closePopUp()\"\n                                                                    datoControlErrors [attr.data-auto-id]=\"'condition-string-' + i + '-value'\"\n                                                                    [datoControlErrorsOnBlur]=\"false\"\n                                                                    class=\"condition-value\"\n                                                                    placeholder=\"core.filter\" formControlName=\"value\"\n                                                                    [isFocused]=\"conditionalContent._expanded\"\n                                                                    ></dato-input>\n                                                        <div class=\"d-flex\" *ngSwitchCase=\"gridFilterTypes.Number\">\n                                                            <dato-input-number (keydown.enter.stop.prevent)=\"closePopUp()\" [showControls]=\"false\"\n                                                                               class=\"width-100 condition-value\" allowNegative=\"true\">\n                                                                <input type=\"number\" formControlName=\"value\" [attr.data-auto-id]=\"'condition-number-' + i + '-value'\"\n                                                                       datoInputNumber datoSize=\"sm\" datoControlErrors [datoAutoFocus]=\"conditionalContent._expanded\"\n                                                                       [datoControlErrorsOnBlur]=\"false\"/>\n                                                            </dato-input-number>\n                                                            <ng-container *ngIf=\"getOperandType(i) === rangeOperand\">\n                                                                <div class=\"mx-5\">-</div>\n                                                                <dato-input-number (keydown.enter.stop.prevent)=\"closePopUp()\"\n                                                                        class=\"width-100 condition-value\" allowNegative=\"true\">\n                                                                    <input type=\"number\" formControlName=\"rangeEnd\" [attr.data-auto-id]=\"'condition-number-' + i + '-range-end'\"\n                                                                           datoInputNumber datoSize=\"sm\" datoControlErrors\n                                                                           [datoControlErrorsOnBlur]=\"false\"/>\n                                                                </dato-input-number>\n                                                            </ng-container>\n                                                        </div>\n                                                    </ng-container>\n                                                </ng-container>\n                                            </ng-container>\n                                        </ng-container>\n                                    </div>\n                                    <div>\n\n                                        <dato-icon-button datoSize=\"md\"\n                                                          datoType=\"none\" icon=\"trash\"\n                                                          class=\"overflow-hidden delete\"\n                                                          datoTooltip=\"core.deleteFilterCondition\"\n                                                          [attr.data-auto-id]=\"'condition-' + i + '-remove'\"\n                                                          (click)=\"removeCondition(i)\"\n                                                          datoTooltipPosition=\"right-start\"></dato-icon-button>\n                                    </div>\n                                </div>\n                                <dato-operator-toggler class=\"mt-10 justify-center width-100 d-flex\" data-auto-id=\"operator-toggler\"\n                                                       expanded=\"true\" [datoTogglerValue]=\"conditionsOperator\"\n                                                       *ngIf=\"conditionsControls.length > 1 && !last\"\n                                                       formControlName=\"operator\" #operatorToggler></dato-operator-toggler>\n                            </div>\n                            <div class=\"d-flex align-center\">\n                                <dato-link *ngIf=\"conditionsControls.length < 3\" class=\"no-select\" datoSize=\"sm\" data-auto-id=\"add-condition\"\n                                           datoType=\"secondary\" (click)=\"addCondition()\">\n                                    <dato-icon height=\"10px\" width=\"10px\" icon=\"plus-simple\"></dato-icon>\n                                    {{ 'core.condition' | translate }}\n                                </dato-link>\n                            </div>\n                        </div>\n                    </dato-accordion-content>\n                </dato-accordion-group>\n                <div class=\"separator\"></div>\n            </ng-container>\n            <ng-container *ngIf=\"filterSections.By_Value\">\n                <dato-accordion-group class=\"list-content\">\n                    <dato-accordion-header class=\"dato-note-bold primary-600-color\" data-auto-id=\"by-value-filters\"\n                                           [class.primary-100-background-color]=\"header_2.isOpen\" #header_2>\n                        <div class=\"px-10 d-flex align-start-center\">\n                            <div class=\"filter-title d-flex d-flex-grow align-start-center\">{{'core.filterByValue' | translate}}</div>\n                            <dato-icon class=\"primary-200-color\" height=\"18px\"\n                                       [icon]=\"header_2.isOpen ? 'collapse' : 'expand'\"></dato-icon>\n                        </div>\n                    </dato-accordion-header>\n                    <dato-accordion-content #byValueContent>\n                        <div class=\"value-content-container d-flex-column\">\n                            <dato-input datoSize=\"sm\" placeholder=\"core.search-all-values\" [debounceTime]=\"300\" #search [formControl]=\"listSearchControl\" [isFocused]=\"byValueContent._expanded\"></dato-input>\n                            <dato-list-v2 class=\"primary-0-background-color\"\n                                          containerHeight=\"195px\"\n                                          [withSelectAll]=\"true\"\n                                          [clientSearch]=\"isClientSideGrid\"\n                                          [sortByKey]=\"listSortByKey\"\n                                          [labelType]=\"listLabelType\"\n                                          [searchController]=\"search\"\n                                          [options]=\"listOptions\"\n                                          [isSortList]=\"!keepPredefinedListOriginalOrder\"\n                                          [loading]=\"loadingList\"\n                                          [noDataTpl]=\"isClientSideGrid ? null : noData\"\n                                          formControlName=\"byValue\"\n                                          data-auto-id=\"by-value-filters-list\">\n                            </dato-list-v2>\n                            <ng-template #noData>\n                                <div *ngIf=\"serverSearchErrored; else noResults\" class=\"mb-10 d-flex-1 d-flex-column align-center\" data-auto-id=\"by-value-server-error\">\n                                    <img class=\"mt-20\" datoStaticSrc=\"core/grid/filter-server-error.svg\"/>\n                                    <p class=\"dato-note-bold mt-10 mb-10 primary-300-color\">{{ 'core.something-went-wrong' | translate }}</p>\n                                    <p class=\"dato-note-italic primary-300-color\">{{ 'core.try-again-later' | translate }}</p>\n                                </div>\n                                <ng-template #noResults>\n                                    <dato-list-no-result class=\"mb-10 block\" data-auto-id=\"by-value-no-results\"></dato-list-no-result>\n                                </ng-template>\n                            </ng-template>\n                        </div>\n                    </dato-accordion-content>\n                </dato-accordion-group>\n                <div class=\"separator\"></div>\n            </ng-container>\n        </dato-accordion>\n    </ng-container>\n    <div class=\"actions no-select px-10 py-12 d-flex align-end-center\">\n        <dato-link *ngIf=\"showClearFiltersButton\" class=\"mr-30\" datoType=\"secondary\" datoSize=\"sm\"\n                   (click)=\"clearFilters()\" data-auto-id=\"clear-filters\" [disabled]=\"!hasFilter\">\n            {{ 'core.clearFilters' | translate }}\n        </dato-link>\n        <dato-button datoSize=\"sm\" [datoTooltip]=\"hotKeyTooltip\" [datoHotkeys]=\"applyHotKeyConfig\" (click)=\"closePopUp()\" data-auto-id=\"apply-filters\">{{'core.apply' | translate}}</dato-button>\n    </div>\n</form>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 styles: [":host dato-accordion-header{transition:background-color .2s ease-in-out}:host>.container{width:242px}:host .value-content-container dato-input{padding:10px}:host .conditional-content-container{padding:10px;transition:padding-right .2s ease-in-out}:host .conditional-content-container.multi-conditions{padding-right:0}:host .conditional-content-container.multi-conditions .delete{width:24px}:host .filter-title{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:40px;transition:color .2s ease-in-out}:host .separator{height:1px;width:100%}:host .delete{transition:width .2s ease-in-out;width:0}"]
             }),
@@ -13491,6 +13520,7 @@
                     var sortingOrder = _this.column.getColDef() ? _this.column.getColDef().sortingOrder : null;
                     var sort;
                     var currentSort = _this.column.getSort();
+                    var colId = _this.column.getColId();
                     if (sortingOrder && sortingOrder.length > 0) {
                         var currentSortIndex = sortingOrder.indexOf(currentSort);
                         var newSortIndex = void 0;
@@ -13507,10 +13537,15 @@
                     }
                     gridService._logEvent("Grids - Column Action" /* GRID_COLUMN_ACTION */, {
                         action: 'Sort',
-                        column: _this.column.getColId()
+                        column: colId
                     });
                     gridQuery.isServerSide && gridService.setLoading(true);
-                    _this.params.setSort(sort);
+                    if (gridQuery.getGridOptions().sortByStore) {
+                        gridService.setSortByColumn(colId, sort);
+                    }
+                    else {
+                        _this.params.setSort(sort);
+                    }
                 });
                 this.sortingInfo$ = gridQuery
                     .waitForGrid(function () { return gridQuery.gridRef.sortChanged; })
@@ -14457,38 +14492,36 @@
                 this.notifyFilterUpdate();
             }
         };
+        GridService.prototype.setSortByColumn = function (colId, sort) {
+            var sortToSet = this.gridQuery.getSort({ colId: colId, sort: sort });
+            this.setGridSort(sortToSet);
+        };
         GridService.prototype.setGridSort = function (gridSort) {
             if (gridSort && this.api && this.api.grid.getDisplayedRowCount() > 0) {
                 var colId_1 = gridSort.colId, sort = gridSort.sort, sortIndex = gridSort.sortIndex;
-                var sortToApply = gridSort;
-                if (!isNil(sortIndex)) {
-                    var gridColumns = this.api.columns.getAllGridColumns();
-                    if (gridColumns) {
+                var gridColumns = this.api.columns.getAllGridColumns();
+                if (gridColumns) {
+                    var sortToApply = gridSort;
+                    /** Sort by column id */
+                    var columnById = gridColumns.find(function (col) {
+                        return (col.getColDef().showRowGroup || col.getColId()) === colId_1;
+                    });
+                    if (columnById) {
+                        sortToApply = { colId: columnById.getColId(), sort: sort };
+                    }
+                    else if (!isNil(sortIndex)) {
                         var valueColumns = this.api.columns.getValueColumns();
                         var valueColumn = valueColumns.find(function (col) { return col.getColId() === colId_1; });
                         var isPivotColId = colId_1.startsWith('pivot');
                         if (isPivotColId || valueColumn) {
                             /** Column is pivot value column, sort by index */
                             var columnByIndex = gridColumns[sortIndex];
-                            // const pivotValueColumn = columnByIndex && columnByIndex.getColDef().pivotValueColumn;
-                            // const pivotValueColumnId = pivotValueColumn && pivotValueColumn.getColId();
-                            // if (pivotValueColumnId === colId) {
                             sortToApply = { colId: columnByIndex.getColId(), sort: sort, sortIndex: sortIndex };
-                            // }
-                        }
-                        else {
-                            /** Sort by column id */
-                            var columnById = gridColumns.find(function (col) {
-                                return (col.getColDef().showRowGroup || col.getColId()) === colId_1;
-                            });
-                            if (columnById) {
-                                sortToApply = { colId: columnById.getColId(), sort: sort };
-                            }
                         }
                     }
+                    this.updateSettings({ sort: sortToApply });
+                    this.api.grid.setSortModel([sortToApply]);
                 }
-                this.updateSettings({ sort: sortToApply });
-                this.api.grid.setSortModel([sortToApply]);
             }
         };
         GridService.prototype.updateFilter = function (column, filter) {
@@ -14546,8 +14579,7 @@
             this.updateSettings({ gridAlignment: gridAlignment, columnsSizes: null });
         };
         GridService.prototype.saveSettingsToServer = function (settings) {
-            var 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
@@ -15552,10 +15584,7 @@
                 .pipe(operators.switchMap(function () {
                 _this.gridOptions = _this.normalizeOptions();
                 agGrid.gridOptions = _this.gridOptions;
-                var isGlobal = _this.gridOptions.isGlobalSettings;
-                var settingsLoader = _this.gridOptions.saveSettings === false
-                    ? rxjs.of(null)
-                    : _this.storageAPI.get(_this.gridOptions.gridName, isGlobal);
+                var settingsLoader = _this.gridOptions.saveSettings === false ? rxjs.of(null) : _this.storageAPI.get(_this.gridOptions.gridName);
                 return rxjs.combineLatest([agGrid.gridReady, settingsLoader]);
             }), ngxTakeUntilDestroy.untilDestroyed(this))
                 .subscribe(function (_a) {
@@ -15669,11 +15698,10 @@
                 var data = _this.getGridData();
                 _this.onGridChange.emit({
                     filter: _this.gridQuery.getExternalFilter(),
-                    sort: _this.gridQuery.getExternalSort(),
+                    sort: _this.gridQuery.getSort(),
                     type: type,
                     data: data
                 });
-                triggerWindowResize();
             });
         };
         DatoGridControllerComponent.prototype.listenToStoreSettingsChanges = function () {
@@ -16838,18 +16866,6 @@
             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();
@@ -21325,40 +21341,6 @@
      * 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.
@@ -21372,12 +21354,12 @@
     var ɵ0$3 = getTinymce;
     var DatoRichTextDirective = /** @class */ (function (_super) {
         __extends(DatoRichTextDirective, _super);
-        function DatoRichTextDirective(ngZone, richTextService, config, host) {
+        function DatoRichTextDirective(ngZone, http, host, config) {
             var _this = _super.call(this) || this;
             _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';
@@ -21411,11 +21393,28 @@
                 base: this.config.paths.richText,
                 query: ''
             };
-            this.richTextService
-                .getLib(appendScript, appendStyle)
-                .pipe(ngxTakeUntilDestroy.untilDestroyed(this))
-                .subscribe(function () {
-                _this.init.call(_this);
+            /**
+             * 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');
             });
         };
         DatoRichTextDirective.prototype.initEditor = function (_, editor) {
@@ -21508,9 +21507,9 @@
         var DatoRichTextDirective_1;
         DatoRichTextDirective.ctorParameters = function () { return [
             { type: core.NgZone },
-            { type: RichTextService },
-            { type: undefined, decorators: [{ type: core.Inject, args: [DATO_CORE_CONFIG,] }] },
-            { type: core.ElementRef }
+            { type: http.HttpClient },
+            { type: core.ElementRef },
+            { type: undefined, decorators: [{ type: core.Inject, args: [DATO_CORE_CONFIG,] }] }
         ]; };
         __decorate([
             core.Input(),
@@ -21576,9 +21575,10 @@
                     }
                 ]
             }),
-            __param(2, core.Inject(DATO_CORE_CONFIG)),
+            __param(3, core.Inject(DATO_CORE_CONFIG)),
             __metadata("design:paramtypes", [core.NgZone,
-                RichTextService, Object, core.ElementRef])
+                http.HttpClient,
+                core.ElementRef, Object])
         ], DatoRichTextDirective);
         return DatoRichTextDirective;
     }(BaseCustomControl));
@@ -24101,9 +24101,7 @@
         };
         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();
             });
@@ -25466,7 +25464,7 @@
         };
     }
 
-    window.coreVersion = '22.8.2-rc.';
+    window.coreVersion = '22.9.0';
 
     exports.APP_TRANSLATE = APP_TRANSLATE;
     exports.AceService = AceService;
@@ -25908,7 +25906,6 @@
     exports.ɵl = DatoGridItemsCountCellComponent;
     exports.ɵm = DatoGridV2ToolbarMoreMenuComponent;
     exports.ɵn = DatoGridSearchBarComponent;
-    exports.ɵo = RichTextService;
 
     Object.defineProperty(exports, '__esModule', { value: true });