@progress/kendo-angular-buttons 6.4.0 → 7.0.0-next.202111120840

package/{dist/es2015 → esm2015}/dropdownbutton/dropdownbutton.component.js

@@ -2,28 +2,32 @@
 * 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";
-/* tslint:disable:no-access-missing-member */
-import { Component, ContentChild, TemplateRef, ViewChild, ViewContainerRef, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, NgZone, ChangeDetectorRef } from '@angular/core';
+/* eslint-disable no-access-missing-member */
+import { Component, ContentChild, ViewChild, ViewContainerRef, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { PopupService } from '@progress/kendo-angular-popup';
 import { isDocumentAvailable, guid, Keys, isChanged } from '@progress/kendo-angular-common';
 import { ButtonItemTemplateDirective } from '../listbutton/button-item-template.directive';
 import { isPresent, tick } from '../util';
 import { ListButton } from '../listbutton/list-button';
-import { ListComponent } from '../listbutton/list.component';
 import { FocusService } from '../focusable/focus.service';
 import { NavigationService } from '../navigation/navigation.service';
 import { NAVIGATION_CONFIG } from '../navigation/navigation-config';
 import { PreventableEvent } from '../preventable-event';
 import { merge } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "../focusable/focus.service";
+import * as i2 from "../navigation/navigation.service";
+import * as i3 from "@progress/kendo-angular-popup";
+import * as i4 from "@progress/kendo-angular-l10n";
+import * as i5 from "../listbutton/list.component";
+import * as i6 from "../button/button.directive";
+import * as i7 from "@angular/common";
 const NAVIGATION_SETTINGS = {
     useLeftRightArrows: true
 };
-const ɵ0 = NAVIGATION_SETTINGS;
 const NAVIGATION_SETTINGS_PROVIDER = {
     provide: NAVIGATION_CONFIG,
-    useValue: ɵ0
+    useValue: NAVIGATION_SETTINGS
 };
 /**
  * Represents the Kendo UI DropDownButton component for Angular.
@@ -53,7 +57,7 @@ const NAVIGATION_SETTINGS_PROVIDER = {
  * }
  * ```
  */
-let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
+export class DropDownButtonComponent extends ListButton {
     constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr) {
         super(focusService, navigationService, wrapperRef, zone, localization, cdr);
         this.popupService = popupService;
@@ -103,11 +107,11 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
         /**
          * Fires each time the DropDownButton gets focused.
          */
-        this.onFocus = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onFocus = new EventEmitter(); //eslint-disable-line no-output-rename
         /**
          * Fires each time the DropDownButton gets blurred.
          */
-        this.onBlur = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onBlur = new EventEmitter(); //eslint-disable-line no-output-rename
         this.listId = guid();
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
@@ -415,164 +419,73 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
             this.popupRef = null;
         }
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DropDownButtonComponent.prototype, "icon", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DropDownButtonComponent.prototype, "iconClass", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DropDownButtonComponent.prototype, "imageUrl", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], DropDownButtonComponent.prototype, "popupSettings", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DropDownButtonComponent.prototype, "textField", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [Boolean])
-], DropDownButtonComponent.prototype, "disabled", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], DropDownButtonComponent.prototype, "data", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DropDownButtonComponent.prototype, "primary", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DropDownButtonComponent.prototype, "look", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], DropDownButtonComponent.prototype, "buttonClass", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], DropDownButtonComponent.prototype, "tabIndex", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], DropDownButtonComponent.prototype, "itemClick", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], DropDownButtonComponent.prototype, "open", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], DropDownButtonComponent.prototype, "close", void 0);
-tslib_1.__decorate([
-    Output('focus'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], DropDownButtonComponent.prototype, "onFocus", void 0);
-tslib_1.__decorate([
-    Output('blur'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], DropDownButtonComponent.prototype, "onBlur", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-state-focused'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], DropDownButtonComponent.prototype, "focused", null);
-tslib_1.__decorate([
-    HostBinding('class.k-flat'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], DropDownButtonComponent.prototype, "isFlat", null);
-tslib_1.__decorate([
-    HostBinding('class.k-outline'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], DropDownButtonComponent.prototype, "isOutline", null);
-tslib_1.__decorate([
-    HostBinding('class.k-dropdown-button'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], DropDownButtonComponent.prototype, "widgetClasses", null);
-tslib_1.__decorate([
-    HostBinding('attr.dir'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], DropDownButtonComponent.prototype, "dir", null);
-tslib_1.__decorate([
-    ContentChild(ButtonItemTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", ButtonItemTemplateDirective)
-], DropDownButtonComponent.prototype, "itemTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('button', { static: true }),
-    tslib_1.__metadata("design:type", ElementRef)
-], DropDownButtonComponent.prototype, "button", void 0);
-tslib_1.__decorate([
-    ViewChild('buttonList', { static: false }),
-    tslib_1.__metadata("design:type", ListComponent)
-], DropDownButtonComponent.prototype, "buttonList", void 0);
-tslib_1.__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    tslib_1.__metadata("design:type", TemplateRef)
-], DropDownButtonComponent.prototype, "popupTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('container', { read: ViewContainerRef, static: true }),
-    tslib_1.__metadata("design:type", ViewContainerRef)
-], DropDownButtonComponent.prototype, "container", void 0);
-tslib_1.__decorate([
-    HostListener('keydown', ['$event']),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Object]),
-    tslib_1.__metadata("design:returntype", void 0)
-], DropDownButtonComponent.prototype, "keydown", null);
-tslib_1.__decorate([
-    HostListener('keypress', ['$event']),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Object]),
-    tslib_1.__metadata("design:returntype", void 0)
-], DropDownButtonComponent.prototype, "keypress", null);
-tslib_1.__decorate([
-    HostListener('keyup', ['$event']),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Object]),
-    tslib_1.__metadata("design:returntype", void 0)
-], DropDownButtonComponent.prototype, "keyup", null);
-tslib_1.__decorate([
-    HostListener('mousedown', ['$event']),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Object]),
-    tslib_1.__metadata("design:returntype", void 0)
-], DropDownButtonComponent.prototype, "mousedown", null);
-tslib_1.__decorate([
-    HostListener('mouseup', ['$event']),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Object]),
-    tslib_1.__metadata("design:returntype", void 0)
-], DropDownButtonComponent.prototype, "mouseup", null);
-DropDownButtonComponent = tslib_1.__decorate([
-    Component({
-        exportAs: 'kendoDropDownButton',
-        providers: [
-            FocusService,
-            NavigationService,
-            NAVIGATION_SETTINGS_PROVIDER,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.dropdownbutton'
-            }
-        ],
-        selector: 'kendo-dropdownbutton',
-        template: `
+}
+DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: { icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", textField: "textField", disabled: "disabled", data: "data", primary: "primary", look: "look", buttonClass: "buttonClass", tabIndex: "tabIndex" }, outputs: { itemClick: "itemClick", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-state-focused": "this.focused", "class.k-flat": "this.isFlat", "class.k-outline": "this.isOutline", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+        FocusService,
+        NavigationService,
+        NAVIGATION_SETTINGS_PROVIDER,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.dropdownbutton'
+        }
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoDropDownButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <button kendoButton #button
+            role="menu"
+            type="button"
+            [tabindex]="componentTabIndex"
+            [class.k-state-active]="active"
+            [disabled]="disabled"
+            [icon]="icon"
+            [iconClass]="iconClass"
+            [imageUrl]="imageUrl"
+            [ngClass]="buttonClass"
+            (click)="openPopup()"
+            (focus)="handleFocus()"
+            (blur)="onButtonBlur()"
+            [attr.aria-disabled]="disabled"
+            [attr.aria-expanded]="openState"
+            [attr.aria-haspopup]="true"
+            [attr.aria-owns]="listId"
+            [look]="look"
+            [primary]="primary"
+            >
+            <ng-content></ng-content>
+        </button>
+        <ng-template #popupTemplate>
+            <kendo-button-list
+                #buttonList
+                [id]="listId"
+                [data]="data"
+                [textField]="textField"
+                [itemTemplate]="itemTemplate"
+                (onItemClick)="onItemClick($event)"
+                (keydown)="keyDownHandler($event)"
+                (keypress)="keyPressHandler($event)"
+                (keyup)="keyUpHandler($event)"
+                [attr.dir]="dir"
+            >
+            </kendo-button-list>
+        </ng-template>
+        <ng-container #container></ng-container>
+    `, isInline: true, components: [{ type: i5.ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i6.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "primary", "look", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "role"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DropDownButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoDropDownButton',
+                    providers: [
+                        FocusService,
+                        NavigationService,
+                        NAVIGATION_SETTINGS_PROVIDER,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.dropdownbutton'
+                        }
+                    ],
+                    selector: 'kendo-dropdownbutton',
+                    template: `
         <button kendoButton #button
             role="menu"
             type="button"
@@ -612,15 +525,84 @@ DropDownButtonComponent = tslib_1.__decorate([
         </ng-template>
         <ng-container #container></ng-container>
     `
-    }),
-    tslib_1.__metadata("design:paramtypes", [FocusService,
-        NavigationService,
-        ElementRef,
-        NgZone,
-        PopupService,
-        ElementRef,
-        LocalizationService,
-        ChangeDetectorRef])
-], DropDownButtonComponent);
-export { DropDownButtonComponent };
-export { ɵ0 };
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FocusService }, { type: i2.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i4.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], primary: [{
+                type: Input
+            }], look: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], focused: [{
+                type: HostBinding,
+                args: ['class.k-state-focused']
+            }], isFlat: [{
+                type: HostBinding,
+                args: ['class.k-flat']
+            }], isOutline: [{
+                type: HostBinding,
+                args: ['class.k-outline']
+            }], widgetClasses: [{
+                type: HostBinding,
+                args: ['class.k-dropdown-button']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [ButtonItemTemplateDirective, { static: false }]
+            }], button: [{
+                type: ViewChild,
+                args: ['button', { static: true }]
+            }], buttonList: [{
+                type: ViewChild,
+                args: ['buttonList', { static: false }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }], keydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], keypress: [{
+                type: HostListener,
+                args: ['keypress', ['$event']]
+            }], keyup: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }], mousedown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], mouseup: [{
+                type: HostListener,
+                args: ['mouseup', ['$event']]
+            }] } });

package/esm2015/dropdownbutton/dropdownbutton.module.js

@@ -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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PopupModule } from '@progress/kendo-angular-popup';
+import { ListModule } from '../listbutton/list.module';
+import { ButtonModule } from '../button/button.module';
+import { DropDownButtonComponent } from './dropdownbutton.component';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ *
+ * The exported package module.
+ *
+ * The package exports:
+ * - `DropDownButtonComponent`—The DropDownButtonComponent component class.
+ */
+export class DropDownButtonModule {
+}
+DropDownButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DropDownButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DropDownButtonModule, declarations: [DropDownButtonComponent], imports: [CommonModule, PopupModule, ListModule, ButtonModule], exports: [DropDownButtonComponent, ListModule] });
+DropDownButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DropDownButtonModule, imports: [[CommonModule, PopupModule, ListModule, ButtonModule], ListModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DropDownButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DropDownButtonComponent],
+                    exports: [DropDownButtonComponent, ListModule],
+                    imports: [CommonModule, PopupModule, ListModule, ButtonModule]
+                }]
+        }] });

package/esm2015/floatingactionbutton/dial-item.component.js

@@ -0,0 +1,126 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input } from "@angular/core";
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@angular/common";
+/**
+ * @hidden
+ */
+export class DialItemComponent {
+    constructor(element, renderer, localisationService) {
+        this.element = element;
+        this.renderer = renderer;
+        this.localisationService = localisationService;
+        this.hostClass = true;
+        this.role = 'menuitem';
+    }
+    get disabledClass() {
+        return this.item.disabled;
+    }
+    get title() {
+        const label = this.item.label;
+        return label ? label : this.itemTitle;
+    }
+    get indexAttr() {
+        return this.index;
+    }
+    get iconClasses() {
+        const classes = [];
+        if (this.item.iconClass) {
+            classes.push(`${this.item.iconClass}`);
+        }
+        if (this.item.icon) {
+            classes.push(`k-fab-item-icon k-icon k-i-${this.item.icon}`);
+        }
+        return classes;
+    }
+    get itemTitle() {
+        const icon = this.item.icon;
+        const itemTitle = this.item.itemTitle;
+        return (icon && itemTitle) ? itemTitle : icon;
+    }
+    ngAfterViewInit() {
+        const element = this.element.nativeElement;
+        const rtl = this.localisationService.rtl;
+        const hAlign = this.align.horizontal;
+        this.renderer.addClass(element, this.getTextDirectionClass(rtl, hAlign));
+    }
+    getTextDirectionClass(rtl, hAlign) {
+        const dir = rtl ? 'rtl' : 'ltr';
+        const align = hAlign === 'end' ? 'end' : 'start';
+        const directions = {
+            rtl: { end: 'k-text-left', start: 'k-text-right' },
+            ltr: { start: 'k-text-left', end: 'k-text-right' }
+        };
+        return directions[dir][align];
+    }
+}
+DialItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: DialItemComponent, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-state-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
+        <ng-template *ngIf="dialItemTemplate"
+            [ngTemplateOutlet]="dialItemTemplate"
+            [ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
+        >
+        </ng-template>
+
+        <ng-container *ngIf="!dialItemTemplate">
+            <span *ngIf="item.label" class="k-fab-item-text">{{ item.label }}</span>
+            <span *ngIf="item.icon || item.iconClass" [ngClass]="iconClasses"></span>
+        </ng-container>
+    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DialItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoDialItem]',
+                    template: `
+        <ng-template *ngIf="dialItemTemplate"
+            [ngTemplateOutlet]="dialItemTemplate"
+            [ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
+        >
+        </ng-template>
+
+        <ng-container *ngIf="!dialItemTemplate">
+            <span *ngIf="item.label" class="k-fab-item-text">{{ item.label }}</span>
+            <span *ngIf="item.icon || item.iconClass" [ngClass]="iconClasses"></span>
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-fab-item']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }, {
+                type: HostBinding,
+                args: ['class.k-state-disabled']
+            }], title: [{
+                type: HostBinding,
+                args: ['attr.title']
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], indexAttr: [{
+                type: HostBinding,
+                args: ['attr.data-fab-item-index']
+            }], cssClass: [{
+                type: Input
+            }], cssStyle: [{
+                type: Input
+            }], isFocused: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], dialItemTemplate: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }] } });

package/esm2015/floatingactionbutton/dial-list.component.js

@@ -0,0 +1,89 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input } from "@angular/core";
+import { Subscription } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "../focusable/focus.service";
+import * as i2 from "./dial-item.component";
+import * as i3 from "@angular/common";
+import * as i4 from "../focusable/focusable.directive";
+/**
+ * @hidden
+ */
+export class DialListComponent {
+    constructor(focusService, cdr) {
+        this.focusService = focusService;
+        this.cdr = cdr;
+        this.hostClass = true;
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.focusService.onFocus.subscribe(() => this.cdr.detectChanges()));
+    }
+    get bottomClass() {
+        return this.align.vertical === 'top' || this.align.vertical === 'middle';
+    }
+    get topClass() {
+        return this.align.vertical === 'bottom';
+    }
+    isFocused(index) {
+        return this.focusService.isFocused(index);
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+}
+DialListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DialListComponent, deps: [{ token: i1.FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: DialListComponent, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
+        <ng-container *ngFor='let item of dialItems; let idx = index'>
+            <li
+                kendoButtonFocusable
+                kendoDialItem
+                [item]="dialItems[idx]"
+                [index]="idx"
+                [dialItemTemplate]="dialItemTemplate"
+                [isFocused]="isFocused(idx)"
+                [ngClass]='item.cssClass'
+                [ngStyle]='item.cssStyle'
+                [align]="align"
+            >
+            </li>
+        </ng-container>
+    `, isInline: true, components: [{ type: i2.DialItemComponent, selector: "[kendoDialItem]", inputs: ["cssClass", "cssStyle", "isFocused", "index", "item", "dialItemTemplate", "align"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DialListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoDialList]',
+                    template: `
+        <ng-container *ngFor='let item of dialItems; let idx = index'>
+            <li
+                kendoButtonFocusable
+                kendoDialItem
+                [item]="dialItems[idx]"
+                [index]="idx"
+                [dialItemTemplate]="dialItemTemplate"
+                [isFocused]="isFocused(idx)"
+                [ngClass]='item.cssClass'
+                [ngStyle]='item.cssStyle'
+                [align]="align"
+            >
+            </li>
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FocusService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-fab-items']
+            }], bottomClass: [{
+                type: HostBinding,
+                args: ['class.k-fab-items-bottom']
+            }], topClass: [{
+                type: HostBinding,
+                args: ['class.k-fab-items-top']
+            }], dialItems: [{
+                type: Input
+            }], dialItemTemplate: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }] } });