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

package/esm2015/listbutton/list-button.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component } from '@angular/core';
 /* eslint-disable import/no-deprecated */
-import { fromEvent, merge } from 'rxjs';
+import { Subscription, fromEvent, merge } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { KeyEvents } from './../navigation/key-events';
 import { NavigationAction } from './../navigation/navigation-action';
@@ -32,11 +32,12 @@ export class ListButton {
         this._popupSettings = { animate: true, popupClass: '' };
         this.listId = guid();
         this._isFocused = false;
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
         this.focusService = focusService;
         this.navigationService = navigationService;
         this.wrapper = wrapperRef.nativeElement;
-        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr'));
+        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
         this.subscribeEvents();
     }
     get popupClasses() {
@@ -73,12 +74,9 @@ export class ListButton {
     }
     ngOnDestroy() {
         this.openState = false;
-        this.unsubscribeEvents();
         clearTimeout(this.focusFirstTimeout);
         clearTimeout(this.blurTimeout);
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
+        this.subs.unsubscribe();
     }
     subscribeEvents() {
         if (!isDocumentAvailable()) {
@@ -89,25 +87,25 @@ export class ListButton {
         this.subscribeNavigationEvents();
     }
     subscribeListItemFocusEvent() {
-        this.focusSubscription = this.focusService.onFocus.subscribe(() => {
+        this.subs.add(this.focusService.onFocus.subscribe(() => {
             this._isFocused = true;
-        });
+        }));
     }
     subscribeComponentBlurredEvent() {
         this._zone.runOutsideAngular(() => {
-            this.tabSubscription = this.navigationService.tab.pipe(filter(() => this._isFocused)).subscribe(this.handleTab.bind(this));
-            this.componentBlurredSubscription = fromEvent(document, 'click')
+            this.subs.add(this.navigationService.tab.pipe(filter(() => this._isFocused)).subscribe(this.handleTab.bind(this)));
+            this.subs.add(fromEvent(document, 'click')
                 .pipe(filter((event) => !this.wrapperContains(event.target)), filter(() => this._isFocused))
-                .subscribe(() => this._zone.run(() => this.blurWrapper()));
+                .subscribe(() => this._zone.run(() => this.blurWrapper())));
         });
     }
     subscribeNavigationEvents() {
-        this.navigationSubscription = this.navigationService.navigate.subscribe(this.focusService.focus.bind(this.focusService));
-        this.enterUpSubscription = this.navigationService.enterup.subscribe(() => {
+        this.subs.add(this.navigationService.navigate.subscribe(this.focusService.focus.bind(this.focusService)));
+        this.subs.add(this.navigationService.enterup.subscribe(() => {
             this.enterHandler();
             this.focusWrapper();
-        });
-        this.openSubscription = this.navigationService.open.subscribe(() => {
+        }));
+        this.subs.add(this.navigationService.open.subscribe(() => {
             if (!this._open) {
                 this.togglePopupVisibility();
                 this.focusFirstItem();
@@ -115,28 +113,10 @@ export class ListButton {
             else {
                 this.focusWrapper();
             }
-        });
-        this.closeSubscription = merge(this.navigationService.close, this.navigationService.esc).subscribe(() => this.focusWrapper());
+        }));
+        this.subs.add(merge(this.navigationService.close, this.navigationService.esc).subscribe(() => this.focusWrapper()));
     }
     enterHandler() { } // 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
      */

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export 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'
 };

package/esm2015/splitbutton/localization/messages.js

@@ -15,6 +15,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: [{

package/esm2015/splitbutton/splitbutton.component.js

@@ -14,6 +14,7 @@ import { isPresent, tick } from './../util';
 import { PreventableEvent } from '../preventable-event';
 import { Keys } from '@progress/kendo-angular-common';
 import { replaceMessagePlaceholder, getStylingClasses } from '../util';
+import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "./../focusable/focus.service";
 import * as i2 from "./../navigation/navigation.service";
@@ -30,6 +31,8 @@ const NAVIGATION_SETTINGS_PROVIDER = {
     provide: NAVIGATION_CONFIG,
     useValue: NAVIGATION_SETTINGS
 };
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the Kendo UI SplitButton component for Angular.
  *
@@ -106,10 +109,10 @@ export 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';
         /**
@@ -129,6 +132,7 @@ export 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';
         /**
@@ -215,8 +219,9 @@ export class SplitButtonComponent extends ListButton {
         this.listId = guid();
         this.buttonText = '';
         this.lockFocus = false;
-        this._rounded = 'medium';
-        this._fillMode = "solid";
+        this._rounded = DEFAULT_ROUNDED;
+        this._fillMode = DEFAULT_FILL_MODE;
+        this.popupSubs = new Subscription();
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -225,15 +230,16 @@ export 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;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -249,7 +255,8 @@ export class SplitButtonComponent extends ListButton {
      * * `link`
      */
     set fillMode(fillMode) {
-        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this._fillMode = fillMode === 'clear' ? 'flat' : newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -564,11 +571,12 @@ export 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;
         }
@@ -639,7 +647,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)"
@@ -661,7 +669,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </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.LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { type: i7.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: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i5.ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i6.LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { type: i7.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: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.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: [{
@@ -722,7 +730,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)"

package/esm2015/util.js

@@ -67,17 +67,17 @@ export const getStylingClasses = (componentType, stylingOption, previousValue, n
         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;
@@ -91,7 +91,7 @@ export const getStylingClasses = (componentType, stylingOption, previousValue, n
 export 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}` : ''
     };
 };
 /**