@progress/kendo-angular-buttons 7.0.6 → 8.0.0-dev.202204190655

package/{dist/es2015 → esm2015}/splitbutton/splitbutton.component.js

@@ -2,11 +2,8 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-/* tslint:disable:no-access-missing-member */
-import { Component, ElementRef, TemplateRef, Input, Output, HostBinding, HostListener, EventEmitter, ContentChild, ViewChild, ViewContainerRef, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core';
+import { Component, ElementRef, Input, Output, HostBinding, HostListener, EventEmitter, ContentChild, ViewChild, ViewContainerRef } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { PopupService } from '@progress/kendo-angular-popup';
 import { ListButton } from './../listbutton/list-button';
 import { ButtonItemTemplateDirective } from './../listbutton/button-item-template.directive';
 import { FocusService } from './../focusable/focus.service';
@@ -17,14 +14,25 @@ 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";
+import * as i3 from "@progress/kendo-angular-popup";
+import * as i4 from "@progress/kendo-angular-l10n";
+import * as i5 from "../listbutton/list.component";
+import * as i6 from "./localization/localized-messages.directive";
+import * as i7 from "../button/button.directive";
+import * as i8 from "@angular/common";
 const NAVIGATION_SETTINGS = {
     useLeftRightArrows: true
 };
-const ɵ0 = NAVIGATION_SETTINGS;
 const NAVIGATION_SETTINGS_PROVIDER = {
     provide: NAVIGATION_CONFIG,
-    useValue: ɵ0
+    useValue: NAVIGATION_SETTINGS
 };
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the Kendo UI SplitButton component for Angular.
  *
@@ -66,7 +74,7 @@ const NAVIGATION_SETTINGS_PROVIDER = {
  * }
  * ```
  */
-let SplitButtonComponent = class SplitButtonComponent extends ListButton {
+export class SplitButtonComponent extends ListButton {
     constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer) {
         super(focusService, navigationService, wrapperRef, zone, localization, cdr);
         this.popupService = popupService;
@@ -101,10 +109,10 @@ let SplitButtonComponent = 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';
         /**
@@ -124,6 +132,7 @@ let SplitButtonComponent = 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';
         /**
@@ -188,11 +197,11 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
         /**
          * Fires each time the SplitButton gets focused.
          */
-        this.onFocus = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onFocus = new EventEmitter();
         /**
          * Fires each time the SplitButton gets blurred.
          */
-        this.onBlur = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onBlur = new EventEmitter();
         /**
          * Fires each time the popup is about to open.
          * This event is preventable. If you cancel the event, the popup will remain closed.
@@ -210,8 +219,9 @@ let SplitButtonComponent = 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;
     }
@@ -220,15 +230,16 @@ let SplitButtonComponent = 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;
@@ -244,7 +255,8 @@ let SplitButtonComponent = 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;
@@ -559,11 +571,12 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
             popupAlign: this.popupAlign,
             popupClass: this.popupClasses
         });
-        this.popupRef.popupAnchorViewportLeave.subscribe(() => (this.openState = false));
-        this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this));
+        this.popupSubs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => (this.openState = false)));
+        this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this)));
     }
     destroyPopup() {
         if (this.popupRef) {
+            this.popupSubs.unsubscribe();
             this.popupRef.close();
             this.popupRef = null;
         }
@@ -578,173 +591,18 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], SplitButtonComponent.prototype, "text", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], SplitButtonComponent.prototype, "icon", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], SplitButtonComponent.prototype, "iconClass", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], SplitButtonComponent.prototype, "type", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], SplitButtonComponent.prototype, "imageUrl", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], SplitButtonComponent.prototype, "size", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], SplitButtonComponent.prototype, "rounded", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], SplitButtonComponent.prototype, "fillMode", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], SplitButtonComponent.prototype, "themeColor", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [Boolean])
-], SplitButtonComponent.prototype, "disabled", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], SplitButtonComponent.prototype, "popupSettings", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], SplitButtonComponent.prototype, "tabIndex", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], SplitButtonComponent.prototype, "textField", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], SplitButtonComponent.prototype, "data", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], SplitButtonComponent.prototype, "buttonClass", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], SplitButtonComponent.prototype, "arrowButtonClass", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], SplitButtonComponent.prototype, "arrowButtonIcon", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], SplitButtonComponent.prototype, "buttonClick", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], SplitButtonComponent.prototype, "itemClick", void 0);
-tslib_1.__decorate([
-    Output('focus'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], SplitButtonComponent.prototype, "onFocus", void 0);
-tslib_1.__decorate([
-    Output('blur'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], SplitButtonComponent.prototype, "onBlur", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], SplitButtonComponent.prototype, "open", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], SplitButtonComponent.prototype, "close", void 0);
-tslib_1.__decorate([
-    ContentChild(ButtonItemTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", ButtonItemTemplateDirective)
-], SplitButtonComponent.prototype, "itemTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('button', { static: true }),
-    tslib_1.__metadata("design:type", ElementRef)
-], SplitButtonComponent.prototype, "button", void 0);
-tslib_1.__decorate([
-    ViewChild('arrowButton', { static: true, read: ElementRef }),
-    tslib_1.__metadata("design:type", ElementRef)
-], SplitButtonComponent.prototype, "arrowButton", void 0);
-tslib_1.__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    tslib_1.__metadata("design:type", TemplateRef)
-], SplitButtonComponent.prototype, "popupTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('container', { read: ViewContainerRef, static: true }),
-    tslib_1.__metadata("design:type", ViewContainerRef)
-], SplitButtonComponent.prototype, "containerRef", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-focus'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [Boolean])
-], SplitButtonComponent.prototype, "isFocused", null);
-tslib_1.__decorate([
-    HostBinding('class.k-split-button'),
-    HostBinding('class.k-button-group'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], SplitButtonComponent.prototype, "widgetClasses", null);
-tslib_1.__decorate([
-    HostBinding('attr.dir'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], SplitButtonComponent.prototype, "dir", null);
-tslib_1.__decorate([
-    HostListener('keydown', ['$event']),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Object]),
-    tslib_1.__metadata("design:returntype", void 0)
-], SplitButtonComponent.prototype, "keydown", null);
-tslib_1.__decorate([
-    HostListener('keypress', ['$event']),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Object]),
-    tslib_1.__metadata("design:returntype", void 0)
-], SplitButtonComponent.prototype, "keypress", null);
-tslib_1.__decorate([
-    HostListener('keyup', ['$event']),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Object]),
-    tslib_1.__metadata("design:returntype", void 0)
-], SplitButtonComponent.prototype, "keyup", null);
-SplitButtonComponent = tslib_1.__decorate([
-    Component({
-        exportAs: 'kendoSplitButton',
-        providers: [
-            FocusService,
-            NavigationService,
-            NAVIGATION_SETTINGS_PROVIDER,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.splitbutton'
-            }
-        ],
-        selector: 'kendo-splitbutton',
-        template: `
+}
+SplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonComponent, 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 }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+        FocusService,
+        NavigationService,
+        NAVIGATION_SETTINGS_PROVIDER,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.splitbutton'
+        }
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "arrowButton", first: true, predicate: ["arrowButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSplitButtonLocalizedMessages
             i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
             splitButtonLabel="{{ '{buttonText} splitbutton' }}">
@@ -780,19 +638,100 @@ SplitButtonComponent = tslib_1.__decorate([
                 {{ text }}
             </span><ng-content></ng-content>
         </button>
+        <button kendoButton #arrowButton type="button"
+            class="k-split-button-arrow"
+            [class.k-active]="activeArrow"
+            [ngClass]="arrowButtonClass"
+            [disabled]="disabled"
+            [icon]="arrowButtonIcon"
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [themeColor]="themeColor"
+            [tabindex]="-1"
+            (click)="onArrowButtonClick()"
+            (mousedown)="toggleArrowButtonActiveState(true)"
+            (mouseup)="toggleArrowButtonActiveState(false)"
+        ></button>
+        <ng-template #popupTemplate>
+            <kendo-button-list
+                [id]="listId"
+                [data]="data"
+                [textField]="textField"
+                [itemTemplate]="itemTemplate"
+                (onItemClick)="onItemClick($event)"
+                (keydown)="keyDownHandler($event)"
+                (keypress)="keyPressHandler($event)"
+                (keyup)="keyUpHandler($event)"
+                [attr.dir]="dir"
+                [size]="size"
+            >
+            </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", "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: [{
+                    exportAs: 'kendoSplitButton',
+                    providers: [
+                        FocusService,
+                        NavigationService,
+                        NAVIGATION_SETTINGS_PROVIDER,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.splitbutton'
+                        }
+                    ],
+                    selector: 'kendo-splitbutton',
+                    template: `
+        <ng-container kendoSplitButtonLocalizedMessages
+            i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
+            splitButtonLabel="{{ '{buttonText} splitbutton' }}">
+        </ng-container>
         <button
             kendoButton
-            #arrowButton
-            type="button"
+            #button
+            [type]="type"
+            [tabindex]="componentTabIndex"
+            [disabled]="disabled"
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [themeColor]="themeColor"
+            [icon]="icon"
+            [class.k-active]="active"
+            [class.k-icon-button]="!text && icon"
+            [iconClass]="iconClass"
+            [imageUrl]="imageUrl"
+            [ngClass]="buttonClass"
+            (focus)="onButtonFocus()"
+            (click)="onButtonClick()"
+            (blur)="onButtonBlur()"
+            (mousedown)="toggleButtonActiveState(true)"
+            (mouseup)="toggleButtonActiveState(false)"
+            [attr.aria-disabled]="disabled"
+            [attr.aria-expanded]="openState"
+            [attr.aria-haspopup]="true"
+            [attr.aria-owns]="listId"
+            [attr.aria-label]="ariaLabel"
+        >
+            <span *ngIf="text" class="k-button-text">
+                {{ text }}
+            </span><ng-content></ng-content>
+        </button>
+        <button kendoButton #arrowButton type="button"
+            class="k-split-button-arrow"
             [class.k-active]="activeArrow"
+            [ngClass]="arrowButtonClass"
             [disabled]="disabled"
             [icon]="arrowButtonIcon"
             [size]="size"
             [rounded]="rounded"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             [tabindex]="-1"
-            [ngClass]="arrowButtonClass"
             (click)="onArrowButtonClick()"
             (mousedown)="toggleArrowButtonActiveState(true)"
             (mouseup)="toggleArrowButtonActiveState(false)"
@@ -814,16 +753,89 @@ SplitButtonComponent = tslib_1.__decorate([
         </ng-template>
         <ng-container #container></ng-container>
     `
-    }),
-    tslib_1.__metadata("design:paramtypes", [FocusService,
-        NavigationService,
-        ElementRef,
-        NgZone,
-        PopupService,
-        ElementRef,
-        LocalizationService,
-        ChangeDetectorRef,
-        Renderer2])
-], SplitButtonComponent);
-export { SplitButtonComponent };
-export { ɵ0 };
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FocusService }, { type: i2.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i4.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], arrowButtonClass: [{
+                type: Input
+            }], arrowButtonIcon: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }], itemClick: [{
+                type: Output
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [ButtonItemTemplateDirective, { static: false }]
+            }], button: [{
+                type: ViewChild,
+                args: ['button', { static: true }]
+            }], arrowButton: [{
+                type: ViewChild,
+                args: ['arrowButton', { static: true, read: ElementRef }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], containerRef: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }], isFocused: [{
+                type: HostBinding,
+                args: ['class.k-focus']
+            }], widgetClasses: [{
+                type: HostBinding,
+                args: ['class.k-split-button']
+            }, {
+                type: HostBinding,
+                args: ['class.k-button-group']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], keydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], keypress: [{
+                type: HostListener,
+                args: ['keypress', ['$event']]
+            }], keyup: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }] } });

package/esm2015/splitbutton/splitbutton.module.js

@@ -0,0 +1,34 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PopupModule } from '@progress/kendo-angular-popup';
+import { ButtonModule } from './../button/button.module';
+import { ListModule } from './../listbutton/list.module';
+import { SplitButtonComponent } from './splitbutton.component';
+import { LocalizedSplitButtonMessagesDirective } from './localization/localized-messages.directive';
+import { SplitButtonCustomMessagesComponent } from './localization/custom-messages.component';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ *
+ * The exported package module.
+ *
+ * The package exports:
+ * - `SplitButtonComponent`—The SplitButtonComponent component class.
+ */
+export class SplitButtonModule {
+}
+SplitButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SplitButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonModule, declarations: [SplitButtonComponent, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent], imports: [CommonModule, PopupModule, ButtonModule, ListModule], exports: [SplitButtonComponent, ListModule, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent] });
+SplitButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonModule, imports: [[CommonModule, PopupModule, ButtonModule, ListModule], ListModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SplitButtonComponent, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent],
+                    exports: [SplitButtonComponent, ListModule, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent],
+                    imports: [CommonModule, PopupModule, ButtonModule, ListModule]
+                }]
+        }] });

package/{dist/es2015 → esm2015}/util.js

@@ -2,9 +2,10 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-/* tslint:disable:no-null-keyword */
-/* tslint:disable:no-bitwise */
 import { detectDesktopBrowser, detectMobileOS } from "@progress/kendo-common";
+/**
+ * @hidden
+ */
 const resolvedPromise = Promise.resolve(null);
 /**
  * @hidden
@@ -66,18 +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':
-        case 'shape':
             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}` : ''
     };
 };
 /**