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

package/dist/es/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';
 var NAVIGATION_SETTINGS = {
     useLeftRightArrows: true
 };
@@ -68,11 +68,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.
          */
@@ -97,13 +98,46 @@ var SplitButtonComponent = /** @class */ (function (_super) {
          */
         _this.imageUrl = '';
         /**
-         * Changes the visual appearance by using alternative styling options.
+         * The size property specifies the width and height of the SplitButton
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        _this.size = 'medium';
+        /**
+         * The fillMode property specifies the background and border styles of the SplitButton
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-fillMode)).
          *
          * The available values are:
+         * * `solid` (default)
          * * `flat`
          * * `outline`
+         * * `link`
+         */
+        _this.fillMode = 'solid';
+        /**
+         * The SplitButton allows you to specify predefined theme colors.
+         * The theme color will be applied as a background and border color while also amending the text color accordingly
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-themeColor)).
+         *
+         * The possible values are:
+         * * `base` —Applies coloring based on the `base` theme color. (default)
+         * * `primary` —Applies coloring based on the `primary` theme color.
+         * * `secondary`—Applies coloring based on the `secondary` theme color.
+         * * `tertiary`— Applies coloring based on the `tertiary` theme color.
+         * * `info`—Applies coloring based on the `info` theme color.
+         * * `success`— Applies coloring based on the `success` theme color.
+         * * `warning`— Applies coloring based on the `warning` theme color.
+         * * `error`— Applies coloring based on the `error` theme color.
+         * * `dark`— Applies coloring based on the `dark` theme color.
+         * * `light`— Applies coloring based on the `light` theme color.
+         * * `inverse`— Applies coloring based on the `inverse` theme color.
          */
-        _this.look = 'default';
+        _this.themeColor = 'base';
         /**
          * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
          */
@@ -188,10 +222,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;
@@ -305,20 +362,6 @@ var SplitButtonComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitButtonComponent.prototype, "isFlat", {
-        get: function () {
-            return this.look === 'flat';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SplitButtonComponent.prototype, "isOutline", {
-        get: function () {
-            return this.look === 'outline';
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(SplitButtonComponent.prototype, "widgetClasses", {
         get: function () {
             return true;
@@ -417,6 +460,7 @@ var SplitButtonComponent = /** @class */ (function (_super) {
      */
     SplitButtonComponent.prototype.ngAfterViewInit = function () {
         this.updateButtonText();
+        this.handleClasses(this.rounded, 'rounded');
     };
     /**
      * @hidden
@@ -583,6 +627,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);
+        }
+    };
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
@@ -606,7 +660,20 @@ var SplitButtonComponent = /** @class */ (function (_super) {
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
-    ], SplitButtonComponent.prototype, "look", void 0);
+    ], 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)
+    ], SplitButtonComponent.prototype, "fillMode", void 0);
+    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),
@@ -687,20 +754,10 @@ var SplitButtonComponent = /** @class */ (function (_super) {
         tslib_1.__metadata("design:type", ViewContainerRef)
     ], SplitButtonComponent.prototype, "containerRef", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-state-focused'),
+        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-flat'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], SplitButtonComponent.prototype, "isFlat", null);
-    tslib_1.__decorate([
-        HostBinding('class.k-outline'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], SplitButtonComponent.prototype, "isOutline", null);
     tslib_1.__decorate([
         HostBinding('class.k-split-button'),
         HostBinding('class.k-button-group'),
@@ -744,7 +801,7 @@ var SplitButtonComponent = /** @class */ (function (_super) {
                 }
             ],
             selector: 'kendo-splitbutton',
-            template: "\n        <ng-container kendoSplitButtonLocalizedMessages\n            i18n-splitButtonLabel=\"kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label\"\n            splitButtonLabel=\"{{ '{buttonText} splitbutton' }}\">\n        </ng-container>\n        <button\n            kendoButton\n            #button\n            [type]=\"type\"\n            [look]=\"look\"\n            [tabindex]=\"componentTabIndex\"\n            [disabled]=\"disabled\"\n            [icon]=\"icon\"\n            [class.k-state-active]=\"active\"\n            [iconClass]=\"iconClass\"\n            [imageUrl]=\"imageUrl\"\n            [ngClass]=\"buttonClass\"\n            (focus)=\"onButtonFocus()\"\n            (click)=\"onButtonClick()\"\n            (blur)=\"onButtonBlur()\"\n            (mousedown)=\"toggleButtonActiveState(true)\"\n            (mouseup)=\"toggleButtonActiveState(false)\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-expanded]=\"openState\"\n            [attr.aria-haspopup]=\"true\"\n            [attr.aria-owns]=\"listId\"\n            [attr.aria-label]=\"ariaLabel\"\n        >\n            {{ text }}<ng-content></ng-content>\n        </button>\n        <button\n            kendoButton\n            #arrowButton\n            type=\"button\"\n            [class.k-state-active]=\"activeArrow\"\n            [disabled]=\"disabled\"\n            [icon]=\"arrowButtonIcon\"\n            [look]=\"look\"\n            [tabindex]=\"-1\"\n            [ngClass]=\"arrowButtonClass\"\n            (click)=\"onArrowButtonClick()\"\n            (mousedown)=\"toggleArrowButtonActiveState(true)\"\n            (mouseup)=\"toggleArrowButtonActiveState(false)\"\n        ></button>\n        <ng-template #popupTemplate>\n            <kendo-button-list\n                [id]=\"listId\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [itemTemplate]=\"itemTemplate\"\n                (onItemClick)=\"onItemClick($event)\"\n                (keydown)=\"keyDownHandler($event)\"\n                (keypress)=\"keyPressHandler($event)\"\n                (keyup)=\"keyUpHandler($event)\"\n                [attr.dir]=\"dir\"\n            >\n            </kendo-button-list>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
+            template: "\n        <ng-container kendoSplitButtonLocalizedMessages\n            i18n-splitButtonLabel=\"kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label\"\n            splitButtonLabel=\"{{ '{buttonText} splitbutton' }}\">\n        </ng-container>\n        <button\n            kendoButton\n            #button\n            [type]=\"type\"\n            [tabindex]=\"componentTabIndex\"\n            [disabled]=\"disabled\"\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [themeColor]=\"themeColor\"\n            [icon]=\"icon\"\n            [class.k-active]=\"active\"\n            [class.k-icon-button]=\"!text && icon\"\n            [iconClass]=\"iconClass\"\n            [imageUrl]=\"imageUrl\"\n            [ngClass]=\"buttonClass\"\n            (focus)=\"onButtonFocus()\"\n            (click)=\"onButtonClick()\"\n            (blur)=\"onButtonBlur()\"\n            (mousedown)=\"toggleButtonActiveState(true)\"\n            (mouseup)=\"toggleButtonActiveState(false)\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-expanded]=\"openState\"\n            [attr.aria-haspopup]=\"true\"\n            [attr.aria-owns]=\"listId\"\n            [attr.aria-label]=\"ariaLabel\"\n        >\n            <span *ngIf=\"text\" class=\"k-button-text\">\n                {{ text }}\n            </span><ng-content></ng-content>\n        </button>\n        <button\n            kendoButton\n            #arrowButton\n            type=\"button\"\n            [class.k-active]=\"activeArrow\"\n            [disabled]=\"disabled\"\n            [icon]=\"arrowButtonIcon\"\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [themeColor]=\"fillMode ? themeColor : null\"\n            [tabindex]=\"-1\"\n            [ngClass]=\"arrowButtonClass\"\n            (click)=\"onArrowButtonClick()\"\n            (mousedown)=\"toggleArrowButtonActiveState(true)\"\n            (mouseup)=\"toggleArrowButtonActiveState(false)\"\n        ></button>\n        <ng-template #popupTemplate>\n            <kendo-button-list\n                [id]=\"listId\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [itemTemplate]=\"itemTemplate\"\n                (onItemClick)=\"onItemClick($event)\"\n                (keydown)=\"keyDownHandler($event)\"\n                (keypress)=\"keyPressHandler($event)\"\n                (keyup)=\"keyUpHandler($event)\"\n                [attr.dir]=\"dir\"\n                [size]=\"size\"\n            >\n            </kendo-button-list>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [FocusService,
             NavigationService,
@@ -753,7 +810,8 @@ var SplitButtonComponent = /** @class */ (function (_super) {
             PopupService,
             ElementRef,
             LocalizationService,
-            ChangeDetectorRef])
+            ChangeDetectorRef,
+            Renderer2])
     ], SplitButtonComponent);
     return SplitButtonComponent;
 }(ListButton));

package/dist/es/util.js

@@ -43,3 +43,55 @@ export function closest(element, selector) {
 export var replaceMessagePlaceholder = function (message, name, value) {
     return message.replace(new RegExp("{\\s*" + name + "\\s*}", 'g'), value);
 };
+/**
+ * @hidden
+ */
+export var SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+var ROUNDNESS = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg',
+    full: 'full'
+};
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+export var getStylingClasses = function (componentType, stylingOption, previousValue, newValue) {
+    switch (stylingOption) {
+        case 'size':
+            return {
+                toRemove: "k-" + componentType + "-" + SIZES[previousValue],
+                toAdd: newValue ? "k-" + componentType + "-" + SIZES[newValue] : null
+            };
+        case 'rounded':
+            return {
+                toRemove: "k-rounded-" + ROUNDNESS[previousValue],
+                toAdd: newValue ? "k-rounded-" + ROUNDNESS[newValue] : null
+            };
+        case 'fillMode':
+        case 'shape':
+            return {
+                toRemove: "k-" + componentType + "-" + previousValue,
+                toAdd: newValue ? "k-" + componentType + "-" + newValue : null
+            };
+        default:
+            break;
+    }
+};
+/**
+ * @hidden
+ *
+ * Returns the themeColor classes to be added and removed
+ */
+export var getThemeColorClasses = function (componentType, prevFillMode, fillMode, previousValue, newValue) {
+    return {
+        toRemove: "k-" + componentType + "-" + prevFillMode + "-" + previousValue,
+        toAdd: newValue ? "k-" + componentType + "-" + fillMode + "-" + newValue : null
+    };
+};

package/dist/es2015/button/button.directive.d.ts

@@ -2,14 +2,14 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { SimpleChanges, ElementRef, EventEmitter, Renderer2 as Renderer, OnDestroy, NgZone } from '@angular/core';
+import { SimpleChanges, ElementRef, EventEmitter, Renderer2 as Renderer, OnDestroy, NgZone, AfterViewInit } from '@angular/core';
 import { KendoButtonService } from './button.service';
-import { ButtonLook } from '../button-look';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { ButtonFillMode, ButtonRounded, ButtonShape, ButtonSize, ButtonThemeColor } from '../common/models';
 /**
  * Represents the Kendo UI Button component for Angular.
  */
-export declare class ButtonDirective implements OnDestroy {
+export declare class ButtonDirective implements OnDestroy, AfterViewInit {
     private service;
     private ngZone;
     /**
@@ -26,19 +26,6 @@ export declare class ButtonDirective implements OnDestroy {
     * @hidden
     */
     togglable: boolean;
-    /**
-     * Adds visual weight to the Button and makes it primary.
-     */
-    primary: boolean;
-    /**
-     * Changes the visual appearance by using alternative styling options
-     * ([more information and examples]({% slug appearance_button %})).
-     *
-     * The available values are:
-     * * [`ButtonLook`]({% slug api_buttons_buttonlook %}) = `flat` | `outline`
-     * * `clear`
-     */
-    look: ButtonLook | 'clear';
     /**
      * Sets the selected state of the Button.
      */
@@ -66,6 +53,69 @@ export declare class ButtonDirective implements OnDestroy {
      * If set to `true`, it disables the Button.
      */
     disabled: boolean;
+    /**
+     * The size property specifies the width and height of the Button
+     * ([see example]({% slug appearance_buttondirective %}#toc-size)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    size: ButtonSize;
+    /**
+     * The rounded property specifies the border radius of the Button
+     * ([see example]({% slug appearance_buttondirective %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     */
+    rounded: ButtonRounded;
+    /**
+     * The fillMode property specifies the background and border styles of the Button
+     * ([see example]({% slug appearance_buttondirective %}#toc-fillMode)).
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `'link'`
+     * * `null`
+     */
+    fillMode: ButtonFillMode;
+    /**
+     * The Button allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color while also amending the text color accordingly
+     * ([see example]({% slug appearance_buttondirective %}#toc-themeColor)).
+     *
+     * The possible values are:
+     * * `'base'` (default)
+     * * `'primary'`
+     * * `'secondary'`
+     * * `'tertiary'`
+     * * `'info'`
+     * * `'success'`
+     * * `'warning'`
+     * * `'error'`
+     * * `'dark'`
+     * * `'light`'
+     * * `'inverse'`
+     */
+    themeColor: ButtonThemeColor;
+    /**
+     * The shape property specifies if the Button will form a rectangle or square.
+     * ([see example]({% slug appearance_buttondirective %}#toc-shape)).
+     *
+     * The possible values are:
+     * * `'square'`
+     * * `'rectangle'` (default)
+     */
+    shape: ButtonShape;
     /**
      * @hidden
      */
@@ -87,8 +137,13 @@ export declare class ButtonDirective implements OnDestroy {
     isIconClass: boolean;
     imageNode: HTMLImageElement;
     iconNode: HTMLElement;
+    iconSpanNode: HTMLElement;
+    private _size;
+    private _rounded;
+    private _shape;
+    private _fillMode;
+    private _themeColor;
     private localizationChangeSubscription;
-    private buttonLookChangeSubscription;
     private _focused;
     private direction;
     private _selected;
@@ -96,12 +151,7 @@ export declare class ButtonDirective implements OnDestroy {
     private domEvents;
     isFocused: boolean;
     readonly classButton: boolean;
-    readonly classPrimary: boolean;
     readonly isToggleable: boolean;
-    readonly isFlat: boolean;
-    readonly isBare: boolean;
-    readonly isOutline: boolean;
-    readonly isClear: boolean;
     readonly roleSetter: string;
     readonly classDisabled: boolean;
     readonly classActive: boolean;
@@ -114,9 +164,18 @@ export declare class ButtonDirective implements OnDestroy {
      * @hidden
      */
     onBlur(): void;
+    /**
+     * @hidden
+     */
+    primary: boolean;
+    /**
+     * @hidden
+     */
+    look: 'flat' | 'outline' | 'clear' | 'default';
     constructor(element: ElementRef, renderer: Renderer, service: KendoButtonService, localization: LocalizationService, ngZone: NgZone);
     ngOnInit(): void;
     ngOnChanges(change: SimpleChanges): void;
+    ngAfterViewInit(): void;
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
     /**
@@ -143,8 +202,10 @@ export declare class ButtonDirective implements OnDestroy {
     setSelected(value: boolean): void;
     private toggleAriaPressed;
     private hasText;
+    private readonly text;
     private addImgIcon;
     private addIcon;
+    private addTextSpan;
     private prependChild;
     private defer;
     private iconSetter;
@@ -154,4 +215,6 @@ export declare class ButtonDirective implements OnDestroy {
     private setIconTextClasses;
     private toggleClass;
     private _onButtonClick;
+    private handleClasses;
+    private handleThemeColor;
 }