@progress/kendo-angular-buttons 7.0.6 → 7.0.7-dev.202204111624

package/dist/es/button/button.directive.js

@@ -7,6 +7,7 @@ import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input,
 import { KendoButtonService } from './button.service';
 import { isDocumentAvailable, isChanged, hasObservers, Keys } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { Subscription } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { getStylingClasses, getThemeColorClasses, isFirefox } from '../util';
@@ -47,13 +48,13 @@ var ButtonDirective = /** @class */ (function () {
         this._fillMode = 'solid';
         this._themeColor = 'base';
         this._focused = false;
-        this.domEvents = [];
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.localizationChangeSubscription = localization.changes.subscribe(function (_a) {
+        this.subs.add(localization.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             return (_this.direction = rtl ? 'rtl' : 'ltr');
-        });
+        }));
         this.element = element.nativeElement;
         this.renderer = renderer;
     }
@@ -396,8 +397,8 @@ var ButtonDirective = /** @class */ (function () {
             this.setAttribute('role', this.role);
         }
         this.ngZone.runOutsideAngular(function () {
-            _this.domEvents.push(_this.renderer.listen(_this.element, 'click', _this._onButtonClick.bind(_this)));
-            _this.domEvents.push(_this.renderer.listen(_this.element, 'keydown', function (event) {
+            _this.subs.add(_this.renderer.listen(_this.element, 'click', _this._onButtonClick.bind(_this)));
+            _this.subs.add(_this.renderer.listen(_this.element, 'keydown', function (event) {
                 var isSpaceOrEnter = event.keyCode === Keys.Space || event.keyCode === Keys.Enter;
                 if (isSpan && isSpaceOrEnter) {
                     _this.click.emit(event);
@@ -426,9 +427,8 @@ var ButtonDirective = /** @class */ (function () {
         this.iconNode = null;
         this.iconSpanNode = null;
         this.renderer = null;
-        this.localizationChangeSubscription.unsubscribe();
+        this.subs.unsubscribe();
         clearTimeout(this.deferTimeout);
-        this.domEvents.forEach(function (unbindHandler) { return unbindHandler(); });
     };
     /**
      * Focuses the Button component.

package/dist/es/buttongroup/buttongroup.component.js

@@ -8,6 +8,7 @@ import { Component, EventEmitter, Output, Input, ContentChildren, QueryList, Hos
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { isChanged, Keys } from '@progress/kendo-angular-common';
 import { KendoButtonService } from '../button/button.service';
+import { Subscription } from 'rxjs';
 import { isPresent } from '../util';
 import { PreventableEvent } from '../preventable-event';
 import { packageMetadata } from '../package-metadata';
@@ -34,11 +35,12 @@ var ButtonGroupComponent = /** @class */ (function () {
         this.navigate = new EventEmitter();
         this._tabIndex = 0;
         this.currentTabIndex = 0;
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
-        this.localizationChangeSubscription = localization.changes.subscribe(function (_a) {
+        this.subs.add(localization.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             return _this.direction = rtl ? 'rtl' : 'ltr';
-        });
+        }));
     }
     Object.defineProperty(ButtonGroupComponent.prototype, "tabIndex", {
         get: function () {
@@ -140,7 +142,7 @@ var ButtonGroupComponent = /** @class */ (function () {
     };
     ButtonGroupComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.subscription = this.service.buttonClicked$.subscribe(function (button) {
+        this.subs.add(this.service.buttonClicked$.subscribe(function (button) {
             var newSelectionValue;
             if (_this.isSelectionSingle()) {
                 newSelectionValue = true;
@@ -154,7 +156,7 @@ var ButtonGroupComponent = /** @class */ (function () {
                 button.setSelected(newSelectionValue);
             }
             button.setAttribute(tabindex, '0');
-        });
+        }));
     };
     ButtonGroupComponent.prototype.ngOnChanges = function (change) {
         var _this = this;
@@ -183,8 +185,7 @@ var ButtonGroupComponent = /** @class */ (function () {
         }
     };
     ButtonGroupComponent.prototype.ngOnDestroy = function () {
-        this.subscription.unsubscribe();
-        this.localizationChangeSubscription.unsubscribe();
+        this.subs.unsubscribe();
     };
     ButtonGroupComponent.prototype.ngAfterContentChecked = function () {
         this.verifySettings();

package/dist/es/chip/chip.component.js

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 import { Component, HostBinding, Input, Output, EventEmitter, ElementRef, Renderer2, NgZone, isDevMode } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -49,6 +50,7 @@ var ChipComponent = /** @class */ (function () {
         this._fillMode = 'solid';
         this._themeColor = 'base';
         this.focused = false;
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
@@ -176,19 +178,14 @@ var ChipComponent = /** @class */ (function () {
     });
     ChipComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.dynamicRTLSubscription = this.localizationService.changes
+        this.subs.add(this.localizationService.changes
             .subscribe(function (_a) {
             var rtl = _a.rtl;
             return _this.direction = rtl ? 'rtl' : 'ltr';
-        });
+        }));
     };
     ChipComponent.prototype.ngOnDestroy = function () {
-        if (this.dynamicRTLSubscription) {
-            this.dynamicRTLSubscription.unsubscribe();
-        }
-        if (this.detachDomEvents) {
-            this.detachDomEvents();
-        }
+        this.subs.unsubscribe();
     };
     ChipComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
@@ -272,25 +269,20 @@ var ChipComponent = /** @class */ (function () {
     ChipComponent.prototype.attachElementEventHandlers = function (chip) {
         var _this = this;
         this.ngZone.runOutsideAngular(function () {
-            var focusListener = _this.renderer.listen(chip, 'focus', function () {
+            _this.subs.add(_this.renderer.listen(chip, 'focus', function () {
                 _this.renderer.addClass(chip, 'k-focus');
-            });
-            var blurListener = _this.renderer.listen(chip, 'blur', function () {
+            }));
+            _this.subs.add(_this.renderer.listen(chip, 'blur', function () {
                 _this.renderer.removeClass(chip, 'k-focus');
-            });
-            var contentClickListener = _this.renderer.listen(chip, 'click', function (e) {
+            }));
+            _this.subs.add(_this.renderer.listen(chip, 'click', function (e) {
                 var isRemoveClicked = closest(e.target, '.k-chip-remove-action');
                 if (!isRemoveClicked) {
                     _this.ngZone.run(function () {
                         _this.contentClick.emit({ sender: _this, originalEvent: e });
                     });
                 }
-            });
-            _this.detachDomEvents = function () {
-                focusListener();
-                blurListener();
-                contentClickListener();
-            };
+            }));
         });
     };
     /**

package/dist/es/dropdownbutton/dropdownbutton.component.js

@@ -16,7 +16,7 @@ import { FocusService } from '../focusable/focus.service';
 import { NavigationService } from '../navigation/navigation.service';
 import { NAVIGATION_CONFIG } from '../navigation/navigation-config';
 import { PreventableEvent } from '../preventable-event';
-import { merge } from 'rxjs';
+import { merge, Subscription } from 'rxjs';
 var NAVIGATION_SETTINGS = {
     useLeftRightArrows: true
 };
@@ -152,6 +152,7 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
         _this.onBlur = new EventEmitter(); //tslint:disable-line:no-output-rename
         _this.listId = guid();
         _this._fillMode = 'solid';
+        _this.popupSubs = new Subscription();
         _this._itemClick = _this.itemClick;
         _this._blur = _this.onBlur;
         return _this;
@@ -461,11 +462,11 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
             || (this.popupRef && this.popupRef.popupElement.contains(element));
     };
     DropDownButtonComponent.prototype.subscribeNavigationEvents = function () {
-        this.navigationSubscription = this.navigationService.navigate
-            .subscribe(this.onArrowKeyNavigate.bind(this));
-        this.enterUpSubscription = this.navigationService.enterup.subscribe(this.onNavigationEnterUp.bind(this));
-        this.openSubscription = this.navigationService.open.subscribe(this.onNavigationOpen.bind(this));
-        this.closeSubscription = merge(this.navigationService.close, this.navigationService.esc).subscribe(this.onNavigationClose.bind(this));
+        this.subs.add(this.navigationService.navigate
+            .subscribe(this.onArrowKeyNavigate.bind(this)));
+        this.subs.add(this.navigationService.enterup.subscribe(this.onNavigationEnterUp.bind(this)));
+        this.subs.add(this.navigationService.open.subscribe(this.onNavigationOpen.bind(this)));
+        this.subs.add(merge(this.navigationService.close, this.navigationService.esc).subscribe(this.onNavigationClose.bind(this)));
     };
     DropDownButtonComponent.prototype.onNavigationEnterUp = function () {
         if (!this._disabled && !this.openState) {
@@ -519,13 +520,14 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
             popupAlign: this.popupAlign,
             popupClass: this.popupClasses
         });
-        this.popupRef.popupAnchorViewportLeave.subscribe(function () { return _this.openState = false; });
-        this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this));
+        this.popupSubs.add(this.popupRef.popupAnchorViewportLeave.subscribe(function () { return _this.openState = false; }));
+        this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this)));
     };
     DropDownButtonComponent.prototype.destroyPopup = function () {
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
+            this.popupSubs.unsubscribe();
         }
     };
     tslib_1.__decorate([

package/dist/es/focusable/focusable.directive.js

@@ -5,6 +5,7 @@
 import * as tslib_1 from "tslib";
 import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';
 import { FocusService } from './focus.service';
+import { Subscription } from 'rxjs';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 /**
  * @hidden
@@ -13,6 +14,7 @@ var FocusableDirective = /** @class */ (function () {
     function FocusableDirective(focusService, elementRef, renderer) {
         this.focusService = focusService;
         this.renderer = renderer;
+        this.subs = new Subscription();
         this.element = elementRef.nativeElement;
         this.subscribeEvents();
     }
@@ -28,14 +30,14 @@ var FocusableDirective = /** @class */ (function () {
      * @hidden
      */
     FocusableDirective.prototype.ngOnDestroy = function () {
-        this.unsubscribeEvents();
+        this.subs.unsubscribe();
     };
     FocusableDirective.prototype.subscribeEvents = function () {
         var _this = this;
         if (!isDocumentAvailable()) {
             return;
         }
-        this.focusSubscription = this.focusService.onFocus.subscribe(function (index) {
+        this.subs.add(this.focusService.onFocus.subscribe(function (index) {
             if (_this.index === index) {
                 _this.renderer.addClass(_this.element, 'k-focus');
                 _this.element.focus();
@@ -43,15 +45,7 @@ var FocusableDirective = /** @class */ (function () {
             else {
                 _this.renderer.removeClass(_this.element, 'k-focus');
             }
-        });
-    };
-    FocusableDirective.prototype.unsubscribeEvents = function () {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        if (this.focusSubscription) {
-            this.focusSubscription.unsubscribe();
-        }
+        }));
     };
     tslib_1.__decorate([
         Input(),

package/dist/es/listbutton/list-button.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /* tslint:disable:deprecation */
-import { fromEvent, merge } from 'rxjs';
+import { Subscription, fromEvent, merge } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { KeyEvents } from './../navigation/key-events';
 import { NavigationAction } from './../navigation/navigation-action';
@@ -28,14 +28,15 @@ var ListButton = /** @class */ (function () {
         this._popupSettings = { animate: true, popupClass: '' };
         this.listId = guid();
         this._isFocused = false;
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
         this.focusService = focusService;
         this.navigationService = navigationService;
         this.wrapper = wrapperRef.nativeElement;
-        this.localizationChangeSubscription = localization.changes.subscribe(function (_a) {
+        this.subs.add(localization.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             return (_this.direction = rtl ? 'rtl' : 'ltr');
-        });
+        }));
         this.subscribeEvents();
     }
     Object.defineProperty(ListButton.prototype, "popupClasses", {
@@ -81,12 +82,9 @@ var ListButton = /** @class */ (function () {
     };
     ListButton.prototype.ngOnDestroy = function () {
         this.openState = false;
-        this.unsubscribeEvents();
         clearTimeout(this.focusFirstTimeout);
         clearTimeout(this.blurTimeout);
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
+        this.subs.unsubscribe();
     };
     ListButton.prototype.subscribeEvents = function () {
         if (!isDocumentAvailable()) {
@@ -98,27 +96,27 @@ var ListButton = /** @class */ (function () {
     };
     ListButton.prototype.subscribeListItemFocusEvent = function () {
         var _this = this;
-        this.focusSubscription = this.focusService.onFocus.subscribe(function () {
+        this.subs.add(this.focusService.onFocus.subscribe(function () {
             _this._isFocused = true;
-        });
+        }));
     };
     ListButton.prototype.subscribeComponentBlurredEvent = function () {
         var _this = this;
         this._zone.runOutsideAngular(function () {
-            _this.tabSubscription = _this.navigationService.tab.pipe(filter(function () { return _this._isFocused; })).subscribe(_this.handleTab.bind(_this));
-            _this.componentBlurredSubscription = fromEvent(document, 'click')
+            _this.subs.add(_this.navigationService.tab.pipe(filter(function () { return _this._isFocused; })).subscribe(_this.handleTab.bind(_this)));
+            _this.subs.add(fromEvent(document, 'click')
                 .pipe(filter(function (event) { return !_this.wrapperContains(event.target); }), filter(function () { return _this._isFocused; }))
-                .subscribe(function () { return _this._zone.run(function () { return _this.blurWrapper(); }); });
+                .subscribe(function () { return _this._zone.run(function () { return _this.blurWrapper(); }); }));
         });
     };
     ListButton.prototype.subscribeNavigationEvents = function () {
         var _this = this;
-        this.navigationSubscription = this.navigationService.navigate.subscribe(this.focusService.focus.bind(this.focusService));
-        this.enterUpSubscription = this.navigationService.enterup.subscribe(function () {
+        this.subs.add(this.navigationService.navigate.subscribe(this.focusService.focus.bind(this.focusService)));
+        this.subs.add(this.navigationService.enterup.subscribe(function () {
             _this.enterHandler();
             _this.focusWrapper();
-        });
-        this.openSubscription = this.navigationService.open.subscribe(function () {
+        }));
+        this.subs.add(this.navigationService.open.subscribe(function () {
             if (!_this._open) {
                 _this.togglePopupVisibility();
                 _this.focusFirstItem();
@@ -126,28 +124,10 @@ var ListButton = /** @class */ (function () {
             else {
                 _this.focusWrapper();
             }
-        });
-        this.closeSubscription = merge(this.navigationService.close, this.navigationService.esc).subscribe(function () { return _this.focusWrapper(); });
+        }));
+        this.subs.add(merge(this.navigationService.close, this.navigationService.esc).subscribe(function () { return _this.focusWrapper(); }));
     };
     ListButton.prototype.enterHandler = function () { }; // tslint:disable-line
-    ListButton.prototype.unsubscribeEvents = function () {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.unsubscribe(this.componentBlurredSubscription);
-        this.unsubscribe(this.focusSubscription);
-        this.unsubscribe(this.navigationSubscription);
-        this.unsubscribe(this.enterPressSubscription);
-        this.unsubscribe(this.enterUpSubscription);
-        this.unsubscribe(this.openSubscription);
-        this.unsubscribe(this.closeSubscription);
-        this.unsubscribe(this.tabSubscription);
-    };
-    ListButton.prototype.unsubscribe = function (subscription) {
-        if (subscription) {
-            subscription.unsubscribe();
-        }
-    };
     /**
      * @hidden
      */

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648649426,
+    publishDate: 1649694226,
     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'
 };

package/dist/es/splitbutton/splitbutton.component.js

@@ -17,6 +17,7 @@ import { isPresent, tick } from './../util';
 import { PreventableEvent } from '../preventable-event';
 import { Keys } from '@progress/kendo-angular-common';
 import { replaceMessagePlaceholder, getStylingClasses } from '../util';
+import { Subscription } from 'rxjs';
 var NAVIGATION_SETTINGS = {
     useLeftRightArrows: true
 };
@@ -213,6 +214,7 @@ var SplitButtonComponent = /** @class */ (function (_super) {
         _this.lockFocus = false;
         _this._rounded = 'medium';
         _this._fillMode = "solid";
+        _this.popupSubs = new Subscription();
         _this._itemClick = _this.itemClick;
         _this._blur = _this.onBlur;
         return _this;
@@ -628,11 +630,12 @@ var SplitButtonComponent = /** @class */ (function (_super) {
             popupAlign: this.popupAlign,
             popupClass: this.popupClasses
         });
-        this.popupRef.popupAnchorViewportLeave.subscribe(function () { return (_this.openState = false); });
-        this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this));
+        this.popupSubs.add(this.popupRef.popupAnchorViewportLeave.subscribe(function () { return (_this.openState = false); }));
+        this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this)));
     };
     SplitButtonComponent.prototype.destroyPopup = function () {
         if (this.popupRef) {
+            this.popupSubs.unsubscribe();
             this.popupRef.close();
             this.popupRef = null;
         }

package/dist/es2015/button/button.directive.d.ts

@@ -144,12 +144,11 @@ export declare class ButtonDirective implements OnDestroy, AfterViewInit {
     private _shape;
     private _fillMode;
     private _themeColor;
-    private localizationChangeSubscription;
     private _focused;
     private direction;
     private _selected;
     private deferTimeout;
-    private domEvents;
+    private subs;
     isFocused: boolean;
     readonly classButton: boolean;
     readonly isToggleable: boolean;

package/dist/es2015/button/button.directive.js

@@ -7,6 +7,7 @@ import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input,
 import { KendoButtonService } from './button.service';
 import { isDocumentAvailable, isChanged, hasObservers, Keys } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { Subscription } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { getStylingClasses, getThemeColorClasses, isFirefox } from '../util';
@@ -46,10 +47,10 @@ let ButtonDirective = class ButtonDirective {
         this._fillMode = 'solid';
         this._themeColor = 'base';
         this._focused = false;
-        this.domEvents = [];
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr'));
+        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
         this.element = element.nativeElement;
         this.renderer = renderer;
     }
@@ -305,8 +306,8 @@ let ButtonDirective = class ButtonDirective {
             this.setAttribute('role', this.role);
         }
         this.ngZone.runOutsideAngular(() => {
-            this.domEvents.push(this.renderer.listen(this.element, 'click', this._onButtonClick.bind(this)));
-            this.domEvents.push(this.renderer.listen(this.element, 'keydown', (event) => {
+            this.subs.add(this.renderer.listen(this.element, 'click', this._onButtonClick.bind(this)));
+            this.subs.add(this.renderer.listen(this.element, 'keydown', (event) => {
                 const isSpaceOrEnter = event.keyCode === Keys.Space || event.keyCode === Keys.Enter;
                 if (isSpan && isSpaceOrEnter) {
                     this.click.emit(event);
@@ -334,9 +335,8 @@ let ButtonDirective = class ButtonDirective {
         this.iconNode = null;
         this.iconSpanNode = null;
         this.renderer = null;
-        this.localizationChangeSubscription.unsubscribe();
+        this.subs.unsubscribe();
         clearTimeout(this.deferTimeout);
-        this.domEvents.forEach(unbindHandler => unbindHandler());
     }
     /**
      * Focuses the Button component.

package/dist/es2015/buttongroup/buttongroup.component.d.ts

@@ -50,8 +50,7 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
     private _tabIndex;
     private currentTabIndex;
     private direction;
-    private subscription;
-    private localizationChangeSubscription;
+    private subs;
     readonly wrapperClass: boolean;
     readonly disabledClass: boolean;
     readonly stretchedClass: boolean;

package/dist/es2015/buttongroup/buttongroup.component.js

@@ -8,6 +8,7 @@ import { Component, EventEmitter, Output, Input, ContentChildren, QueryList, Hos
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { isChanged, Keys } from '@progress/kendo-angular-common';
 import { KendoButtonService } from '../button/button.service';
+import { Subscription } from 'rxjs';
 import { isPresent } from '../util';
 import { PreventableEvent } from '../preventable-event';
 import { packageMetadata } from '../package-metadata';
@@ -33,8 +34,9 @@ let ButtonGroupComponent = class ButtonGroupComponent {
         this.navigate = new EventEmitter();
         this._tabIndex = 0;
         this.currentTabIndex = 0;
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
-        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
+        this.subs.add(localization.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
     }
     /**
      * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
@@ -99,7 +101,7 @@ let ButtonGroupComponent = class ButtonGroupComponent {
         }
     }
     ngOnInit() {
-        this.subscription = this.service.buttonClicked$.subscribe((button) => {
+        this.subs.add(this.service.buttonClicked$.subscribe((button) => {
             let newSelectionValue;
             if (this.isSelectionSingle()) {
                 newSelectionValue = true;
@@ -113,7 +115,7 @@ let ButtonGroupComponent = class ButtonGroupComponent {
                 button.setSelected(newSelectionValue);
             }
             button.setAttribute(tabindex, '0');
-        });
+        }));
     }
     ngOnChanges(change) {
         if (isChanged('disabled', change)) {
@@ -141,8 +143,7 @@ let ButtonGroupComponent = class ButtonGroupComponent {
         }
     }
     ngOnDestroy() {
-        this.subscription.unsubscribe();
-        this.localizationChangeSubscription.unsubscribe();
+        this.subs.unsubscribe();
     }
     ngAfterContentChecked() {
         this.verifySettings();

package/dist/es2015/chip/chip.component.d.ts

@@ -126,8 +126,7 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
     private _fillMode;
     private _themeColor;
     private focused;
-    private dynamicRTLSubscription;
-    private detachDomEvents;
+    private subs;
     constructor(element: ElementRef, renderer: Renderer2, ngZone: NgZone, localizationService: LocalizationService);
     ngOnInit(): void;
     ngOnDestroy(): void;

package/dist/es2015/chip/chip.component.js

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 import { Component, HostBinding, Input, Output, EventEmitter, ElementRef, Renderer2, NgZone, isDevMode } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -49,6 +50,7 @@ let ChipComponent = class ChipComponent {
         this._fillMode = 'solid';
         this._themeColor = 'base';
         this.focused = false;
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
@@ -139,16 +141,11 @@ let ChipComponent = class ChipComponent {
         return this.focused;
     }
     ngOnInit() {
-        this.dynamicRTLSubscription = this.localizationService.changes
-            .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
+        this.subs.add(this.localizationService.changes
+            .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
     }
     ngOnDestroy() {
-        if (this.dynamicRTLSubscription) {
-            this.dynamicRTLSubscription.unsubscribe();
-        }
-        if (this.detachDomEvents) {
-            this.detachDomEvents();
-        }
+        this.subs.unsubscribe();
     }
     ngAfterViewInit() {
         const chip = this.element.nativeElement;
@@ -214,25 +211,20 @@ let ChipComponent = class ChipComponent {
     }
     attachElementEventHandlers(chip) {
         this.ngZone.runOutsideAngular(() => {
-            const focusListener = this.renderer.listen(chip, 'focus', () => {
+            this.subs.add(this.renderer.listen(chip, 'focus', () => {
                 this.renderer.addClass(chip, 'k-focus');
-            });
-            const blurListener = this.renderer.listen(chip, 'blur', () => {
+            }));
+            this.subs.add(this.renderer.listen(chip, 'blur', () => {
                 this.renderer.removeClass(chip, 'k-focus');
-            });
-            const contentClickListener = this.renderer.listen(chip, 'click', (e) => {
+            }));
+            this.subs.add(this.renderer.listen(chip, 'click', (e) => {
                 const isRemoveClicked = closest(e.target, '.k-chip-remove-action');
                 if (!isRemoveClicked) {
                     this.ngZone.run(() => {
                         this.contentClick.emit({ sender: this, originalEvent: e });
                     });
                 }
-            });
-            this.detachDomEvents = () => {
-                focusListener();
-                blurListener();
-                contentClickListener();
-            };
+            }));
         });
     }
     /**

package/dist/es2015/dropdownbutton/dropdownbutton.component.d.ts

@@ -205,6 +205,7 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
     popupRef: PopupRef;
     listId: string;
     private _fillMode;
+    private popupSubs;
     /**
      * @hidden
      */