@progress/kendo-angular-buttons
Version:
Buttons Package for Angular
215 lines (214 loc) • 7.43 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { SimpleChanges, ElementRef, EventEmitter, Renderer2, OnDestroy, NgZone, AfterViewInit } from '@angular/core';
import { KendoButtonService } from './button.service';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { ArrowIconSettings } from '../common/models/arrow-settings';
import * as i0 from "@angular/core";
/**
* Represents the Kendo UI Button component for Angular.
*
* As of package v17, the `span[kendoButton]` and `kendo-button` selectors are removed.
* Use the `button[kendoButton]` selector only.
*
* @example
* ```html
* <button kendoButton [icon]="'save'" [themeColor]="'primary'">Save</button>
* ```
*/
export declare class ButtonComponent implements OnDestroy, AfterViewInit {
renderer: Renderer2;
private service;
private ngZone;
/**
* @hidden
* @default false
* required for DropDownButton arrow icon.
*/
arrowIcon: boolean | ArrowIconSettings;
/**
* Adds visual styling to indicate when the Button is active.
*
* @default false
*/
toggleable: boolean;
/**
* Backwards-compatible alias
*
* @hidden
*/
get togglable(): boolean;
/**
* @hidden
*/
set togglable(value: boolean);
/**
* Sets the selected state of the Button.
* Use with the `toggleable` property.
*
* @default false
*/
get selected(): boolean;
set selected(value: boolean);
/**
* @hidden
*/
set tabIndex(index: number);
get tabIndex(): number;
/**
* Specifies a URL for an `img` element inside the Button.
* The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
*/
imageUrl: string;
/**
* Defines a CSS class, or multiple classes separated by spaces applied to a `span` element inside the Button. Use the `iconClass` to add custom icons.
*/
set iconClass(value: string);
get iconClass(): string;
/**
* Sets the name of an existing font icon in the Kendo UI theme.
*/
set icon(name: string);
get icon(): string;
/**
* When `true`, disables the Button and prevents user interaction.
*
* @default false
*/
set disabled(disabled: boolean);
get disabled(): boolean;
/**
* Sets the padding of the Button.
* See [Button Appearance]({% slug appearance_button %}#size).
*
* @default 'medium'
*/
set size(size: ButtonSize);
get size(): ButtonSize;
/**
* Sets the border radius of the Button.
* See [Button Appearance](slug:appearance_button#roundness).
*
* @default 'medium'
*/
set rounded(rounded: ButtonRounded);
get rounded(): ButtonRounded;
/**
* Sets the background and border styles of the Button.
* See [Button Appearance](slug:appearance_button#fill-mode).
*
* @default 'solid'
*/
set fillMode(fillMode: ButtonFillMode);
get fillMode(): ButtonFillMode;
/**
* Sets a predefined theme color for the Button.
* The theme color applies as a background and border color and adjusts the text color.
* See [Button Appearance](slug:appearance_button#theme-colors).
*
* @default 'base'
*/
set themeColor(themeColor: ButtonThemeColor);
get themeColor(): ButtonThemeColor;
/**
* Sets an SVG icon to display inside the Button.
*/
set svgIcon(icon: SVGIcon);
get svgIcon(): SVGIcon;
/**
* Fires when the selected state of a toggleable button changes.
* The event argument is the new selected state (`boolean`).
*/
selectedChange: EventEmitter<any>;
/**
* Fires when the user clicks the Button.
*/
click: EventEmitter<any>;
element: HTMLElement;
isDisabled: boolean;
caretAltDownIcon: SVGIcon;
private _size;
private _rounded;
private _fillMode;
private _themeColor;
private _focused;
private direction;
private _selected;
private subs;
private _iconClass;
private _icon;
private _svgIcon;
set isFocused(isFocused: boolean);
get isFocused(): boolean;
get classButton(): boolean;
get isToggleable(): boolean;
get iconButtonClass(): boolean;
get classDisabled(): boolean;
get classActive(): boolean;
get getDirection(): string;
/**
* @hidden
*/
onFocus(): void;
/**
* @hidden
*/
onBlur(): void;
/**
* @hidden
*/
set primary(value: boolean);
/**
* @hidden
*/
set look(value: 'flat' | 'outline' | 'clear' | 'default');
/**
* Alias for ElementRef.nativeElement to workaround
* ViewChild() selectors that used to return the host element before v11.
*
* @hidden
*/
get nativeElement(): any;
constructor(element: ElementRef, renderer: Renderer2, service: KendoButtonService, localization: LocalizationService, ngZone: NgZone);
ngOnInit(): void;
ngOnChanges(change: SimpleChanges): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* @hidden
*/
get hasText(): boolean;
/**
* Focuses the Button component.
*/
focus(): void;
/**
* Removes focus from the Button component.
*/
blur(): void;
/**
* @hidden
*/
setAttribute(attribute: string, value: string): void;
/**
* @hidden
*/
removeAttribute(attribute: string): void;
/**
* @hidden
*
* Internal setter that triggers selectedChange
*/
setSelected(value: boolean): void;
private toggleAriaPressed;
private toggleClass;
private _onButtonClick;
private handleClasses;
private handleThemeColor;
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, [null, null, { optional: true; }, null, null]>;
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[kendoButton]", ["kendoButton"], { "arrowIcon": { "alias": "arrowIcon"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "togglable": { "alias": "togglable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "primary": { "alias": "primary"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "selectedChange": "selectedChange"; "click": "click"; }, never, ["*"], true, never>;
}