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

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.
          */
@@ -100,13 +101,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.
          */
@@ -191,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;
@@ -308,20 +365,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;
@@ -420,6 +463,7 @@ var SplitButtonComponent = /** @class */ (function (_super) {
      */
     SplitButtonComponent.prototype.ngAfterViewInit = function () {
         this.updateButtonText();
+        this.handleClasses(this.rounded, 'rounded');
     };
     /**
      * @hidden
@@ -586,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)
@@ -609,7 +663,20 @@ var SplitButtonComponent = /** @class */ (function (_super) {
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
-    ], SplitButtonComponent.prototype, "look", void 0);
+    ], SplitButtonComponent.prototype, "size", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        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)
+    ], SplitButtonComponent.prototype, "fillMode", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "themeColor", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean),
@@ -690,20 +757,10 @@ var SplitButtonComponent = /** @class */ (function (_super) {
         tslib_1.__metadata("design:type", core_1.ViewContainerRef)
     ], SplitButtonComponent.prototype, "containerRef", void 0);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-state-focused'),
+        core_1.HostBinding('class.k-focus'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [Boolean])
     ], SplitButtonComponent.prototype, "isFocused", null);
-    tslib_1.__decorate([
-        core_1.HostBinding('class.k-flat'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], SplitButtonComponent.prototype, "isFlat", null);
-    tslib_1.__decorate([
-        core_1.HostBinding('class.k-outline'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], SplitButtonComponent.prototype, "isOutline", null);
     tslib_1.__decorate([
         core_1.HostBinding('class.k-split-button'),
         core_1.HostBinding('class.k-button-group'),
@@ -747,7 +804,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", [focus_service_1.FocusService,
             navigation_service_1.NavigationService,
@@ -756,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));

package/dist/npm/util.js

@@ -46,3 +46,55 @@ exports.closest = closest;
 exports.replaceMessagePlaceholder = function (message, name, value) {
     return message.replace(new RegExp("{\\s*" + name + "\\s*}", 'g'), value);
 };
+/**
+ * @hidden
+ */
+exports.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
+ */
+exports.getStylingClasses = function (componentType, stylingOption, previousValue, newValue) {
+    switch (stylingOption) {
+        case 'size':
+            return {
+                toRemove: "k-" + componentType + "-" + exports.SIZES[previousValue],
+                toAdd: newValue ? "k-" + componentType + "-" + exports.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
+ */
+exports.getThemeColorClasses = function (componentType, prevFillMode, fillMode, previousValue, newValue) {
+    return {
+        toRemove: "k-" + componentType + "-" + prevFillMode + "-" + previousValue,
+        toAdd: newValue ? "k-" + componentType + "-" + fillMode + "-" + newValue : null
+    };
+};