@progress/kendo-angular-filter 0.1.3-dev.202201211601 → 0.1.5-dev.202202160956

package/dist/fesm2015/index.js

@@ -13,6 +13,46 @@ import { LabelModule } from '@progress/kendo-angular-label';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 
+/**
+ * @hidden
+ */
+let FilterService = class FilterService {
+    /**
+     * @hidden
+     */
+    constructor() {
+        this.value = { filters: [], logic: 'or' };
+        this.filters = [];
+        this.isEditorDisabled = false;
+    }
+    addFilterGroup(item) {
+        let filterGroup = { logic: 'or', filters: [] };
+        item.filters.push(filterGroup);
+    }
+    addFilterExpression(item) {
+        let filterExpression = { operator: 'eq', value: null, field: null };
+        item.filters.push(filterExpression);
+    }
+    remove(item, positionIndex, parentItem) {
+        if (!parentItem) {
+            parentItem = this.value;
+        }
+        if (item === parentItem) {
+            parentItem.filters = [];
+            return;
+        }
+        let index = parentItem.filters.indexOf(item);
+        if (index >= 0 && index === positionIndex) {
+            parentItem.filters = parentItem.filters.filter((i) => i !== item);
+            return;
+        }
+        parentItem.filters.forEach((filter) => filter.filters && this.remove(item, positionIndex, filter));
+    }
+};
+FilterService = __decorate([
+    Injectable()
+], FilterService);
+
 /**
  * @hidden
  */
@@ -90,7 +130,6 @@ const isFilterEditor = (editorType) => {
     const supportedEditorTypes = ['string', 'number', 'boolean', 'date'];
     return supportedEditorTypes.indexOf(editorType) >= 0;
 };
-
 /**
  * @hidden
  */
@@ -98,56 +137,6 @@ const localizeOperators = operators => localization => Object.keys(operators).ma
     text: localization.get(key),
     value: operators[key]
 }));
-/**
- * @hidden
- */
-let FilterService = class FilterService {
-    constructor(localization) {
-        this.localization = localization;
-        this.value = { filters: [], logic: 'or' };
-        this.filters = [];
-        this.isEditorDisabled = false;
-    }
-    get defaultNumericOperators() {
-        return localizeOperators(defaultNumericOperators)(this.localization);
-    }
-    get defaultStringOperators() {
-        return localizeOperators(defaultStringOperators)(this.localization);
-    }
-    get defaultDateOperators() {
-        return localizeOperators(defaultDateOperators)(this.localization);
-    }
-    get logicOperators() {
-        return localizeOperators(logicOperators)(this.localization);
-    }
-    addFilterGroup(item) {
-        let filterGroup = { logic: 'or', filters: [] };
-        item.filters.push(filterGroup);
-    }
-    addFilterExpression(item) {
-        let filterExpression = { operator: 'eq', value: null, field: null };
-        item.filters.push(filterExpression);
-    }
-    remove(item, positionIndex, parentItem) {
-        if (!parentItem) {
-            parentItem = this.value;
-        }
-        if (item === parentItem) {
-            parentItem.filters = [];
-            return;
-        }
-        let index = parentItem.filters.indexOf(item);
-        if (index >= 0 && index === positionIndex) {
-            parentItem.filters = parentItem.filters.filter((i) => i !== item);
-            return;
-        }
-        parentItem.filters.forEach((filter) => filter.filters && this.remove(item, positionIndex, filter));
-    }
-};
-FilterService = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [LocalizationService])
-], FilterService);
 
 /**
  * @hidden
@@ -156,7 +145,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-filter',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642780812,
+    publishDate: 1645005293,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -476,14 +465,33 @@ AriaLabelValueDirective = __decorate([
  * @hidden
  */
 let FilterBooleanEditorComponent = class FilterBooleanEditorComponent {
-    constructor(localization) {
+    constructor(localization, cdr) {
         this.localization = localization;
+        this.cdr = cdr;
         this.valueChange = new EventEmitter();
-        this.items = [
+        this.items = this.getValueItems();
+        this.defaultItem = this.getDefaultItem();
+    }
+    ngOnInit() {
+        this.localizationSubscription = this.localization.changes.subscribe(() => {
+            this.defaultItem = this.getDefaultItem();
+            this.items = this.getValueItems();
+            this.cdr.detectChanges();
+        });
+    }
+    getDefaultItem() {
+        return { text: this.localization.get("filterBooleanAll"), value: null };
+    }
+    getValueItems() {
+        return [
             { text: this.localization.get("filterIsTrue"), value: true },
             { text: this.localization.get("filterIsFalse"), value: false }
         ];
-        this.defaultItem = { text: this.localization.get("filterBooleanAll"), value: null };
+    }
+    ngOnDestroy() {
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
     }
     messageFor(key) {
         return this.localization.get(key);
@@ -515,7 +523,7 @@ FilterBooleanEditorComponent = __decorate([
     </kendo-dropdownlist>
   `
     }),
-    __metadata("design:paramtypes", [LocalizationService])
+    __metadata("design:paramtypes", [LocalizationService, ChangeDetectorRef])
 ], FilterBooleanEditorComponent);
 
 /**
@@ -712,9 +720,10 @@ FilterExpressionOperatorsComponent = __decorate([
  * @hidden
  */
 let FilterExpressionComponent = class FilterExpressionComponent {
-    constructor(filterService, localization) {
+    constructor(filterService, localization, cdr) {
         this.filterService = filterService;
         this.localization = localization;
+        this.cdr = cdr;
         this.valueChange = new EventEmitter();
         this.operators = [];
         this.filters = [];
@@ -723,15 +732,24 @@ let FilterExpressionComponent = class FilterExpressionComponent {
     }
     ngOnInit() {
         this.filters = this.filterService.filters;
+        const foundFilter = this.getFilterExpressionByField(this.currentItem.field);
         if (this.currentItem.field) {
-            const foundFilter = this.getFilterExpressionByField(this.currentItem.field);
             this.setOperators(foundFilter);
         }
+        const defaultFilter = this.getFilterExpressionByField(this.filterService.filters[0].field);
         if (!this.currentItem.field) {
             this.currentItem.field = this.filterService.filters[0].field;
-            const defaultFilter = this.getFilterExpressionByField(this.filterService.filters[0].field);
             this.setOperators(defaultFilter);
         }
+        this.localizationSubscription = this.localization.changes.subscribe(() => {
+            this.setOperators(foundFilter || defaultFilter);
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
     }
     normalizeOperators(filterEditor, operators) {
         let result = [];
@@ -765,11 +783,11 @@ let FilterExpressionComponent = class FilterExpressionComponent {
     getDefaultOperators(operatorsType) {
         switch (operatorsType) {
             case 'string':
-                return this.filterService.defaultStringOperators;
+                return localizeOperators(defaultStringOperators)(this.localization);
             case 'number':
-                return this.filterService.defaultNumericOperators;
+                return localizeOperators(defaultNumericOperators)(this.localization);
             case 'date':
-                return this.filterService.defaultDateOperators;
+                return localizeOperators(defaultDateOperators)(this.localization);
             default:
                 break;
         }
@@ -856,26 +874,39 @@ FilterExpressionComponent = __decorate([
         </div>
   `
     }),
-    __metadata("design:paramtypes", [FilterService, LocalizationService])
+    __metadata("design:paramtypes", [FilterService, LocalizationService, ChangeDetectorRef])
 ], FilterExpressionComponent);
 
 /**
  * @hidden
  */
 let FilterGroupComponent = class FilterGroupComponent {
-    constructor(filterService, localization) {
+    constructor(filterService, localization, cdr) {
         this.filterService = filterService;
         this.localization = localization;
+        this.cdr = cdr;
         this.index = 0;
         this.currentItem = {
             logic: 'or',
             filters: []
         };
         this.valueChange = new EventEmitter();
-        this.logicOperators = [];
+        this.operators = [];
     }
     ngOnInit() {
-        this.logicOperators = this.filterService.logicOperators;
+        this.operators = this.getLogicOperators();
+        this.localizationSubscription = this.localization.changes.subscribe(() => {
+            this.operators = this.getLogicOperators();
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
+    }
+    getLogicOperators() {
+        return localizeOperators(logicOperators)(this.localization);
     }
     messageFor(key) {
         return this.localization.get(key);
@@ -920,7 +951,7 @@ FilterGroupComponent = __decorate([
             <div class="k-filter-toolbar-item">
               <div class="k-widget k-button-group" role="group">
               <button
-                    *ngFor="let operator of logicOperators"
+                    *ngFor="let operator of operators"
                     kendoButton
                     [ngClass]="{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}"
                     [selected]="currentItem.logic === operator.value"
@@ -979,7 +1010,7 @@ FilterGroupComponent = __decorate([
       </ul>
   `
     }),
-    __metadata("design:paramtypes", [FilterService, LocalizationService])
+    __metadata("design:paramtypes", [FilterService, LocalizationService, ChangeDetectorRef])
 ], FilterGroupComponent);
 
 /**

package/dist/fesm5/index.js

@@ -13,6 +13,45 @@ import { LabelModule } from '@progress/kendo-angular-label';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 
+/**
+ * @hidden
+ */
+var FilterService = /** @class */ (function () {
+    function FilterService() {
+        this.value = { filters: [], logic: 'or' };
+        this.filters = [];
+        this.isEditorDisabled = false;
+    }
+    FilterService.prototype.addFilterGroup = function (item) {
+        var filterGroup = { logic: 'or', filters: [] };
+        item.filters.push(filterGroup);
+    };
+    FilterService.prototype.addFilterExpression = function (item) {
+        var filterExpression = { operator: 'eq', value: null, field: null };
+        item.filters.push(filterExpression);
+    };
+    FilterService.prototype.remove = function (item, positionIndex, parentItem) {
+        var _this = this;
+        if (!parentItem) {
+            parentItem = this.value;
+        }
+        if (item === parentItem) {
+            parentItem.filters = [];
+            return;
+        }
+        var index = parentItem.filters.indexOf(item);
+        if (index >= 0 && index === positionIndex) {
+            parentItem.filters = parentItem.filters.filter(function (i) { return i !== item; });
+            return;
+        }
+        parentItem.filters.forEach(function (filter) { return filter.filters && _this.remove(item, positionIndex, filter); });
+    };
+    FilterService = __decorate([
+        Injectable()
+    ], FilterService);
+    return FilterService;
+}());
+
 /**
  * @hidden
  */
@@ -90,7 +129,6 @@ var isFilterEditor = function (editorType) {
     var supportedEditorTypes = ['string', 'number', 'boolean', 'date'];
     return supportedEditorTypes.indexOf(editorType) >= 0;
 };
-
 /**
  * @hidden
  */
@@ -98,74 +136,6 @@ var localizeOperators = function (operators) { return function (localization) {
     text: localization.get(key),
     value: operators[key]
 }); }); }; };
-/**
- * @hidden
- */
-var FilterService = /** @class */ (function () {
-    function FilterService(localization) {
-        this.localization = localization;
-        this.value = { filters: [], logic: 'or' };
-        this.filters = [];
-        this.isEditorDisabled = false;
-    }
-    Object.defineProperty(FilterService.prototype, "defaultNumericOperators", {
-        get: function () {
-            return localizeOperators(defaultNumericOperators)(this.localization);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(FilterService.prototype, "defaultStringOperators", {
-        get: function () {
-            return localizeOperators(defaultStringOperators)(this.localization);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(FilterService.prototype, "defaultDateOperators", {
-        get: function () {
-            return localizeOperators(defaultDateOperators)(this.localization);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(FilterService.prototype, "logicOperators", {
-        get: function () {
-            return localizeOperators(logicOperators)(this.localization);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    FilterService.prototype.addFilterGroup = function (item) {
-        var filterGroup = { logic: 'or', filters: [] };
-        item.filters.push(filterGroup);
-    };
-    FilterService.prototype.addFilterExpression = function (item) {
-        var filterExpression = { operator: 'eq', value: null, field: null };
-        item.filters.push(filterExpression);
-    };
-    FilterService.prototype.remove = function (item, positionIndex, parentItem) {
-        var _this = this;
-        if (!parentItem) {
-            parentItem = this.value;
-        }
-        if (item === parentItem) {
-            parentItem.filters = [];
-            return;
-        }
-        var index = parentItem.filters.indexOf(item);
-        if (index >= 0 && index === positionIndex) {
-            parentItem.filters = parentItem.filters.filter(function (i) { return i !== item; });
-            return;
-        }
-        parentItem.filters.forEach(function (filter) { return filter.filters && _this.remove(item, positionIndex, filter); });
-    };
-    FilterService = __decorate([
-        Injectable(),
-        __metadata("design:paramtypes", [LocalizationService])
-    ], FilterService);
-    return FilterService;
-}());
 
 /**
  * @hidden
@@ -174,7 +144,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-filter',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642780812,
+    publishDate: 1645005293,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -382,15 +352,35 @@ var AriaLabelValueDirective = /** @class */ (function () {
  * @hidden
  */
 var FilterBooleanEditorComponent = /** @class */ (function () {
-    function FilterBooleanEditorComponent(localization) {
+    function FilterBooleanEditorComponent(localization, cdr) {
         this.localization = localization;
+        this.cdr = cdr;
         this.valueChange = new EventEmitter();
-        this.items = [
+        this.items = this.getValueItems();
+        this.defaultItem = this.getDefaultItem();
+    }
+    FilterBooleanEditorComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.localizationSubscription = this.localization.changes.subscribe(function () {
+            _this.defaultItem = _this.getDefaultItem();
+            _this.items = _this.getValueItems();
+            _this.cdr.detectChanges();
+        });
+    };
+    FilterBooleanEditorComponent.prototype.getDefaultItem = function () {
+        return { text: this.localization.get("filterBooleanAll"), value: null };
+    };
+    FilterBooleanEditorComponent.prototype.getValueItems = function () {
+        return [
             { text: this.localization.get("filterIsTrue"), value: true },
             { text: this.localization.get("filterIsFalse"), value: false }
         ];
-        this.defaultItem = { text: this.localization.get("filterBooleanAll"), value: null };
-    }
+    };
+    FilterBooleanEditorComponent.prototype.ngOnDestroy = function () {
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
+    };
     FilterBooleanEditorComponent.prototype.messageFor = function (key) {
         return this.localization.get(key);
     };
@@ -407,7 +397,7 @@ var FilterBooleanEditorComponent = /** @class */ (function () {
             selector: 'kendo-filter-boolean-editor',
             template: "\n    <kendo-dropdownlist\n        [kendoAriaLabelValue]=\"messageFor('filterValueAriaLabel')\"\n        class=\"k-filter-toolbar-item k-filter-value\"\n        [(value)]=\"currentItem.value\"\n        (valueChange)=\"valueChange.emit()\"\n        [data]=\"items\"\n        [defaultItem]=\"defaultItem\"\n        [valuePrimitive]=\"true\"\n        textField=\"text\"\n        valueField=\"value\"\n        >\n    </kendo-dropdownlist>\n  "
         }),
-        __metadata("design:paramtypes", [LocalizationService])
+        __metadata("design:paramtypes", [LocalizationService, ChangeDetectorRef])
     ], FilterBooleanEditorComponent);
     return FilterBooleanEditorComponent;
 }());
@@ -566,9 +556,10 @@ var FilterExpressionOperatorsComponent = /** @class */ (function () {
  * @hidden
  */
 var FilterExpressionComponent = /** @class */ (function () {
-    function FilterExpressionComponent(filterService, localization) {
+    function FilterExpressionComponent(filterService, localization, cdr) {
         this.filterService = filterService;
         this.localization = localization;
+        this.cdr = cdr;
         this.valueChange = new EventEmitter();
         this.operators = [];
         this.filters = [];
@@ -576,16 +567,26 @@ var FilterExpressionComponent = /** @class */ (function () {
         this.isEditorDisabled = false;
     }
     FilterExpressionComponent.prototype.ngOnInit = function () {
+        var _this = this;
         this.filters = this.filterService.filters;
+        var foundFilter = this.getFilterExpressionByField(this.currentItem.field);
         if (this.currentItem.field) {
-            var foundFilter = this.getFilterExpressionByField(this.currentItem.field);
             this.setOperators(foundFilter);
         }
+        var defaultFilter = this.getFilterExpressionByField(this.filterService.filters[0].field);
         if (!this.currentItem.field) {
             this.currentItem.field = this.filterService.filters[0].field;
-            var defaultFilter = this.getFilterExpressionByField(this.filterService.filters[0].field);
             this.setOperators(defaultFilter);
         }
+        this.localizationSubscription = this.localization.changes.subscribe(function () {
+            _this.setOperators(foundFilter || defaultFilter);
+            _this.cdr.detectChanges();
+        });
+    };
+    FilterExpressionComponent.prototype.ngOnDestroy = function () {
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
     };
     FilterExpressionComponent.prototype.normalizeOperators = function (filterEditor, operators) {
         var result = [];
@@ -619,11 +620,11 @@ var FilterExpressionComponent = /** @class */ (function () {
     FilterExpressionComponent.prototype.getDefaultOperators = function (operatorsType) {
         switch (operatorsType) {
             case 'string':
-                return this.filterService.defaultStringOperators;
+                return localizeOperators(defaultStringOperators)(this.localization);
             case 'number':
-                return this.filterService.defaultNumericOperators;
+                return localizeOperators(defaultNumericOperators)(this.localization);
             case 'date':
-                return this.filterService.defaultDateOperators;
+                return localizeOperators(defaultDateOperators)(this.localization);
             default:
                 break;
         }
@@ -669,7 +670,7 @@ var FilterExpressionComponent = /** @class */ (function () {
             selector: 'kendo-filter-expression',
             template: "\n        <div class=\"k-filter-toolbar\" role=\"group\" [attr.aria-label]=\"messageFor('filterAriaLabel')\">\n            <div class=\"k-toolbar\">\n                <div class=\"k-filter-toolbar-item k-filter-field\">\n                    <kendo-dropdownlist\n                        [kendoAriaLabelValue]=\"messageFor('filterFieldAriaLabel')\"\n                        [title]=\"messageFor('filterExpressionFilters')\"\n                        [data]=\"filters\"\n                        textField=\"title\"\n                        valueField=\"field\"\n                        [value]=\"currentItem.field\"\n                        [valuePrimitive]=\"true\"\n                        (valueChange)=\"filterValueChange($event)\">\n                    </kendo-dropdownlist>\n                </div>\n                <div *ngIf=\"!isBoolean\" class=\"k-filter-toolbar-item k-filter-operator\">\n                    <kendo-filter-expression-operators\n                        [currentItem]=\"currentItem\"\n                        [operators]=\"operators\"\n                        (valueChange)=\"valueChange.emit();\">\n                    </kendo-filter-expression-operators>\n                </div>\n\n                <ng-container [ngSwitch]=\"getEditorType()\">\n                    <kendo-filter-text-editor *ngSwitchCase=\"'string'\" [currentItem]=\"currentItem\" (valueChange)=\"valueChange.emit()\"></kendo-filter-text-editor>\n                    <kendo-filter-numeric-editor *ngSwitchCase=\"'number'\" [currentItem]=\"currentItem\" (valueChange)=\"valueChange.emit()\"></kendo-filter-numeric-editor>\n                    <kendo-filter-boolean-editor *ngSwitchCase=\"'boolean'\" [currentItem]=\"currentItem\" (valueChange)=\"valueChange.emit()\"></kendo-filter-boolean-editor>\n                    <kendo-filter-date-editor *ngSwitchCase=\"'date'\" [currentItem]=\"currentItem\" (valueChange)=\"valueChange.emit()\"></kendo-filter-date-editor>\n                </ng-container>\n\n                <div class=\"k-filter-toolbar-item\">\n                    <button\n                        kendoButton\n                        icon=\"close\"\n                        fillMode=\"flat\"\n                        [title]=\"messageFor('remove')\"\n                        (click)=\"removeFilterExpression()\">\n                    </button>\n                </div>\n            </div>\n        </div>\n  "
         }),
-        __metadata("design:paramtypes", [FilterService, LocalizationService])
+        __metadata("design:paramtypes", [FilterService, LocalizationService, ChangeDetectorRef])
     ], FilterExpressionComponent);
     return FilterExpressionComponent;
 }());
@@ -678,19 +679,33 @@ var FilterExpressionComponent = /** @class */ (function () {
  * @hidden
  */
 var FilterGroupComponent = /** @class */ (function () {
-    function FilterGroupComponent(filterService, localization) {
+    function FilterGroupComponent(filterService, localization, cdr) {
         this.filterService = filterService;
         this.localization = localization;
+        this.cdr = cdr;
         this.index = 0;
         this.currentItem = {
             logic: 'or',
             filters: []
         };
         this.valueChange = new EventEmitter();
-        this.logicOperators = [];
+        this.operators = [];
     }
     FilterGroupComponent.prototype.ngOnInit = function () {
-        this.logicOperators = this.filterService.logicOperators;
+        var _this = this;
+        this.operators = this.getLogicOperators();
+        this.localizationSubscription = this.localization.changes.subscribe(function () {
+            _this.operators = _this.getLogicOperators();
+            _this.cdr.detectChanges();
+        });
+    };
+    FilterGroupComponent.prototype.ngOnDestroy = function () {
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
+    };
+    FilterGroupComponent.prototype.getLogicOperators = function () {
+        return localizeOperators(logicOperators)(this.localization);
     };
     FilterGroupComponent.prototype.messageFor = function (key) {
         return this.localization.get(key);
@@ -728,9 +743,9 @@ var FilterGroupComponent = /** @class */ (function () {
     FilterGroupComponent = __decorate([
         Component({
             selector: 'kendo-filter-group',
-            template: "\n        <div class=\"k-filter-toolbar\" role=\"toolbar\" [attr.aria-label]=\"messageFor('filterToolbarAriaLabel')\">\n          <div class=\"k-toolbar\">\n            <div class=\"k-filter-toolbar-item\">\n              <div class=\"k-widget k-button-group\" role=\"group\">\n              <button\n                    *ngFor=\"let operator of logicOperators\"\n                    kendoButton\n                    [ngClass]=\"{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}\"\n                    [selected]=\"currentItem.logic === operator.value\"\n                    [title]=\"operator.text\"\n                    (click)=\"selectedChange(operator.value)\"\n                    >\n                    {{operator.text}}\n                  </button>\n              </div>\n            </div>\n          <div class=\"k-filter-toolbar-item\">\n            <button\n                kendoButton\n                [title]=\"messageFor('addFilter')\"\n                icon=\"filter-add-expression\"\n                (click)=\"addFilterExpression()\">\n                {{messageFor('addFilter')}}\n            </button>\n          </div>\n          <div class=\"k-filter-toolbar-item\">\n            <button\n                kendoButton\n                [title]=\"messageFor('addGroup')\"\n                icon=\"filter-add-group\"\n                (click)=\"addFilterGroup()\">\n                {{messageFor('addGroup')}}\n            </button>\n          </div>\n          <div class=\"k-filter-toolbar-item\">\n            <button\n                kendoButton\n                icon=\"close\"\n                fillMode=\"flat\"\n                [title]=\"messageFor('remove')\"\n                (click)=\"removeFilterGroup()\">\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <ul class=\"k-filter-lines\" *ngIf=\"currentItem.filters\">\n        <ng-container *ngFor=\"let item of currentItem.filters; let i = index;\">\n          <li class=\"k-filter-item\" *ngIf=\"!item.filters\">\n            <kendo-filter-expression (valueChange)=\"valueChange.emit()\" [currentItem]=\"item\" [index]=\"i\">\n            </kendo-filter-expression>\n          </li>\n          <li class=\"k-filter-item\" *ngIf=\"item.filters\" >\n            <kendo-filter-group\n                (valueChange)=\"valueChange.emit()\"\n                [currentItem]=\"item\"\n                [index]=\"i\"\n                >\n            </kendo-filter-group>\n          </li>\n        </ng-container>\n      </ul>\n  "
+            template: "\n        <div class=\"k-filter-toolbar\" role=\"toolbar\" [attr.aria-label]=\"messageFor('filterToolbarAriaLabel')\">\n          <div class=\"k-toolbar\">\n            <div class=\"k-filter-toolbar-item\">\n              <div class=\"k-widget k-button-group\" role=\"group\">\n              <button\n                    *ngFor=\"let operator of operators\"\n                    kendoButton\n                    [ngClass]=\"{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}\"\n                    [selected]=\"currentItem.logic === operator.value\"\n                    [title]=\"operator.text\"\n                    (click)=\"selectedChange(operator.value)\"\n                    >\n                    {{operator.text}}\n                  </button>\n              </div>\n            </div>\n          <div class=\"k-filter-toolbar-item\">\n            <button\n                kendoButton\n                [title]=\"messageFor('addFilter')\"\n                icon=\"filter-add-expression\"\n                (click)=\"addFilterExpression()\">\n                {{messageFor('addFilter')}}\n            </button>\n          </div>\n          <div class=\"k-filter-toolbar-item\">\n            <button\n                kendoButton\n                [title]=\"messageFor('addGroup')\"\n                icon=\"filter-add-group\"\n                (click)=\"addFilterGroup()\">\n                {{messageFor('addGroup')}}\n            </button>\n          </div>\n          <div class=\"k-filter-toolbar-item\">\n            <button\n                kendoButton\n                icon=\"close\"\n                fillMode=\"flat\"\n                [title]=\"messageFor('remove')\"\n                (click)=\"removeFilterGroup()\">\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <ul class=\"k-filter-lines\" *ngIf=\"currentItem.filters\">\n        <ng-container *ngFor=\"let item of currentItem.filters; let i = index;\">\n          <li class=\"k-filter-item\" *ngIf=\"!item.filters\">\n            <kendo-filter-expression (valueChange)=\"valueChange.emit()\" [currentItem]=\"item\" [index]=\"i\">\n            </kendo-filter-expression>\n          </li>\n          <li class=\"k-filter-item\" *ngIf=\"item.filters\" >\n            <kendo-filter-group\n                (valueChange)=\"valueChange.emit()\"\n                [currentItem]=\"item\"\n                [index]=\"i\"\n                >\n            </kendo-filter-group>\n          </li>\n        </ng-container>\n      </ul>\n  "
         }),
-        __metadata("design:paramtypes", [FilterService, LocalizationService])
+        __metadata("design:paramtypes", [FilterService, LocalizationService, ChangeDetectorRef])
     ], FilterGroupComponent);
     return FilterGroupComponent;
 }());

package/dist/npm/editors/boolean-editor.component.js

@@ -11,15 +11,35 @@ var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
  * @hidden
  */
 var FilterBooleanEditorComponent = /** @class */ (function () {
-    function FilterBooleanEditorComponent(localization) {
+    function FilterBooleanEditorComponent(localization, cdr) {
         this.localization = localization;
+        this.cdr = cdr;
         this.valueChange = new core_1.EventEmitter();
-        this.items = [
+        this.items = this.getValueItems();
+        this.defaultItem = this.getDefaultItem();
+    }
+    FilterBooleanEditorComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.localizationSubscription = this.localization.changes.subscribe(function () {
+            _this.defaultItem = _this.getDefaultItem();
+            _this.items = _this.getValueItems();
+            _this.cdr.detectChanges();
+        });
+    };
+    FilterBooleanEditorComponent.prototype.getDefaultItem = function () {
+        return { text: this.localization.get("filterBooleanAll"), value: null };
+    };
+    FilterBooleanEditorComponent.prototype.getValueItems = function () {
+        return [
             { text: this.localization.get("filterIsTrue"), value: true },
             { text: this.localization.get("filterIsFalse"), value: false }
         ];
-        this.defaultItem = { text: this.localization.get("filterBooleanAll"), value: null };
-    }
+    };
+    FilterBooleanEditorComponent.prototype.ngOnDestroy = function () {
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
+    };
     FilterBooleanEditorComponent.prototype.messageFor = function (key) {
         return this.localization.get(key);
     };
@@ -36,7 +56,7 @@ var FilterBooleanEditorComponent = /** @class */ (function () {
             selector: 'kendo-filter-boolean-editor',
             template: "\n    <kendo-dropdownlist\n        [kendoAriaLabelValue]=\"messageFor('filterValueAriaLabel')\"\n        class=\"k-filter-toolbar-item k-filter-value\"\n        [(value)]=\"currentItem.value\"\n        (valueChange)=\"valueChange.emit()\"\n        [data]=\"items\"\n        [defaultItem]=\"defaultItem\"\n        [valuePrimitive]=\"true\"\n        textField=\"text\"\n        valueField=\"value\"\n        >\n    </kendo-dropdownlist>\n  "
         }),
-        tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
+        tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService, core_1.ChangeDetectorRef])
     ], FilterBooleanEditorComponent);
     return FilterBooleanEditorComponent;
 }());