@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]="data" icon="clipboard" * (itemClick)="onSplitButtonItemClick($event)" * (buttonClick)="onSplitButtonClick()">Paste</kendo-splitbutton> * ` * }) * * class AppComponent { * public data: Array<any> = [{ * text: 'Keep Text Only', * icon: 'clipboard-text', * click: () => { console.log('Keep Text Only click handler'); } * }, { * text: 'Paste as HTML', * icon: 'clipboard-code' * }, { * text: 'Paste Markdown', * icon: 'clipboard-markdown' * }, { * text: 'Set Default Paste' * }]; * * public onSplitButtonClick(dataItem: any): void { * console.log('Paste'); * } * * public onSplitButtonItemClick(dataItem: any): void { * if (dataItem) { * console.log(dataItem.text); * } * } * } * ``` */ export declare class SplitButtonComponent extends ListButton implements AfterViewInit, OnChanges { private localization; private renderer; /** * Sets the text of the SplitButton. */ text: string; /** * Defines an icon to be rendered next to the button text. * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)). */ icon: string; /** * Defines an SVGIcon to be rendered next to the button text. */ svgIcon: SVGIcon; /** * Defines an icon with a custom CSS class to be rendered next to the button text * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)). */ iconClass: string; /** * Defines the type attribute of the main button */ type: string; /** * Defines the location of an image to be displayed next to the button text * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)). */ imageUrl: string; /** * The size property specifies the padding of the SplitButton * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-size)). * * The possible values are: * * `small` * * `medium` (default) * * `large` * * `none` */ size: ButtonSize; /** * The rounded property specifies the border radius of the SplitButton * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)). * * The possible values are: * * `small` * * `medium` (default) * * `large` * * `full` * * `none` */ set rounded(rounded: ButtonRounded); get rounded(): ButtonRounded; /** * The fillMode property specifies the background and border styles of the SplitButton * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-fillMode)). * * The available values are: * * `solid` (default) * * `flat` * * `outline` * * `link` */ set fillMode(fillMode: ButtonFillMode); get fillMode(): ButtonFillMode; /** * The SplitButton allows you to specify predefined theme colors. * The theme color will be applied as a background and border color while also amending the text color accordingly * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-themeColor)). * * The possible values are: * * `base` —Applies coloring based on the `base` theme color. (default) * * `primary` —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. */ themeColor: ButtonThemeColor; /** * When set to `true`, disables a SplitButton item * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)). */ set disabled(value: boolean); get disabled(): boolean; /** * Configures the popup of the SplitButton. * * The available options are: * - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled. * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup. * - `appendTo: "root" | "component" | ViewContainerRef`—Specifies the component to which the popup will be appended. * - `align: "left" | "center" | "right"`—Specifies the alignment of the popup. */ 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 of the SplitButton. * * > The data has to be provided in an array-like list. */ set data(data: any); get data(): any; /** * The CSS classes that will be rendered on the button which opens the popup. * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']). */ arrowButtonClass: any; /** * Specifies the name of the [font icon](slug:icons#icons-list) that will * be rendered for the button which opens the popup. */ arrowButtonIcon: string; /** * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will * be rendered for the button which opens the popup. */ arrowButtonSvgIcon: SVGIcon; /** * Sets attributes to the main button. */ set buttonAttributes(buttonAttributes: { [key: string]: string; }); get buttonAttributes(): { [key: string]: string; }; /** * Fires each time the user clicks the main button. * * @example * ```ts * _@Component({ * selector: 'my-app', * template: ` * <kendo-splitbutton (buttonClick)="onSplitButtonClick()" [data]="data"> * Reply * </kendo-splitbutton> * ` * }) * class AppComponent { * public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete']; * * public onSplitButtonClick(): void { * console.log('SplitButton click'); * } * } * ``` * */ buttonClick: EventEmitter<any>; /** * Fires each time the user clicks on the drop-down list. The event data contains the data item bound to the clicked list item. * * @example * ```ts * _@Component({ * selector: 'my-app', * template: ` * <kendo-splitbutton (itemClick)="onSplitButtonItemClick($event)" [data]="data"> * Reply * </kendo-splitbutton> * ` * }) * class AppComponent { * public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete']; * * public onSplitButtonItemClick(dataItem?: string): void { * if (dataItem) { * console.log(dataItem); * } * } * } * ``` * */ itemClick: EventEmitter<any>; /** * Fires each time the SplitButton gets focused. */ onFocus: EventEmitter<any>; /** * Fires each time the SplitButton gets blurred. */ onBlur: EventEmitter<any>; /** * Fires each time the popup is about to open. * This event is preventable. If you cancel the event, the popup will remain closed. */ open: EventEmitter<PreventableEvent>; /** * Fires each time the popup is about to close. * This event is preventable. If you cancel the event, the popup will remain open. */ close: EventEmitter<PreventableEvent>; /** * An item template that helps to customize the item content. */ 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>; }