@progress/kendo-angular-buttons 8.0.0-next.202204060705 → 8.0.0

package/button/button.directive.d.ts

@@ -5,7 +5,7 @@
 import { SimpleChanges, ElementRef, EventEmitter, Renderer2 as Renderer, OnDestroy, NgZone, AfterViewInit } from '@angular/core';
 import { KendoButtonService } from './button.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { ButtonFillMode, ButtonRounded, ButtonShape, ButtonSize, ButtonThemeColor } from '../common/models';
+import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
 import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI Button component for Angular.
@@ -63,9 +63,9 @@ export declare class ButtonDirective implements OnDestroy, AfterViewInit {
      * ([see example]({% slug appearance_button %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     set size(size: ButtonSize);
@@ -75,10 +75,10 @@ export declare class ButtonDirective implements OnDestroy, AfterViewInit {
      * ([see example]({% slug appearance_button %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
      * * `none`
      */
     set rounded(rounded: ButtonRounded);
@@ -88,11 +88,11 @@ export declare class ButtonDirective implements OnDestroy, AfterViewInit {
      * ([see example]({% slug appearance_button %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `'clear'`
-     * * `'link'`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `clear`
+     * * `link`
      * * `none`
      */
     set fillMode(fillMode: ButtonFillMode);
@@ -103,32 +103,21 @@ export declare class ButtonDirective implements OnDestroy, AfterViewInit {
      * ([see example]({% slug appearance_button %}#toc-themeColor)).
      *
      * The possible values are:
-     * * `'base'` (default)
-     * * `'primary'`
-     * * `'secondary'`
-     * * `'tertiary'`
-     * * `'info'`
-     * * `'success'`
-     * * `'warning'`
-     * * `'error'`
-     * * `'dark'`
-     * * `'light`'
-     * * `'inverse'`
+     * * `base` (default)
+     * * `primary`
+     * * `secondary`
+     * * `tertiary`
+     * * `info`
+     * * `success`
+     * * `warning`
+     * * `error`
+     * * `dark`
+     * * `light`
+     * * `inverse`
+     * * `none`
      */
     set themeColor(themeColor: ButtonThemeColor);
     get themeColor(): ButtonThemeColor;
-    /**
-     * @hidden
-     *
-     * The shape property specifies if the Button will form a rectangle or square.
-     * ([see example]({% slug appearance_button %}#toc-shape)).
-     *
-     * The possible values are:
-     * * `'square'`
-     * * `'rectangle'` (default)
-     */
-    set shape(shape: ButtonShape);
-    get shape(): ButtonShape;
     /**
      * @hidden
      */
@@ -153,15 +142,13 @@ export declare class ButtonDirective implements OnDestroy, AfterViewInit {
     iconSpanNode: HTMLElement;
     private _size;
     private _rounded;
-    private _shape;
     private _fillMode;
     private _themeColor;
-    private localizationChangeSubscription;
     private _focused;
     private direction;
     private _selected;
     private deferTimeout;
-    private domEvents;
+    private subs;
     set isFocused(isFocused: boolean);
     get isFocused(): boolean;
     get classButton(): boolean;
@@ -231,5 +218,5 @@ export declare class ButtonDirective implements OnDestroy, AfterViewInit {
     private handleClasses;
     private handleThemeColor;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonDirective, [null, null, { optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ButtonDirective, "button[kendoButton], span[kendoButton]", ["kendoButton"], { "toggleable": "toggleable"; "togglable": "togglable"; "selected": "selected"; "tabIndex": "tabIndex"; "icon": "icon"; "iconClass": "iconClass"; "imageUrl": "imageUrl"; "disabled": "disabled"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; "shape": "shape"; "role": "role"; "primary": "primary"; "look": "look"; }, { "selectedChange": "selectedChange"; "click": "click"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ButtonDirective, "button[kendoButton], span[kendoButton]", ["kendoButton"], { "toggleable": "toggleable"; "togglable": "togglable"; "selected": "selected"; "tabIndex": "tabIndex"; "icon": "icon"; "iconClass": "iconClass"; "imageUrl": "imageUrl"; "disabled": "disabled"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; "role": "role"; "primary": "primary"; "look": "look"; }, { "selectedChange": "selectedChange"; "click": "click"; }, never>;
 }

package/buttongroup/buttongroup.component.d.ts

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

package/chip/chip.component.d.ts

@@ -61,9 +61,9 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      * ([see example]({% slug appearance_chip %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     set size(size: ChipSize);
@@ -73,10 +73,10 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      * ([see example]({% slug appearance_chip %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
      * * `none`
      */
     set rounded(rounded: ChipRounded);
@@ -86,8 +86,8 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      * ([see example]({% slug appearance_chip %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'solid'` (default)
-     * * `'outline'`
+     * * `solid` (default)
+     * * `outline`
      * * `none`
      */
     set fillMode(fillMode: ChipFillMode);
@@ -98,11 +98,11 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      * ([see example]({% slug appearance_chip %}#toc-themeColor)).
      *
      * The possible values are:
-     * * `'base'` (default)
-     * * `'info'`
-     * * `'success'`
-     * * `'warning'`
-     * * `'error'`
+     * * `base` (default)
+     * * `info`
+     * * `success`
+     * * `warning`
+     * * `error`
      * * `none`
      */
     set themeColor(themeColor: ChipThemeColor);
@@ -131,8 +131,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/common/models/size.d.ts

@@ -14,4 +14,4 @@ export declare type ChipSize = 'small' | 'medium' | 'large' | 'none';
 /**
  * Specifies the possible gap between Chips in a ChipList.
  */
-export declare type ChipListSize = 'small' | 'medium' | 'large';
+export declare type ChipListSize = 'small' | 'medium' | 'large' | 'none';

package/common/models/theme-color.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies the possible theme colors of the buttons.
+ * Specifies the possible theme colors of the buttons([see examples]({% slug appearance_button %}#toc-theme-colors)).
  *
  * The possible values are:
  * * `base` —Applies coloring based on the `base` theme color.

package/common/models.d.ts

@@ -2,7 +2,6 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export * from './models/shape';
 export * from './models/size';
 export * from './models/theme-color';
 export * from './models/fillmode';

package/dropdownbutton/dropdownbutton.component.d.ts

@@ -13,7 +13,7 @@ import { ListComponent } from '../listbutton/list.component';
 import { FocusService } from '../focusable/focus.service';
 import { NavigationService } from '../navigation/navigation.service';
 import { PreventableEvent } from '../preventable-event';
-import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor, ButtonShape } from '../common/models';
+import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
 import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI DropDownButton component for Angular.
@@ -91,33 +91,21 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
      * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     size: ButtonSize;
-    /**
-     * @hidden
-     *
-     * The shape property specifies if the DropDownButton will be a square or rectangle.
-     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-shape)).
-     *
-     * The possible values are:
-     * * `'rectangle'` (default)
-     * * `'square'`
-     * * `none`
-     */
-    shape: ButtonShape;
     /**
      * The rounded property specifies the border radius of the DropDownButton
      * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
      * * `none`
      */
     rounded: ButtonRounded;
@@ -213,6 +201,7 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
     popupRef: PopupRef;
     listId: string;
     private _fillMode;
+    private popupSubs;
     /**
      * @hidden
      */
@@ -288,5 +277,5 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
     private createPopup;
     private destroyPopup;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropDownButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DropDownButtonComponent, "kendo-dropdownbutton", ["kendoDropDownButton"], { "icon": "icon"; "iconClass": "iconClass"; "imageUrl": "imageUrl"; "popupSettings": "popupSettings"; "textField": "textField"; "disabled": "disabled"; "data": "data"; "size": "size"; "shape": "shape"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; "buttonClass": "buttonClass"; "tabIndex": "tabIndex"; }, { "itemClick": "itemClick"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; }, ["itemTemplate"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropDownButtonComponent, "kendo-dropdownbutton", ["kendoDropDownButton"], { "icon": "icon"; "iconClass": "iconClass"; "imageUrl": "imageUrl"; "popupSettings": "popupSettings"; "textField": "textField"; "disabled": "disabled"; "data": "data"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; "buttonClass": "buttonClass"; "tabIndex": "tabIndex"; }, { "itemClick": "itemClick"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; }, ["itemTemplate"], ["*"]>;
 }

package/esm2015/button/button.directive.js

@@ -5,6 +5,7 @@
 import { Directive, EventEmitter, HostBinding, HostListener, Input, Output, Optional } from '@angular/core';
 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';
@@ -12,6 +13,10 @@ import * as i0 from "@angular/core";
 import * as i1 from "./button.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 const SPAN_TAG_NAME = 'SPAN';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_THEME_COLOR = 'base';
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the Kendo UI Button component for Angular.
  */
@@ -41,16 +46,15 @@ export class ButtonDirective {
         this.isDisabled = false;
         this.isIcon = false;
         this.isIconClass = false;
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._shape = 'rectangle';
-        this._fillMode = 'solid';
-        this._themeColor = 'base';
+        this._size = DEFAULT_SIZE;
+        this._rounded = DEFAULT_ROUNDED;
+        this._fillMode = DEFAULT_FILL_MODE;
+        this._themeColor = DEFAULT_THEME_COLOR;
         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;
     }
@@ -151,15 +155,15 @@ export class ButtonDirective {
      * ([see example]({% slug appearance_button %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     set size(size) {
-        const sizeValue = size ? size : 'medium';
-        this.handleClasses(sizeValue, 'size');
-        this._size = sizeValue;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -169,16 +173,16 @@ export class ButtonDirective {
      * ([see example]({% slug appearance_button %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
      * * `none`
      */
     set rounded(rounded) {
-        const roundedValue = rounded ? rounded : 'medium';
-        this.handleClasses(roundedValue, 'rounded');
-        this._rounded = roundedValue;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -188,17 +192,17 @@ export class ButtonDirective {
      * ([see example]({% slug appearance_button %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `'clear'`
-     * * `'link'`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `clear`
+     * * `link`
      * * `none`
      */
     set fillMode(fillMode) {
-        const fillModeValue = fillMode ? fillMode : 'solid';
-        this.handleClasses(fillModeValue, 'fillMode');
-        this._fillMode = fillModeValue;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -209,42 +213,27 @@ export class ButtonDirective {
      * ([see example]({% slug appearance_button %}#toc-themeColor)).
      *
      * The possible values are:
-     * * `'base'` (default)
-     * * `'primary'`
-     * * `'secondary'`
-     * * `'tertiary'`
-     * * `'info'`
-     * * `'success'`
-     * * `'warning'`
-     * * `'error'`
-     * * `'dark'`
-     * * `'light`'
-     * * `'inverse'`
+     * * `base` (default)
+     * * `primary`
+     * * `secondary`
+     * * `tertiary`
+     * * `info`
+     * * `success`
+     * * `warning`
+     * * `error`
+     * * `dark`
+     * * `light`
+     * * `inverse`
+     * * `none`
      */
     set themeColor(themeColor) {
-        const themeColorValue = themeColor ? themeColor : 'base';
-        this.handleThemeColor(themeColorValue);
-        this._themeColor = themeColorValue;
+        const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
+        this.handleThemeColor(newThemeColor);
+        this._themeColor = newThemeColor;
     }
     get themeColor() {
         return this._themeColor;
     }
-    /**
-     * @hidden
-     *
-     * The shape property specifies if the Button will form a rectangle or square.
-     * ([see example]({% slug appearance_button %}#toc-shape)).
-     *
-     * The possible values are:
-     * * `'square'`
-     * * `'rectangle'` (default)
-     */
-    set shape(shape) {
-        this._shape = shape;
-    }
-    get shape() {
-        return this._shape;
-    }
     set isFocused(isFocused) {
         this.toggleClass('k-focus', isFocused);
         this._focused = isFocused;
@@ -311,8 +300,8 @@ export 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);
@@ -340,9 +329,8 @@ export 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.
@@ -533,7 +521,7 @@ export class ButtonDirective {
     }
 }
 ButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.KendoButtonService, optional: true }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: { toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", shape: "shape", role: "role", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "attr.role": "this.roleSetter", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
+ButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: { toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", role: "role", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "attr.role": "this.roleSetter", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -579,8 +567,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], themeColor: [{
                 type: Input
-            }], shape: [{
-                type: Input
             }], role: [{
                 type: Input
             }], selectedChange: [{

package/esm2015/buttongroup/buttongroup.component.js

@@ -7,6 +7,7 @@ import { Component, EventEmitter, Output, Input, ContentChildren, HostBinding, H
 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';
@@ -35,8 +36,9 @@ export 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.
@@ -101,7 +103,7 @@ export 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;
@@ -115,7 +117,7 @@ export class ButtonGroupComponent {
                 button.setSelected(newSelectionValue);
             }
             button.setAttribute(tabindex, '0');
-        });
+        }));
     }
     ngOnChanges(change) {
         if (isChanged('disabled', change)) {
@@ -143,8 +145,7 @@ export class ButtonGroupComponent {
         }
     }
     ngOnDestroy() {
-        this.subscription.unsubscribe();
-        this.localizationChangeSubscription.unsubscribe();
+        this.subs.unsubscribe();
     }
     ngAfterContentChecked() {
         this.verifySettings();