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

package/dist/es2015/listbutton/list-button.d.ts

@@ -30,18 +30,10 @@ export declare class ListButton implements OnDestroy {
     protected _blur: EventEmitter<any>;
     protected wrapper: HTMLElement;
     protected button: ElementRef;
-    protected focusSubscription: Subscription;
-    protected navigationSubscription: Subscription;
-    protected enterPressSubscription: Subscription;
-    protected enterUpSubscription: Subscription;
-    protected openSubscription: Subscription;
-    protected closeSubscription: Subscription;
-    protected componentBlurredSubscription: Subscription;
-    protected tabSubscription: Subscription;
+    protected subs: Subscription;
     protected direction: Direction;
     protected focusFirstTimeout: any;
     protected blurTimeout: any;
-    private localizationChangeSubscription;
     constructor(focusService: FocusService, navigationService: NavigationService, wrapperRef: ElementRef, _zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef);
     readonly popupClasses: string;
     openState: boolean;
@@ -59,8 +51,6 @@ export declare class ListButton implements OnDestroy {
     protected subscribeComponentBlurredEvent(): void;
     protected subscribeNavigationEvents(): void;
     protected enterHandler(): void;
-    protected unsubscribeEvents(): void;
-    protected unsubscribe(subscription: Subscription): void;
     /**
      * @hidden
      */

package/dist/es2015/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';
@@ -27,11 +27,12 @@ export class ListButton {
         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(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr'));
+        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
         this.subscribeEvents();
     }
     get popupClasses() {
@@ -68,12 +69,9 @@ export class ListButton {
     }
     ngOnDestroy() {
         this.openState = false;
-        this.unsubscribeEvents();
         clearTimeout(this.focusFirstTimeout);
         clearTimeout(this.blurTimeout);
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
+        this.subs.unsubscribe();
     }
     subscribeEvents() {
         if (!isDocumentAvailable()) {
@@ -84,25 +82,25 @@ export class ListButton {
         this.subscribeNavigationEvents();
     }
     subscribeListItemFocusEvent() {
-        this.focusSubscription = this.focusService.onFocus.subscribe(() => {
+        this.subs.add(this.focusService.onFocus.subscribe(() => {
             this._isFocused = true;
-        });
+        }));
     }
     subscribeComponentBlurredEvent() {
         this._zone.runOutsideAngular(() => {
-            this.tabSubscription = this.navigationService.tab.pipe(filter(() => this._isFocused)).subscribe(this.handleTab.bind(this));
-            this.componentBlurredSubscription = fromEvent(document, 'click')
+            this.subs.add(this.navigationService.tab.pipe(filter(() => this._isFocused)).subscribe(this.handleTab.bind(this)));
+            this.subs.add(fromEvent(document, 'click')
                 .pipe(filter((event) => !this.wrapperContains(event.target)), filter(() => this._isFocused))
-                .subscribe(() => this._zone.run(() => this.blurWrapper()));
+                .subscribe(() => this._zone.run(() => this.blurWrapper())));
         });
     }
     subscribeNavigationEvents() {
-        this.navigationSubscription = this.navigationService.navigate.subscribe(this.focusService.focus.bind(this.focusService));
-        this.enterUpSubscription = this.navigationService.enterup.subscribe(() => {
+        this.subs.add(this.navigationService.navigate.subscribe(this.focusService.focus.bind(this.focusService)));
+        this.subs.add(this.navigationService.enterup.subscribe(() => {
             this.enterHandler();
             this.focusWrapper();
-        });
-        this.openSubscription = this.navigationService.open.subscribe(() => {
+        }));
+        this.subs.add(this.navigationService.open.subscribe(() => {
             if (!this._open) {
                 this.togglePopupVisibility();
                 this.focusFirstItem();
@@ -110,28 +108,10 @@ export class ListButton {
             else {
                 this.focusWrapper();
             }
-        });
-        this.closeSubscription = merge(this.navigationService.close, this.navigationService.esc).subscribe(() => this.focusWrapper());
+        }));
+        this.subs.add(merge(this.navigationService.close, this.navigationService.esc).subscribe(() => this.focusWrapper()));
     }
     enterHandler() { } // tslint:disable-line
-    unsubscribeEvents() {
-        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);
-    }
-    unsubscribe(subscription) {
-        if (subscription) {
-            subscription.unsubscribe();
-        }
-    }
     /**
      * @hidden
      */

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648131806,
+    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/es2015/splitbutton/splitbutton.component.d.ts

@@ -279,6 +279,7 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
     private lockFocus;
     private _rounded;
     private _fillMode;
+    private popupSubs;
     isFocused: boolean;
     readonly widgetClasses: boolean;
     readonly dir: string;

package/dist/es2015/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';
 const NAVIGATION_SETTINGS = {
     useLeftRightArrows: true
 };
@@ -212,6 +213,7 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
         this.lockFocus = false;
         this._rounded = 'medium';
         this._fillMode = "solid";
+        this.popupSubs = new Subscription();
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -559,11 +561,12 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
             popupAlign: this.popupAlign,
             popupClass: this.popupClasses
         });
-        this.popupRef.popupAnchorViewportLeave.subscribe(() => (this.openState = false));
-        this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this));
+        this.popupSubs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => (this.openState = false)));
+        this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this)));
     }
     destroyPopup() {
         if (this.popupRef) {
+            this.popupSubs.unsubscribe();
             this.popupRef.close();
             this.popupRef = null;
         }

package/dist/fesm2015/index.js

@@ -4,8 +4,8 @@
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __param } from 'tslib';
 import { Injectable, EventEmitter, Input, Output, 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 { Keys, isChanged, isDocumentAvailable, hasObservers, guid, EventsModule } from '@progress/kendo-angular-common';
+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';
 import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
@@ -40,7 +40,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648131806,
+    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'
 };
@@ -182,10 +182,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;
     }
@@ -272,7 +272,7 @@ let ButtonDirective = class ButtonDirective {
      */
     set disabled(disabled) {
         //Required, because in FF focused buttons are not blurred on disabled
-        if (isFirefox(navigator.userAgent) && disabled) {
+        if (disabled && isDocumentAvailable() && isFirefox(navigator.userAgent)) {
             this.blur();
         }
         this.isDisabled = disabled;
@@ -441,8 +441,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);
@@ -470,9 +470,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.
@@ -856,8 +855,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.
@@ -922,7 +922,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;
@@ -936,7 +936,7 @@ let ButtonGroupComponent = class ButtonGroupComponent {
                 button.setSelected(newSelectionValue);
             }
             button.setAttribute(tabindex, '0');
-        });
+        }));
     }
     ngOnChanges(change) {
         if (isChanged('disabled', change)) {
@@ -964,8 +964,7 @@ let ButtonGroupComponent = class ButtonGroupComponent {
         }
     }
     ngOnDestroy() {
-        this.subscription.unsubscribe();
-        this.localizationChangeSubscription.unsubscribe();
+        this.subs.unsubscribe();
     }
     ngAfterContentChecked() {
         this.verifySettings();
@@ -1398,6 +1397,7 @@ let FocusableDirective = class FocusableDirective {
     constructor(focusService, elementRef, renderer) {
         this.focusService = focusService;
         this.renderer = renderer;
+        this.subs = new Subscription();
         this.element = elementRef.nativeElement;
         this.subscribeEvents();
     }
@@ -1413,13 +1413,13 @@ let FocusableDirective = class FocusableDirective {
      * @hidden
      */
     ngOnDestroy() {
-        this.unsubscribeEvents();
+        this.subs.unsubscribe();
     }
     subscribeEvents() {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.focusSubscription = this.focusService.onFocus.subscribe((index) => {
+        this.subs.add(this.focusService.onFocus.subscribe((index) => {
             if (this.index === index) {
                 this.renderer.addClass(this.element, 'k-focus');
                 this.element.focus();
@@ -1427,15 +1427,7 @@ let FocusableDirective = class FocusableDirective {
             else {
                 this.renderer.removeClass(this.element, 'k-focus');
             }
-        });
-    }
-    unsubscribeEvents() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        if (this.focusSubscription) {
-            this.focusSubscription.unsubscribe();
-        }
+        }));
     }
 };
 __decorate([
@@ -1540,11 +1532,12 @@ class ListButton {
         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(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr'));
+        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
         this.subscribeEvents();
     }
     get popupClasses() {
@@ -1581,12 +1574,9 @@ class ListButton {
     }
     ngOnDestroy() {
         this.openState = false;
-        this.unsubscribeEvents();
         clearTimeout(this.focusFirstTimeout);
         clearTimeout(this.blurTimeout);
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
+        this.subs.unsubscribe();
     }
     subscribeEvents() {
         if (!isDocumentAvailable()) {
@@ -1597,25 +1587,25 @@ class ListButton {
         this.subscribeNavigationEvents();
     }
     subscribeListItemFocusEvent() {
-        this.focusSubscription = this.focusService.onFocus.subscribe(() => {
+        this.subs.add(this.focusService.onFocus.subscribe(() => {
             this._isFocused = true;
-        });
+        }));
     }
     subscribeComponentBlurredEvent() {
         this._zone.runOutsideAngular(() => {
-            this.tabSubscription = this.navigationService.tab.pipe(filter(() => this._isFocused)).subscribe(this.handleTab.bind(this));
-            this.componentBlurredSubscription = fromEvent(document, 'click')
+            this.subs.add(this.navigationService.tab.pipe(filter(() => this._isFocused)).subscribe(this.handleTab.bind(this)));
+            this.subs.add(fromEvent(document, 'click')
                 .pipe(filter((event) => !this.wrapperContains(event.target)), filter(() => this._isFocused))
-                .subscribe(() => this._zone.run(() => this.blurWrapper()));
+                .subscribe(() => this._zone.run(() => this.blurWrapper())));
         });
     }
     subscribeNavigationEvents() {
-        this.navigationSubscription = this.navigationService.navigate.subscribe(this.focusService.focus.bind(this.focusService));
-        this.enterUpSubscription = this.navigationService.enterup.subscribe(() => {
+        this.subs.add(this.navigationService.navigate.subscribe(this.focusService.focus.bind(this.focusService)));
+        this.subs.add(this.navigationService.enterup.subscribe(() => {
             this.enterHandler();
             this.focusWrapper();
-        });
-        this.openSubscription = this.navigationService.open.subscribe(() => {
+        }));
+        this.subs.add(this.navigationService.open.subscribe(() => {
             if (!this._open) {
                 this.togglePopupVisibility();
                 this.focusFirstItem();
@@ -1623,28 +1613,10 @@ class ListButton {
             else {
                 this.focusWrapper();
             }
-        });
-        this.closeSubscription = merge(this.navigationService.close, this.navigationService.esc).subscribe(() => this.focusWrapper());
+        }));
+        this.subs.add(merge(this.navigationService.close, this.navigationService.esc).subscribe(() => this.focusWrapper()));
     }
     enterHandler() { } // tslint:disable-line
-    unsubscribeEvents() {
-        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);
-    }
-    unsubscribe(subscription) {
-        if (subscription) {
-            subscription.unsubscribe();
-        }
-    }
     /**
      * @hidden
      */
@@ -2037,6 +2009,7 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
         this.lockFocus = false;
         this._rounded = 'medium';
         this._fillMode = "solid";
+        this.popupSubs = new Subscription();
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -2384,11 +2357,12 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
             popupAlign: this.popupAlign,
             popupClass: this.popupClasses
         });
-        this.popupRef.popupAnchorViewportLeave.subscribe(() => (this.openState = false));
-        this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this));
+        this.popupSubs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => (this.openState = false)));
+        this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this)));
     }
     destroyPopup() {
         if (this.popupRef) {
+            this.popupSubs.unsubscribe();
             this.popupRef.close();
             this.popupRef = null;
         }
@@ -2864,6 +2838,7 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
         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;
     }
@@ -3115,11 +3090,11 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
             || (this.popupRef && this.popupRef.popupElement.contains(element));
     }
     subscribeNavigationEvents() {
-        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)));
     }
     onNavigationEnterUp() {
         if (!this._disabled && !this.openState) {
@@ -3172,13 +3147,14 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
             popupAlign: this.popupAlign,
             popupClass: this.popupClasses
         });
-        this.popupRef.popupAnchorViewportLeave.subscribe(() => this.openState = false);
-        this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this));
+        this.popupSubs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => this.openState = false));
+        this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this)));
     }
     destroyPopup() {
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
+            this.popupSubs.unsubscribe();
         }
     }
 };
@@ -3454,6 +3430,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';
     }
@@ -3544,16 +3521,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;
@@ -3619,25 +3591,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();
-            };
+            }));
         });
     }
     /**