@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 { ElementRef, EventEmitter, AfterViewInit, OnChanges, SimpleChanges, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { Align, PopupService } from '@progress/kendo-angular-popup'; import { ListButton } from './../listbutton/list-button'; import { PopupSettings } from './../listbutton/popup-settings'; import { ButtonItemTemplateDirective } from './../listbutton/button-item-template.directive'; import { FocusService } from './../focusable/focus.service'; import { NavigationService } from './../navigation/navigation.service'; import { PreventableEvent } from '../preventable-event'; import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models'; import { PopupContainerService } from '../listbutton/container.service'; import { SVGIcon } from '@progress/kendo-svg-icons'; import * as i0 from "@angular/core"; /** * Represents the Kendo UI SplitButton component for Angular. * * @example * ```ts * @Component({ * selector: 'my-app', * template: ` * <kendo-splitbutton [data]="items" (buttonClick)="onSplitButtonClick()">Paste</kendo-splitbutton> * ` * }) * * class AppComponent { * public items: Array<any> = [{ * text: 'Keep Text Only', * icon: 'clipboard-text', * click: () => { console.log('Keep Text Only click handler'); } * }, { * text: 'Paste as HTML', * icon: 'clipboard-code' * } * ]; * * public onSplitButtonClick(dataItem: any): void { * console.log('Paste'); * } * } * ``` */ export declare class SplitButtonComponent extends ListButton implements AfterViewInit, OnChanges { private localization; private renderer; /** * Sets the text displayed within the SplitButton. */ text: string; /** * Specifies an icon to display next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)). */ icon: string; /** * Specifies an `SVGIcon` to display next to the button text. */ svgIcon: SVGIcon; /** * Specifies a custom CSS class for the icon displayed next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)). */ iconClass: string; /** * Specifies the `type` attribute of the main button. */ type: string; /** * Specifies the URL of an image to display next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)). */ imageUrl: string; /** * Configures the padding of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#size)). * * @default 'medium' */ size: ButtonSize; /** * Configures the border radius of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#rounded)). * * @default 'medium' */ set rounded(rounded: ButtonRounded); get rounded(): ButtonRounded; /** * Configures the background and border styles of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#fillMode)). * * @default 'solid' */ set fillMode(fillMode: ButtonFillMode); get fillMode(): ButtonFillMode; /** * Configures the theme color of the SplitButton. The theme color applies to the background, border, and text ([see example]({% slug api_buttons_splitbuttoncomponent %}#themeColor)). * * @default 'base' */ themeColor: ButtonThemeColor; /** * Disables the SplitButton when set to `true` ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)). */ set disabled(value: boolean); get disabled(): boolean; /** * Configures the popup settings of the SplitButton. */ set popupSettings(settings: PopupSettings); get popupSettings(): PopupSettings; /** * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component. */ tabIndex: number; /** * Configures the text field of the button-list popup. */ textField: string; /** * Sets the data for the SplitButton. Provide the data as an array-like list. */ set data(data: any); get data(): any; /** * Specifies the CSS classes for the button that opens the popup. * Supports values compatible with [`ngClass`](link:site.data.urls.angular['ngclassapi']). */ arrowButtonClass: any; /** * Specifies the name of the font icon displayed on the button that opens the popup. */ arrowButtonIcon: string; /** * Specifies the [`SVGIcon`](slug:api_icons_svgiconcomponent) displayed on the button that opens the popup. */ arrowButtonSvgIcon: SVGIcon; /** * Sets attributes for the main button. */ set buttonAttributes(buttonAttributes: { [key: string]: string; }); get buttonAttributes(): { [key: string]: string; }; /** * Emits an event when the main button is clicked. */ buttonClick: EventEmitter<any>; /** * Emits an event when an item in the drop-down list is clicked. The event data contains the clicked item's data. */ itemClick: EventEmitter<any>; /** * Emits an event when the SplitButton gains focus. */ onFocus: EventEmitter<any>; /** * Emits an event when the SplitButton is blurred. */ onBlur: EventEmitter<any>; /** * Emits an event before the popup opens. This event is preventable. */ open: EventEmitter<PreventableEvent>; /** * Emits an event before the popup closes. This event is preventable. */ close: EventEmitter<PreventableEvent>; /** * Specifies a template to customize the content of the items in the drop-down list. */ itemTemplate: ButtonItemTemplateDirective; activeArrow: boolean; listId: string; /** * @hidden */ get hasContent(): boolean; /** * @hidden */ get active(): boolean; /** * @hidden */ get componentTabIndex(): number; private buttonText; private arrowButtonClicked; private _rounded; private _fillMode; private _buttonAttributes; private documentMouseUpSub; set isFocused(value: boolean); get isFocused(): boolean; get widgetClasses(): boolean; get dir(): string; /** * @hidden */ get ariaLabel(): string; /** * @hidden */ onButtonFocus(event: FocusEvent): void; /** * @hidden */ onArrowButtonClick(): void; /** * @hidden */ toggleButtonActiveState(enable: boolean): void; /** * @hidden */ toggleArrowButtonActiveState(enable: boolean): void; /** * @hidden */ onButtonClick(): void; /** * @hidden */ onButtonBlur(): void; /** * @hidden */ keydown(event: any): void; /** * @hidden */ keyup(event: any): void; /** * @hidden */ ngAfterViewInit(): void; /** * @hidden */ ngOnChanges(changes: SimpleChanges): void; /** * @hidden */ ngOnDestroy(): void; /** * @hidden */ protected onNavigationEnterUp(args?: any): void; /** * @hidden */ togglePopupVisibility(): void; /** * @hidden */ wrapperContains(element: any): boolean; /** * @hidden */ get anchorAlign(): Align; /** * @hidden */ get popupAlign(): Align; /** * @hidden */ get isIconButton(): boolean; /** * Focuses the SplitButton component. */ focus(): void; /** * Blurs the SplitButton component. */ blur(): void; constructor(focusService: FocusService, navigationService: NavigationService, wrapperRef: ElementRef, zone: NgZone, popupService: PopupService, elRef: ElementRef, localization: LocalizationService, cdr: ChangeDetectorRef, renderer: Renderer2, containerService: PopupContainerService); /** * Returns the current open state of the popup. */ get isOpen(): boolean; private updateButtonText; private handleClasses; private toggleButtonIconClass; private handleButtonAttributes; static ɵfac: i0.ɵɵFactoryDeclaration<SplitButtonComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<SplitButtonComponent, "kendo-splitbutton", ["kendoSplitButton"], { "text": { "alias": "text"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "type": { "alias": "type"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "data": { "alias": "data"; "required": false; }; "arrowButtonClass": { "alias": "arrowButtonClass"; "required": false; }; "arrowButtonIcon": { "alias": "arrowButtonIcon"; "required": false; }; "arrowButtonSvgIcon": { "alias": "arrowButtonSvgIcon"; "required": false; }; "buttonAttributes": { "alias": "buttonAttributes"; "required": false; }; }, { "buttonClick": "buttonClick"; "itemClick": "itemClick"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, ["itemTemplate"], ["*"], true, never>; }