@progress/kendo-angular-buttons

/**----------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { AnimationBuilder } from '@angular/animations'; import { AfterViewInit, ElementRef, EventEmitter, NgZone, Renderer2, OnDestroy, TemplateRef } from '@angular/core'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { PopupService } from '@progress/kendo-angular-popup'; import { FocusService } from '../focusable/focus.service'; import { NavigationService } from '../navigation/navigation.service'; import { FabAlign } from './models/align'; import { FabOffset } from './models/offset'; import { DialItemAnimation } from './models/item-animation.interface'; import { FabPositionMode } from './models/position-mode'; import { DialItemClickEvent } from './models/item-click.event'; import { ButtonSize } from '../common/models/size'; import { ButtonThemeColor } from '../common/models/theme-color'; import { PreventableEvent } from '../preventable-event'; import { DialItemTemplateDirective } from './templates/dial-item-template.directive'; import { FloatingActionButtonTemplateDirective } from './templates/fab-template.directive'; import { ButtonRounded } from '../common/models'; import { SVGIcon } from '@progress/kendo-svg-icons'; import { DialItem } from './models/item.interface'; import * as i0 from "@angular/core"; /** * Represents the Kendo UI FloatingActionButton component for Angular. * Use it to represent the primary or most common action in an application. * * @example * ```html * <kendo-floatingactionbutton * [icon]="'plus'" * [text]="'Add'" * [align]="{ horizontal: 'end', vertical: 'bottom' }"> * </kendo-floatingactionbutton> * ``` */ export declare class FloatingActionButtonComponent implements AfterViewInit, OnDestroy { renderer: Renderer2; private element; private focusService; private navigationService; private ngZone; private popupService; private builder; private localizationService; get fixedClass(): boolean; get absoluteClass(): boolean; direction: string; button: ElementRef<HTMLButtonElement>; popupTemplate: TemplateRef<any>; dialItemTemplate: DialItemTemplateDirective; fabTemplate: FloatingActionButtonTemplateDirective; /** * Specifies the theme color of the FloatingActionButton ([see example](slug:appearance_floatingactionbutton#theme-colors)). * @default "primary" */ set themeColor(themeColor: ButtonThemeColor); get themeColor(): ButtonThemeColor; /** * Specifies the size of the FloatingActionButton ([see example](slug:appearance_floatingactionbutton#size)). * @default "medium" */ set size(size: ButtonSize); get size(): ButtonSize; /** * Specifies the border radius of the FloatingActionButton ([see example](slug:appearance_floatingactionbutton#roundness)). * * @default "full" */ set rounded(rounded: ButtonRounded); get rounded(): ButtonRounded; /** * Specifies whether the FloatingActionButton is disabled. * @default false */ set disabled(disabled: boolean); get disabled(): boolean; /** * Specifies the alignment of the FloatingActionButton ([see example](slug:positioning_floatingactionbutton#alignment)). * @default { horizontal: 'end', vertical: 'top' } */ set align(align: FabAlign); get align(): FabAlign; /** * Specifies the offset position of the FloatingActionButton ([see example]({% slug positioning_floatingactionbutton %}#offset)). * @default { x: '16px', y: '16px' } */ set offset(offset: FabOffset); get offset(): FabOffset; /** * Specifies the position mode of the FloatingActionButton ([see example](slug:positioning_floatingactionbutton#position-mode)). * @default "fixed" */ positionMode: FabPositionMode; /** * Defines the name of an existing icon in a Kendo UI theme. */ icon: string; /** * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the FloatingActionButton. */ svgIcon: SVGIcon; /** * Defines a CSS class or multiple classes for custom icons. */ iconClass: string; /** * The CSS classes that will be rendered on the main button. * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']). */ buttonClass: any; /** * The CSS classes that will be rendered on the dial items `ul` element. * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']). */ dialClass: any; /** * Specifies the text content of the FloatingActionButton. */ text: string; /** * Specifies the animation settings of the FloatingActionButton dial items. * @default true */ dialItemAnimation: boolean | DialItemAnimation; /** * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the FloatingActionButton. * @default 0 */ tabIndex: number; /** * Specifies the collection of dial items rendered in the FloatingActionButton popup. */ dialItems: DialItem[]; /** * Fires when the FloatingActionButton is blurred. */ onBlur: EventEmitter<any>; /** * Fires when the FloatingActionButton is focused. */ onFocus: EventEmitter<any>; /** * Fires when a dial item is clicked. */ dialItemClick: EventEmitter<DialItemClickEvent>; /** * Fires when the popup is about to open. This event is preventable * ([more information and example](slug:events_floatingactionbutton)). */ open: EventEmitter<PreventableEvent>; /** * Fires when the popup is about to close. This event is preventable * ([more information and example](slug:events_floatingactionbutton)). */ close: EventEmitter<PreventableEvent>; /** * @hidden */ get componentTabIndex(): number; /** * @hidden */ id: string; /** * @hidden */ dialListId: string; private _themeColor; private _size; private _rounded; private _disabled; private _align; private _offset; private subscriptions; private popupMouseDownListener; private rtl; private animationEnd; private popupRef; private initialSetup; private focusChangedProgrammatically; constructor(renderer: Renderer2, element: ElementRef, focusService: FocusService, navigationService: NavigationService, ngZone: NgZone, popupService: PopupService, builder: AnimationBuilder, localizationService: LocalizationService); ngAfterViewInit(): void; ngOnDestroy(): void; /** * Indicates whether the FloatingActionButton is currently open. */ get isOpen(): boolean; /** * Focuses the FloatingActionButton. */ focus(): void; /** * Blurs the FloatingActionButton. */ blur(): void; /** * 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)). * * @param open - The state of dial items popup. */ toggleDial(open?: boolean): void; /** * @hidden */ get ariaExpanded(): boolean; /** * @hidden */ get ariaHasPopup(): string; /** * @hidden */ get ariaControls(): string; /** * @hidden */ get iconClasses(): string[]; /** * @hidden */ clickHandler(): void; /** * @hidden */ pointerdownHandler(e: PointerEvent): void; /** * @hidden */ keyDownHandler(event: any): void; /** * @hidden */ onItemClick(event: MouseEvent): void; /** * @hidden */ focusHandler(): void; /** * @hidden */ blurHandler(e: FocusEvent): void; /** * @hidden */ focusOutHandler(e: FocusEvent): void; /** * @hidden */ onNavigationEnterPress(): void; /** * @hidden */ onNavigationClose(): void; private handleClasses; private onEnterPressed; private emitItemClick; private subscribeNavigationEvents; private onArrowKeyNavigate; private alignClass; private toggleDialWithEvents; private openPopup; private closePopup; private openDial; private closeDial; private isValidAnimation; private positionPopup; private offsetStyles; private get hasDialItems(); /** * Gets the CSS prop name of the selected vertical position (`top`/`bottom`); */ private get verticalPosition(); /** * Gets the offset according to the selected vertical position. */ private get verticalOffset(); /** * Gets the CSS prop name of the selected horizontal position (`left`/`right`); */ private get horizontalPosition(); /** * Gets the offset according to the selected horizontal position. */ private get horizontalOffset(); private playerFor; private playAnimation; private durationSettings; private animationGap; private animationDuration; static ɵfac: i0.ɵɵFactoryDeclaration<FloatingActionButtonComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<FloatingActionButtonComponent, "kendo-floatingactionbutton", never, { "themeColor": { "alias": "themeColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "align": { "alias": "align"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "positionMode": { "alias": "positionMode"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "buttonClass": { "alias": "buttonClass"; "required": false; }; "dialClass": { "alias": "dialClass"; "required": false; }; "text": { "alias": "text"; "required": false; }; "dialItemAnimation": { "alias": "dialItemAnimation"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "dialItems": { "alias": "dialItems"; "required": false; }; }, { "onBlur": "blur"; "onFocus": "focus"; "dialItemClick": "dialItemClick"; "open": "open"; "close": "close"; }, ["dialItemTemplate", "fabTemplate"], never, true, never>; }