@progress/kendo-angular-buttons 6.3.1 → 6.4.0

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: 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/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: 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'
 };
@@ -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);
@@ -3045,10 +3115,12 @@ let ChipComponent = class ChipComponent {
          * 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.
          */
@@ -3091,10 +3163,10 @@ let ChipComponent = class ChipComponent {
         return this.selected;
     }
     get outlineClass() {
-        return this.look === 'outlined';
+        return this.look === 'outline' || this.look === 'outlined';
     }
-    get filledClass() {
-        return this.look === 'filled';
+    get solidClass() {
+        return this.look === 'solid' || this.look === 'filled';
     }
     get hasIconClass() {
         return this.icon || this.iconClass ? true : false;
@@ -3198,10 +3270,10 @@ let ChipComponent = class ChipComponent {
     attachElementEventHandlers(chip) {
         this.ngZone.runOutsideAngular(() => {
             const focusListener = this.renderer.listen(chip, 'focus', () => {
-                this.renderer.addClass(chip, 'k-chip-focused');
+                this.renderer.addClass(chip, 'k-focus');
             });
             const blurListener = this.renderer.listen(chip, 'blur', () => {
-                this.renderer.removeClass(chip, 'k-chip-focused');
+                this.renderer.removeClass(chip, 'k-focus');
             });
             const contentClickListener = this.renderer.listen(chip, 'click', (e) => {
                 const isRemoveClicked = closest(e.target, '.k-remove-icon');
@@ -3286,10 +3358,10 @@ __decorate([
     __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),
@@ -3297,17 +3369,17 @@ __decorate([
 ], 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);
@@ -4753,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 };