@progress/kendo-angular-buttons 8.0.0-next.202204011456 → 8.0.0-next.202204131126

package/esm2015/chip/chip.component.js

@@ -3,11 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, HostBinding, Input, Output, EventEmitter, 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';
 import { packageMetadata } from '../package-metadata';
-import { closest, getStylingClasses, getThemeColorClasses } from '../util';
+import { closest, getStylingClasses, getThemeColorClasses, isPresent } from '../util';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@angular/common";
@@ -51,6 +52,7 @@ export class ChipComponent {
         this._fillMode = 'solid';
         this._themeColor = 'base';
         this.focused = false;
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
@@ -59,14 +61,16 @@ export class ChipComponent {
      * ([see example]({% slug appearance_chip %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        if (isPresent(size)) {
+            this._size = size;
+        }
+        this.handleClasses(this._size, 'size');
     }
     get size() {
         return this._size;
@@ -76,15 +80,17 @@ export class ChipComponent {
      * ([see example]({% slug appearance_chip %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        if (isPresent(rounded)) {
+            this._rounded = rounded;
+        }
+        this.handleClasses(this._rounded, 'rounded');
     }
     get rounded() {
         return this._rounded;
@@ -94,13 +100,15 @@ export class ChipComponent {
      * ([see example]({% slug appearance_chip %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        if (isPresent(fillMode)) {
+            this._fillMode = fillMode;
+        }
+        this.handleClasses(this._fillMode, 'fillMode');
     }
     get fillMode() {
         return this._fillMode;
@@ -111,16 +119,18 @@ export class ChipComponent {
      * ([see example]({% slug appearance_chip %}#toc-themeColor)).
      *
      * The possible values are:
-     * * `'base'` (default)
-     * * `'info'`
-     * * `'success'`
-     * * `'warning'`
-     * * `'error'`
-     * * `null`
+     * * `base` (default)
+     * * `info`
+     * * `success`
+     * * `warning`
+     * * `error`
+     * * `none`
      */
     set themeColor(themeColor) {
-        this.handleThemeColor(themeColor);
-        this._themeColor = themeColor;
+        if (isPresent(themeColor)) {
+            this._themeColor = themeColor;
+        }
+        this.handleThemeColor(this._themeColor);
     }
     get themeColor() {
         return this._themeColor;
@@ -141,16 +151,11 @@ export 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;
@@ -216,25 +221,20 @@ export 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();
-            };
+            }));
         });
     }
     /**
@@ -267,7 +267,7 @@ export class ChipComponent {
         const addFillMode = fillMode ? fillMode : this.fillMode;
         const themeColorClass = getThemeColorClasses('chip', removeFillMode, addFillMode, this.themeColor, value);
         this.renderer.removeClass(elem, themeColorClass.toRemove);
-        if (addFillMode !== null && fillMode !== null) {
+        if (addFillMode !== 'none' && fillMode !== 'none') {
             if (themeColorClass.toAdd) {
                 this.renderer.addClass(elem, themeColorClass.toAdd);
             }

package/esm2015/common/models.js

@@ -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/esm2015/dropdownbutton/dropdownbutton.component.js

@@ -12,7 +12,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';
 import * as i0 from "@angular/core";
 import * as i1 from "../focusable/focus.service";
 import * as i2 from "../navigation/navigation.service";
@@ -28,6 +28,7 @@ const NAVIGATION_SETTINGS_PROVIDER = {
     provide: NAVIGATION_CONFIG,
     useValue: NAVIGATION_SETTINGS
 };
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the Kendo UI DropDownButton component for Angular.
  *
@@ -78,34 +79,22 @@ export class DropDownButtonComponent extends ListButton {
          * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-size)).
          *
          * The possible values are:
-         * * `'small'`
-         * * `'medium'` (default)
-         * * `'large'`
-         * * `null`
+         * * `small`
+         * * `medium` (default)
+         * * `large`
+         * * `none`
          */
         this.size = 'medium';
-        /**
-         * @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'`
-         * * `null`
-         */
-        this.shape = 'rectangle';
         /**
          * 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'`
-         * * `null`
+         * * `small`
+         * * `medium` (default)
+         * * `large`
+         * * `full`
+         * * `none`
          */
         this.rounded = 'medium';
         /**
@@ -125,7 +114,7 @@ export class DropDownButtonComponent extends ListButton {
          * * `dark`— Applies coloring based on the `dark` theme color.
          * * `light`— Applies coloring based on the `light` theme color.
          * * `inverse`— Applies coloring based on the `inverse` theme color.
-         * * `null` —Removes the default CSS class (no class would be rendered).
+         * * `none` —Removes the default CSS class (no class would be rendered).
          */
         this.themeColor = 'base';
         /**
@@ -155,7 +144,8 @@ export class DropDownButtonComponent extends ListButton {
          */
         this.onBlur = new EventEmitter();
         this.listId = guid();
-        this._fillMode = 'solid';
+        this._fillMode = DEFAULT_FILL_MODE;
+        this.popupSubs = new Subscription();
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -206,7 +196,7 @@ export class DropDownButtonComponent extends ListButton {
      * * `flat`
      * * `outline`
      * * `link`
-     * * `null`
+     * * `none`
      */
     set fillMode(fillMode) {
         this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
@@ -407,11 +397,11 @@ export 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) {
@@ -464,18 +454,19 @@ export 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();
         }
     }
 }
 DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: { 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" }, outputs: { itemClick: "itemClick", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: { 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" }, outputs: { itemClick: "itemClick", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
         FocusService,
         NavigationService,
         NAVIGATION_SETTINGS_PROVIDER,
@@ -526,7 +517,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i5.ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i6.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i5.ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i6.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -602,8 +593,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], size: [{
                 type: Input
-            }], shape: [{
-                type: Input
             }], rounded: [{
                 type: Input
             }], fillMode: [{

package/esm2015/floatingactionbutton/dial-item.component.js

@@ -74,6 +74,7 @@ DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialItemComponent, decorators: [{
             type: Component,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoDialItem]',
                     template: `
         <ng-template *ngIf="dialItemTemplate"

package/esm2015/floatingactionbutton/dial-list.component.js

@@ -53,6 +53,7 @@ DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialListComponent, decorators: [{
             type: Component,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoDialList]',
                     template: `
         <ng-container *ngFor='let item of dialItems; let idx = index'>

package/esm2015/floatingactionbutton/floatingactionbutton.component.js

@@ -50,6 +50,9 @@ const FILLMODE_CLASS = 'k-fab-solid';
 const DEFAULT_DURATION = 180;
 const DEFAULT_ITEM_GAP = 90;
 const DEFAULT_OFFSET = '16px';
+const DEFAULT_ROUNDED = 'full';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_THEME_COLOR = 'primary';
 /**
  *
  * Represents the [Kendo UI FloatingActionButton component for Angular]({% slug overview_floatingactionbutton %}).
@@ -124,13 +127,12 @@ export class FloatingActionButtonComponent {
          * @hidden
          */
         this.id = `k-${guid()}`;
-        this._themeColor = 'primary';
-        this._size = 'medium';
-        this._shape = 'rectangle';
+        this._themeColor = DEFAULT_THEME_COLOR;
+        this._size = DEFAULT_SIZE;
+        this._rounded = DEFAULT_ROUNDED;
         this._disabled = false;
         this._align = { horizontal: 'end', vertical: 'bottom' };
         this._offset = { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
-        this._rounded = 'full';
         this.subscriptions = new Subscription();
         this.rtl = false;
         this.animationEnd = new EventEmitter();
@@ -154,20 +156,22 @@ export class FloatingActionButtonComponent {
      * The theme color will be applied as background color of the component.
      *
      * The possible values are:
-     * * `'primary'` (Default)—Applies coloring based on the `primary` theme color.
-     * * `'secondary'`—Applies coloring based on the `secondary` theme color.
-     * * `'tertiary'`— Applies coloring based on the `tertiary` theme color.
-     * * `'info'`—Applies coloring based on the `info` theme color.
-     * * `'success'`— Applies coloring based on the `success` theme color.
-     * * `'warning'`— Applies coloring based on the `warning` theme color.
-     * * `'error'`— Applies coloring based on the `error` theme color.
-     * * `'dark'`— Applies coloring based on the `dark` theme color.
-     * * `'light'`— Applies coloring based on the `light` theme color.
-     * * `'inverse'`— Applies coloring based on the `inverse` theme color.
+     * * `primary` (Default)—Applies coloring based on the `primary` theme color.
+     * * `secondary`—Applies coloring based on the `secondary` theme color.
+     * * `tertiary`— Applies coloring based on the `tertiary` theme color.
+     * * `info`—Applies coloring based on the `info` theme color.
+     * * `success`— Applies coloring based on the `success` theme color.
+     * * `warning`— Applies coloring based on the `warning` theme color.
+     * * `error`— Applies coloring based on the `error` theme color.
+     * * `dark`— Applies coloring based on the `dark` theme color.
+     * * `light`— Applies coloring based on the `light` theme color.
+     * * `inverse`— Applies coloring based on the `inverse` theme color.
+     * * `none`— Removes the built in theme color.
      */
     set themeColor(themeColor) {
-        this.handleClasses(themeColor, 'themeColor');
-        this._themeColor = themeColor;
+        const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
+        this.handleClasses(newThemeColor, 'themeColor');
+        this._themeColor = newThemeColor;
     }
     get themeColor() {
         return this._themeColor;
@@ -177,13 +181,15 @@ export class FloatingActionButtonComponent {
      * ([see example]({% slug appearance_floatingactionbutton %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -192,36 +198,20 @@ export class FloatingActionButtonComponent {
      * The rounded property specifies the border radius of the FloatingActionButton.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'`
-     * * `'large'`
-     * * `'full'` (default)
-     * * `null`
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `full` (default)
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
     }
-    /**
-     * @hidden
-     *
-     * Specifies the shape of the FloatingActionButton
-     * ([see example]({% slug appearance_floatingactionbutton %}#toc-shape)).
-     *
-     * The possible values are:
-     * * `rectangle` (Default)—Applies rectangular shape on the FloatingActionButton.
-     * * `square`—Applies square shape on the FloatingActionButton.
-     *
-     */
-    set shape(shape) {
-        this._shape = shape;
-    }
-    get shape() {
-        return this._shape;
-    }
     /**
      * Specifies whether the FloatingActionButton is disabled.
      */
@@ -313,7 +303,12 @@ export class FloatingActionButtonComponent {
         if (this.disabled || shouldOpen === this.isOpen) {
             return;
         }
-        shouldOpen ? setTimeout(() => this.openDial()) : this.closeDial();
+        if (shouldOpen) {
+            setTimeout(() => this.openDial());
+        }
+        else {
+            this.closeDial();
+        }
     }
     /**
      * @hidden
@@ -422,7 +417,7 @@ export class FloatingActionButtonComponent {
                 rounded: ROUNDED_CLASSES[this.rounded]
             };
             const classesToAdd = {
-                themeColor: inputValue ? `${FILLMODE_CLASS}-${inputValue}` : null,
+                themeColor: inputValue !== 'none' ? `${FILLMODE_CLASS}-${inputValue}` : '',
                 size: SIZE_CLASSES[inputValue],
                 rounded: ROUNDED_CLASSES[inputValue]
             };
@@ -489,11 +484,21 @@ export class FloatingActionButtonComponent {
             return;
         }
         const event = new PreventableEvent();
-        open ? this.open.emit(event) : this.close.emit(event);
+        if (open) {
+            this.open.emit(event);
+        }
+        else {
+            this.close.emit(event);
+        }
         if (event.isDefaultPrevented()) {
             return;
         }
-        open ? this.openDial() : this.closeDial();
+        if (open) {
+            this.openDial();
+        }
+        else {
+            this.closeDial();
+        }
     }
     openPopup() {
         if (this.isOpen) {
@@ -664,7 +669,7 @@ export class FloatingActionButtonComponent {
     }
 }
 FloatingActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i4.AnimationBuilder }, { token: i5.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: { themeColor: "themeColor", size: "size", rounded: "rounded", shape: "shape", disabled: "disabled", align: "align", offset: "offset", positionMode: "positionMode", icon: "icon", iconClass: "iconClass", buttonClass: "buttonClass", dialClass: "dialClass", text: "text", dialItemAnimation: "dialItemAnimation", tabIndex: "tabIndex", dialItems: "dialItems" }, outputs: { onBlur: "blur", onFocus: "focus", dialItemClick: "dialItemClick", open: "open", close: "close" }, host: { properties: { "class.k-pos-fixed": "this.fixedClass", "class.k-pos-absolute": "this.absoluteClass", "attr.dir": "this.direction" } }, providers: [
+FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: { themeColor: "themeColor", size: "size", rounded: "rounded", disabled: "disabled", align: "align", offset: "offset", positionMode: "positionMode", icon: "icon", iconClass: "iconClass", buttonClass: "buttonClass", dialClass: "dialClass", text: "text", dialItemAnimation: "dialItemAnimation", tabIndex: "tabIndex", dialItems: "dialItems" }, outputs: { onBlur: "blur", onFocus: "focus", dialItemClick: "dialItemClick", open: "open", close: "close" }, host: { properties: { "class.k-pos-fixed": "this.fixedClass", "class.k-pos-absolute": "this.absoluteClass", "attr.dir": "this.direction" } }, providers: [
         FocusService,
         NavigationService,
         NAVIGATION_SETTINGS_PROVIDER,
@@ -807,8 +812,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], rounded: [{
                 type: Input
-            }], shape: [{
-                type: Input
             }], disabled: [{
                 type: Input
             }], align: [{

package/esm2015/focusable/focusable.directive.js

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Directive, Input } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "./focus.service";
@@ -13,6 +14,7 @@ export class FocusableDirective {
     constructor(focusService, elementRef, renderer) {
         this.focusService = focusService;
         this.renderer = renderer;
+        this.subs = new Subscription();
         this.element = elementRef.nativeElement;
         this.subscribeEvents();
     }
@@ -28,13 +30,13 @@ export 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();
@@ -42,15 +44,7 @@ export class FocusableDirective {
             else {
                 this.renderer.removeClass(this.element, 'k-focus');
             }
-        });
-    }
-    unsubscribeEvents() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        if (this.focusSubscription) {
-            this.focusSubscription.unsubscribe();
-        }
+        }));
     }
 }
 FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusableDirective, deps: [{ token: i1.FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });