@progress/kendo-angular-buttons 6.3.2-dev.202110250922 → 6.4.0-dev.202110271458

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

@@ -59,7 +59,7 @@ ListComponent = tslib_1.__decorate([
     Component({
         selector: 'kendo-button-list',
         template: `
-        <ul class="k-list k-reset" unselectable="on">
+        <ul class="k-list k-reset" unselectable="on" role="menu">
             <li role="menuitem" unselectable="on" tabindex="-1"
                 kendoButtonFocusable
                 *ngFor="let dataItem of data; let index = index;"

package/dist/es2015/main.d.ts

@@ -9,6 +9,7 @@ export { ButtonModule } from './button/button.module';
 export { ButtonsModule } from './buttons.module';
 export { SplitButtonComponent, SplitButtonComponent as SplitButton } from './splitbutton/splitbutton.component';
 export { SplitButtonModule } from './splitbutton/splitbutton.module';
+export { SplitButtonCustomMessagesComponent } from './splitbutton/localization/custom-messages.component';
 export { DropDownButtonComponent, DropDownButtonComponent as DropDownButton } from './dropdownbutton/dropdownbutton.component';
 export { DropDownButtonModule } from './dropdownbutton/dropdownbutton.module';
 export { ButtonLook } from './button-look';

package/dist/es2015/main.js

@@ -9,6 +9,7 @@ export { ButtonModule } from './button/button.module';
 export { ButtonsModule } from './buttons.module';
 export { SplitButtonComponent, SplitButtonComponent as SplitButton } from './splitbutton/splitbutton.component';
 export { SplitButtonModule } from './splitbutton/splitbutton.module';
+export { SplitButtonCustomMessagesComponent } from './splitbutton/localization/custom-messages.component';
 export { DropDownButtonComponent, DropDownButtonComponent as DropDownButton } from './dropdownbutton/dropdownbutton.component';
 export { DropDownButtonModule } from './dropdownbutton/dropdownbutton.module';
 export { ChipComponent } from './chip/chip.component';

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635153698,
+    publishDate: 1635346639,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/es2015/splitbutton/localization/custom-messages.component.d.ts

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { Messages } from './messages';
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug rtl_buttons %}).
+ */
+export declare class SplitButtonCustomMessagesComponent extends Messages {
+    protected service: LocalizationService;
+    constructor(service: LocalizationService);
+    protected readonly override: boolean;
+}

package/dist/es2015/splitbutton/localization/custom-messages.component.js

@@ -0,0 +1,36 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+var SplitButtonCustomMessagesComponent_1;
+import { Component, forwardRef } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { Messages } from './messages';
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug rtl_buttons %}).
+ */
+let SplitButtonCustomMessagesComponent = SplitButtonCustomMessagesComponent_1 = class SplitButtonCustomMessagesComponent extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+};
+SplitButtonCustomMessagesComponent = SplitButtonCustomMessagesComponent_1 = tslib_1.__decorate([
+    Component({
+        providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => SplitButtonCustomMessagesComponent_1)
+            }
+        ],
+        selector: 'kendo-splitbutton-messages',
+        template: ``
+    }),
+    tslib_1.__metadata("design:paramtypes", [LocalizationService])
+], SplitButtonCustomMessagesComponent);
+export { SplitButtonCustomMessagesComponent };

package/dist/es2015/splitbutton/localization/localized-messages.directive.d.ts

@@ -0,0 +1,13 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { Messages } from './messages';
+/**
+ * @hidden
+ */
+export declare class LocalizedSplitButtonMessagesDirective extends Messages {
+    protected service: LocalizationService;
+    constructor(service: LocalizationService);
+}

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

@@ -0,0 +1,31 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+var LocalizedSplitButtonMessagesDirective_1;
+import { Directive, forwardRef } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { Messages } from './messages';
+/**
+ * @hidden
+ */
+let LocalizedSplitButtonMessagesDirective = LocalizedSplitButtonMessagesDirective_1 = class LocalizedSplitButtonMessagesDirective extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+};
+LocalizedSplitButtonMessagesDirective = LocalizedSplitButtonMessagesDirective_1 = tslib_1.__decorate([
+    Directive({
+        providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => LocalizedSplitButtonMessagesDirective_1)
+            }
+        ],
+        selector: '[kendoSplitButtonLocalizedMessages]'
+    }),
+    tslib_1.__metadata("design:paramtypes", [LocalizationService])
+], LocalizedSplitButtonMessagesDirective);
+export { LocalizedSplitButtonMessagesDirective };

package/dist/es2015/splitbutton/localization/messages.d.ts

@@ -0,0 +1,32 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ComponentMessages } from '@progress/kendo-angular-l10n';
+/**
+ * @hidden
+ */
+export declare class Messages extends ComponentMessages {
+    /**
+     * The text for the SplitButton aria-label.
+     *
+     * The text for the aria-label consists of a two-part message - the text of the SplitButton and a localizable string.
+     * For a SplitButton with text 'Reply', the default aria-label will be 'Reply splitbutton'.
+     *
+     * To allow reordering of the SplitButton text and the localizable part, the splitButtonLabel accepts a string with a
+     * placeholder for the button text - e.g. 'splitbutton for {buttonText}'. The '{buttonText}' placeholder will be replaced
+     * internally with the current SplitButton text, and the resulting aria-label will be rendered as 'splitbutton for Reply'.
+     *
+     * @example
+     *
+     * ```ts-no-run
+     *      <kendo-splitbutton>
+     *          <kendo-splitbutton-messages
+     *              splitButtonLabel="splitbutton for {buttonText}"
+     *          >
+     *          </kendo-splitbutton-messages>
+     *      </kendo-splitbutton>
+     *  ```
+     */
+    splitButtonLabel: string;
+}

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

@@ -0,0 +1,16 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Input } from '@angular/core';
+import { ComponentMessages } from '@progress/kendo-angular-l10n';
+/**
+ * @hidden
+ */
+export class Messages extends ComponentMessages {
+}
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], Messages.prototype, "splitButtonLabel", void 0);

package/dist/es2015/splitbutton/splitbutton.component.d.ts

@@ -56,6 +56,7 @@ import { ButtonLook } from '../button-look';
 export declare class SplitButtonComponent extends ListButton implements AfterViewInit, OnChanges {
     private popupService;
     private elRef;
+    private localization;
     /**
      * Sets the text of the SplitButton.
      */

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

@@ -16,6 +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';
 const NAVIGATION_SETTINGS = {
     useLeftRightArrows: true
 };
@@ -70,6 +71,7 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
         super(focusService, navigationService, wrapperRef, zone, localization, cdr);
         this.popupService = popupService;
         this.elRef = elRef;
+        this.localization = localization;
         /**
          * Sets the text of the SplitButton.
          */
@@ -289,7 +291,8 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
      * @hidden
      */
     get ariaLabel() {
-        return `${this.buttonText} splitbutton`;
+        const localizationMsg = this.localization.get('splitButtonLabel') || '';
+        return replaceMessagePlaceholder(localizationMsg, 'buttonText', this.buttonText);
     }
     /**
      * @hidden
@@ -674,10 +677,13 @@ SplitButtonComponent = tslib_1.__decorate([
         ],
         selector: 'kendo-splitbutton',
         template: `
+        <ng-container kendoSplitButtonLocalizedMessages
+            i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
+            splitButtonLabel="{{ '{buttonText} splitbutton' }}">
+        </ng-container>
         <button
             kendoButton
             #button
-            role="listbox"
             [type]="type"
             [look]="look"
             [tabindex]="componentTabIndex"

package/dist/es2015/splitbutton/splitbutton.module.js

@@ -9,6 +9,8 @@ import { PopupModule } from '@progress/kendo-angular-popup';
 import { ButtonModule } from './../button/button.module';
 import { ListModule } from './../listbutton/list.module';
 import { SplitButtonComponent } from './splitbutton.component';
+import { LocalizedSplitButtonMessagesDirective } from './localization/localized-messages.directive';
+import { SplitButtonCustomMessagesComponent } from './localization/custom-messages.component';
 /**
  * @hidden
  *
@@ -21,8 +23,8 @@ let SplitButtonModule = class SplitButtonModule {
 };
 SplitButtonModule = tslib_1.__decorate([
     NgModule({
-        declarations: [SplitButtonComponent],
-        exports: [SplitButtonComponent, ListModule],
+        declarations: [SplitButtonComponent, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent],
+        exports: [SplitButtonComponent, ListModule, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent],
         imports: [CommonModule, PopupModule, ButtonModule, ListModule]
     })
 ], SplitButtonModule);

package/dist/es2015/util.d.ts

@@ -14,3 +14,7 @@ export declare const tick: (f: any) => Promise<any>;
  * @hidden
  */
 export declare function closest(element: any, selector: string): any;
+/**
+ * @hidden
+ */
+export declare const replaceMessagePlaceholder: (message: string, name: string, value: string) => string;

package/dist/es2015/util.js

@@ -37,3 +37,7 @@ export function closest(element, selector) {
         node = node.parentNode;
     }
 }
+/**
+ * @hidden
+ */
+export const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);

package/dist/fesm2015/index.js

@@ -3,10 +3,10 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __param } from 'tslib';
-import { Injectable, EventEmitter, Input, Output, HostBinding, HostListener, Directive, Optional, ElementRef, Renderer2, NgZone, isDevMode, ContentChildren, QueryList, Component, NgModule, TemplateRef, ViewContainerRef, InjectionToken, Inject, ContentChild, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { Injectable, EventEmitter, Input, Output, 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';
@@ -43,7 +43,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635153698,
+    publishDate: 1635346639,
     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'
 };
@@ -613,6 +613,10 @@ function closest(element, selector) {
         node = node.parentNode;
     }
 }
+/**
+ * @hidden
+ */
+const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
 
 /**
  * @hidden
@@ -1145,7 +1149,7 @@ ListComponent = __decorate([
     Component({
         selector: 'kendo-button-list',
         template: `
-        <ul class="k-list k-reset" unselectable="on">
+        <ul class="k-list k-reset" unselectable="on" role="menu">
             <li role="menuitem" unselectable="on" tabindex="-1"
                 kendoButtonFocusable
                 *ngFor="let dataItem of data; let index = index;"
@@ -1719,6 +1723,7 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
         super(focusService, navigationService, wrapperRef, zone, localization, cdr);
         this.popupService = popupService;
         this.elRef = elRef;
+        this.localization = localization;
         /**
          * Sets the text of the SplitButton.
          */
@@ -1938,7 +1943,8 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
      * @hidden
      */
     get ariaLabel() {
-        return `${this.buttonText} splitbutton`;
+        const localizationMsg = this.localization.get('splitButtonLabel') || '';
+        return replaceMessagePlaceholder(localizationMsg, 'buttonText', this.buttonText);
     }
     /**
      * @hidden
@@ -2323,10 +2329,13 @@ SplitButtonComponent = __decorate([
         ],
         selector: 'kendo-splitbutton',
         template: `
+        <ng-container kendoSplitButtonLocalizedMessages
+            i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
+            splitButtonLabel="{{ '{buttonText} splitbutton' }}">
+        </ng-container>
         <button
             kendoButton
             #button
-            role="listbox"
             [type]="type"
             [look]="look"
             [tabindex]="componentTabIndex"
@@ -2390,6 +2399,67 @@ SplitButtonComponent = __decorate([
         ChangeDetectorRef])
 ], SplitButtonComponent);
 
+/**
+ * @hidden
+ */
+class Messages extends ComponentMessages {
+}
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "splitButtonLabel", void 0);
+
+var LocalizedSplitButtonMessagesDirective_1;
+/**
+ * @hidden
+ */
+let LocalizedSplitButtonMessagesDirective = LocalizedSplitButtonMessagesDirective_1 = class LocalizedSplitButtonMessagesDirective extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+};
+LocalizedSplitButtonMessagesDirective = LocalizedSplitButtonMessagesDirective_1 = __decorate([
+    Directive({
+        providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => LocalizedSplitButtonMessagesDirective_1)
+            }
+        ],
+        selector: '[kendoSplitButtonLocalizedMessages]'
+    }),
+    __metadata("design:paramtypes", [LocalizationService])
+], LocalizedSplitButtonMessagesDirective);
+
+var SplitButtonCustomMessagesComponent_1;
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug rtl_buttons %}).
+ */
+let SplitButtonCustomMessagesComponent = SplitButtonCustomMessagesComponent_1 = class SplitButtonCustomMessagesComponent extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+};
+SplitButtonCustomMessagesComponent = SplitButtonCustomMessagesComponent_1 = __decorate([
+    Component({
+        providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => SplitButtonCustomMessagesComponent_1)
+            }
+        ],
+        selector: 'kendo-splitbutton-messages',
+        template: ``
+    }),
+    __metadata("design:paramtypes", [LocalizationService])
+], SplitButtonCustomMessagesComponent);
+
 /**
  * @hidden
  *
@@ -2402,8 +2472,8 @@ let SplitButtonModule = class SplitButtonModule {
 };
 SplitButtonModule = __decorate([
     NgModule({
-        declarations: [SplitButtonComponent],
-        exports: [SplitButtonComponent, ListModule],
+        declarations: [SplitButtonComponent, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent],
+        exports: [SplitButtonComponent, ListModule, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent],
         imports: [CommonModule, PopupModule, ButtonModule, ListModule]
     })
 ], SplitButtonModule);
@@ -4755,4 +4825,4 @@ ButtonsModule = __decorate([
  * 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/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: 1635153698,
+    publishDate: 1635346639,
     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);
@@ -5034,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/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