@progress/kendo-angular-buttons 6.3.1 → 6.4.0

package/dist/fesm5/index.js

@@ -3,10 +3,10 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __param, __extends } from 'tslib';
-import { Injectable, Input, Output, EventEmitter, HostBinding, HostListener, Directive, Optional, ElementRef, Renderer2, NgZone, isDevMode, ContentChildren, QueryList, Component, NgModule, TemplateRef, ViewContainerRef, InjectionToken, Inject, ContentChild, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { Injectable, Input, Output, EventEmitter, HostBinding, HostListener, Directive, Optional, ElementRef, Renderer2, NgZone, isDevMode, ContentChildren, QueryList, Component, NgModule, TemplateRef, ViewContainerRef, InjectionToken, Inject, ContentChild, ViewChild, ChangeDetectorRef, forwardRef } from '@angular/core';
 import { BehaviorSubject, Subject, fromEvent, merge, Subscription } from 'rxjs';
 import { Keys, isChanged, isDocumentAvailable, hasObservers, guid, EventsModule } from '@progress/kendo-angular-common';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { filter, take } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import { CommonModule } from '@angular/common';
@@ -41,7 +41,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1632813704,
+    publishDate: 1635407170,
     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'
 };
@@ -699,6 +699,12 @@ function closest(element, selector) {
         node = node.parentNode;
     }
 }
+/**
+ * @hidden
+ */
+var replaceMessagePlaceholder = function (message, name, value) {
+    return message.replace(new RegExp("{\\s*" + name + "\\s*}", 'g'), value);
+};
 
 /**
  * @hidden
@@ -1290,7 +1296,7 @@ var ListComponent = /** @class */ (function () {
     ListComponent = __decorate([
         Component({
             selector: 'kendo-button-list',
-            template: "\n        <ul class=\"k-list k-reset\" unselectable=\"on\">\n            <li role=\"menuitem\" unselectable=\"on\" tabindex=\"-1\"\n                kendoButtonFocusable\n                *ngFor=\"let dataItem of data; let index = index;\"\n                [index]=\"index\"\n                [ngClass]=\"{'k-item': true, 'k-state-disabled': dataItem.disabled}\"\n                (click)=\"onClick(index)\"\n                (blur)=\"onBlur()\"\n                [attr.aria-disabled]=\"dataItem.disabled ? true : false\">\n                <ng-template *ngIf=\"itemTemplate?.templateRef\"\n                    [templateContext]=\"{\n                        templateRef: itemTemplate?.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!itemTemplate?.templateRef\">\n                    <span\n                        *ngIf=\"dataItem.icon || dataItem.iconClass\"\n                        [ngClass]=\"getIconClasses(dataItem)\"\n                    ></span>\n                    <img\n                        *ngIf=\"dataItem.imageUrl\"\n                        class=\"k-image\"\n                        [src]=\"dataItem.imageUrl\"\n                        alt=\"\"\n                    >\n                    {{ getText(dataItem) }}\n                </ng-template>\n            </li>\n        </ul>\n      "
+            template: "\n        <ul class=\"k-list k-reset\" unselectable=\"on\" role=\"menu\">\n            <li role=\"menuitem\" unselectable=\"on\" tabindex=\"-1\"\n                kendoButtonFocusable\n                *ngFor=\"let dataItem of data; let index = index;\"\n                [index]=\"index\"\n                [ngClass]=\"{'k-item': true, 'k-state-disabled': dataItem.disabled}\"\n                (click)=\"onClick(index)\"\n                (blur)=\"onBlur()\"\n                [attr.aria-disabled]=\"dataItem.disabled ? true : false\">\n                <ng-template *ngIf=\"itemTemplate?.templateRef\"\n                    [templateContext]=\"{\n                        templateRef: itemTemplate?.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!itemTemplate?.templateRef\">\n                    <span\n                        *ngIf=\"dataItem.icon || dataItem.iconClass\"\n                        [ngClass]=\"getIconClasses(dataItem)\"\n                    ></span>\n                    <img\n                        *ngIf=\"dataItem.imageUrl\"\n                        class=\"k-image\"\n                        [src]=\"dataItem.imageUrl\"\n                        alt=\"\"\n                    >\n                    {{ getText(dataItem) }}\n                </ng-template>\n            </li>\n        </ul>\n      "
         }),
         __metadata("design:paramtypes", [])
     ], ListComponent);
@@ -1869,6 +1875,7 @@ var SplitButtonComponent = /** @class */ (function (_super) {
         var _this = _super.call(this, focusService, navigationService, wrapperRef, zone, localization, cdr) || this;
         _this.popupService = popupService;
         _this.elRef = elRef;
+        _this.localization = localization;
         /**
          * Sets the text of the SplitButton.
          */
@@ -2134,7 +2141,8 @@ var SplitButtonComponent = /** @class */ (function (_super) {
          * @hidden
          */
         get: function () {
-            return this.buttonText + " splitbutton";
+            var localizationMsg = this.localization.get('splitButtonLabel') || '';
+            return replaceMessagePlaceholder(localizationMsg, 'buttonText', this.buttonText);
         },
         enumerable: true,
         configurable: true
@@ -2539,7 +2547,7 @@ var SplitButtonComponent = /** @class */ (function (_super) {
                 }
             ],
             selector: 'kendo-splitbutton',
-            template: "\n        <button\n            kendoButton\n            #button\n            role=\"listbox\"\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            [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    "
         }),
         __metadata("design:paramtypes", [FocusService,
             NavigationService,
@@ -2553,6 +2561,84 @@ var SplitButtonComponent = /** @class */ (function (_super) {
     return SplitButtonComponent;
 }(ListButton));
 
+/**
+ * @hidden
+ */
+var Messages = /** @class */ (function (_super) {
+    __extends(Messages, _super);
+    function Messages() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "splitButtonLabel", void 0);
+    return Messages;
+}(ComponentMessages));
+
+/**
+ * @hidden
+ */
+var LocalizedSplitButtonMessagesDirective = /** @class */ (function (_super) {
+    __extends(LocalizedSplitButtonMessagesDirective, _super);
+    function LocalizedSplitButtonMessagesDirective(service) {
+        var _this = _super.call(this) || this;
+        _this.service = service;
+        return _this;
+    }
+    LocalizedSplitButtonMessagesDirective_1 = LocalizedSplitButtonMessagesDirective;
+    var LocalizedSplitButtonMessagesDirective_1;
+    LocalizedSplitButtonMessagesDirective = LocalizedSplitButtonMessagesDirective_1 = __decorate([
+        Directive({
+            providers: [
+                {
+                    provide: Messages,
+                    useExisting: forwardRef(function () { return LocalizedSplitButtonMessagesDirective_1; })
+                }
+            ],
+            selector: '[kendoSplitButtonLocalizedMessages]'
+        }),
+        __metadata("design:paramtypes", [LocalizationService])
+    ], LocalizedSplitButtonMessagesDirective);
+    return LocalizedSplitButtonMessagesDirective;
+}(Messages));
+
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug rtl_buttons %}).
+ */
+var SplitButtonCustomMessagesComponent = /** @class */ (function (_super) {
+    __extends(SplitButtonCustomMessagesComponent, _super);
+    function SplitButtonCustomMessagesComponent(service) {
+        var _this = _super.call(this) || this;
+        _this.service = service;
+        return _this;
+    }
+    SplitButtonCustomMessagesComponent_1 = SplitButtonCustomMessagesComponent;
+    Object.defineProperty(SplitButtonCustomMessagesComponent.prototype, "override", {
+        get: function () {
+            return true;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    var SplitButtonCustomMessagesComponent_1;
+    SplitButtonCustomMessagesComponent = SplitButtonCustomMessagesComponent_1 = __decorate([
+        Component({
+            providers: [
+                {
+                    provide: Messages,
+                    useExisting: forwardRef(function () { return SplitButtonCustomMessagesComponent_1; })
+                }
+            ],
+            selector: 'kendo-splitbutton-messages',
+            template: ""
+        }),
+        __metadata("design:paramtypes", [LocalizationService])
+    ], SplitButtonCustomMessagesComponent);
+    return SplitButtonCustomMessagesComponent;
+}(Messages));
+
 /**
  * @hidden
  *
@@ -2566,8 +2652,8 @@ var SplitButtonModule = /** @class */ (function () {
     }
     SplitButtonModule = __decorate([
         NgModule({
-            declarations: [SplitButtonComponent],
-            exports: [SplitButtonComponent, ListModule],
+            declarations: [SplitButtonComponent, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent],
+            exports: [SplitButtonComponent, ListModule, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent],
             imports: [CommonModule, PopupModule, ButtonModule, ListModule]
         })
     ], SplitButtonModule);
@@ -3240,10 +3326,12 @@ var ChipComponent = /** @class */ (function () {
          * Changes the visual appearance by using alternative styling options.
          *
          * The available values are:
-         * * `filled`
-         * * `outlined`
+         * * `solid`
+         * * `outline`
+         * * `filled` (The `filled` option will be deprecated. To apply identical styling, use `solid` instead).
+         * * `outlined` (The `outlined` option will be deprecated. To apply identical styling, use `outline` instead).
          */
-        this.look = 'filled';
+        this.look = 'solid';
         /**
          * Specifies the selected state of the Chip.
          */
@@ -3291,14 +3379,14 @@ var ChipComponent = /** @class */ (function () {
     });
     Object.defineProperty(ChipComponent.prototype, "outlineClass", {
         get: function () {
-            return this.look === 'outlined';
+            return this.look === 'outline' || this.look === 'outlined';
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ChipComponent.prototype, "filledClass", {
+    Object.defineProperty(ChipComponent.prototype, "solidClass", {
         get: function () {
-            return this.look === 'filled';
+            return this.look === 'solid' || this.look === 'filled';
         },
         enumerable: true,
         configurable: true
@@ -3438,10 +3526,10 @@ var ChipComponent = /** @class */ (function () {
         var _this = this;
         this.ngZone.runOutsideAngular(function () {
             var focusListener = _this.renderer.listen(chip, 'focus', function () {
-                _this.renderer.addClass(chip, 'k-chip-focused');
+                _this.renderer.addClass(chip, 'k-focus');
             });
             var blurListener = _this.renderer.listen(chip, 'blur', function () {
-                _this.renderer.removeClass(chip, 'k-chip-focused');
+                _this.renderer.removeClass(chip, 'k-focus');
             });
             var contentClickListener = _this.renderer.listen(chip, 'click', function (e) {
                 var isRemoveClicked = closest(e.target, '.k-remove-icon');
@@ -3525,10 +3613,10 @@ var ChipComponent = /** @class */ (function () {
         __metadata("design:paramtypes", [])
     ], ChipComponent.prototype, "outlineClass", null);
     __decorate([
-        HostBinding('class.k-chip-filled'),
+        HostBinding('class.k-chip-solid'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
-    ], ChipComponent.prototype, "filledClass", null);
+    ], ChipComponent.prototype, "solidClass", null);
     __decorate([
         HostBinding('class.k-chip-has-icon'),
         __metadata("design:type", Boolean),
@@ -3536,17 +3624,17 @@ var ChipComponent = /** @class */ (function () {
     ], ChipComponent.prototype, "hasIconClass", null);
     __decorate([
         HostBinding('attr.aria-disabled'),
-        HostBinding('class.k-chip-disabled'),
+        HostBinding('class.k-disabled'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], ChipComponent.prototype, "disabledClass", null);
     __decorate([
-        HostBinding('class.k-chip-selected'),
+        HostBinding('class.k-selected'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], ChipComponent.prototype, "selectedClass", null);
     __decorate([
-        HostBinding('class.k-chip-focused'),
+        HostBinding('class.k-focus'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], ChipComponent.prototype, "focusedClass", null);
@@ -5032,4 +5120,4 @@ var ButtonsModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { KendoButtonService, DialItemComponent, DialListComponent, FocusService, FocusableDirective, ButtonItemTemplateDirective, ListButton, ListComponent, ListModule, TemplateContextDirective, NAVIGATION_CONFIG, NavigationService, ButtonDirective, ButtonDirective as Button, ButtonGroupComponent, ButtonGroupComponent as ButtonGroup, ButtonGroupModule, ButtonModule, ButtonsModule, SplitButtonComponent, SplitButtonComponent as SplitButton, SplitButtonModule, DropDownButtonComponent, DropDownButtonComponent as DropDownButton, DropDownButtonModule, ChipComponent, ChipListComponent, ChipModule, FloatingActionButtonModule, FloatingActionButtonComponent, FloatingActionButtonTemplateDirective, DialItemTemplateDirective };
+export { KendoButtonService, DialItemComponent, DialListComponent, FocusService, FocusableDirective, ButtonItemTemplateDirective, ListButton, ListComponent, ListModule, TemplateContextDirective, NAVIGATION_CONFIG, NavigationService, LocalizedSplitButtonMessagesDirective, Messages, ButtonDirective, ButtonDirective as Button, ButtonGroupComponent, ButtonGroupComponent as ButtonGroup, ButtonGroupModule, ButtonModule, ButtonsModule, SplitButtonComponent, SplitButtonComponent as SplitButton, SplitButtonModule, SplitButtonCustomMessagesComponent, DropDownButtonComponent, DropDownButtonComponent as DropDownButton, DropDownButtonModule, ChipComponent, ChipListComponent, ChipModule, FloatingActionButtonModule, FloatingActionButtonComponent, FloatingActionButtonTemplateDirective, DialItemTemplateDirective };

package/dist/npm/chip/chip.component.js

@@ -24,10 +24,12 @@ var ChipComponent = /** @class */ (function () {
          * Changes the visual appearance by using alternative styling options.
          *
          * The available values are:
-         * * `filled`
-         * * `outlined`
+         * * `solid`
+         * * `outline`
+         * * `filled` (The `filled` option will be deprecated. To apply identical styling, use `solid` instead).
+         * * `outlined` (The `outlined` option will be deprecated. To apply identical styling, use `outline` instead).
          */
-        this.look = 'filled';
+        this.look = 'solid';
         /**
          * Specifies the selected state of the Chip.
          */
@@ -75,14 +77,14 @@ var ChipComponent = /** @class */ (function () {
     });
     Object.defineProperty(ChipComponent.prototype, "outlineClass", {
         get: function () {
-            return this.look === 'outlined';
+            return this.look === 'outline' || this.look === 'outlined';
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ChipComponent.prototype, "filledClass", {
+    Object.defineProperty(ChipComponent.prototype, "solidClass", {
         get: function () {
-            return this.look === 'filled';
+            return this.look === 'solid' || this.look === 'filled';
         },
         enumerable: true,
         configurable: true
@@ -222,10 +224,10 @@ var ChipComponent = /** @class */ (function () {
         var _this = this;
         this.ngZone.runOutsideAngular(function () {
             var focusListener = _this.renderer.listen(chip, 'focus', function () {
-                _this.renderer.addClass(chip, 'k-chip-focused');
+                _this.renderer.addClass(chip, 'k-focus');
             });
             var blurListener = _this.renderer.listen(chip, 'blur', function () {
-                _this.renderer.removeClass(chip, 'k-chip-focused');
+                _this.renderer.removeClass(chip, 'k-focus');
             });
             var contentClickListener = _this.renderer.listen(chip, 'click', function (e) {
                 var isRemoveClicked = util_1.closest(e.target, '.k-remove-icon');
@@ -309,10 +311,10 @@ var ChipComponent = /** @class */ (function () {
         tslib_1.__metadata("design:paramtypes", [])
     ], ChipComponent.prototype, "outlineClass", null);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-chip-filled'),
+        core_1.HostBinding('class.k-chip-solid'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
-    ], ChipComponent.prototype, "filledClass", null);
+    ], ChipComponent.prototype, "solidClass", null);
     tslib_1.__decorate([
         core_1.HostBinding('class.k-chip-has-icon'),
         tslib_1.__metadata("design:type", Boolean),
@@ -320,17 +322,17 @@ var ChipComponent = /** @class */ (function () {
     ], ChipComponent.prototype, "hasIconClass", null);
     tslib_1.__decorate([
         core_1.HostBinding('attr.aria-disabled'),
-        core_1.HostBinding('class.k-chip-disabled'),
+        core_1.HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], ChipComponent.prototype, "disabledClass", null);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-chip-selected'),
+        core_1.HostBinding('class.k-selected'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], ChipComponent.prototype, "selectedClass", null);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-chip-focused'),
+        core_1.HostBinding('class.k-focus'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], ChipComponent.prototype, "focusedClass", null);

package/dist/npm/index.js

@@ -33,3 +33,7 @@ var navigation_config_1 = require("./navigation/navigation-config");
 exports.NAVIGATION_CONFIG = navigation_config_1.NAVIGATION_CONFIG
 var navigation_service_1 = require("./navigation/navigation.service");
 exports.NavigationService = navigation_service_1.NavigationService
+var localized_messages_directive_1 = require("./splitbutton/localization/localized-messages.directive");
+exports.LocalizedSplitButtonMessagesDirective = localized_messages_directive_1.LocalizedSplitButtonMessagesDirective
+var messages_1 = require("./splitbutton/localization/messages");
+exports.Messages = messages_1.Messages

package/dist/npm/listbutton/list.component.js

@@ -59,7 +59,7 @@ var ListComponent = /** @class */ (function () {
     ListComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-button-list',
-            template: "\n        <ul class=\"k-list k-reset\" unselectable=\"on\">\n            <li role=\"menuitem\" unselectable=\"on\" tabindex=\"-1\"\n                kendoButtonFocusable\n                *ngFor=\"let dataItem of data; let index = index;\"\n                [index]=\"index\"\n                [ngClass]=\"{'k-item': true, 'k-state-disabled': dataItem.disabled}\"\n                (click)=\"onClick(index)\"\n                (blur)=\"onBlur()\"\n                [attr.aria-disabled]=\"dataItem.disabled ? true : false\">\n                <ng-template *ngIf=\"itemTemplate?.templateRef\"\n                    [templateContext]=\"{\n                        templateRef: itemTemplate?.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!itemTemplate?.templateRef\">\n                    <span\n                        *ngIf=\"dataItem.icon || dataItem.iconClass\"\n                        [ngClass]=\"getIconClasses(dataItem)\"\n                    ></span>\n                    <img\n                        *ngIf=\"dataItem.imageUrl\"\n                        class=\"k-image\"\n                        [src]=\"dataItem.imageUrl\"\n                        alt=\"\"\n                    >\n                    {{ getText(dataItem) }}\n                </ng-template>\n            </li>\n        </ul>\n      "
+            template: "\n        <ul class=\"k-list k-reset\" unselectable=\"on\" role=\"menu\">\n            <li role=\"menuitem\" unselectable=\"on\" tabindex=\"-1\"\n                kendoButtonFocusable\n                *ngFor=\"let dataItem of data; let index = index;\"\n                [index]=\"index\"\n                [ngClass]=\"{'k-item': true, 'k-state-disabled': dataItem.disabled}\"\n                (click)=\"onClick(index)\"\n                (blur)=\"onBlur()\"\n                [attr.aria-disabled]=\"dataItem.disabled ? true : false\">\n                <ng-template *ngIf=\"itemTemplate?.templateRef\"\n                    [templateContext]=\"{\n                        templateRef: itemTemplate?.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!itemTemplate?.templateRef\">\n                    <span\n                        *ngIf=\"dataItem.icon || dataItem.iconClass\"\n                        [ngClass]=\"getIconClasses(dataItem)\"\n                    ></span>\n                    <img\n                        *ngIf=\"dataItem.imageUrl\"\n                        class=\"k-image\"\n                        [src]=\"dataItem.imageUrl\"\n                        alt=\"\"\n                    >\n                    {{ getText(dataItem) }}\n                </ng-template>\n            </li>\n        </ul>\n      "
         }),
         tslib_1.__metadata("design:paramtypes", [])
     ], ListComponent);

package/dist/npm/main.js

@@ -21,6 +21,8 @@ exports.SplitButtonComponent = splitbutton_component_1.SplitButtonComponent;
 exports.SplitButton = splitbutton_component_1.SplitButtonComponent;
 var splitbutton_module_1 = require("./splitbutton/splitbutton.module");
 exports.SplitButtonModule = splitbutton_module_1.SplitButtonModule;
+var custom_messages_component_1 = require("./splitbutton/localization/custom-messages.component");
+exports.SplitButtonCustomMessagesComponent = custom_messages_component_1.SplitButtonCustomMessagesComponent;
 var dropdownbutton_component_1 = require("./dropdownbutton/dropdownbutton.component");
 exports.DropDownButtonComponent = dropdownbutton_component_1.DropDownButtonComponent;
 exports.DropDownButton = dropdownbutton_component_1.DropDownButtonComponent;

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: 1632813704,
+    publishDate: 1635407170,
     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/localization/custom-messages.component.js

@@ -0,0 +1,46 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var core_1 = require("@angular/core");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var messages_1 = require("./messages");
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug rtl_buttons %}).
+ */
+var SplitButtonCustomMessagesComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(SplitButtonCustomMessagesComponent, _super);
+    function SplitButtonCustomMessagesComponent(service) {
+        var _this = _super.call(this) || this;
+        _this.service = service;
+        return _this;
+    }
+    SplitButtonCustomMessagesComponent_1 = SplitButtonCustomMessagesComponent;
+    Object.defineProperty(SplitButtonCustomMessagesComponent.prototype, "override", {
+        get: function () {
+            return true;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    var SplitButtonCustomMessagesComponent_1;
+    SplitButtonCustomMessagesComponent = SplitButtonCustomMessagesComponent_1 = tslib_1.__decorate([
+        core_1.Component({
+            providers: [
+                {
+                    provide: messages_1.Messages,
+                    useExisting: core_1.forwardRef(function () { return SplitButtonCustomMessagesComponent_1; })
+                }
+            ],
+            selector: 'kendo-splitbutton-messages',
+            template: ""
+        }),
+        tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
+    ], SplitButtonCustomMessagesComponent);
+    return SplitButtonCustomMessagesComponent;
+}(messages_1.Messages));
+exports.SplitButtonCustomMessagesComponent = SplitButtonCustomMessagesComponent;

package/dist/npm/splitbutton/localization/localized-messages.directive.js

@@ -0,0 +1,37 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var core_1 = require("@angular/core");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var messages_1 = require("./messages");
+/**
+ * @hidden
+ */
+var LocalizedSplitButtonMessagesDirective = /** @class */ (function (_super) {
+    tslib_1.__extends(LocalizedSplitButtonMessagesDirective, _super);
+    function LocalizedSplitButtonMessagesDirective(service) {
+        var _this = _super.call(this) || this;
+        _this.service = service;
+        return _this;
+    }
+    LocalizedSplitButtonMessagesDirective_1 = LocalizedSplitButtonMessagesDirective;
+    var LocalizedSplitButtonMessagesDirective_1;
+    LocalizedSplitButtonMessagesDirective = LocalizedSplitButtonMessagesDirective_1 = tslib_1.__decorate([
+        core_1.Directive({
+            providers: [
+                {
+                    provide: messages_1.Messages,
+                    useExisting: core_1.forwardRef(function () { return LocalizedSplitButtonMessagesDirective_1; })
+                }
+            ],
+            selector: '[kendoSplitButtonLocalizedMessages]'
+        }),
+        tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
+    ], LocalizedSplitButtonMessagesDirective);
+    return LocalizedSplitButtonMessagesDirective;
+}(messages_1.Messages));
+exports.LocalizedSplitButtonMessagesDirective = LocalizedSplitButtonMessagesDirective;

package/dist/npm/splitbutton/localization/messages.js

@@ -0,0 +1,24 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var core_1 = require("@angular/core");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+/**
+ * @hidden
+ */
+var Messages = /** @class */ (function (_super) {
+    tslib_1.__extends(Messages, _super);
+    function Messages() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "splitButtonLabel", void 0);
+    return Messages;
+}(kendo_angular_l10n_1.ComponentMessages));
+exports.Messages = Messages;

package/dist/npm/splitbutton/splitbutton.component.js

@@ -18,6 +18,7 @@ var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var util_1 = require("./../util");
 var preventable_event_1 = require("../preventable-event");
 var kendo_angular_common_2 = require("@progress/kendo-angular-common");
+var util_2 = require("../util");
 var NAVIGATION_SETTINGS = {
     useLeftRightArrows: true
 };
@@ -74,6 +75,7 @@ var SplitButtonComponent = /** @class */ (function (_super) {
         var _this = _super.call(this, focusService, navigationService, wrapperRef, zone, localization, cdr) || this;
         _this.popupService = popupService;
         _this.elRef = elRef;
+        _this.localization = localization;
         /**
          * Sets the text of the SplitButton.
          */
@@ -339,7 +341,8 @@ var SplitButtonComponent = /** @class */ (function (_super) {
          * @hidden
          */
         get: function () {
-            return this.buttonText + " splitbutton";
+            var localizationMsg = this.localization.get('splitButtonLabel') || '';
+            return util_2.replaceMessagePlaceholder(localizationMsg, 'buttonText', this.buttonText);
         },
         enumerable: true,
         configurable: true
@@ -744,7 +747,7 @@ var SplitButtonComponent = /** @class */ (function (_super) {
                 }
             ],
             selector: 'kendo-splitbutton',
-            template: "\n        <button\n            kendoButton\n            #button\n            role=\"listbox\"\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            [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    "
         }),
         tslib_1.__metadata("design:paramtypes", [focus_service_1.FocusService,
             navigation_service_1.NavigationService,

package/dist/npm/splitbutton/splitbutton.module.js

@@ -11,6 +11,8 @@ var kendo_angular_popup_1 = require("@progress/kendo-angular-popup");
 var button_module_1 = require("./../button/button.module");
 var list_module_1 = require("./../listbutton/list.module");
 var splitbutton_component_1 = require("./splitbutton.component");
+var localized_messages_directive_1 = require("./localization/localized-messages.directive");
+var custom_messages_component_1 = require("./localization/custom-messages.component");
 /**
  * @hidden
  *
@@ -24,8 +26,8 @@ var SplitButtonModule = /** @class */ (function () {
     }
     SplitButtonModule = tslib_1.__decorate([
         core_1.NgModule({
-            declarations: [splitbutton_component_1.SplitButtonComponent],
-            exports: [splitbutton_component_1.SplitButtonComponent, list_module_1.ListModule],
+            declarations: [splitbutton_component_1.SplitButtonComponent, localized_messages_directive_1.LocalizedSplitButtonMessagesDirective, custom_messages_component_1.SplitButtonCustomMessagesComponent],
+            exports: [splitbutton_component_1.SplitButtonComponent, list_module_1.ListModule, localized_messages_directive_1.LocalizedSplitButtonMessagesDirective, custom_messages_component_1.SplitButtonCustomMessagesComponent],
             imports: [common_1.CommonModule, kendo_angular_popup_1.PopupModule, button_module_1.ButtonModule, list_module_1.ListModule]
         })
     ], SplitButtonModule);

package/dist/npm/util.js

@@ -40,3 +40,9 @@ function closest(element, selector) {
     }
 }
 exports.closest = closest;
+/**
+ * @hidden
+ */
+exports.replaceMessagePlaceholder = function (message, name, value) {
+    return message.replace(new RegExp("{\\s*" + name + "\\s*}", 'g'), value);
+};