@progress/kendo-angular-buttons 7.0.0-next.202111120840 → 7.0.2-dev.202201201235

package/dist/es/floatingactionbutton/floatingactionbutton.component.js

@@ -0,0 +1,903 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { 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';
+import { NavigationService } from '../navigation/navigation.service';
+import { closest, isPresent } from '../util';
+import { getAnchorAlign, getPopupAlign } from './utils';
+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';
+var NAVIGATION_SETTINGS = {
+    useLeftRightArrows: false
+};
+var ɵ0 = NAVIGATION_SETTINGS;
+var NAVIGATION_SETTINGS_PROVIDER = {
+    provide: NAVIGATION_CONFIG,
+    useValue: ɵ0
+};
+var SIZE_CLASSES = {
+    small: 'k-fab-sm',
+    medium: 'k-fab-md',
+    large: 'k-fab-lg'
+};
+var SHAPE_CLASSES = {
+    rectangle: 'k-fab-rectangle',
+    square: 'k-fab-square'
+};
+var ROUNDED_CLASSES = {
+    small: 'k-rounded-sm',
+    medium: 'k-rounded-md',
+    large: 'k-rounded-lg',
+    full: 'k-rounded-full'
+};
+var FILLMODE_CLASS = 'k-fab-solid';
+var DEFAULT_DURATION = 180;
+var DEFAULT_ITEM_GAP = 90;
+var DEFAULT_OFFSET = '16px';
+/**
+ *
+ * Represents the [Kendo UI FloatingActionButton component for Angular]({% slug overview_floatingactionbutton %}).
+ * Used to specify the primary or the most common action in an application.
+ *
+ */
+var FloatingActionButtonComponent = /** @class */ (function () {
+    function FloatingActionButtonComponent(renderer, element, focusService, navigationService, ngZone, popupService, builder, localizationService) {
+        var _this = this;
+        this.renderer = renderer;
+        this.element = element;
+        this.focusService = focusService;
+        this.navigationService = navigationService;
+        this.ngZone = ngZone;
+        this.popupService = popupService;
+        this.builder = builder;
+        this.localizationService = localizationService;
+        /**
+         * Specifies the positionMode of the FloatingActionButton
+         * ([see example]({% slug positioning_floatingactionbutton %}#toc-positionMode)).
+         *
+         * * The possible values are:
+         * * `absolute`—Positions the FloatingActionButton absolutely to its first positioned parent element.
+         * * `fixed` (Default)—Positions the FloatingActionButton relative to the viewport. It always stays in the same place even if the page is scrolled.
+         */
+        this.positionMode = 'fixed';
+        /**
+         * Specifies the animation settings of the FloatingActionButton dial items.
+         * ([see example]({% slug dialitems_floatingactionbutton %}#toc-animation)).
+         *
+         * The possible values are:
+         * * Boolean
+         *    * (Default) `true`—Applies the default [`DialItemAnimation`]({% slug api_buttons_dialitemanimation %}) settings.
+         *    * `false`
+         * * `DialItemAnimation`
+         *    * `duration`—Specifies the animation duration in milliseconds for each dial item. Defaults to `180ms`.
+         *    * `gap`—Specifies the animation duration gap in milliseconds after each dial item is animated. Defaults to `90ms`.
+         */
+        this.dialItemAnimation = true;
+        /**
+         * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the FloatingActionButton.
+         */
+        this.tabIndex = 0;
+        /**
+         * Specifies the collection of the dial items that will be rendered in the FloatingActionButton popup.
+         */
+        this.dialItems = [];
+        /**
+         * Fires each time the FloatingActionButton gets blurred.
+         */
+        this.onBlur = new EventEmitter();
+        /**
+         * Fires each time the FloatingActionButton gets focused.
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         * Fires each time a dial item is clicked.
+         */
+        this.dialItemClick = new EventEmitter();
+        /**
+         * Fires each time the popup is about to open.
+         * This event is preventable. If you cancel the event, the popup will remain closed
+         * ([more information and example]({% slug overview_floatingactionbutton %}#toc-events)).
+         */
+        this.open = new EventEmitter();
+        /**
+         * Fires each time the popup is about to close.
+         * This event is preventable. If you cancel the event, the popup will remain open
+         * ([more information and example]({% slug overview_floatingactionbutton %}#toc-events)).
+         */
+        this.close = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.id = "k-" + guid();
+        this._themeColor = 'primary';
+        this._size = 'medium';
+        this._shape = 'rectangle';
+        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();
+        this.initialSetup = true;
+        validatePackage(packageMetadata);
+        this.subscribeNavigationEvents();
+        this.subscriptions.add(this.localizationService.changes.subscribe(function (_a) {
+            var rtl = _a.rtl;
+            _this.rtl = rtl;
+            _this.direction = _this.rtl ? 'rtl' : 'ltr';
+        }));
+    }
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "fixedClass", {
+        get: function () {
+            return this.positionMode === 'fixed';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "absoluteClass", {
+        get: function () {
+            return this.positionMode === 'absolute';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "themeColor", {
+        get: function () {
+            return this._themeColor;
+        },
+        /**
+         * Specifies the theme color of the FloatingActionButton
+         * ([see example]({% slug appearance_floatingactionbutton %}#toc-themeColor)).
+         * 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.
+         */
+        set: function (themeColor) {
+            this.handleClasses(themeColor, 'themeColor');
+            this._themeColor = themeColor;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Specifies the size of the FloatingActionButton
+         * ([see example]({% slug appearance_floatingactionbutton %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (Default)
+         * * `'large'`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * The rounded property specifies the border radius of the FloatingActionButton.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'`
+         * * `'large'`
+         * * `'full'` (default)
+         * * `null`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "shape", {
+        get: function () {
+            return this._shape;
+        },
+        /**
+         * 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: function (shape) {
+            this.handleClasses(shape, 'shape');
+            this._shape = shape;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "disabled", {
+        get: function () {
+            return this._disabled;
+        },
+        /**
+         * Specifies whether the FloatingActionButton is disabled.
+         */
+        set: function (disabled) {
+            this._disabled = disabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "align", {
+        get: function () {
+            return this._align;
+        },
+        /**
+         * Specifies the horizontal and vertical alignment of the FloatingActionButton
+         * ([see example]({% slug positioning_floatingactionbutton %}#toc-align)).
+         *
+         * The possible values are:
+         * * `{ horizontal: 'start'|'center'|'end', vertical: 'top'|'middle'|'bottom' }`
+         *
+         * The default value is:
+         * * `{ horizontal: 'end', vertical: 'bottom' }`
+         *
+         */
+        set: function (align) {
+            this._align = Object.assign(this._align, align);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "offset", {
+        get: function () {
+            return this._offset;
+        },
+        /**
+         * Specifies the horizontal and vertical offset position of the FloatingActionButton
+         * ([see example]({% slug positioning_floatingactionbutton %}#toc-offset)).
+         *
+         * * The default value is:
+         * * `{ x: '16px', y: '16px' }`
+         */
+        set: function (offset) {
+            this._offset = Object.assign(this._offset, offset);
+            this.offsetStyles();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "componentTabIndex", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.disabled ? (-1) : this.tabIndex;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    FloatingActionButtonComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        ['shape', 'size', 'rounded', 'themeColor'].forEach(function (option) { return _this.handleClasses(_this[option], option); });
+        this.renderer.addClass(this.element.nativeElement, this.alignClass());
+        this.offsetStyles();
+        this.initialSetup = false;
+    };
+    FloatingActionButtonComponent.prototype.ngOnDestroy = function () {
+        this.subscriptions.unsubscribe();
+    };
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "isOpen", {
+        /**
+         * Indicates whether the FloatingActionButton is currently open.
+         */
+        get: function () { return isPresent(this.popupRef); },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * Focuses the FloatingActionButton.
+     */
+    FloatingActionButtonComponent.prototype.focus = function () {
+        if (isDocumentAvailable()) {
+            this.button.nativeElement.focus();
+        }
+    };
+    /**
+     * Blurs the FloatingActionButton.
+     */
+    FloatingActionButtonComponent.prototype.blur = function () {
+        if (isDocumentAvailable()) {
+            this.button.nativeElement.blur();
+        }
+    };
+    /**
+     * Toggles the visibility of the FloatingActionButton dial items popup.
+     *
+     * If you use the `toggleDial` method to open or close the dial items,
+     * the `open` and `close` events do not fire ([more information and examples]({% slug openstate_floatingactionbutton %}#toc-events)).
+     *
+     * @param open - The state of dial items popup.
+     */
+    FloatingActionButtonComponent.prototype.toggleDial = function (open) {
+        var _this = this;
+        if (this.disabled || !this.hasDialItems) {
+            return;
+        }
+        var shouldOpen = isPresent(open) ? open : !this.isOpen;
+        if (this.disabled || shouldOpen === this.isOpen) {
+            return;
+        }
+        shouldOpen ? setTimeout(function () { return _this.openDial(); }) : this.closeDial();
+    };
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "role", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return (this.dialItems && this.dialItems.length) ? 'menubutton' : 'button';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "ariaExpanded", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return isPresent(this.isOpen);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "ariaHasPopup", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return isPresent(this.isOpen);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "iconClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            var classes = [];
+            if (this.iconClass) {
+                classes.push("" + this.iconClass);
+            }
+            if (this.icon) {
+                classes.push("k-fab-icon k-icon k-i-" + this.icon);
+            }
+            return classes;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    FloatingActionButtonComponent.prototype.clickHandler = function () {
+        var _this = this;
+        if (this.disabled || !this.hasDialItems) {
+            return;
+        }
+        this.ngZone.run(function () {
+            var shouldOpen = !_this.isOpen;
+            _this.toggleDialWithEvents(shouldOpen);
+        });
+    };
+    /**
+     * @hidden
+     */
+    FloatingActionButtonComponent.prototype.keyDownHandler = function (event) {
+        this.keyHandler(event);
+    };
+    /**
+     * @hidden
+     */
+    FloatingActionButtonComponent.prototype.keyHandler = function (event, keyEvent) {
+        if (this.disabled) {
+            return;
+        }
+        var focused = this.focusService.focused || 0;
+        var keyCode = event.keyCode;
+        var action = this.navigationService.process({
+            altKey: event.altKey,
+            current: focused,
+            keyCode: keyCode,
+            keyEvent: keyEvent,
+            max: this.dialItems ? this.dialItems.length - 1 : 0,
+            min: 0,
+            flipNavigation: this.align.vertical === 'bottom'
+        });
+        if (action !== NavigationAction.Undefined &&
+            action !== NavigationAction.Tab) {
+            event.preventDefault();
+        }
+    };
+    /**
+     * @hidden
+     */
+    FloatingActionButtonComponent.prototype.onItemClick = function (event) {
+        var item = closest(event.target, '.k-fab-item');
+        if (!item) {
+            return;
+        }
+        var index = item.getAttribute('data-fab-item-index');
+        this.emitItemClick(index);
+    };
+    /**
+     * @hidden
+     */
+    FloatingActionButtonComponent.prototype.focusHandler = function () {
+        if (!this.disabled) {
+            this.onFocus.emit();
+        }
+    };
+    /**
+     * @hidden
+     */
+    FloatingActionButtonComponent.prototype.blurHandler = function () {
+        this.onBlur.emit();
+        this.toggleDialWithEvents(false);
+    };
+    FloatingActionButtonComponent.prototype.handleClasses = function (inputValue, input) {
+        if (isPresent(this.button) && (this[input] !== inputValue || this.initialSetup)) {
+            var button = this.button.nativeElement;
+            var classesToRemove = {
+                themeColor: FILLMODE_CLASS + "-" + this.themeColor,
+                size: SIZE_CLASSES[this.size],
+                shape: SHAPE_CLASSES[this.shape],
+                rounded: ROUNDED_CLASSES[this.rounded]
+            };
+            var classesToAdd = {
+                themeColor: inputValue ? FILLMODE_CLASS + "-" + inputValue : null,
+                size: SIZE_CLASSES[inputValue],
+                shape: SHAPE_CLASSES[inputValue],
+                rounded: ROUNDED_CLASSES[inputValue]
+            };
+            this.renderer.removeClass(button, classesToRemove[input]);
+            if (classesToAdd[input]) {
+                this.renderer.addClass(button, classesToAdd[input]);
+            }
+        }
+    };
+    FloatingActionButtonComponent.prototype.onEnterPressed = function () {
+        var index = this.focusService.focused;
+        this.emitItemClick(index);
+    };
+    FloatingActionButtonComponent.prototype.emitItemClick = function (index) {
+        var item = this.dialItems[index];
+        if (item && !item.disabled) {
+            var clickEventArgs = { item: item, index: index };
+            this.dialItemClick.emit(clickEventArgs);
+            this.toggleDialWithEvents(false);
+        }
+    };
+    FloatingActionButtonComponent.prototype.subscribeNavigationEvents = function () {
+        this.subscriptions.add(this.navigationService.navigate.subscribe(this.onArrowKeyNavigate.bind(this)));
+        this.subscriptions.add(this.navigationService.enter.subscribe(this.onNavigationEnterPress.bind(this)));
+        this.subscriptions.add(merge(this.navigationService.close, this.navigationService.esc).subscribe(this.onNavigationClose.bind(this)));
+    };
+    FloatingActionButtonComponent.prototype.onArrowKeyNavigate = function (index) {
+        this.focusService.focus(index);
+    };
+    FloatingActionButtonComponent.prototype.onNavigationEnterPress = function () {
+        var _this = this;
+        this.ngZone.run(function () {
+            if (_this.isOpen) {
+                var focusedIndex = _this.focusService.focused;
+                var focusedItem = _this.dialItems[focusedIndex];
+                if (focusedItem && focusedItem.disabled) {
+                    return;
+                }
+                if (isPresent(focusedIndex) && focusedIndex !== -1) {
+                    _this.onEnterPressed();
+                    return;
+                }
+            }
+            if (!_this.isOpen && isDocumentAvailable()) {
+                _this.toggleDialWithEvents(true);
+                _this.button.nativeElement.focus();
+            }
+        });
+    };
+    FloatingActionButtonComponent.prototype.onNavigationClose = function () {
+        var _this = this;
+        if (this.isOpen) {
+            this.ngZone.run(function () {
+                _this.toggleDialWithEvents(false);
+                if (isDocumentAvailable()) {
+                    _this.button.nativeElement.focus();
+                }
+            });
+        }
+    };
+    FloatingActionButtonComponent.prototype.alignClass = function () {
+        return "k-pos-" + this.align.vertical + "-" + this.align.horizontal;
+    };
+    FloatingActionButtonComponent.prototype.toggleDialWithEvents = function (open) {
+        if (open === this.isOpen) {
+            return;
+        }
+        var event = new PreventableEvent();
+        open ? this.open.emit(event) : this.close.emit(event);
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        open ? this.openDial() : this.closeDial();
+    };
+    FloatingActionButtonComponent.prototype.openPopup = function () {
+        var _this = this;
+        if (this.isOpen) {
+            return;
+        }
+        var isIconFab = this.icon && !this.text;
+        var rtl = this.rtl;
+        var align = this.align;
+        this.popupRef = this.popupService.open({
+            anchor: this.element.nativeElement,
+            animate: false,
+            content: this.popupTemplate,
+            anchorAlign: getAnchorAlign(align, rtl),
+            popupAlign: getPopupAlign(align, rtl),
+            popupClass: 'k-fab-popup k-popup-transparent'
+        });
+        var popupElement = this.popupRef.popupElement;
+        this.renderer.setStyle(popupElement, 'box-shadow', 'none');
+        if (isIconFab) {
+            this.subscriptions.add(this.popupRef.popupOpen.subscribe(function () { return _this.positionPopup(); }));
+        }
+        this.ngZone.runOutsideAngular(function () {
+            _this.popupMouseDownListener = _this.renderer.listen(popupElement, 'mousedown', function (event) {
+                event.preventDefault();
+            });
+        });
+        this.popupRef.popupAnchorViewportLeave.subscribe(function () { return _this.toggleDialWithEvents(false); });
+    };
+    FloatingActionButtonComponent.prototype.closePopup = function () {
+        if (this.isOpen) {
+            if (this.popupMouseDownListener) {
+                this.popupMouseDownListener();
+            }
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+    };
+    FloatingActionButtonComponent.prototype.openDial = function () {
+        this.openPopup();
+        this.focusService.focus(0);
+        if (this.dialItemAnimation && this.isValidAnimation()) {
+            this.playAnimation(true);
+        }
+    };
+    FloatingActionButtonComponent.prototype.closeDial = function () {
+        var _this = this;
+        if (this.dialItemAnimation && this.isValidAnimation()) {
+            this.playAnimation(false);
+            this.animationEnd.pipe(take(1)).subscribe(function () { return _this.closePopup(); });
+        }
+        else {
+            this.closePopup();
+        }
+    };
+    FloatingActionButtonComponent.prototype.isValidAnimation = function () {
+        var animation = this.dialItemAnimation;
+        if (typeof animation !== 'boolean') {
+            return animation.duration !== 0;
+        }
+        return true;
+    };
+    FloatingActionButtonComponent.prototype.positionPopup = function () {
+        if (this.dialItemTemplate) {
+            return;
+        }
+        var fab = this.element.nativeElement;
+        var fabWidth = fab.getBoundingClientRect().width;
+        var popupEl = this.popupRef.popupElement;
+        var icon = popupEl.querySelector('.k-fab-item-icon');
+        if (!icon) {
+            return;
+        }
+        var iconWidth = icon.getBoundingClientRect().width;
+        var left = (fabWidth / 2) - (iconWidth / 2);
+        var popupLeft = popupEl.getBoundingClientRect().left;
+        var isEndAlign = this.align.horizontal === 'end';
+        var leftValue = isEndAlign ? (popupLeft - left) : (left + popupLeft);
+        var rtlLeftValue = isEndAlign ? (left + popupLeft) : (popupLeft - left);
+        popupEl.style.left = this.rtl ? rtlLeftValue + "px" : leftValue + "px";
+    };
+    FloatingActionButtonComponent.prototype.offsetStyles = function () {
+        var hostElement = this.element.nativeElement;
+        this.renderer.setStyle(hostElement, this.horizontalPosition, this.horizontalOffset);
+        this.renderer.setStyle(hostElement, this.verticalPosition, this.verticalOffset);
+    };
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "hasDialItems", {
+        get: function () {
+            return isPresent(this.dialItems) && this.dialItems.length !== 0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "verticalPosition", {
+        /**
+         * Gets the CSS prop name of the selected vertical position (`top`/`bottom`);
+         */
+        get: function () {
+            return {
+                top: 'top',
+                middle: 'top',
+                bottom: 'bottom'
+            }[this.align.vertical];
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "verticalOffset", {
+        /**
+         * Gets the offset according to the selected vertical position.
+         */
+        get: function () {
+            if (this.align.vertical === 'middle') {
+                return this.offset.y === DEFAULT_OFFSET ? '50%' : "calc(50% + " + this.offset.y + ")";
+            }
+            return this.offset.y;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "horizontalPosition", {
+        /**
+         * Gets the CSS prop name of the selected horizontal position (`left`/`right`);
+         */
+        get: function () {
+            var horizontal = this.align.horizontal;
+            return {
+                end: this.rtl ? 'left' : 'right',
+                center: 'left',
+                start: this.rtl ? 'right' : 'left'
+            }[horizontal];
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "horizontalOffset", {
+        /**
+         * Gets the offset according to the selected horizontal position.
+         */
+        get: function () {
+            if (this.align.horizontal === 'center') {
+                return this.offset.x === DEFAULT_OFFSET ? '50%' : "calc(50% + " + this.offset.x + ")";
+            }
+            return this.offset.x;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    FloatingActionButtonComponent.prototype.playerFor = function (element, animation) {
+        var factory = this.builder.build(animation);
+        return factory.create(element);
+    };
+    FloatingActionButtonComponent.prototype.playAnimation = function (open) {
+        var _this = this;
+        var durationSettings = this.durationSettings();
+        var animationSettings = {
+            duration: durationSettings.duration,
+            gap: durationSettings.gap,
+            align: this.align
+        };
+        var animation = open ? openAnimation(animationSettings) : closeAnimation(animationSettings);
+        var player = this.playerFor(this.popupRef.popupElement, animation);
+        player.play();
+        player.onDone(function () {
+            if (player) {
+                _this.animationEnd.emit();
+                player.destroy();
+                player = null;
+            }
+        });
+    };
+    FloatingActionButtonComponent.prototype.durationSettings = function () {
+        return {
+            duration: this.animationDuration(),
+            gap: this.animationGap()
+        };
+    };
+    FloatingActionButtonComponent.prototype.animationGap = function () {
+        var animation = this.dialItemAnimation;
+        if (typeof animation !== 'boolean' && isPresent(animation.gap)) {
+            return animation.gap;
+        }
+        return DEFAULT_ITEM_GAP;
+    };
+    FloatingActionButtonComponent.prototype.animationDuration = function () {
+        var animation = this.dialItemAnimation;
+        if (typeof animation !== 'boolean' && isPresent(animation.duration)) {
+            return animation.duration;
+        }
+        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: true }),
+        tslib_1.__metadata("design:type", DialItemTemplateDirective)
+    ], FloatingActionButtonComponent.prototype, "dialItemTemplate", void 0);
+    tslib_1.__decorate([
+        ContentChild(FloatingActionButtonTemplateDirective, { static: true }),
+        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: "\n        <button\n            #button\n            [attr.id]=\"id\"\n            [attr.role]=\"role\"\n            [tabIndex]=\"componentTabIndex\"\n            type=\"button\"\n            class=\"k-fab k-fab-solid\"\n            [class.k-disabled]=\"disabled\"\n            [ngClass]=\"buttonClass\"\n            [disabled]=\"disabled\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-expanded]=\"ariaExpanded\"\n            [attr.aria-haspopup]=\"ariaHasPopup\"\n            (focus)=\"focusHandler()\"\n            (blur)=\"blurHandler()\"\n            [kendoEventsOutsideAngular]=\"{\n                keydown: keyDownHandler,\n                click: clickHandler\n            }\"\n            [scope]=\"this\"\n        >\n            <ng-template *ngIf=\"fabTemplate\"\n                [ngTemplateOutlet]=\"fabTemplate?.templateRef\"\n            >\n            </ng-template>\n\n            <ng-container *ngIf=\"!fabTemplate\">\n                <span *ngIf=\"icon || iconClass\" [ngClass]=\"iconClasses\"></span>\n                <span *ngIf=\"text\" class=\"k-fab-text\">{{ text }}</span>\n            </ng-container>\n        </button>\n\n        <ng-template #popupTemplate>\n            <ul\n                kendoDialList\n                [ngClass]=\"dialClass\"\n                [dialItems]=\"dialItems\"\n                [dialItemTemplate]='dialItemTemplate?.templateRef'\n                [align]=\"align\"\n                [attr.aria-labelledby]=\"id\"\n                (click)=\"onItemClick($event)\"\n            >\n            </ul>\n        </ng-template>\n    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [Renderer2,
+            ElementRef,
+            FocusService,
+            NavigationService,
+            NgZone,
+            PopupService,
+            AnimationBuilder,
+            LocalizationService])
+    ], FloatingActionButtonComponent);
+    return FloatingActionButtonComponent;
+}());
+export { FloatingActionButtonComponent };
+export { ɵ0 };