@progress/kendo-angular-buttons 6.4.1 → 7.0.0-dev.202201180832

package/dist/es/button/button.directive.js

@@ -7,9 +7,9 @@ import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input,
 import { KendoButtonService } from './button.service';
 import { isDocumentAvailable, isChanged, hasObservers, Keys } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { filter } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
+import { getStylingClasses, getThemeColorClasses } from '../util';
 var SPAN_TAG_NAME = 'SPAN';
 /**
  * Represents the Kendo UI Button component for Angular.
@@ -24,19 +24,6 @@ var ButtonDirective = /** @class */ (function () {
          * By default, `toggleable` is set to `false`.
          */
         this.toggleable = false;
-        /**
-         * Adds visual weight to the Button and makes it primary.
-         */
-        this.primary = false;
-        /**
-         * 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`
-         */
-        this.look = 'default';
         /**
          * @hidden
          */
@@ -54,14 +41,18 @@ var ButtonDirective = /** @class */ (function () {
         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._focused = false;
         this.domEvents = [];
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.localizationChangeSubscription = localization.changes
-            .subscribe(function (_a) {
+        this.localizationChangeSubscription = localization.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
-            return _this.direction = rtl ? 'rtl' : 'ltr';
+            return (_this.direction = rtl ? 'rtl' : 'ltr');
         });
         this.element = element.nativeElement;
         this.renderer = renderer;
@@ -120,7 +111,7 @@ var ButtonDirective = /** @class */ (function () {
             if (icon) {
                 this.iconSetter(icon, function () {
                     _this.isIcon = true;
-                    var classes = 'k-icon k-i-' + icon;
+                    var classes = 'k-button-icon k-icon k-i-' + icon;
                     _this.addIcon(classes);
                 });
             }
@@ -142,7 +133,8 @@ var ButtonDirective = /** @class */ (function () {
             if (iconClassName) {
                 this.iconSetter(iconClassName, function () {
                     _this.isIconClass = true;
-                    _this.addIcon(iconClassName);
+                    var classes = 'k-button-icon k-icon ' + iconClassName;
+                    _this.addIcon(classes);
                 });
             }
             else {
@@ -183,62 +175,140 @@ var ButtonDirective = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "isFocused", {
+    Object.defineProperty(ButtonDirective.prototype, "size", {
         get: function () {
-            return this._focused;
+            return this._size;
         },
-        set: function (isFocused) {
-            this.toggleClass('k-state-focused', isFocused);
-            this._focused = isFocused;
+        /**
+         * 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`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "classButton", {
+    Object.defineProperty(ButtonDirective.prototype, "rounded", {
         get: function () {
-            return true;
+            return this._rounded;
+        },
+        /**
+         * 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`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "classPrimary", {
+    Object.defineProperty(ButtonDirective.prototype, "fillMode", {
         get: function () {
-            return this.primary;
+            return this._fillMode;
+        },
+        /**
+         * 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`
+         */
+        set: function (fillMode) {
+            this.handleClasses(fillMode, 'fillMode');
+            this._fillMode = fillMode;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "isToggleable", {
+    Object.defineProperty(ButtonDirective.prototype, "themeColor", {
         get: function () {
-            return this.toggleable;
+            return this._themeColor;
+        },
+        /**
+         * 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'`
+         */
+        set: function (themeColor) {
+            this.handleThemeColor(themeColor);
+            this._themeColor = themeColor;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "isFlat", {
+    Object.defineProperty(ButtonDirective.prototype, "shape", {
         get: function () {
-            return this.look === 'flat';
+            return this._shape;
+        },
+        /**
+         * 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)
+         */
+        set: function (shape) {
+            this.handleClasses(shape, 'shape');
+            this._shape = shape;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "isBare", {
+    Object.defineProperty(ButtonDirective.prototype, "isFocused", {
         get: function () {
-            return this.look === 'bare';
+            return this._focused;
+        },
+        set: function (isFocused) {
+            this.toggleClass('k-focus', isFocused);
+            this._focused = isFocused;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "isOutline", {
+    Object.defineProperty(ButtonDirective.prototype, "classButton", {
         get: function () {
-            return this.look === 'outline';
+            return true;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "isClear", {
+    Object.defineProperty(ButtonDirective.prototype, "isToggleable", {
         get: function () {
-            return this.look === 'clear';
+            return this.toggleable;
         },
         enumerable: true,
         configurable: true
@@ -283,14 +353,37 @@ var ButtonDirective = /** @class */ (function () {
     ButtonDirective.prototype.onBlur = function () {
         this.isFocused = false;
     };
+    Object.defineProperty(ButtonDirective.prototype, "primary", {
+        /**
+         * @hidden
+         */
+        set: function (value) {
+            this.themeColor = value ? 'primary' : 'base';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonDirective.prototype, "look", {
+        /**
+         * @hidden
+         */
+        set: function (value) {
+            switch (value) {
+                case 'default':
+                    this.fillMode = 'solid';
+                    break;
+                default:
+                    this.fillMode = value;
+                    break;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     ButtonDirective.prototype.ngOnInit = function () {
         var _this = this;
         var isSpan = this.element.tagName === SPAN_TAG_NAME;
-        if (this.service) {
-            this.buttonLookChangeSubscription = this.service.buttonLookChange
-                .pipe(filter(function (look) { return look !== 'default'; }))
-                .subscribe(function (look) { return _this.look = look; });
-        }
+        this.addTextSpan();
         if (!this.element.hasAttribute('role') && this.togglable) {
             this.toggleAriaPressed(this.toggleable);
         }
@@ -300,7 +393,8 @@ var ButtonDirective = /** @class */ (function () {
         this.ngZone.runOutsideAngular(function () {
             _this.domEvents.push(_this.renderer.listen(_this.element, 'click', _this._onButtonClick.bind(_this)));
             _this.domEvents.push(_this.renderer.listen(_this.element, 'keydown', function (event) {
-                if (isSpan && (event.keyCode === Keys.Space || event.keyCode === Keys.Enter)) {
+                var isSpaceOrEnter = event.keyCode === Keys.Space || event.keyCode === Keys.Enter;
+                if (isSpan && isSpaceOrEnter) {
                     _this.click.emit(event);
                     _this._onButtonClick();
                 }
@@ -312,17 +406,22 @@ var ButtonDirective = /** @class */ (function () {
             this.toggleAriaPressed(this.toggleable);
         }
     };
+    ButtonDirective.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingOptions = ['size', 'rounded', 'shape', 'fillMode'];
+        stylingOptions.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
+    };
     ButtonDirective.prototype.ngAfterViewChecked = function () {
         this.setIconTextClasses();
     };
     ButtonDirective.prototype.ngOnDestroy = function () {
         this.imageNode = null;
         this.iconNode = null;
+        this.iconSpanNode = null;
         this.renderer = null;
         this.localizationChangeSubscription.unsubscribe();
-        if (this.service && this.buttonLookChangeSubscription) {
-            this.buttonLookChangeSubscription.unsubscribe();
-        }
         clearTimeout(this.deferTimeout);
         this.domEvents.forEach(function (unbindHandler) { return unbindHandler(); });
     };
@@ -366,7 +465,7 @@ var ButtonDirective = /** @class */ (function () {
         var changed = this.selected !== value;
         this.selected = value;
         this.setAttribute('aria-pressed', this.selected.toString());
-        this.toggleClass('k-state-selected', this.selected);
+        this.toggleClass('k-selected', this.selected);
         if (changed && hasObservers(this.selectedChange)) {
             this.ngZone.run(function () {
                 _this.selectedChange.emit(value);
@@ -386,14 +485,25 @@ var ButtonDirective = /** @class */ (function () {
     };
     ButtonDirective.prototype.hasText = function () {
         if (isDocumentAvailable()) {
-            return String(this.element.textContent).trim().length > 0;
+            return this.element.textContent.trim().length > 0;
         }
         else {
             return false;
         }
     };
+    Object.defineProperty(ButtonDirective.prototype, "text", {
+        get: function () {
+            if (isDocumentAvailable()) {
+                return this.element.innerHTML.trim();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     ButtonDirective.prototype.addImgIcon = function (imageUrl) {
         var renderer = this.renderer;
+        this.iconSpanNode = renderer.createElement('span');
+        renderer.setProperty(this.iconSpanNode, 'className', 'k-button-icon k-icon');
         if (this.imageNode) {
             renderer.setProperty(this.imageNode, 'src', imageUrl);
         }
@@ -402,8 +512,9 @@ var ButtonDirective = /** @class */ (function () {
             renderer.setProperty(this.imageNode, 'src', imageUrl);
             renderer.setProperty(this.imageNode, 'className', 'k-image');
             renderer.setAttribute(this.imageNode, 'role', 'presentation');
-            this.prependChild(this.imageNode);
         }
+        this.iconSpanNode.appendChild(this.imageNode);
+        this.prependChild(this.iconSpanNode);
     };
     ButtonDirective.prototype.addIcon = function (classNames) {
         var renderer = this.renderer;
@@ -417,6 +528,11 @@ var ButtonDirective = /** @class */ (function () {
             this.prependChild(this.iconNode);
         }
     };
+    ButtonDirective.prototype.addTextSpan = function () {
+        if (isDocumentAvailable() && this.hasText()) {
+            this.element.innerHTML = "<span class='k-button-text'>" + this.text + "</span>";
+        }
+    };
     ButtonDirective.prototype.prependChild = function (node) {
         var _this = this;
         this.defer(function () {
@@ -440,7 +556,9 @@ var ButtonDirective = /** @class */ (function () {
     ButtonDirective.prototype.removeImageNode = function () {
         if (this.imageNode && this.renderer.parentNode(this.imageNode)) {
             this.renderer.removeChild(this.element, this.imageNode);
+            this.renderer.removeChild(this.element, this.iconSpanNode);
             this.imageNode = null;
+            this.iconSpanNode = null;
         }
     };
     ButtonDirective.prototype.removeIconNode = function () {
@@ -448,6 +566,10 @@ var ButtonDirective = /** @class */ (function () {
             this.renderer.removeChild(this.element, this.iconNode);
             this.iconNode = null;
         }
+        if (this.iconSpanNode) {
+            this.renderer.removeChild(this.element, this.iconSpanNode);
+            this.iconSpanNode = null;
+        }
     };
     ButtonDirective.prototype.updateIconNode = function () {
         if (!this.isIcon && !this.isIconClass) {
@@ -456,9 +578,7 @@ var ButtonDirective = /** @class */ (function () {
     };
     ButtonDirective.prototype.setIconTextClasses = function () {
         var hasIcon = this.isIcon || this.isIconClass || this.imageNode;
-        var hasText = this.hasText();
-        this.toggleClass('k-button-icon', hasIcon && !hasText);
-        this.toggleClass('k-button-icontext', hasIcon && hasText);
+        this.toggleClass('k-icon-button', hasIcon && !this.hasText());
     };
     ButtonDirective.prototype.toggleClass = function (className, add) {
         if (add) {
@@ -479,6 +599,31 @@ var ButtonDirective = /** @class */ (function () {
             this.setSelected(!this.selected);
         }
     };
+    ButtonDirective.prototype.handleClasses = function (value, input) {
+        var elem = this.element;
+        var classes = getStylingClasses('button', input, this[input], value);
+        if (input === 'fillMode') {
+            this.handleThemeColor(this.themeColor, this[input], value);
+        }
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    };
+    ButtonDirective.prototype.handleThemeColor = function (value, prevFillMode, fillMode) {
+        var elem = this.element;
+        var removeFillMode = prevFillMode ? prevFillMode : this.fillMode;
+        var addFillMode = fillMode ? fillMode : this.fillMode;
+        var themeColorClass = getThemeColorClasses('button', removeFillMode, addFillMode, this.themeColor, value);
+        this.renderer.removeClass(elem, themeColorClass.toRemove);
+        if (addFillMode !== null && fillMode !== null) {
+            if (themeColorClass.toAdd) {
+                this.renderer.addClass(elem, themeColorClass.toAdd);
+            }
+        }
+    };
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Boolean)
@@ -488,14 +633,6 @@ var ButtonDirective = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [Boolean])
     ], ButtonDirective.prototype, "togglable", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ButtonDirective.prototype, "primary", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ButtonDirective.prototype, "look", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Boolean),
@@ -526,6 +663,31 @@ var ButtonDirective = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [Boolean])
     ], ButtonDirective.prototype, "disabled", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ButtonDirective.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ButtonDirective.prototype, "rounded", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ButtonDirective.prototype, "fillMode", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ButtonDirective.prototype, "themeColor", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ButtonDirective.prototype, "shape", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
@@ -543,36 +705,11 @@ var ButtonDirective = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], ButtonDirective.prototype, "classButton", null);
-    tslib_1.__decorate([
-        HostBinding('class.k-primary'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ButtonDirective.prototype, "classPrimary", null);
     tslib_1.__decorate([
         HostBinding('class.k-toggle-button'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], ButtonDirective.prototype, "isToggleable", null);
-    tslib_1.__decorate([
-        HostBinding('class.k-flat'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ButtonDirective.prototype, "isFlat", null);
-    tslib_1.__decorate([
-        HostBinding('class.k-bare'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ButtonDirective.prototype, "isBare", null);
-    tslib_1.__decorate([
-        HostBinding('class.k-outline'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ButtonDirective.prototype, "isOutline", null);
-    tslib_1.__decorate([
-        HostBinding('class.k-button-clear'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ButtonDirective.prototype, "isClear", null);
     tslib_1.__decorate([
         HostBinding('attr.role'),
         tslib_1.__metadata("design:type", String),
@@ -580,12 +717,12 @@ var ButtonDirective = /** @class */ (function () {
     ], ButtonDirective.prototype, "roleSetter", null);
     tslib_1.__decorate([
         HostBinding('attr.aria-disabled'),
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], ButtonDirective.prototype, "classDisabled", null);
     tslib_1.__decorate([
-        HostBinding('class.k-state-selected'),
+        HostBinding('class.k-selected'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], ButtonDirective.prototype, "classActive", null);
@@ -606,6 +743,16 @@ var ButtonDirective = /** @class */ (function () {
         tslib_1.__metadata("design:paramtypes", []),
         tslib_1.__metadata("design:returntype", void 0)
     ], ButtonDirective.prototype, "onBlur", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [Boolean])
+    ], ButtonDirective.prototype, "primary", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ButtonDirective.prototype, "look", null);
     ButtonDirective = tslib_1.__decorate([
         Directive({
             exportAs: 'kendoButton',
@@ -616,7 +763,7 @@ var ButtonDirective = /** @class */ (function () {
                     useValue: 'kendo.button'
                 }
             ],
-            selector: 'button[kendoButton], span[kendoButton]' // tslint:disable-line
+            selector: 'button[kendoButton], span[kendoButton]',
         }),
         tslib_1.__param(2, Optional()),
         tslib_1.__metadata("design:paramtypes", [ElementRef,

package/dist/es/button/button.service.js

@@ -4,22 +4,18 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 /**
  * @hidden
  */
 var KendoButtonService = /** @class */ (function () {
     function KendoButtonService() {
-        this.buttonLookChange = new BehaviorSubject('default');
         this.buttonClicked = new Subject();
         this.buttonClicked$ = this.buttonClicked.asObservable();
     }
     KendoButtonService.prototype.click = function (button) {
         this.buttonClicked.next(button);
     };
-    KendoButtonService.prototype.setButtonLook = function (look) {
-        this.buttonLookChange.next(look);
-    };
     KendoButtonService = tslib_1.__decorate([
         Injectable()
     ], KendoButtonService);