@progress/kendo-angular-buttons 7.0.7-dev.202204111624 → 8.0.0-dev.202204131530

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

@@ -0,0 +1,90 @@
+/**-----------------------------------------------------------------------------------------
+* 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.16", 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.16", 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.16", ngImport: i0, type: DialListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    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
+            }] } });

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

@@ -2,16 +2,13 @@
 * 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 { AnimationBuilder } from '@angular/animations';
-import { Component, ElementRef, EventEmitter, HostBinding, Input, Output, NgZone, Renderer2, ViewChild, ContentChild, TemplateRef } from '@angular/core';
+import { Component, EventEmitter, HostBinding, Input, Output, ViewChild, ContentChild } from '@angular/core';
 import { merge, Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { guid, isDocumentAvailable } from '@progress/kendo-angular-common';
-import { PopupService } from '@progress/kendo-angular-popup';
 import { FocusService } from '../focusable/focus.service';
 import { NavigationAction } from '../navigation/navigation-action';
 import { NAVIGATION_CONFIG } from '../navigation/navigation-config';
@@ -22,23 +19,27 @@ import { closeAnimation, openAnimation } from './animations/animations';
 import { PreventableEvent } from '../preventable-event';
 import { DialItemTemplateDirective } from './templates/dial-item-template.directive';
 import { FloatingActionButtonTemplateDirective } from './templates/fab-template.directive';
+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 "@angular/animations";
+import * as i5 from "@progress/kendo-angular-l10n";
+import * as i6 from "./dial-list.component";
+import * as i7 from "@angular/common";
+import * as i8 from "@progress/kendo-angular-common";
 const NAVIGATION_SETTINGS = {
     useLeftRightArrows: false
 };
-const ɵ0 = NAVIGATION_SETTINGS;
 const NAVIGATION_SETTINGS_PROVIDER = {
     provide: NAVIGATION_CONFIG,
-    useValue: ɵ0
+    useValue: NAVIGATION_SETTINGS
 };
 const SIZE_CLASSES = {
     small: 'k-fab-sm',
     medium: 'k-fab-md',
     large: 'k-fab-lg'
 };
-const SHAPE_CLASSES = {
-    rectangle: 'k-fab-rectangle',
-    square: 'k-fab-square'
-};
 const ROUNDED_CLASSES = {
     small: 'k-rounded-sm',
     medium: 'k-rounded-md',
@@ -49,13 +50,16 @@ const FILLMODE_CLASS = 'k-fab-solid';
 const DEFAULT_DURATION = 180;
 const DEFAULT_ITEM_GAP = 90;
 const DEFAULT_OFFSET = '16px';
+const DEFAULT_ROUNDED = 'full';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_THEME_COLOR = 'primary';
 /**
  *
  * Represents the [Kendo UI FloatingActionButton component for Angular]({% slug overview_floatingactionbutton %}).
  * Used to specify the primary or the most common action in an application.
  *
  */
-let FloatingActionButtonComponent = class FloatingActionButtonComponent {
+export class FloatingActionButtonComponent {
     constructor(renderer, element, focusService, navigationService, ngZone, popupService, builder, localizationService) {
         this.renderer = renderer;
         this.element = element;
@@ -123,13 +127,12 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
          * @hidden
          */
         this.id = `k-${guid()}`;
-        this._themeColor = 'primary';
-        this._size = 'medium';
-        this._shape = 'rectangle';
+        this._themeColor = DEFAULT_THEME_COLOR;
+        this._size = DEFAULT_SIZE;
+        this._rounded = DEFAULT_ROUNDED;
         this._disabled = false;
         this._align = { horizontal: 'end', vertical: 'bottom' };
         this._offset = { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
-        this._rounded = 'full';
         this.subscriptions = new Subscription();
         this.rtl = false;
         this.animationEnd = new EventEmitter();
@@ -153,20 +156,22 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
      * The theme color will be applied as background color of the component.
      *
      * The possible values are:
-     * * `'primary'` (Default)—Applies coloring based on the `primary` theme color.
-     * * `'secondary'`—Applies coloring based on the `secondary` theme color.
-     * * `'tertiary'`— Applies coloring based on the `tertiary` theme color.
-     * * `'info'`—Applies coloring based on the `info` theme color.
-     * * `'success'`— Applies coloring based on the `success` theme color.
-     * * `'warning'`— Applies coloring based on the `warning` theme color.
-     * * `'error'`— Applies coloring based on the `error` theme color.
-     * * `'dark'`— Applies coloring based on the `dark` theme color.
-     * * `'light'`— Applies coloring based on the `light` theme color.
-     * * `'inverse'`— Applies coloring based on the `inverse` theme color.
+     * * `primary` (Default)—Applies coloring based on the `primary` theme color.
+     * * `secondary`—Applies coloring based on the `secondary` theme color.
+     * * `tertiary`— Applies coloring based on the `tertiary` theme color.
+     * * `info`—Applies coloring based on the `info` theme color.
+     * * `success`— Applies coloring based on the `success` theme color.
+     * * `warning`— Applies coloring based on the `warning` theme color.
+     * * `error`— Applies coloring based on the `error` theme color.
+     * * `dark`— Applies coloring based on the `dark` theme color.
+     * * `light`— Applies coloring based on the `light` theme color.
+     * * `inverse`— Applies coloring based on the `inverse` theme color.
+     * * `none`— Removes the built in theme color.
      */
     set themeColor(themeColor) {
-        this.handleClasses(themeColor, 'themeColor');
-        this._themeColor = themeColor;
+        const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
+        this.handleClasses(newThemeColor, 'themeColor');
+        this._themeColor = newThemeColor;
     }
     get themeColor() {
         return this._themeColor;
@@ -176,13 +181,15 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
      * ([see example]({% slug appearance_floatingactionbutton %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -191,35 +198,20 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
      * The rounded property specifies the border radius of the FloatingActionButton.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'`
-     * * `'large'`
-     * * `'full'` (default)
-     * * `null`
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `full` (default)
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
     }
-    /**
-     * Specifies the shape of the FloatingActionButton
-     * ([see example]({% slug appearance_floatingactionbutton %}#toc-shape)).
-     *
-     * The possible values are:
-     * * `rectangle` (Default)—Applies rectangular shape on the FloatingActionButton.
-     * * `square`—Applies square shape on the FloatingActionButton.
-     *
-     */
-    set shape(shape) {
-        this.handleClasses(shape, 'shape');
-        this._shape = shape;
-    }
-    get shape() {
-        return this._shape;
-    }
     /**
      * Specifies whether the FloatingActionButton is disabled.
      */
@@ -267,7 +259,7 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
         return this.disabled ? (-1) : this.tabIndex;
     }
     ngAfterViewInit() {
-        ['shape', 'size', 'rounded', 'themeColor'].forEach(option => this.handleClasses(this[option], option));
+        ['size', 'rounded', 'themeColor'].forEach(option => this.handleClasses(this[option], option));
         this.renderer.addClass(this.element.nativeElement, this.alignClass());
         this.offsetStyles();
         this.initialSetup = false;
@@ -311,7 +303,12 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
         if (this.disabled || shouldOpen === this.isOpen) {
             return;
         }
-        shouldOpen ? setTimeout(() => this.openDial()) : this.closeDial();
+        if (shouldOpen) {
+            setTimeout(() => this.openDial());
+        }
+        else {
+            this.closeDial();
+        }
     }
     /**
      * @hidden
@@ -417,13 +414,11 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
             const classesToRemove = {
                 themeColor: `${FILLMODE_CLASS}-${this.themeColor}`,
                 size: SIZE_CLASSES[this.size],
-                shape: SHAPE_CLASSES[this.shape],
                 rounded: ROUNDED_CLASSES[this.rounded]
             };
             const classesToAdd = {
-                themeColor: inputValue ? `${FILLMODE_CLASS}-${inputValue}` : null,
+                themeColor: inputValue !== 'none' ? `${FILLMODE_CLASS}-${inputValue}` : '',
                 size: SIZE_CLASSES[inputValue],
-                shape: SHAPE_CLASSES[inputValue],
                 rounded: ROUNDED_CLASSES[inputValue]
             };
             this.renderer.removeClass(button, classesToRemove[input]);
@@ -489,11 +484,21 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
             return;
         }
         const event = new PreventableEvent();
-        open ? this.open.emit(event) : this.close.emit(event);
+        if (open) {
+            this.open.emit(event);
+        }
+        else {
+            this.close.emit(event);
+        }
         if (event.isDefaultPrevented()) {
             return;
         }
-        open ? this.openDial() : this.closeDial();
+        if (open) {
+            this.openDial();
+        }
+        else {
+            this.closeDial();
+        }
     }
     openPopup() {
         if (this.isOpen) {
@@ -662,142 +667,78 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
         }
         return DEFAULT_DURATION;
     }
-};
-tslib_1.__decorate([
-    HostBinding('class.k-pos-fixed'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], FloatingActionButtonComponent.prototype, "fixedClass", null);
-tslib_1.__decorate([
-    HostBinding('class.k-pos-absolute'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], FloatingActionButtonComponent.prototype, "absoluteClass", null);
-tslib_1.__decorate([
-    HostBinding('attr.dir'),
-    tslib_1.__metadata("design:type", String)
-], FloatingActionButtonComponent.prototype, "direction", void 0);
-tslib_1.__decorate([
-    ViewChild('button', { static: true }),
-    tslib_1.__metadata("design:type", ElementRef)
-], FloatingActionButtonComponent.prototype, "button", void 0);
-tslib_1.__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    tslib_1.__metadata("design:type", TemplateRef)
-], FloatingActionButtonComponent.prototype, "popupTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(DialItemTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", DialItemTemplateDirective)
-], FloatingActionButtonComponent.prototype, "dialItemTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(FloatingActionButtonTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", FloatingActionButtonTemplateDirective)
-], FloatingActionButtonComponent.prototype, "fabTemplate", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], FloatingActionButtonComponent.prototype, "themeColor", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], FloatingActionButtonComponent.prototype, "size", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], FloatingActionButtonComponent.prototype, "rounded", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], FloatingActionButtonComponent.prototype, "shape", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [Boolean])
-], FloatingActionButtonComponent.prototype, "disabled", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], FloatingActionButtonComponent.prototype, "align", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], FloatingActionButtonComponent.prototype, "offset", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], FloatingActionButtonComponent.prototype, "positionMode", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], FloatingActionButtonComponent.prototype, "icon", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], FloatingActionButtonComponent.prototype, "iconClass", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], FloatingActionButtonComponent.prototype, "buttonClass", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], FloatingActionButtonComponent.prototype, "dialClass", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], FloatingActionButtonComponent.prototype, "text", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], FloatingActionButtonComponent.prototype, "dialItemAnimation", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], FloatingActionButtonComponent.prototype, "tabIndex", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array)
-], FloatingActionButtonComponent.prototype, "dialItems", void 0);
-tslib_1.__decorate([
-    Output('blur'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], FloatingActionButtonComponent.prototype, "onBlur", void 0);
-tslib_1.__decorate([
-    Output('focus'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], FloatingActionButtonComponent.prototype, "onFocus", void 0);
-tslib_1.__decorate([
-    Output('dialItemClick'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], FloatingActionButtonComponent.prototype, "dialItemClick", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], FloatingActionButtonComponent.prototype, "open", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], FloatingActionButtonComponent.prototype, "close", void 0);
-FloatingActionButtonComponent = tslib_1.__decorate([
-    Component({
-        selector: 'kendo-floatingactionbutton',
-        providers: [
-            FocusService,
-            NavigationService,
-            NAVIGATION_SETTINGS_PROVIDER,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.floatingactionbutton'
-            }
-        ],
-        template: `
+}
+FloatingActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i4.AnimationBuilder }, { token: i5.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: { themeColor: "themeColor", size: "size", rounded: "rounded", disabled: "disabled", align: "align", offset: "offset", positionMode: "positionMode", icon: "icon", iconClass: "iconClass", buttonClass: "buttonClass", dialClass: "dialClass", text: "text", dialItemAnimation: "dialItemAnimation", tabIndex: "tabIndex", dialItems: "dialItems" }, outputs: { onBlur: "blur", onFocus: "focus", dialItemClick: "dialItemClick", open: "open", close: "close" }, host: { properties: { "class.k-pos-fixed": "this.fixedClass", "class.k-pos-absolute": "this.absoluteClass", "attr.dir": "this.direction" } }, providers: [
+        FocusService,
+        NavigationService,
+        NAVIGATION_SETTINGS_PROVIDER,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.floatingactionbutton'
+        }
+    ], queries: [{ propertyName: "dialItemTemplate", first: true, predicate: DialItemTemplateDirective, descendants: true }, { propertyName: "fabTemplate", first: true, predicate: FloatingActionButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0, template: `
+        <button
+            #button
+            [attr.id]="id"
+            [attr.role]="role"
+            [tabIndex]="componentTabIndex"
+            type="button"
+            class="k-fab k-fab-solid"
+            [class.k-disabled]="disabled"
+            [ngClass]="buttonClass"
+            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [attr.aria-expanded]="ariaExpanded"
+            [attr.aria-haspopup]="ariaHasPopup"
+            (focus)="focusHandler()"
+            (blur)="blurHandler()"
+            [kendoEventsOutsideAngular]="{
+                keydown: keyDownHandler,
+                click: clickHandler
+            }"
+            [scope]="this"
+        >
+            <ng-template *ngIf="fabTemplate"
+                [ngTemplateOutlet]="fabTemplate?.templateRef"
+            >
+            </ng-template>
+
+            <ng-container *ngIf="!fabTemplate">
+                <span *ngIf="icon || iconClass" [ngClass]="iconClasses"></span>
+                <span *ngIf="text" class="k-fab-text">{{ text }}</span>
+            </ng-container>
+        </button>
+
+        <ng-template #popupTemplate>
+            <ul
+                kendoDialList
+                [ngClass]="dialClass"
+                [dialItems]="dialItems"
+                [dialItemTemplate]='dialItemTemplate?.templateRef'
+                [align]="align"
+                [attr.aria-labelledby]="id"
+                (click)="onItemClick($event)"
+            >
+            </ul>
+        </ng-template>
+    `, isInline: true, components: [{ type: i6.DialListComponent, selector: "[kendoDialList]", inputs: ["dialItems", "dialItemTemplate", "align"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-floatingactionbutton',
+                    providers: [
+                        FocusService,
+                        NavigationService,
+                        NAVIGATION_SETTINGS_PROVIDER,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.floatingactionbutton'
+                        }
+                    ],
+                    template: `
         <button
             #button
             [attr.id]="id"
@@ -843,15 +784,69 @@ FloatingActionButtonComponent = tslib_1.__decorate([
             </ul>
         </ng-template>
     `
-    }),
-    tslib_1.__metadata("design:paramtypes", [Renderer2,
-        ElementRef,
-        FocusService,
-        NavigationService,
-        NgZone,
-        PopupService,
-        AnimationBuilder,
-        LocalizationService])
-], FloatingActionButtonComponent);
-export { FloatingActionButtonComponent };
-export { ɵ0 };
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.FocusService }, { type: i2.NavigationService }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i4.AnimationBuilder }, { type: i5.LocalizationService }]; }, propDecorators: { fixedClass: [{
+                type: HostBinding,
+                args: ['class.k-pos-fixed']
+            }], absoluteClass: [{
+                type: HostBinding,
+                args: ['class.k-pos-absolute']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], button: [{
+                type: ViewChild,
+                args: ['button', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], dialItemTemplate: [{
+                type: ContentChild,
+                args: [DialItemTemplateDirective, { static: false }]
+            }], fabTemplate: [{
+                type: ContentChild,
+                args: [FloatingActionButtonTemplateDirective, { static: false }]
+            }], themeColor: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], offset: [{
+                type: Input
+            }], positionMode: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], dialClass: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], dialItemAnimation: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], dialItems: [{
+                type: Input
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], dialItemClick: [{
+                type: Output,
+                args: ['dialItemClick']
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }] } });