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

package/dist/fesm5/index.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __param, __extends } from 'tslib';
 import { Injectable, Input, Output, EventEmitter, HostBinding, HostListener, Directive, Optional, ElementRef, Renderer2, NgZone, isDevMode, ContentChildren, QueryList, Component, NgModule, TemplateRef, ViewContainerRef, InjectionToken, Inject, ContentChild, ViewChild, ChangeDetectorRef, forwardRef } from '@angular/core';
-import { Subject, fromEvent, merge, Subscription } from 'rxjs';
+import { Subject, Subscription, fromEvent, merge } from 'rxjs';
 import { isDocumentAvailable, Keys, isChanged, hasObservers, guid, EventsModule } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -38,7 +38,7 @@ 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'
 };
@@ -183,13 +183,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;
     }
@@ -532,8 +532,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);
@@ -562,9 +562,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.
@@ -956,11 +955,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 () {
@@ -1062,7 +1062,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;
@@ -1076,7 +1076,7 @@ var ButtonGroupComponent = /** @class */ (function () {
                 button.setSelected(newSelectionValue);
             }
             button.setAttribute(tabindex, '0');
-        });
+        }));
     };
     ButtonGroupComponent.prototype.ngOnChanges = function (change) {
         var _this = this;
@@ -1105,8 +1105,7 @@ var ButtonGroupComponent = /** @class */ (function () {
         }
     };
     ButtonGroupComponent.prototype.ngOnDestroy = function () {
-        this.subscription.unsubscribe();
-        this.localizationChangeSubscription.unsubscribe();
+        this.subs.unsubscribe();
     };
     ButtonGroupComponent.prototype.ngAfterContentChecked = function () {
         this.verifySettings();
@@ -1517,6 +1516,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();
     }
@@ -1532,14 +1532,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();
@@ -1547,15 +1547,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();
-        }
+        }));
     };
     __decorate([
         Input(),
@@ -1670,14 +1662,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", {
@@ -1723,12 +1716,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()) {
@@ -1740,27 +1730,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();
@@ -1768,28 +1758,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
      */
@@ -2187,6 +2159,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;
@@ -2602,11 +2575,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;
         }
@@ -3035,6 +3009,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;
@@ -3344,11 +3319,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) {
@@ -3402,13 +3377,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();
         }
     };
     __decorate([
@@ -3645,6 +3621,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';
     }
@@ -3772,19 +3749,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;
@@ -3868,25 +3840,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/npm/button/button.directive.js

@@ -9,6 +9,7 @@ var core_1 = require("@angular/core");
 var button_service_1 = require("./button.service");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var rxjs_1 = require("rxjs");
 var kendo_licensing_1 = require("@progress/kendo-licensing");
 var package_metadata_1 = require("../package-metadata");
 var util_1 = require("../util");
@@ -49,13 +50,13 @@ var ButtonDirective = /** @class */ (function () {
         this._fillMode = 'solid';
         this._themeColor = 'base';
         this._focused = false;
-        this.domEvents = [];
+        this.subs = new rxjs_1.Subscription();
         kendo_licensing_1.validatePackage(package_metadata_1.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;
     }
@@ -398,8 +399,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 === kendo_angular_common_1.Keys.Space || event.keyCode === kendo_angular_common_1.Keys.Enter;
                 if (isSpan && isSpaceOrEnter) {
                     _this.click.emit(event);
@@ -428,9 +429,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/npm/buttongroup/buttongroup.component.js

@@ -10,6 +10,7 @@ var core_1 = require("@angular/core");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var button_service_1 = require("../button/button.service");
+var rxjs_1 = require("rxjs");
 var util_1 = require("../util");
 var preventable_event_1 = require("../preventable-event");
 var package_metadata_1 = require("../package-metadata");
@@ -36,11 +37,12 @@ var ButtonGroupComponent = /** @class */ (function () {
         this.navigate = new core_1.EventEmitter();
         this._tabIndex = 0;
         this.currentTabIndex = 0;
+        this.subs = new rxjs_1.Subscription();
         kendo_licensing_1.validatePackage(package_metadata_1.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 () {
@@ -142,7 +144,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;
@@ -156,7 +158,7 @@ var ButtonGroupComponent = /** @class */ (function () {
                 button.setSelected(newSelectionValue);
             }
             button.setAttribute(tabindex, '0');
-        });
+        }));
     };
     ButtonGroupComponent.prototype.ngOnChanges = function (change) {
         var _this = this;
@@ -185,8 +187,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/npm/chip/chip.component.js

@@ -6,6 +6,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
+var rxjs_1 = require("rxjs");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var kendo_licensing_1 = require("@progress/kendo-licensing");
@@ -51,6 +52,7 @@ var ChipComponent = /** @class */ (function () {
         this._fillMode = 'solid';
         this._themeColor = 'base';
         this.focused = false;
+        this.subs = new rxjs_1.Subscription();
         kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
@@ -178,19 +180,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;
@@ -274,25 +271,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 = util_1.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/npm/dropdownbutton/dropdownbutton.component.js

@@ -155,6 +155,7 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
         _this.onBlur = new core_1.EventEmitter(); //tslint:disable-line:no-output-rename
         _this.listId = kendo_angular_common_1.guid();
         _this._fillMode = 'solid';
+        _this.popupSubs = new rxjs_1.Subscription();
         _this._itemClick = _this.itemClick;
         _this._blur = _this.onBlur;
         return _this;
@@ -464,11 +465,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 = rxjs_1.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(rxjs_1.merge(this.navigationService.close, this.navigationService.esc).subscribe(this.onNavigationClose.bind(this)));
     };
     DropDownButtonComponent.prototype.onNavigationEnterUp = function () {
         if (!this._disabled && !this.openState) {
@@ -522,13 +523,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/npm/focusable/focusable.directive.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var focus_service_1 = require("./focus.service");
+var rxjs_1 = require("rxjs");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 /**
  * @hidden
@@ -15,6 +16,7 @@ var FocusableDirective = /** @class */ (function () {
     function FocusableDirective(focusService, elementRef, renderer) {
         this.focusService = focusService;
         this.renderer = renderer;
+        this.subs = new rxjs_1.Subscription();
         this.element = elementRef.nativeElement;
         this.subscribeEvents();
     }
@@ -30,14 +32,14 @@ var FocusableDirective = /** @class */ (function () {
      * @hidden
      */
     FocusableDirective.prototype.ngOnDestroy = function () {
-        this.unsubscribeEvents();
+        this.subs.unsubscribe();
     };
     FocusableDirective.prototype.subscribeEvents = function () {
         var _this = this;
         if (!kendo_angular_common_1.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();
@@ -45,15 +47,7 @@ var FocusableDirective = /** @class */ (function () {
             else {
                 _this.renderer.removeClass(_this.element, 'k-focus');
             }
-        });
-    };
-    FocusableDirective.prototype.unsubscribeEvents = function () {
-        if (!kendo_angular_common_1.isDocumentAvailable()) {
-            return;
-        }
-        if (this.focusSubscription) {
-            this.focusSubscription.unsubscribe();
-        }
+        }));
     };
     tslib_1.__decorate([
         core_1.Input(),