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

package/fesm2015/kendo-angular-buttons.js

@@ -8,9 +8,9 @@ import * as i8 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, isChanged, hasObservers, guid, EventsModule } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
+import { Subject, Subscription, fromEvent, merge } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
-import { Subject, fromEvent, merge, Subscription } from 'rxjs';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@progress/kendo-angular-popup';
@@ -26,7 +26,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648824909,
+    publishDate: 1649849126,
     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'
 };
@@ -95,17 +95,17 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
         case 'size':
             return {
                 toRemove: `k-${componentType}-${SIZES[previousValue]}`,
-                toAdd: newValue ? `k-${componentType}-${SIZES[newValue]}` : null
+                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
             };
         case 'rounded':
             return {
                 toRemove: `k-rounded-${ROUNDNESS[previousValue]}`,
-                toAdd: newValue ? `k-rounded-${ROUNDNESS[newValue]}` : null
+                toAdd: newValue !== 'none' ? `k-rounded-${ROUNDNESS[newValue]}` : ''
             };
         case 'fillMode':
             return {
                 toRemove: `k-${componentType}-${previousValue}`,
-                toAdd: newValue ? `k-${componentType}-${newValue}` : null
+                toAdd: newValue !== 'none' ? `k-${componentType}-${newValue}` : ''
             };
         default:
             break;
@@ -119,7 +119,7 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
 const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousValue, newValue) => {
     return {
         toRemove: `k-${componentType}-${prevFillMode}-${previousValue}`,
-        toAdd: newValue ? `k-${componentType}-${fillMode}-${newValue}` : null
+        toAdd: newValue !== 'none' ? `k-${componentType}-${fillMode}-${newValue}` : ''
     };
 };
 /**
@@ -152,6 +152,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }] });
 
 const SPAN_TAG_NAME = 'SPAN';
+const DEFAULT_ROUNDED$2 = 'medium';
+const DEFAULT_SIZE$1 = 'medium';
+const DEFAULT_THEME_COLOR$1 = 'base';
+const DEFAULT_FILL_MODE$2 = 'solid';
 /**
  * Represents the Kendo UI Button component for Angular.
  */
@@ -181,16 +185,15 @@ 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$1;
+        this._rounded = DEFAULT_ROUNDED$2;
+        this._fillMode = DEFAULT_FILL_MODE$2;
+        this._themeColor = DEFAULT_THEME_COLOR$1;
         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;
     }
@@ -291,14 +294,15 @@ class ButtonDirective {
      * ([see example]({% slug appearance_button %}#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;
+        const newSize = size ? size : DEFAULT_SIZE$1;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -308,15 +312,16 @@ class ButtonDirective {
      * ([see example]({% slug appearance_button %}#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;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -326,16 +331,17 @@ class ButtonDirective {
      * ([see example]({% slug appearance_button %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `'clear'`
-     * * `'link'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `clear`
+     * * `link`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$2;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -346,41 +352,27 @@ 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) {
-        this.handleThemeColor(themeColor);
-        this._themeColor = themeColor;
+        const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR$1;
+        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;
@@ -447,8 +439,8 @@ 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);
@@ -476,9 +468,8 @@ 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.
@@ -661,7 +652,7 @@ class ButtonDirective {
         const addFillMode = fillMode ? fillMode : this.fillMode;
         const themeColorClass = getThemeColorClasses('button', 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);
             }
@@ -669,7 +660,7 @@ 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: KendoButtonService, optional: true }, { token: i1.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,
@@ -715,8 +706,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], themeColor: [{
                 type: Input
-            }], shape: [{
-                type: Input
             }], role: [{
                 type: Input
             }], selectedChange: [{
@@ -801,8 +790,9 @@ 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.
@@ -867,7 +857,7 @@ 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;
@@ -881,7 +871,7 @@ class ButtonGroupComponent {
                 button.setSelected(newSelectionValue);
             }
             button.setAttribute(tabindex, '0');
-        });
+        }));
     }
     ngOnChanges(change) {
         if (isChanged('disabled', change)) {
@@ -909,8 +899,7 @@ class ButtonGroupComponent {
         }
     }
     ngOnDestroy() {
-        this.subscription.unsubscribe();
-        this.localizationChangeSubscription.unsubscribe();
+        this.subs.unsubscribe();
     }
     ngAfterContentChecked() {
         this.verifySettings();
@@ -1160,6 +1149,7 @@ class FocusableDirective {
     constructor(focusService, elementRef, renderer) {
         this.focusService = focusService;
         this.renderer = renderer;
+        this.subs = new Subscription();
         this.element = elementRef.nativeElement;
         this.subscribeEvents();
     }
@@ -1175,13 +1165,13 @@ 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();
@@ -1189,15 +1179,7 @@ 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: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
@@ -1613,11 +1595,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() {
@@ -1654,12 +1637,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()) {
@@ -1670,25 +1650,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();
@@ -1696,28 +1676,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() { } // eslint-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
      */
@@ -1826,6 +1788,7 @@ Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'kendo-splitbutton-messages-base'
                 }]
         }], propDecorators: { splitButtonLabel: [{
@@ -1868,6 +1831,8 @@ const NAVIGATION_SETTINGS_PROVIDER$2 = {
     provide: NAVIGATION_CONFIG,
     useValue: NAVIGATION_SETTINGS$2
 };
+const DEFAULT_ROUNDED$1 = 'medium';
+const DEFAULT_FILL_MODE$1 = 'solid';
 /**
  * Represents the Kendo UI SplitButton component for Angular.
  *
@@ -1944,10 +1909,10 @@ class SplitButtonComponent extends ListButton {
          * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-size)).
          *
          * The possible values are:
-         * * `'small'`
-         * * `'medium'` (default)
-         * * `'large'`
-         * * `null`
+         * * `small`
+         * * `medium` (default)
+         * * `large`
+         * * `none`
          */
         this.size = 'medium';
         /**
@@ -1967,6 +1932,7 @@ class SplitButtonComponent 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.
+         * * `none`— Removes the built in theme color.
          */
         this.themeColor = 'base';
         /**
@@ -2053,8 +2019,9 @@ class SplitButtonComponent extends ListButton {
         this.listId = guid();
         this.buttonText = '';
         this.lockFocus = false;
-        this._rounded = 'medium';
-        this._fillMode = "solid";
+        this._rounded = DEFAULT_ROUNDED$1;
+        this._fillMode = DEFAULT_FILL_MODE$1;
+        this.popupSubs = new Subscription();
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -2063,15 +2030,16 @@ class SplitButtonComponent extends ListButton {
      * ([see example]({% slug api_buttons_splitbuttoncomponent %}#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;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -2087,7 +2055,8 @@ class SplitButtonComponent extends ListButton {
      * * `link`
      */
     set fillMode(fillMode) {
-        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$1;
+        this._fillMode = fillMode === 'clear' ? 'flat' : newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -2402,11 +2371,12 @@ 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;
         }
@@ -2477,7 +2447,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             [size]="size"
             [rounded]="rounded"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             [tabindex]="-1"
             (click)="onArrowButtonClick()"
             (mousedown)="toggleArrowButtonActiveState(true)"
@@ -2499,7 +2469,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { type: 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { type: 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -2560,7 +2530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [size]="size"
             [rounded]="rounded"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             [tabindex]="-1"
             (click)="onArrowButtonClick()"
             (mousedown)="toggleArrowButtonActiveState(true)"
@@ -2729,6 +2699,7 @@ const NAVIGATION_SETTINGS_PROVIDER$1 = {
     provide: NAVIGATION_CONFIG,
     useValue: NAVIGATION_SETTINGS$1
 };
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the Kendo UI DropDownButton component for Angular.
  *
@@ -2779,34 +2750,22 @@ 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';
         /**
@@ -2826,7 +2785,7 @@ class DropDownButtonComponent extends ListButton {
          * * `dark`&mdash; Applies coloring based on the `dark` theme color.
          * * `light`&mdash; Applies coloring based on the `light` theme color.
          * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
-         * * `null` &mdash;Removes the default CSS class (no class would be rendered).
+         * * `none` &mdash;Removes the default CSS class (no class would be rendered).
          */
         this.themeColor = 'base';
         /**
@@ -2856,7 +2815,8 @@ 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;
     }
@@ -2907,7 +2867,7 @@ class DropDownButtonComponent extends ListButton {
      * * `flat`
      * * `outline`
      * * `link`
-     * * `null`
+     * * `none`
      */
     set fillMode(fillMode) {
         this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
@@ -3108,11 +3068,11 @@ 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) {
@@ -3165,18 +3125,19 @@ 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: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.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$1,
@@ -3227,7 +3188,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -3303,8 +3264,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], size: [{
                 type: Input
-            }], shape: [{
-                type: Input
             }], rounded: [{
                 type: Input
             }], fillMode: [{
@@ -3430,6 +3389,7 @@ class ChipComponent {
         this._fillMode = 'solid';
         this._themeColor = 'base';
         this.focused = false;
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
@@ -3438,14 +3398,16 @@ 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;
@@ -3455,15 +3417,17 @@ 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;
@@ -3473,13 +3437,15 @@ 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;
@@ -3490,16 +3456,18 @@ 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;
@@ -3520,16 +3488,11 @@ 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;
@@ -3595,25 +3558,20 @@ 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();
-            };
+            }));
         });
     }
     /**
@@ -3646,7 +3604,7 @@ 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);
             }
@@ -3849,11 +3807,12 @@ class ChipListComponent {
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `null`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const sizeValue = size ? size : 'medium';
+        this.handleClasses(sizeValue, 'size');
+        this._size = sizeValue;
     }
     get size() {
         return this._size;
@@ -4214,6 +4173,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"
@@ -4309,6 +4269,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'>
@@ -4366,6 +4327,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 %}).
@@ -4440,13 +4404,12 @@ 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();
@@ -4470,20 +4433,22 @@ class FloatingActionButtonComponent {
      * The theme color will be applied as background color of the component.
      *
      * The possible values are:
-     * * `'primary'` (Default)&mdash;Applies coloring based on the `primary` theme color.
-     * * `'secondary'`&mdash;Applies coloring based on the `secondary` theme color.
-     * * `'tertiary'`&mdash; Applies coloring based on the `tertiary` theme color.
-     * * `'info'`&mdash;Applies coloring based on the `info` theme color.
-     * * `'success'`&mdash; Applies coloring based on the `success` theme color.
-     * * `'warning'`&mdash; Applies coloring based on the `warning` theme color.
-     * * `'error'`&mdash; Applies coloring based on the `error` theme color.
-     * * `'dark'`&mdash; Applies coloring based on the `dark` theme color.
-     * * `'light'`&mdash; Applies coloring based on the `light` theme color.
-     * * `'inverse'`&mdash; Applies coloring based on the `inverse` theme color.
+     * * `primary` (Default)&mdash;Applies coloring based on the `primary` theme color.
+     * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
+     * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
+     * * `info`&mdash;Applies coloring based on the `info` theme color.
+     * * `success`&mdash; Applies coloring based on the `success` theme color.
+     * * `warning`&mdash; Applies coloring based on the `warning` theme color.
+     * * `error`&mdash; Applies coloring based on the `error` theme color.
+     * * `dark`&mdash; Applies coloring based on the `dark` theme color.
+     * * `light`&mdash; Applies coloring based on the `light` theme color.
+     * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
+     * * `none`&mdash; 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;
@@ -4493,13 +4458,15 @@ 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;
@@ -4508,36 +4475,20 @@ 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)&mdash;Applies rectangular shape on the FloatingActionButton.
-     * * `square`&mdash;Applies square shape on the FloatingActionButton.
-     *
-     */
-    set shape(shape) {
-        this._shape = shape;
-    }
-    get shape() {
-        return this._shape;
-    }
     /**
      * Specifies whether the FloatingActionButton is disabled.
      */
@@ -4629,7 +4580,12 @@ class FloatingActionButtonComponent {
         if (this.disabled || shouldOpen === this.isOpen) {
             return;
         }
-        shouldOpen ? setTimeout(() => this.openDial()) : this.closeDial();
+        if (shouldOpen) {
+            setTimeout(() => this.openDial());
+        }
+        else {
+            this.closeDial();
+        }
     }
     /**
      * @hidden
@@ -4738,7 +4694,7 @@ 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]
             };
@@ -4805,11 +4761,21 @@ 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) {
@@ -4980,7 +4946,7 @@ 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: FocusService }, { token: NavigationService }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i4.AnimationBuilder }, { token: i1.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,
@@ -5123,8 +5089,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], rounded: [{
                 type: Input
-            }], shape: [{
-                type: Input
             }], disabled: [{
                 type: Input
             }], align: [{