@progress/kendo-angular-buttons 7.0.0-dev.202201061631 → 7.0.0-dev.202201101733

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641486598,
+    publishDate: 1641835943,
     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/dist/es2015/splitbutton/splitbutton.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, TemplateRef, EventEmitter, ViewContainerRef, AfterViewInit, OnChanges, SimpleChanges, NgZone, ChangeDetectorRef } from '@angular/core';
+import { ElementRef, TemplateRef, EventEmitter, ViewContainerRef, AfterViewInit, OnChanges, SimpleChanges, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Align, PopupService, PopupRef } from '@progress/kendo-angular-popup';
 import { ListButton } from './../listbutton/list-button';
@@ -57,6 +57,7 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
     private popupService;
     private elRef;
     private localization;
+    private renderer;
     /**
      * Sets the text of the SplitButton.
      */
@@ -276,6 +277,7 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
     activeArrow: boolean;
     private buttonText;
     private lockFocus;
+    private _rounded;
     isFocused: boolean;
     readonly widgetClasses: boolean;
     readonly dir: string;
@@ -351,7 +353,7 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
      * Blurs the SplitButton component.
      */
     blur(): void;
-    constructor(focusService: FocusService, navigationService: NavigationService, wrapperRef: ElementRef, zone: NgZone, popupService: PopupService, elRef: ElementRef, localization: LocalizationService, cdr: ChangeDetectorRef);
+    constructor(focusService: FocusService, navigationService: NavigationService, wrapperRef: ElementRef, zone: NgZone, popupService: PopupService, elRef: ElementRef, localization: LocalizationService, cdr: ChangeDetectorRef, renderer: Renderer2);
     ngOnDestroy(): void;
     /**
      * Toggles the visibility of the popup.
@@ -370,4 +372,5 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
     private _toggle;
     private createPopup;
     private destroyPopup;
+    private handleClasses;
 }

package/dist/es2015/splitbutton/splitbutton.component.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 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 } from '@angular/core';
+import { Component, ElementRef, TemplateRef, Input, Output, HostBinding, HostListener, EventEmitter, ContentChild, ViewChild, ViewContainerRef, NgZone, ChangeDetectorRef, Renderer2 } 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';
@@ -16,7 +16,7 @@ import { isDocumentAvailable, guid, isChanged } from '@progress/kendo-angular-co
 import { isPresent, tick } from './../util';
 import { PreventableEvent } from '../preventable-event';
 import { Keys } from '@progress/kendo-angular-common';
-import { replaceMessagePlaceholder } from '../util';
+import { replaceMessagePlaceholder, getStylingClasses } from '../util';
 const NAVIGATION_SETTINGS = {
     useLeftRightArrows: true
 };
@@ -67,11 +67,12 @@ const NAVIGATION_SETTINGS_PROVIDER = {
  * ```
  */
 let SplitButtonComponent = class SplitButtonComponent extends ListButton {
-    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr) {
+    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer) {
         super(focusService, navigationService, wrapperRef, zone, localization, cdr);
         this.popupService = popupService;
         this.elRef = elRef;
         this.localization = localization;
+        this.renderer = renderer;
         /**
          * Sets the text of the SplitButton.
          */
@@ -106,18 +107,6 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
          * * `null`
          */
         this.size = 'medium';
-        /**
-         * The rounded property specifies the border radius of the SplitButton
-         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
-         *
-         * The possible values are:
-         * * `'small'`
-         * * `'medium'` (default)
-         * * `'large'`
-         * * `'full'`
-         * * `null`
-         */
-        this.rounded = 'medium';
         /**
          * The fillMode property specifies the background and border styles of the SplitButton
          * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-fillMode)).
@@ -232,9 +221,28 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
         this.activeArrow = false;
         this.buttonText = '';
         this.lockFocus = false;
+        this._rounded = 'medium';
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
+    /**
+     * The rounded property specifies the border radius of the SplitButton
+     * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     */
+    set rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
     /**
      * When set to `true`, disables a SplitButton item
      * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
@@ -406,6 +414,7 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
      */
     ngAfterViewInit() {
         this.updateButtonText();
+        this.handleClasses(this.rounded, 'rounded');
     }
     /**
      * @hidden
@@ -553,6 +562,16 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
             this.popupRef = null;
         }
     }
+    handleClasses(value, input) {
+        const elem = this.wrapperRef.nativeElement;
+        const classes = getStylingClasses('button', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
 };
 tslib_1.__decorate([
     Input(),
@@ -580,8 +599,9 @@ tslib_1.__decorate([
 ], SplitButtonComponent.prototype, "size", void 0);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", String)
-], SplitButtonComponent.prototype, "rounded", void 0);
+    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)
@@ -795,7 +815,8 @@ SplitButtonComponent = tslib_1.__decorate([
         PopupService,
         ElementRef,
         LocalizationService,
-        ChangeDetectorRef])
+        ChangeDetectorRef,
+        Renderer2])
 ], SplitButtonComponent);
 export { SplitButtonComponent };
 export { ɵ0 };

package/dist/fesm2015/index.js

@@ -39,7 +39,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641486598,
+    publishDate: 1641835943,
     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'
 };
@@ -412,7 +412,7 @@ let ButtonDirective = class ButtonDirective {
                 this.fillMode = 'solid';
                 break;
             case 'clear':
-                this.fillMode = 'link';
+                this.fillMode = 'flat';
                 break;
             default:
                 this.fillMode = value;
@@ -1880,11 +1880,12 @@ const NAVIGATION_SETTINGS_PROVIDER = {
  * ```
  */
 let SplitButtonComponent = class SplitButtonComponent extends ListButton {
-    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr) {
+    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer) {
         super(focusService, navigationService, wrapperRef, zone, localization, cdr);
         this.popupService = popupService;
         this.elRef = elRef;
         this.localization = localization;
+        this.renderer = renderer;
         /**
          * Sets the text of the SplitButton.
          */
@@ -1919,18 +1920,6 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
          * * `null`
          */
         this.size = 'medium';
-        /**
-         * The rounded property specifies the border radius of the SplitButton
-         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
-         *
-         * The possible values are:
-         * * `'small'`
-         * * `'medium'` (default)
-         * * `'large'`
-         * * `'full'`
-         * * `null`
-         */
-        this.rounded = 'medium';
         /**
          * The fillMode property specifies the background and border styles of the SplitButton
          * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-fillMode)).
@@ -2045,9 +2034,28 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
         this.activeArrow = false;
         this.buttonText = '';
         this.lockFocus = false;
+        this._rounded = 'medium';
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
+    /**
+     * The rounded property specifies the border radius of the SplitButton
+     * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     */
+    set rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
     /**
      * When set to `true`, disables a SplitButton item
      * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
@@ -2219,6 +2227,7 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
      */
     ngAfterViewInit() {
         this.updateButtonText();
+        this.handleClasses(this.rounded, 'rounded');
     }
     /**
      * @hidden
@@ -2366,6 +2375,16 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
             this.popupRef = null;
         }
     }
+    handleClasses(value, input) {
+        const elem = this.wrapperRef.nativeElement;
+        const classes = getStylingClasses('button', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
 };
 __decorate([
     Input(),
@@ -2393,8 +2412,9 @@ __decorate([
 ], SplitButtonComponent.prototype, "size", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", String)
-], SplitButtonComponent.prototype, "rounded", void 0);
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SplitButtonComponent.prototype, "rounded", null);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -2608,7 +2628,8 @@ SplitButtonComponent = __decorate([
         PopupService,
         ElementRef,
         LocalizationService,
-        ChangeDetectorRef])
+        ChangeDetectorRef,
+        Renderer2])
 ], SplitButtonComponent);
 
 /**

package/dist/fesm5/index.js

@@ -37,7 +37,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641486598,
+    publishDate: 1641835943,
     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'
 };
@@ -499,7 +499,7 @@ var ButtonDirective = /** @class */ (function () {
                     this.fillMode = 'solid';
                     break;
                 case 'clear':
-                    this.fillMode = 'link';
+                    this.fillMode = 'flat';
                     break;
                 default:
                     this.fillMode = value;
@@ -2035,11 +2035,12 @@ var NAVIGATION_SETTINGS_PROVIDER = {
  */
 var SplitButtonComponent = /** @class */ (function (_super) {
     __extends(SplitButtonComponent, _super);
-    function SplitButtonComponent(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr) {
+    function SplitButtonComponent(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer) {
         var _this = _super.call(this, focusService, navigationService, wrapperRef, zone, localization, cdr) || this;
         _this.popupService = popupService;
         _this.elRef = elRef;
         _this.localization = localization;
+        _this.renderer = renderer;
         /**
          * Sets the text of the SplitButton.
          */
@@ -2074,18 +2075,6 @@ var SplitButtonComponent = /** @class */ (function (_super) {
          * * `null`
          */
         _this.size = 'medium';
-        /**
-         * The rounded property specifies the border radius of the SplitButton
-         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
-         *
-         * The possible values are:
-         * * `'small'`
-         * * `'medium'` (default)
-         * * `'large'`
-         * * `'full'`
-         * * `null`
-         */
-        _this.rounded = 'medium';
         /**
          * The fillMode property specifies the background and border styles of the SplitButton
          * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-fillMode)).
@@ -2200,10 +2189,33 @@ var SplitButtonComponent = /** @class */ (function (_super) {
         _this.activeArrow = false;
         _this.buttonText = '';
         _this.lockFocus = false;
+        _this._rounded = 'medium';
         _this._itemClick = _this.itemClick;
         _this._blur = _this.onBlur;
         return _this;
     }
+    Object.defineProperty(SplitButtonComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * The rounded property specifies the border radius of the SplitButton
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(SplitButtonComponent.prototype, "disabled", {
         get: function () {
             return this._disabled;
@@ -2415,6 +2427,7 @@ var SplitButtonComponent = /** @class */ (function (_super) {
      */
     SplitButtonComponent.prototype.ngAfterViewInit = function () {
         this.updateButtonText();
+        this.handleClasses(this.rounded, 'rounded');
     };
     /**
      * @hidden
@@ -2581,6 +2594,16 @@ var SplitButtonComponent = /** @class */ (function (_super) {
             this.popupRef = null;
         }
     };
+    SplitButtonComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.wrapperRef.nativeElement;
+        var classes = getStylingClasses('button', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    };
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -2607,8 +2630,9 @@ var SplitButtonComponent = /** @class */ (function (_super) {
     ], SplitButtonComponent.prototype, "size", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", String)
-    ], SplitButtonComponent.prototype, "rounded", void 0);
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], SplitButtonComponent.prototype, "rounded", null);
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -2753,7 +2777,8 @@ var SplitButtonComponent = /** @class */ (function (_super) {
             PopupService,
             ElementRef,
             LocalizationService,
-            ChangeDetectorRef])
+            ChangeDetectorRef,
+            Renderer2])
     ], SplitButtonComponent);
     return SplitButtonComponent;
 }(ListButton));

package/dist/npm/button/button.directive.js

@@ -375,7 +375,7 @@ var ButtonDirective = /** @class */ (function () {
                     this.fillMode = 'solid';
                     break;
                 case 'clear':
-                    this.fillMode = 'link';
+                    this.fillMode = 'flat';
                     break;
                 default:
                     this.fillMode = value;

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641486598,
+    publishDate: 1641835943,
     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/dist/npm/splitbutton/splitbutton.component.js

@@ -71,11 +71,12 @@ var NAVIGATION_SETTINGS_PROVIDER = {
  */
 var SplitButtonComponent = /** @class */ (function (_super) {
     tslib_1.__extends(SplitButtonComponent, _super);
-    function SplitButtonComponent(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr) {
+    function SplitButtonComponent(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer) {
         var _this = _super.call(this, focusService, navigationService, wrapperRef, zone, localization, cdr) || this;
         _this.popupService = popupService;
         _this.elRef = elRef;
         _this.localization = localization;
+        _this.renderer = renderer;
         /**
          * Sets the text of the SplitButton.
          */
@@ -110,18 +111,6 @@ var SplitButtonComponent = /** @class */ (function (_super) {
          * * `null`
          */
         _this.size = 'medium';
-        /**
-         * The rounded property specifies the border radius of the SplitButton
-         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
-         *
-         * The possible values are:
-         * * `'small'`
-         * * `'medium'` (default)
-         * * `'large'`
-         * * `'full'`
-         * * `null`
-         */
-        _this.rounded = 'medium';
         /**
          * The fillMode property specifies the background and border styles of the SplitButton
          * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-fillMode)).
@@ -236,10 +225,33 @@ var SplitButtonComponent = /** @class */ (function (_super) {
         _this.activeArrow = false;
         _this.buttonText = '';
         _this.lockFocus = false;
+        _this._rounded = 'medium';
         _this._itemClick = _this.itemClick;
         _this._blur = _this.onBlur;
         return _this;
     }
+    Object.defineProperty(SplitButtonComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * The rounded property specifies the border radius of the SplitButton
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(SplitButtonComponent.prototype, "disabled", {
         get: function () {
             return this._disabled;
@@ -451,6 +463,7 @@ var SplitButtonComponent = /** @class */ (function (_super) {
      */
     SplitButtonComponent.prototype.ngAfterViewInit = function () {
         this.updateButtonText();
+        this.handleClasses(this.rounded, 'rounded');
     };
     /**
      * @hidden
@@ -617,6 +630,16 @@ var SplitButtonComponent = /** @class */ (function (_super) {
             this.popupRef = null;
         }
     };
+    SplitButtonComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.wrapperRef.nativeElement;
+        var classes = util_2.getStylingClasses('button', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    };
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
@@ -643,8 +666,9 @@ var SplitButtonComponent = /** @class */ (function (_super) {
     ], SplitButtonComponent.prototype, "size", void 0);
     tslib_1.__decorate([
         core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], SplitButtonComponent.prototype, "rounded", void 0);
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], SplitButtonComponent.prototype, "rounded", null);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
@@ -789,7 +813,8 @@ var SplitButtonComponent = /** @class */ (function (_super) {
             kendo_angular_popup_1.PopupService,
             core_1.ElementRef,
             kendo_angular_l10n_1.LocalizationService,
-            core_1.ChangeDetectorRef])
+            core_1.ChangeDetectorRef,
+            core_1.Renderer2])
     ], SplitButtonComponent);
     return SplitButtonComponent;
 }(list_button_1.ListButton));